@xplortech/apollo-core 3.0.0 → 3.2.0

package/hydrate/index.mjs

@@ -4972,14 +4972,14 @@ class Accordion {
             bordered: `xpl-accordion--border-bordered${this.expanded ? '--expanded' : ''}`,
             bottom: `xpl-accordion--border-bottom${this.expanded ? '--expanded' : ''}`,
         }[this.borderType];
-        return (hAsync(Host, { key: '1905815ea7a4463a90668d77c8f2626924eb00e9', class: `xpl-accordion ${accordionBorder}` }, hAsync("button", { key: '32de9a46653e2b98a7c0e8a176bca46b0173d3f4', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "xpl-accordion-toggle-area", onClick: this.toggleAccordion, type: "button" }, hAsync("header", { key: '3365c551130d9f0a397aa574cc1ea94b8b043c37', class: `xpl-accordion-header xpl-accordion-header--size-${this.size}` }, hAsync("slot", { key: '5f7c3797153426971c3c4256c78233ae14a86d94', name: "heading" }, this.header), hAsync("xpl-icon", { key: '63e1d208578b7c854527b9c3b83821682037eeac', size: 16, icon: "chevron-down", class: `xpl-accordion-icon-chevron ${this.expanded ? 'xpl-accordion-icon-chevron--rotate' : ''}` })), hAsync("div", { key: 'f1d82075d093bd3e3bd069a33a17ee1a2a0fd749', class: "xpl-accordion-description" }, hAsync("slot", { key: 'b66a3a850d43dcb9476b98f30301a1b7898525a5', name: "description" }, this.description))), hAsync("section", { key: 'a7b9cd09084597c3578b92f38925734d93320f41', id: this.contentId, role: "region", class: `xpl-accordion-content xpl-accordion-content--${!this.expanded ? 'hidden' : 'shown'} ${this.expanded
+        return (hAsync(Host, { key: '5b950c90f1d0c1c4ec18a63543e8a3f967e4c345', class: `xpl-accordion ${accordionBorder}` }, hAsync("button", { key: 'd080af79bf979178beadd345259e3555c82d6d11', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "xpl-accordion-toggle-area", onClick: this.toggleAccordion, type: "button" }, hAsync("header", { key: '31cd09cebdcd16f8581340b720f4f3bf5eb11315', class: `xpl-accordion-header xpl-accordion-header--size-${this.size}` }, hAsync("slot", { key: '42f3de1cbccc2304d60db637879539a607338d9d', name: "heading" }, this.header), hAsync("xpl-icon", { key: 'f7a047102a0e10b60d3ac3d18aa47c2de4409b6e', size: 16, icon: "chevron-down", class: `xpl-accordion-icon-chevron ${this.expanded ? 'xpl-accordion-icon-chevron--rotate' : ''}` })), hAsync("div", { key: '284d9e73027bc38acafc4d07355a0c21c7d38ce1', class: "xpl-accordion-description" }, hAsync("slot", { key: 'a7928e0e46a3f5d2274477a576f65330c5600046', name: "description" }, this.description))), hAsync("section", { key: '5d89a5282aa9f63d349196f2b90c2404bc636e47', id: this.contentId, role: "region", class: `xpl-accordion-content xpl-accordion-content--${!this.expanded ? 'hidden' : 'shown'} ${this.expanded
                 ? {
                     '': '',
                     none: '',
                     bordered: 'xpl-accordion-content--shown-bordered',
                     bottom: 'xpl-accordion-content--shown-border-bottom',
                 }[this.borderType]
-                : ''}` }, hAsync("slot", { key: 'd71b20af3148875ccc03d12ecaad3a8c70dda333', name: "content" }))));
+                : ''}` }, hAsync("slot", { key: '658018fba352e3d8a3d005890557fa4f5acb3985', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -5043,7 +5043,7 @@ class ApplicationShell {
         navClasses += this.navOpen
             ? ` xpl-application-shell__nav--${this.navWidth}--open`
             : ` xpl-application-shell__nav--${this.navWidth}`;
-        return (hAsync(Host, { key: 'be149a4700553c66898f5d7fa27f68896631c717', class: applicationShellClasses }, hAsync("div", { key: '5fe0df88f9b5a19104b189ba68a8bfeea3b6afe7', class: navClasses }, hAsync("slot", { key: '040596fdc502c23694d6f7bd036c85840d264d2d', name: "nav" })), hAsync("div", { key: '6208807949de1949c8d2c1ff6fc6c9a775212d92', class: "xpl-application-shell__subnav" }, hAsync("slot", { key: 'e194c31283abc0bcbac3db876d0acb1503d9cc12', name: "subnav" })), hAsync("div", { key: '1cb4caa932297cd858f82d78077c10868a5af323', class: "xpl-application-shell__utility" }, hAsync("slot", { key: 'cea302c27a7e067c8244ed6f33d17392c06451e5', name: "utility" })), hAsync("div", { key: '4546be74ec501036b7113519c4a65973fb896866', class: "xpl-application-shell__content" }, hAsync("slot", { key: '8078f31fe1add42efcd65cabd5137d50dec207d6', name: "content" })), hAsync("xpl-backdrop", { key: 'cd07a3093eb1c48fce03f49241905bb2881e472a', onClick: () => this.navToggleHandler(), class: {
+        return (hAsync(Host, { key: '2a5c0529540dc44d79f4744cd77465d097a3cfe9', class: applicationShellClasses }, hAsync("div", { key: '9e7b1e9c302d3188c20792ce5d45c4fd3d981eae', class: navClasses }, hAsync("slot", { key: 'ac3a2e232a4bb296dc97edb46da3a45a9a0143ee', name: "nav" })), hAsync("div", { key: '8a43762388448850e6b70f526ca288e12cfb3a86', class: "xpl-application-shell__subnav" }, hAsync("slot", { key: 'c3753c23cebdc77664c885770f2a7a3afafd2f70', name: "subnav" })), hAsync("div", { key: '17e41ed6c571dc8a11c20034cff373442ed72a47', class: "xpl-application-shell__utility" }, hAsync("slot", { key: '20b62c7529383caf5d52e9f0a7afdfd362136404', name: "utility" })), hAsync("div", { key: '1632f1a97ae50432228040c3788248ff598160f1', class: "xpl-application-shell__content" }, hAsync("slot", { key: '0e3fa6b14b216db3848ec302f755db2f4d9babea', name: "content" })), hAsync("xpl-backdrop", { key: 'd465d3084d1728fd072537ccd1947a154389fb59', onClick: () => this.navToggleHandler(), class: {
                 'xpl-application-shell__backdrop--open': this.navOpen,
             }, relative: true })));
     }
@@ -5247,7 +5247,7 @@ class Backdrop {
         this.relative = false;
     }
     render() {
-        return (hAsync(Host, { key: 'cf17e9f02e1ee67631159e1d159f539827344c30', class: {
+        return (hAsync(Host, { key: '953f17db70815d5bc0b0debb29c4eda2f6f67b0a', class: {
                 'xpl-backdrop': true,
                 'xpl-backdrop--fixed': !this.relative,
                 'xpl-backdrop--relative': this.relative,
@@ -5293,7 +5293,7 @@ class Badge {
             [`xpl-badge--size-${this.size}`]: !!this.size,
             [`xpl-badge--shape-${this.shape}`]: !this.dotOnly && !!this.shape,
         };
-        return (hAsync(Host, { key: '1cb8de25626460ca2c30f82696440af4d140d5e9' }, hAsync("div", { key: 'fc51fea564ee09d6c5234046c6ec3b1c92333b1d', class: className }, hAsync("span", { key: 'd993cc55487aaccd349ac8c3c783b63a3597a9b4', class: "xpl-badge__label" }, hAsync("slot", { key: '8a3e27a6725cba451b43398dad1d8a6604af4e5e' })))));
+        return (hAsync(Host, { key: '88ec460410a79a749357fb0fcfce4393f1fbd119' }, hAsync("div", { key: '93dd43a12a7d18a95d6c6d242ac527017736cd38', class: className }, hAsync("span", { key: 'f399c751da8fc51c5a47672c39e1b618d29f1314', class: "xpl-badge__label" }, hAsync("slot", { key: 'f3920fd097e95f0e550eafa40010b0ca3d4202d4' })))));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -5371,13 +5371,13 @@ class Banner {
         const actionState = this.getActionButtonState();
         const isHeadingPresent = !!this.heading?.trim();
         const isDescPresent = !!this.description?.trim();
-        return (hAsync(Host, { key: '00046ec64a9cf7b913298ad452aa26f3bd1078bd', class: {
+        return (hAsync(Host, { key: 'a78a06e2863b01b36e265fdd55bb9d1d77751c88', 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) && (hAsync("div", { key: 'bc95f036e4848863fb07cbdb35e2335f863f21f6', class: "xpl-banner__icon", "aria-hidden": "true" }, hAsync("xpl-icon", { key: 'a019d22111644263e770384c2a8d60487dd2f705', icon: this.getIcon(), size: 24 }))), hAsync("div", { key: '5c6039a2c4be58b3f503938c9b3f33feec61cda9', class: "xpl-banner__body" }, isHeadingPresent && hAsync("p", { key: 'fff21d65b10b628c405959763aa21b676b5a40f6', class: "xpl-banner__heading" }, this.heading), isDescPresent && (hAsync("p", { key: '114a6720cbbcf584bc00a3974f7e95ca3cebc54d', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (hAsync("div", { key: '69a72574bfc37baf6c18ea5b4512f0f11fc45db5', class: "xpl-banner__actions" }, hasAction && (hAsync("xpl-button", { key: '3ff5eb207a819901f3d0017223ae83e9a6c5bf30', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (hAsync("xpl-button", { key: 'fc54ced977a1f4fc5ca39e7fd981b789b42727fa', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (hAsync("button", { key: 'd236e3448164706d787f8f1fcde36430803c5dc2', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, hAsync("xpl-icon", { key: 'a3eb350b62b53cb59a40576d0da748adad554c79', icon: "xmark", size: 24, "aria-hidden": "true" })))));
+            }, role: "region", "aria-label": this.getAriaLabel() }, (!this.isSection || this.hasIcon) && (hAsync("div", { key: '70b99cf6bf217673c1dc80d022a461285636a4bd', class: "xpl-banner__icon", "aria-hidden": "true" }, hAsync("xpl-icon", { key: 'f91c24c80d30d8c784c4fa96e8a3829243705436', icon: this.getIcon(), size: 24 }))), hAsync("div", { key: 'edbcd267f1ad434adc4b2a05ce598fab3c2e6df6', class: "xpl-banner__body" }, isHeadingPresent && hAsync("p", { key: 'd3416ba50362753dd22e2c7e4097159bedf9f8c4', class: "xpl-banner__heading" }, this.heading), isDescPresent && (hAsync("p", { key: 'b899e18bce636d21cec109cd3a7933907877d32a', class: "xpl-banner__description", title: this.truncateDesc ? this.description : undefined }, this.description))), (hasAction || hasSecondaryAction) && (hAsync("div", { key: '702098d0a58e9327adba65a1b5d9ab9381eabfee', class: "xpl-banner__actions" }, hasAction && (hAsync("xpl-button", { key: '73e9a4609e1d8f9a21d096369def97a864dc7ed7', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.action.emit() }, this.actionText)), hasSecondaryAction && (hAsync("xpl-button", { key: 'e8449c8728aa9336c51fe0fd4f012452730eb816', size: "xs", variant: actionVariant, state: actionState, onClick: () => this.secondaryAction.emit() }, this.secondaryActionText)))), this.isDismissible && (hAsync("button", { key: '9b46dcb8aac285b0fc4a8d60132dd99d756d61c3', class: "xpl-banner__dismiss", type: "button", "aria-label": `Dismiss ${this.isSection ? 'section ' : ''}banner`, onClick: () => this.dismiss.emit() }, hAsync("xpl-icon", { key: 'd0299f4467685505ab2712a985c09ed2d12e90a4', icon: "xmark", size: 24, "aria-hidden": "true" })))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -5408,7 +5408,7 @@ class BreadcrumbItem {
     `;
     }
     render() {
-        return (hAsync(Host, { key: 'eab64a8e1acfe7fb6596193a250f8937ac6f5481', class: "xpl-breadcrumb-item", role: "listitem" }, hAsync("li", { key: 'ff781ce68e230191700449039b89d9a0fefd1e50', role: "none" }, hAsync("slot", { key: '854ef8e0dc29ebe5f782b5ee0dbe0e710015b40c' })), hAsync("span", { key: 'ba0ea70bf123b7c6405b8c3add0c87714ed80e15', innerHTML: this.chevron })));
+        return (hAsync(Host, { key: '7183a61283e558218b0ab031b4751c8a0adceccf', class: "xpl-breadcrumb-item", role: "listitem" }, hAsync("li", { key: 'dbd92cb1dbda6fae79786dc0445bed7d7c77334f', role: "none" }, hAsync("slot", { key: 'aed0551ce683fce1886d2e4263ad817201471e61' })), hAsync("span", { key: 'eb62adcc50b5da568c953263ebe6e3dc185c60c1', innerHTML: this.chevron })));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -5425,7 +5425,7 @@ class Breadcrumbs {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '63e77e937ec359fdac15cf8a48673176696395bc' }, hAsync("nav", { key: '6bf6c1b401d010676b7317d9356aac5e4893fd1b', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, hAsync("ol", { key: '177206147c779f29a20369e49852d11ba0d990d5', role: "list" }, hAsync("slot", { key: '9cdadc4378fa2da5a3c0213c46c58f8701472b80' })))));
+        return (hAsync(Host, { key: 'da8bca6508913f46c473f8d97bfd7dc6dd45bce5' }, hAsync("nav", { key: 'c9967a3ea464361b820e1c8354ee646cc13677e8', class: "xpl-breadcrumbs", "aria-label": "Breadcrumb" }, hAsync("ol", { key: '57791a5a8d72a9f25d0e9d43eac87044d8115f4a', role: "list" }, hAsync("slot", { key: 'b6c7658b88b190130352d096a9b8b1b7e83f7839' })))));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -5493,7 +5493,7 @@ class Button {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'd46884793521c327622838ceca0af98ec897912b', class: {
+        return (hAsync(Host, { key: '0e9841bd097a28e6745efddaf0d528d1f23f799d', class: {
                 'xpl-button': true,
                 [`xpl-button--${this.size}`]: true,
                 [`xpl-button--${this.variant}`]: true,
@@ -5549,7 +5549,7 @@ class ButtonRow {
         this.onTertiary = () => this.clickTertiary.emit();
     }
     render() {
-        return (hAsync(Host, { key: 'de570ef3de32367d44cfaa7004e749a51bc6fde9', class: "xpl-button-row" }, hAsync("div", { key: '6bafe5cbb76355b987023cab4d1530e71065ea55', class: "xpl-button-row-inner" }, hAsync("div", { key: '09ab6b0f3b7ed5790b675520d445ed3279224c3c', class: "xpl-button-row__left" }, this.secondary && (hAsync("xpl-button", { key: '8f08a18126a27e6f1a72d8609e5533f466c3a88b', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), hAsync("div", { key: '0df1b38697afee3eb45af00989baac17ae2a2d00', class: "xpl-button-row__right" }, this.tertiary && (hAsync("xpl-button", { key: '289a41a34091201ecba3af76ed2ab86c84341ba4', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (hAsync("xpl-button", { key: '742dd05eea13de9ccc2747b0146c3779bd7b4e66', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (hAsync("xpl-button", { key: '0eafc10b3d2b8f70d0f18a3ef0798ca6250ee0d5', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
+        return (hAsync(Host, { key: '775133c0e49878db9861212167b4af14241f39b7', class: "xpl-button-row" }, hAsync("div", { key: 'cb0bf58d6624380730d56fbcb67746bef02f1623', class: "xpl-button-row-inner" }, hAsync("div", { key: 'c857f0383c85129273ee2bdd3572a05ead4682ae', class: "xpl-button-row__left" }, this.secondary && (hAsync("xpl-button", { key: '863e665b97686490b5a8df1b94303ab369eb9bf0', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), hAsync("div", { key: 'c5f244acf020f0cb3be4994fafe92161428a7289', class: "xpl-button-row__right" }, this.tertiary && (hAsync("xpl-button", { key: '9766e4e5ff3cd7e3f2202764edf9b3c3221b7ea8', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (hAsync("xpl-button", { key: '981384abd21328e229f28a345eef129cb96cbdc8', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (hAsync("xpl-button", { key: 'f141d9bff96edd8c74bd19745e7a259005ebc12e', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -8288,7 +8288,7 @@ class Calendar {
         }
     }
     render() {
-        return (hAsync(Host, { key: '871a989fee5abc19ac9e00fca79534dd79b0a773', class: "xpl-calendar" }, hAsync("input", { key: '3dc76b7045ac76ff76d2f1ca80625034aff7d013', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
+        return (hAsync(Host, { key: 'b82a13403c12cdcfa676caeddcd397cd264eb9ec', class: "xpl-calendar" }, hAsync("input", { key: '0fba8e4e4b052bfed0e883c3455f63e8549c4263', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
                 if (el)
                     this.inputElement = el;
             } })));
@@ -8323,14 +8323,14 @@ class Checkbox {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'd16058b571f7af6d2a83cbdce15b12bccadf0036', class: {
+        return (hAsync(Host, { key: '300304af622ef0f26d53df76c20e27990a7b71d4', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: !!this.styled,
                 disabled: !!this.disabled,
-            } }, hAsync("input", { key: '1001a243623e338fc4fefc9f58f251439c2fb74f', class: "xpl-checkbox", type: "checkbox", "aria-label": (this.ariaLabel ?? '').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 }), hAsync("label", { key: '37e85b721cef98c8ccc448e08dbf9d9c968bd0a6', class: {
+            } }, hAsync("input", { key: '43b393bae1a48af0cd14f577cf3164d034e3aa3f', class: "xpl-checkbox", type: "checkbox", "aria-label": (this.ariaLabel ?? '').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 }), hAsync("label", { key: 'fcd3c7867ff3a8073bcd48aed8fb22c587f38ab0', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': !!this.disabled,
-            }, htmlFor: this.id }, hAsync("slot", { key: 'ef36d317d97e26098396b1131a1acce6bce5ae8f' }), this.description && (hAsync("small", { key: '9d710e4fa3f366965307908ca2e216ac46310f30', class: {
+            }, htmlFor: this.id }, hAsync("slot", { key: 'd2ddc28e2b6c310f800efd13aaf8b6b718146e51' }), this.description && (hAsync("small", { key: '573a2af2584d91da251b974c56999529c06ad9d0', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': !!this.disabled,
             } }, this.description)))));
@@ -8396,7 +8396,7 @@ class Choicelist {
         this.onChoicesPropChange(this.choices);
     }
     render() {
-        return (hAsync(Host, { key: '0db2f4a4109a65ae2ab01259b960f83dd3b8bbeb', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (hAsync("div", { class: "xpl-choicelist-heading" }, this.heading && hAsync("h3", null, this.heading), this.description && hAsync("p", null, this.description))) : null, this.choices && (hAsync("ul", { key: '53915c9efd628e455b5604f4eacbc67504a52ca5', class: {
+        return (hAsync(Host, { key: '618280baaf3f3e5d6b2787e74a257858a2a94a26', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (hAsync("div", { class: "xpl-choicelist-heading" }, this.heading && hAsync("h3", null, this.heading), this.description && hAsync("p", null, this.description))) : null, this.choices && (hAsync("ul", { key: '3d728d5612ea9efe80325cb09b98f5cf3146a813', class: {
                 'xpl-choicelist': true,
                 'xpl-choicelist--styled': !!this.styled,
             } }, this.choices.map((choice, i) => {
@@ -8441,7 +8441,7 @@ class ContentArea {
         this.size = 'wide';
     }
     render() {
-        return (hAsync(Host, { key: '97fd281e5aa7ba1805f1424e80d6018ca5fdafe0' }, hAsync("main", { key: '6a6f315e74225f66105874998c679183f2c743f5', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, hAsync("div", { key: 'c46017f1a0fd8b278f7b817de82629eb777515fd', class: "xpl-content-area" }, hAsync("slot", { key: 'cc6d45297d23770880778810952f7e95445bb800' })))));
+        return (hAsync(Host, { key: '30c120a2eb2998222057ec07e5904cc1d8522f88' }, hAsync("main", { key: 'c4d94b67ece358f50577b5b26793a31fa58b5ad2', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, hAsync("div", { key: '162e32db10f359d86cbe80fa881f9866b8a9e14e', class: "xpl-content-area" }, hAsync("slot", { key: '065c2851622f7817ab6ceb5fe5b23cd19a1408ed' })))));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -8460,7 +8460,7 @@ class Dashboard {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '65628c79753f54949bfe0a6dfede9bf4e09cf585' }, hAsync("dl", { key: 'aa6444eea3322331350fbc1b0db6b23e316d393e', class: "xpl-dashboard" }, hAsync("slot", { key: '3b54ed1755a0cc72ef5527afafdf156660afcfdf' }))));
+        return (hAsync(Host, { key: '6551b0e202b00dc8c584c4368bfabdb388433016' }, hAsync("dl", { key: '126b026852d0de7040ce26736eb850fa31bfc1f3', class: "xpl-dashboard" }, hAsync("slot", { key: '262977ead7f8f9d15e61a20368bb1a3584b4fd8b' }))));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -8570,8 +8570,8 @@ class DataCard {
             : this.smallStatVariant === 'negative'
                 ? 'arrow-down-right'
                 : 'dash';
-        return (hAsync(Host, { key: '05aef87fdbc999cc563d9da2ae6207ffce5351cf', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, hAsync("dt", { key: '833d00cd995e5d9f96c70e6f1af04f260076aea7', class: headerClasses }, hAsync("header", { key: '283890fe21047be8ee81b64588a686f4f6339d28' }, !!this.leadingIcon && this.icon && (hAsync("span", { key: '2c3e365280efb2c6c18a7d08261fc30e8d808da3', class: `xpl-data-card__icon--${this.variant}` }, hAsync("xpl-icon", { key: '3564e1275b28e1693a45c51b4fc7936317b62e2f', icon: this.icon, "background-color": bgColorHue, size: 20 }))), hAsync("slot", { key: 'd5469c77ca2a1ec16e702ee8ab94c230dbbe742a', name: "title" }, this.name)), this.link && (hAsync("span", { key: '7a560cecc871b0e223372ecca08129d9f95d2c6e', class: "xpl-data-card__header-arrow" }, hAsync("xpl-icon", { key: 'f85ebee53967bc2ddd78291aaa63c85145d74930', icon: "chevron-right", size: 16 })))), hAsync("dd", { key: 'c19eb772979606076a22f72b8ecb4261f7371374', class: "xpl-data-card__body" }, hAsync("div", { key: '1ab9f94a29394608a18990ad4a06a663abd2f0a6', class: "xpl-data-card__left" }, hAsync("span", { key: '41d8633f93cf7e2c220df4b51768e9b7c2295474', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (hAsync("xpl-tooltip", { text: this.tooltipTextStat }, hAsync("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (hAsync("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, hAsync("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (hAsync("xpl-tooltip", { text: this.tooltipTextSmallStat }, hAsync("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, hAsync("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (hAsync("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, hAsync("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
-            (this.tooltipTextSmallStat ? (hAsync("xpl-tooltip", { text: this.tooltipTextSmallStat }, hAsync("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, hAsync("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (hAsync("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, hAsync("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && hAsync("span", { key: '5dfcb6891ce3529bee2f240d85238a895ea6c61d', class: "xpl-data-card__detail" }, this.detail)), this.graphContentPresent && (hAsync("div", { key: '5b58f77c7a49e1aa157b73feb63e4ef1b5d36c0a', class: "xpl-data-card__right" }, hAsync("slot", { key: '962482c44556b3722119cace638ea176af2f9533', name: GRAPH_CONTENT_SLOT$1 }))))));
+        return (hAsync(Host, { key: '7c4e576cefe0b23b431aa2a73ca246fec0bb8db6', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, hAsync("dt", { key: 'e5907b183be449b87b2b5c46f17b2c7c97a07f66', class: headerClasses }, hAsync("header", { key: '234988a87297a90565614c16e7a30a18a7b5aeb2' }, !!this.leadingIcon && this.icon && (hAsync("span", { key: '462d1f7a090eefb04be255c37a19d05c8365bf35', class: `xpl-data-card__icon--${this.variant}` }, hAsync("xpl-icon", { key: '334a676cbbf353de77fd173fbeb786820694d6d0', icon: this.icon, "background-color": bgColorHue, size: 20 }))), hAsync("slot", { key: '9f933f8307c0ee4289ab03971261d947ac3a71c3', name: "title" }, this.name)), this.link && (hAsync("span", { key: 'eb5e62387de08b5d588b702cdb06522a18f6d0ff', class: "xpl-data-card__header-arrow" }, hAsync("xpl-icon", { key: 'f0c210320683fa98dc15e89cef7ba0351ae8b54f', icon: "chevron-right", size: 16 })))), hAsync("dd", { key: 'a18c3f4800e6719a659e8ad1ebb9b61d4c59235a', class: "xpl-data-card__body" }, hAsync("div", { key: '0ea86cf8297a15c2ac3694df4ecedbce2a967239', class: "xpl-data-card__left" }, hAsync("span", { key: 'd3daf019480ee66cfd9c1fff5e57cad87dab9b6e', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (hAsync("xpl-tooltip", { text: this.tooltipTextStat }, hAsync("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (hAsync("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, hAsync("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (hAsync("xpl-tooltip", { text: this.tooltipTextSmallStat }, hAsync("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, hAsync("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (hAsync("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, hAsync("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
+            (this.tooltipTextSmallStat ? (hAsync("xpl-tooltip", { text: this.tooltipTextSmallStat }, hAsync("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, hAsync("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (hAsync("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, hAsync("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && hAsync("span", { key: '61bb7ebb508ead51c8c7dbbe1513822c65675fc5', class: "xpl-data-card__detail" }, this.detail)), this.graphContentPresent && (hAsync("div", { key: '6325676d2bbc0210e5d46ec72a5f8cb7d916d255', class: "xpl-data-card__right" }, hAsync("slot", { key: '96775ee066bcea7b8e418132b8125857cf197cbc', name: GRAPH_CONTENT_SLOT$1 }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -8614,7 +8614,7 @@ class Divider {
     render() {
         let className = 'xpl-divider';
         className += ` xpl-divider--${this.tier}`;
-        return (hAsync(Host, { key: '942681efa6bd2c3806109240a5ac5c179b112551', class: className }, hAsync("span", { key: 'ce0b0ada57e7a51319260c88c10e411e3aaf2992' }, hAsync("slot", { key: 'da50f574acdf87def6ff77ef743bf38cc8717a79' }))));
+        return (hAsync(Host, { key: '4c1cdecc3ed6e9440668e413df897e23d9f7d679', class: className }, hAsync("span", { key: 'bb85cd26e6565c1f1ec150fca99fe965957878cb' }, hAsync("slot", { key: '37d5a8f75d26f6ba545aa1c12c4e7634b8dd1b6c' }))));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -10764,7 +10764,7 @@ class Dropdown {
         const shouldVirtualize = this.isVirtualized;
         let listContent;
         if (!hasOptions) {
-            listContent = hAsync("slot", { key: '1673c7d33d7dc1d16bf56081df85976ed389a38f', name: "options" });
+            listContent = hAsync("slot", { key: 'da24352c25525fb0f20a86804889ceef4eed67f0', name: "options" });
         }
         else if (shouldVirtualize) {
             const { rowHeight, overscan } = VIRTUAL_LIST;
@@ -10772,18 +10772,18 @@ class Dropdown {
             const start = Math.min(this.virtualStart, total);
             const fallbackEnd = Math.min(total, Math.ceil(300 / rowHeight) + overscan * 2);
             const end = this.virtualEnd > start ? this.virtualEnd : fallbackEnd;
-            listContent = (hAsync("li", { key: '94094d9464c2f4ded9714f7ed16ca2b426c19794', class: "xpl-dropdown__virtual-sizer", style: { height: `${total * rowHeight}px` } }, options.slice(start, end).map((option, i) => renderOption(option, start + i))));
+            listContent = (hAsync("li", { key: '356b1871de0539aee6ac085e59d4861cdb7db135', class: "xpl-dropdown__virtual-sizer", style: { height: `${total * rowHeight}px` } }, options.slice(start, end).map((option, i) => renderOption(option, start + i))));
         }
         else {
             listContent = options.map((option) => renderOption(option));
         }
-        return (hAsync(Host, { key: '6e2fe2b904530c7966a23b3715485ea9ed415880', "aria-expanded": isOpen ? 'true' : 'false', class: {
+        return (hAsync(Host, { key: 'f34a4f503feb2050100db75a40f21959aca8e74e', "aria-expanded": isOpen ? 'true' : 'false', class: {
                 'xpl-dropdown': true,
                 'xpl-dropdown--multi': mode === 'multi',
                 'xpl-dropdown--open': isOpen,
                 'xpl-dropdown--anchor-to-trigger': this.anchorToTrigger,
                 'xpl-dropdown--virtualized': shouldVirtualize,
-            }, role: "listbox" }, hAsync("slot", { key: 'b9c87382e07b23b326fab22b8423021f8c4a83f8', name: "header" }), hAsync("ul", { key: '3824b650e2bbcb09fdea7f25ab19afa9a7dd8abe', class: "xpl-dropdown-list", ref: (el) => {
+            }, role: "listbox" }, hAsync("slot", { key: 'dee58bc149835d2c4e1328fd92c780f75bea0499', name: "header" }), hAsync("ul", { key: '32bec73cc8b67bd38df5231b3049c897a9d36c4e', class: "xpl-dropdown-list", ref: (el) => {
                 this.setListEl(el);
             }, onScroll: shouldVirtualize ? this.handleVirtualScroll : undefined }, listContent)));
     }
@@ -10845,7 +10845,7 @@ class DropdownGroup {
         const hasOptions = options && options.length;
         const mappedOptions = hasOptions &&
             options.map(({ groupName: optsGroupName, ...properties }) => optsGroupName ? (hAsync("xpl-dropdown-group", { label: optsGroupName, ...properties })) : (hAsync("xpl-dropdown-option", { ...properties })));
-        return (hAsync(Host, { key: '232eccef872d6563c056b3b709d3a741473de2b0', role: "group", "aria-label": groupName }, hAsync("li", { key: '2185c7b55139ab7b144290c94ab53675a6224b46', class: "xpl-dropdown-list-item" }, hAsync("xpl-dropdown-heading", { key: '26c0d13d0742fd34eb629c668bd929e5541fffb8', label: groupName }), hAsync("ul", { key: '0f13b81deda008bf0588393ff1a4102a5c7a171d', class: "xpl-dropdown-list" }, mappedOptions || hAsync("slot", { key: '70cf6f662d1471c815f5e7c747080d7558efe407', name: "options" })))));
+        return (hAsync(Host, { key: '765c69b589275544bc312a60036a22345509b105', role: "group", "aria-label": groupName }, hAsync("li", { key: '6dfa766bd675e0579e8608aa0b202f63e2be2635', class: "xpl-dropdown-list-item" }, hAsync("xpl-dropdown-heading", { key: '42cb1a573126edee7f1a01397988d6e9d952ead3', label: groupName }), hAsync("ul", { key: 'f443eba9c19554eea7997a47252816a39660d9a7', class: "xpl-dropdown-list" }, mappedOptions || hAsync("slot", { key: '60d3bff8026d96197a3482cd7e58807cfc02df2b', name: "options" })))));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -10865,7 +10865,7 @@ class DropdownHeading {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '04265224adcc5b65f53d2e35d0cfef470931ce41', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, hAsync("span", { key: '27293255cdfe35d207f3f0155beae3dc4b737e0d' }, this.label || hAsync("slot", { key: 'b5bbee144360b2e5da681864e3dae6c2cafd2552', name: "heading" }))));
+        return (hAsync(Host, { key: 'fbd0029d191d8d81c3d316ac1cb2c51173da29b8', class: { 'xpl-dropdown-heading': true }, role: "presentation" }, hAsync("span", { key: 'd585dc509d918142589c1874e173b369c1c2a822' }, this.label || hAsync("slot", { key: '67b72339653dce321acedfd14befcfe5335edf43', name: "heading" }))));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -10934,11 +10934,11 @@ class DropdownOptionCpnt {
     }
     render() {
         const { label, isSelected, isDisabled, value, subtitle, icon } = this;
-        return (hAsync(Host, { key: 'f4fa4b0a3150fafd4b1c259aa140925219487898', class: {
+        return (hAsync(Host, { key: '3e8fe525f44d24414926664c8475344b3e57eb53', 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 }, hAsync("li", { key: '417af38233cd4765cc54a0cc4541bb5caeaf10ab', class: "xpl-dropdown-list-item" }, icon && (hAsync("xpl-icon", { key: '48cbe69b056142ce5ef5cd6c608a99f1defd2e9f', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || hAsync("slot", { key: '14b86d61bab431487cdef906a0a9b138d6ab4bbb', name: "option" }), subtitle && hAsync("span", { key: 'c7ff5ee61b08f7a94d107183127c0b9cff0b49b5', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
+            }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, hAsync("li", { key: '4262100b3ea2e62575f8eaad8908d9379a8ea05c', class: "xpl-dropdown-list-item" }, icon && (hAsync("xpl-icon", { key: '7505fcdc35b15b6e97a4753525cee7232244fa6e', class: "xpl-dropdown-list-item__icon", icon: icon, size: 20 })), label || hAsync("slot", { key: '35b00d7aa187a38b1f9d78425189764d9b8575d8', name: "option" }), subtitle && hAsync("span", { key: 'e1dac23f7e07df9e89c90625f48eeddbd8daf77a', class: "xpl-dropdown-list-item__subtitle" }, subtitle))));
     }
     get hostElement() { return getElement(this); }
     static get cmpMeta() { return {
@@ -11002,10 +11002,10 @@ class DynamicTable {
         this.updateColumnCount();
     }
     render() {
-        return (hAsync("div", { key: '9fdd0a6b9adfad92d89ff30873009e08ca981124', role: "grid", class: {
+        return (hAsync("div", { key: '223e082cd5124d2f495e65058c4742ab6a28f5cf', role: "grid", class: {
                 'xpl-dynamic-table': true,
                 'xpl-dynamic-table--accordion': this.hasAccordion,
-            }, "aria-colcount": this.colCount }, hAsync("slot", { key: 'a105d82f752d34618a0603c59f85ea9e2ee6c3dd', name: "header" }), hAsync("slot", { key: '24817b404a5a6f50ab1f17674a85391a8645f728', name: "body" })));
+            }, "aria-colcount": this.colCount }, hAsync("slot", { key: 'a808231d98db51ddb01ada49d69ae468cd721603', name: "header" }), hAsync("slot", { key: '4eb9d10764e8d81e5c6d9f80fc9d470c2d34e969', name: "body" })));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -11045,9 +11045,9 @@ class DynamicTableCell {
         const colIndex = this.el.parentElement
             ? Array.from(this.el.parentElement.children).indexOf(this.el) + 1
             : 0;
-        return (hAsync(Host, { key: '6a4eea3dcf826a18c24068acea56dc63261220f4', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
+        return (hAsync(Host, { key: 'bdc80cc13051a57294f5a8eef938ffc92f7108b4', role: "gridcell", "aria-colindex": colIndex, class: "xpl-dynamic-table-cell", ref: (el) => {
                 this.hostElement = el ?? undefined;
-            } }, hAsync("slot", { key: '138598bb74c49c32b649f0955a53cb8ea479e04f' })));
+            } }, hAsync("slot", { key: '743946a9ee87d85eb9e0e414f9688e249b7694a3' })));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -11088,9 +11088,9 @@ class DynamicTableRow {
         const classList = `xpl-dynamic-table-row
             ${this.isDisabled ? 'disabled' : ''}
             ${this.selected ? 'selected' : ''}`;
-        return (hAsync(Host, { key: '4b0e558771154ca42ab57235d9b38861831d7eeb', role: "row", class: classList, ref: (el) => {
+        return (hAsync(Host, { key: '5d91af6b6055646118e882b9e4ac1c0fe9003e06', role: "row", class: classList, ref: (el) => {
                 this.hostElement = el ?? undefined;
-            } }, hAsync("slot", { key: '8b2b1a78d797c9a5fcaa8b31db2a41f57335b683' })));
+            } }, hAsync("slot", { key: 'e3ed1a18b1d7187bf03f9c6633c276e1fb90d029' })));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -11132,7 +11132,7 @@ class Grid {
         });
     }
     render() {
-        return hAsync(Host, { key: '94440d9d2f50c8712e7e4599409101da361f66d8', class: "xpl-grid" });
+        return hAsync(Host, { key: '4074778ac031d36c8f530379f7cc55b7db8a6887', class: "xpl-grid" });
     }
     get container() { return getElement(this); }
     static get cmpMeta() { return {
@@ -11159,7 +11159,7 @@ class GridItem {
         className += ` xpl-grid-item-sm-${this.sm}`;
         className += ` xpl-grid-item-md-${this.md}`;
         className += ` xpl-grid-item-lg-${this.lg}`;
-        return (hAsync(Host, { key: '0fc1d60f8f0d0df7208302a3668930afdb1dc5ba', class: className }, hAsync("slot", { key: '0385c17beb3982d060b4e2a4bdd0fd16f924a0d3' })));
+        return (hAsync(Host, { key: '7c2e5c06f0751cf0a6bc6d80c12939e0f4c194ee', class: className }, hAsync("slot", { key: '2fc5ed1542e50c826bec55e1f106c49ef19c1a38' })));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -11230,7 +11230,7 @@ class HeaderAccordion {
         this.updateParentCheckbox(initialCheckoxesValue);
     }
     render() {
-        return (hAsync(Host, { key: '7a9c486fd491732cafa29086b3e3edab9090fcef', class: "xpl-header-accordion" }, hAsync("div", { key: 'c63b756d6336e89b7976fb9a072782ed9d67a7c9', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (hAsync("xpl-checkbox", { key: '65d41ff6f70d0cc9022f0337335305737a23617d', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), hAsync("button", { key: '514f9bfe4a024416b8a4e152472c2bd7bbe3ab1d', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, hAsync("slot", { key: '29a2434b4a4be46751f4425b7837f11324547e1a', name: "title" }), hAsync("xpl-icon", { key: 'cf2e043da31d9845e6b4db91022f67c3abb4918d', size: 16, icon: "chevron-down", class: this.expanded ? 'rotate' : undefined }))), hAsync("div", { key: '6bcc05f2ebf545ef67fa7cf1e3bb1e6f39f0f170', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, hAsync("slot", { key: '6bbcd7e23979d93d88168f173766f86701ecc382', name: "content" }))));
+        return (hAsync(Host, { key: '6181aa606ed8062474d9e369558a0d4367ec06be', class: "xpl-header-accordion" }, hAsync("div", { key: '17516c087ec1818ef9be08b79abd0e69ee6e499b', class: `header-accordion header-accordion--${this.expanded ? 'expanded' : 'collapsed'}` }, this.hasCheckbox && (hAsync("xpl-checkbox", { key: '709c1055c22c7328de3a36fd265d57e616e13f39', class: "xpl-header-accordion__parent-checkbox", checked: this.parentChecked, disabled: this.disabled, indeterminate: this.parentIndeterminate, onCheckboxChange: (event) => this.handleParentCheckboxChange(event.detail) })), hAsync("button", { key: '9392aaf81db32af32c2fa3bff445a53fd0e8a324', "aria-expanded": this.expanded, "aria-controls": this.contentId, class: "toggle-area", onClick: this.toggleAccordion, type: "button" }, hAsync("slot", { key: '6019b35676f13debe6cff89bcc9f90542a640628', name: "title" }), hAsync("xpl-icon", { key: '4c381cf9324e1348d1f26c7150b31945e264f4ca', size: 16, icon: "chevron-down", class: this.expanded ? 'rotate' : undefined }))), hAsync("div", { key: '0c96d5d10f7d82844c473e595fce1624234585b3', id: this.contentId, role: "region", class: !this.expanded ? 'content--hidden' : 'content--shown' }, hAsync("slot", { key: 'fc6ae8bc852d115475acbe269e3e82d89b7ae755', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25251,10 +25251,10 @@ class Icon {
         let wrapperClasses = 'xpl-icon__wrapper ';
         if (this.backgroundColor)
             wrapperClasses += `xpl-icon__wrapper--with-background xpl-icon__wrapper--with-background--${this.backgroundColor}`;
-        return (hAsync(Host, { key: '2969450a00c78280dca3b7ed44f98f8699c41808' }, hAsync("figure", { key: '56dc93a59a43dc28eb7479696b8d97656a7c7c68', class: wrapperClasses }, hAsync("span", { key: 'f6133fba12fc84a6547575e70997c131c1771ef2', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
+        return (hAsync(Host, { key: '4227f699fde8eac6949eb604b1c7b4fa20f57d2b' }, hAsync("figure", { key: '33e1c0597e8883530ea685450afa47f2e0ac4555', class: wrapperClasses }, hAsync("span", { key: '9920c6ae88f80c03fc885f7b41524eeaa147d77f', "aria-label": this.icon, role: "img", class: "xpl-icon", style: {
                 width: `${options.width}px`,
                 height: `${options.height}px`,
-            }, innerHTML: apolloIcons.getIcon(this.icon)?.toSVG(options) }), hAsync("figcaption", { key: 'c5c9fa42d7c00ea35666b81c7f8ba39f4482572c' }, this.icon, " icon"))));
+            }, innerHTML: apolloIcons.getIcon(this.icon)?.toSVG(options) }), hAsync("figcaption", { key: '654cc247dbe9383198d6ac90b91412d0957259dc' }, this.icon, " icon"))));
     }
     static get style() { return xplIconCss(); }
     static get cmpMeta() { return {
@@ -25457,13 +25457,13 @@ class Input {
             this.characterCount > this.maxCharacterCount) {
             hasError = true;
         }
-        return (hAsync(Host, { key: '94a5e19a36756ac43ebbe6d3996a2ffbf475da24', class: {
+        return (hAsync(Host, { key: 'a276769b767bc7df63e2701697600c0ecbfa593e', 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 && (hAsync("label", { key: 'd41b5e5245483e2ea235c910f85cd6a21b100dec', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && hAsync("small", { key: 'c9d55823b8b97678b2f5f4374446c3693e6dceaa' }, this.description))), this.renderInput(), (this.error?.length ?? 0) > 0 && (hAsync("label", { key: '20e5a1d2af06e571f0757aa60633438f79a6a17d', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, hAsync("xpl-icon", { key: 'a193ee5f1d3e0d8479fa8dfd66ab27edeb400d30', icon: "circle-warning", size: 16 }), hAsync("span", { key: 'acf686fe036d1a1e9cb944ff773dda86e90ff39a' }, this.error)))));
+            } }, this.label && (hAsync("label", { key: '1686d1f5c9fc573929190bc1a04bf9efd2ad6957', class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && hAsync("small", { key: '1f74f68e8eeae5186e50ace2e96a9896b022fa30' }, this.description))), this.renderInput(), (this.error?.length ?? 0) > 0 && (hAsync("label", { key: '2ee7de8b1dcb4cc27d7dcf8b34be66727ace1bfe', class: "xpl-input-error", htmlFor: this._id, id: `${this._id}-error` }, hAsync("xpl-icon", { key: 'd3965b339f2d24dec0fdde367e76aacfefd25061', icon: "circle-warning", size: 16 }), hAsync("span", { key: 'b6269e3f122a53980438c21cfbda2e18b3c77a7e' }, this.error)))));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -25890,16 +25890,16 @@ class InputColor {
             top: `${y}px`,
             background: `rgb(${r}, ${g}, ${b})`,
         };
-        return (hAsync(Host, { key: '2c4bff1c1b56afdc1b4192a2d7c1e0a1f5ebc073', class: "xpl-input-color" }, hAsync("xpl-popover", { key: 'ba545a5022a532ef2fde8c795bee19f2680514c1', disabled: this.disabled, display: "menu" }, hAsync("div", { key: '180e066079da1a97ba31bcaf66d443df8a0c48ca', slot: "trigger" }, hAsync("div", { key: 'c3cc0cb1484c4111b60b736b750571552437d0cf', class: {
+        return (hAsync(Host, { key: 'baf8bd36a33134bff8b2e1ce1a5d81a567f232b2', class: "xpl-input-color" }, hAsync("xpl-popover", { key: 'e5bfd446e4b900371ee8ca7c7c321692079c66fb', disabled: this.disabled, display: "menu" }, hAsync("div", { key: '9d40ccbf649ba0be2884bbc7dec84d7c1e9ddbb7', slot: "trigger" }, hAsync("div", { key: '6b4474af2dab4be116728135214403af7189d99f', class: {
                 'xpl-input-color__display': true,
                 'xpl-input-color__display--disabled': !!this.disabled,
                 'xpl-input-color__display--error': !!this.hasErrorState,
-            } }, hAsync("span", { key: '72aaff4e9a54da1f766d1de85bd58216c866a4b7', class: "xpl-input-color__color", style: {
+            } }, hAsync("span", { key: '9372da25358b453c5b89f324886c986153b9386b', class: "xpl-input-color__color", style: {
                 background: objectToStringColor(this.colorValues),
-            } }), this.colorValues.hex ? (hAsync("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (hAsync("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (hAsync("xpl-icon", { key: 'f55cfde9a119e9f0de379bc1bfb5b5d4b53aa992', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
+            } }), this.colorValues.hex ? (hAsync("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (hAsync("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (hAsync("xpl-icon", { key: 'a37bf00e4a70cda5e59cecfc7f108601bbb15e8e', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
                 e.stopPropagation();
                 this.openEyeDropper();
-            } })))), hAsync("div", { key: 'f80f215000d3a906d65f7f6673c6d8eaabe3fc6d', class: "xpl-input-color__menu" }, hAsync("div", { key: '4701c99f8a528900c34005b7c26d9fa544b664d8', class: "xpl-input-color__sl-grid", ref: (el) => {
+            } })))), hAsync("div", { key: 'e95b3755b47802b446de5d7e9c25d2238dea23ef', class: "xpl-input-color__menu" }, hAsync("div", { key: '9ecc94c286d9cd0a5e25c92eaea3a2dd9ee4394b', class: "xpl-input-color__sl-grid", ref: (el) => {
                 this.colorInputElements.slGrid = el ?? undefined;
             }, style: {
                 background: [
@@ -25907,9 +25907,9 @@ class InputColor {
                     `linear-gradient(to right, #fff, #fff0)`,
                     `rgb(${hueBaseColor.r} ${hueBaseColor.g} ${hueBaseColor.b})`,
                 ].join(', '),
-            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, hAsync("div", { key: '3e0ec5c0821dfed35190053f5e4f147cb7b55eb0', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), hAsync("div", { key: '1b278a13c88aa663a2b8217fbc3524ee213e0f3b', class: "xpl-input-color__grid" }, hAsync("input", { key: '5e35bdd6e7776848a2d2eb32a00deb3ec349c21d', 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 }, hAsync("div", { key: '85b2e591be85db2a2d3d1bbe65ee276a857b92fa', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), hAsync("div", { key: 'b9d7f2fdc49d73db488d62f21433558b5b0a09a7', class: "xpl-input-color__grid" }, hAsync("input", { key: '3c260f54bde2c26a7b5980082cabf54e2d42340e', 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 ?? undefined;
-            } }), hAsync("input", { key: '1119341201878e5c8511fa3e241afba15eab6d9b', 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) => {
+            } }), hAsync("input", { key: 'ef8ef568a1487b618aeeb986904a5eeefabba300', 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 ?? undefined;
             }, style: {
                 backgroundImage: [
@@ -25919,9 +25919,9 @@ class InputColor {
                     `linear-gradient(45deg, transparent 75%, #ccc 75%)`,
                     `linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
                 ].join(', '),
-            } }), hAsync("div", { key: '3804928b107e92bddbc3afa3fa883caafddbd06b', class: "xpl-input-color__preview", style: {
+            } }), hAsync("div", { key: 'b4953565664df14ad483f30c45b6ae5e717e6a63', class: "xpl-input-color__preview", style: {
                 background: `rgba(${r}, ${g}, ${b}, ${a})`,
-            } })), hAsync("div", { key: '86961ee31d82724a76f6598bd547c8e650e27f24', class: "xpl-input-color__inputs" }, [
+            } })), hAsync("div", { key: '731a00aa7075efc1a19849a58e5a81c8837ab199', class: "xpl-input-color__inputs" }, [
             'hex',
             'r',
             'g',
@@ -26088,16 +26088,16 @@ class InputDate {
         parent.removeChild(wrapper);
     }
     render() {
-        return (hAsync(Host, { key: '768d9bffdb7431a48824590f9ae61f8e77735e98', class: {
+        return (hAsync(Host, { key: 'f1b3189eb8ba737e5e96826042d8c3aadce9b0d1', 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,
-            } }, hAsync("div", { key: '5b3421bad3bc8474b3724fc7a4287ccf98bd1ba5', class: "xpl-input-wrapper" }, this.pre && (hAsync("label", { key: 'f0e88d0052247c15decc6de2635db1fb847fdd94', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), hAsync("input", { key: '251ddfab7140c7a13fd2ef36d7baefe81ed3e716', 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) => {
+            } }, hAsync("div", { key: '1c292279aad8ae7f48358d5e42189d60ecd1d97d', class: "xpl-input-wrapper" }, this.pre && (hAsync("label", { key: 'f8ed452f69f664fd4e3b83e428070f3f4b14d5c6', class: "xpl-input-pre", htmlFor: this.inputId }, this.pre)), hAsync("input", { key: 'e1659c6ad3cb2cb0a5d88a7635672917d2f58ebb', 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 ?? undefined;
             }, onChange: (event) => {
                 this.valueChanged(event);
-            } }), hAsync("xpl-icon", { key: '6828c8024496963a2a480091a40326154e21d1f5', class: "xpl-input-calendar", icon: "calendar", size: 24 }), this.post && (hAsync("label", { key: 'e08267b6ffc0d605b557e69784b54757621182c7', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
+            } }), hAsync("xpl-icon", { key: '577c881edf4ef8dfd3c910c8bbdd268af7448e6c', class: "xpl-input-calendar", icon: "calendar", size: 24 }), this.post && (hAsync("label", { key: '5acfeb3ea72d9c5a193116e305fd54d323276910', class: "xpl-input-post", htmlFor: this.inputId }, this.post)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26168,18 +26168,18 @@ class InputFile {
         this.onRemoveFileByIndex(fileIndex);
     }
     render() {
-        return (hAsync(Host, { key: 'baa52af5a8ee6222ff745cece6e59d9480165af6', class: {
+        return (hAsync(Host, { key: '87eead553435ce984945ccb72ca262bfd6123562', class: {
                 'xpl-input-file': true,
                 'xpl-input-file--hide-trigger-on-select': !!this.hideTriggerOnSelect,
                 'xpl-input-file--disabled': !!this.disabled,
-            } }, hAsync("span", { key: '802ed05f26bd1e2a618f5e09bea7370fe69a4718', class: {
+            } }, hAsync("span", { key: 'f345204405d1bb784fc662fa3c29e9edaeca9c67', class: {
                 'xpl-input-file__trigger-wrapper': true,
                 'xpl-input-file__trigger-wrapper--hidden': !!this.hideTriggerOnSelect && (this.files?.length ?? 0) > 0,
-            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, hAsync("slot", { key: '487381f2b34d2ad528f1b32f976e5513c1e29c11', name: "trigger" })), (this.files?.length ?? 0) > 0 && !this.hideFileNames && (hAsync("ul", { key: 'fe7b503a89a65af02cbb39b93b518b2dde790a34', class: "xpl-input-file__file-list" }, (this.files ?? []).map((file, fileIndex) => (hAsync("li", { class: "xpl-input-file__file-item" }, hAsync("span", { class: "xpl-input-file__file-name" }, file.name), hAsync("xpl-icon", { icon: "x-circle", size: 24, onClick: (e) => {
+            }, role: "button", tabIndex: 0, onClick: this.openFileDialog }, hAsync("slot", { key: '46c4e817cb8f8b050b4de5c571757c7ed84698a7', name: "trigger" })), (this.files?.length ?? 0) > 0 && !this.hideFileNames && (hAsync("ul", { key: '455af4a3cad84232464927efb880ce0a26cebf71', class: "xpl-input-file__file-list" }, (this.files ?? []).map((file, fileIndex) => (hAsync("li", { class: "xpl-input-file__file-item" }, hAsync("span", { class: "xpl-input-file__file-name" }, file.name), hAsync("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 && (hAsync("span", { key: '6e5e54426f2b33858b374d09014ec0096fa43bb4', class: "xpl-input-file__accept" }, "Accepted file types: ", this.accept)), hAsync("input", { key: '81d08e97d8d2c8a59640348e295261f9acd439cc', onChange: this.handleFileChange, type: "file", ref: (el) => {
+            }, class: "xpl-input-file__remove-icon" })))))), this.accept && !this.hideAcceptText && (hAsync("span", { key: '77abc822d8d44b33f251d4ba9ef21cfc7dd6c287', class: "xpl-input-file__accept" }, "Accepted file types: ", this.accept)), hAsync("input", { key: 'd75ec23921943259d789b0f32828dca57864520e', onChange: this.handleFileChange, type: "file", ref: (el) => {
                 this.fileInput = el ?? undefined;
             }, hidden: true, accept: this.accept, multiple: this.multiple, name: this.name })));
     }
@@ -26684,20 +26684,20 @@ class InputPhone {
         this.hasErrorState = null;
     }
     render() {
-        return (hAsync(Host, { key: '124c8feabed1cf383f2eb65e77dd2517c96ea01c', class: {
+        return (hAsync(Host, { key: 'c78f7ab5d5c6f6982356d7610fe32855d7f214c5', class: {
                 'xpl-input-phone': true,
                 'xpl-input-phone--error': !!this.hasErrorState || !!this.error,
                 'xpl-input-phone--open': this.dropdownOpen,
                 'xpl-input-phone--domestic': !this.isInternational,
-            } }, hAsync("div", { key: '6b2a17efd488aa18ac8dea1e86d12884ceb51e90', class: "xpl-input-wrapper" }, this.isInternational && (hAsync("button", { key: 'd3f8e42841532f8c37a131545007af3213c1b9e0', 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 }, this.selectedCountry?.name && (hAsync("xpl-icon", { key: 'cb52527ba28d95a93cba734bb6d1b3ab8e14a388', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), hAsync("xpl-icon", { key: '7942dae0973871635b7b64e0697d8c25352ac3bf', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), hAsync("div", { key: '24b810a9e03c7774ad6576cc9f03888d5da9d3aa', class: "xpl-input-phone__input-wrap" }, this.isInternational && (hAsync("span", { key: 'eb7684aad427a10615c23326a2a2628a4a12fbb0', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), hAsync("input", { key: '8e429f156e36f101413e1d5168bb38a2ca9bdebf', ref: (el) => {
+            } }, hAsync("div", { key: '3b30f8755836376728336f769afeb714b9a3dfa9', class: "xpl-input-wrapper" }, this.isInternational && (hAsync("button", { key: 'c83ff2255a465d7d5d233ce02a816845858594be', 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 }, this.selectedCountry?.name && (hAsync("xpl-icon", { key: 'f0a62a5052b940f4a2212ed77929696e62b4825f', class: "xpl-input-phone__flag", icon: getCountryIconName(this.selectedCountry.name), size: 24, "aria-hidden": "true" })), hAsync("xpl-icon", { key: '68782b949fd1cf41a8b0883ad6caba18d9aa1ac5', class: "xpl-input-phone__trigger-icon", icon: "chevron-down", size: 20, "aria-hidden": "true" }))), hAsync("div", { key: '6aa5f75f34b413bd8939d46c55b7cc42128db247', class: "xpl-input-phone__input-wrap" }, this.isInternational && (hAsync("span", { key: '81dc5727f8dca528f34994736c1a8a2223e8fe63', class: "xpl-input-phone__dial-code" }, this.effectiveDialCode)), hAsync("input", { key: 'd0faecadd4216bf6a7b79fc9623052e194900c15', ref: (el) => {
                 this.inputEl = el ?? undefined;
-            }, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState || this.error ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (hAsync("button", { key: '403e1b9e35a7bfd2ba356c16c4d5e9178541f876', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, hAsync("xpl-icon", { key: 'aee1381d3a7dcec64c708ecfa67266eef442850e', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (hAsync("xpl-dropdown", { key: '9d14a65f3ac538b4e420151927a0c349adf3688d', ref: (el) => {
+            }, type: "tel", id: this.inputId, class: "xpl-input-phone__input", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, "aria-invalid": this.hasErrorState || this.error ? 'true' : 'false', placeholder: this.effectivePlaceholder, autocomplete: this.isInternational ? 'tel-national' : 'tel', inputmode: "numeric", maxlength: this.maxInputLength, value: this.displayValue, onInput: this.handleNumberInput }), this.nationalNumber && this.isEditable && (hAsync("button", { key: '12a2e4ce8adb80ca4d6fca1c706c54db01d22101', type: "button", class: "xpl-input-phone__clear", "aria-label": "Clear phone number", onClick: this.handleClear }, hAsync("xpl-icon", { key: 'f1ae5e69258654e8ba5bf511755020e0d7d91088', icon: "x-circle", size: 16 }))))), this.isInternational && this.isEditable && (hAsync("xpl-dropdown", { key: 'd8a75cf0b95d9affae6e03292c011a73dcff98b4', ref: (el) => {
                 this.dropdownRef = el ?? undefined;
             }, 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" }, hAsync("div", { key: '87006a8a90ef37032775247a387896f065ce5673', slot: "header", class: "xpl-input-phone__search-wrap" }, hAsync("xpl-input", { key: '26a99c318081e3215fa779191ee8a0f9c127489f', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
+            }, "aria-label": "Country" }, hAsync("div", { key: 'b46a4a9985604720099c3212714804aee5a1f58b', slot: "header", class: "xpl-input-phone__search-wrap" }, hAsync("xpl-input", { key: '55bdc0f6ff4b1a1a2d17b5ba10849bcab472d7d8', class: "xpl-input-phone__search", type: "text", label: "", placeholder: "Search", value: this.searchQuery, autocomplete: "off", onInputEvent: (e) => {
                 this.searchQuery = e.detail ?? '';
-            } }, hAsync("xpl-icon", { key: '4aee182e975ed805524ac93e3a34f055266b693b', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
+            } }, hAsync("xpl-icon", { key: 'af0fd388d39e6d9bcac5a032c7c0cf5f192cc4d3', slot: "pre", class: "xpl-input-phone__search-icon", icon: "magnifier", size: 20 })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26839,7 +26839,7 @@ class InputSearch {
         return shell;
     }
     render() {
-        return (hAsync(Host, { key: '4a152d3a8db620391334488e1c6c3cdbe9250ba3', class: {
+        return (hAsync(Host, { key: '90b29d51b36655d1dc5f7fa9b67edf6382cb90af', class: {
                 'xpl-input-search': true,
                 'xpl-input-search--disabled': this.disabled,
                 'xpl-input-search--error': this.hasError,
@@ -27048,11 +27048,11 @@ class InputTime {
         }));
     }
     render() {
-        return (hAsync(Host, { key: '5494cc0a537152b9d8dfa03e5281b21e6bb6eee2', class: {
+        return (hAsync(Host, { key: '098ef69d355f6bdf03b4bfbab59956f84d5967b4', class: {
                 'xpl-input-time': true,
                 [`xpl-input-time--mode-${this.mode}`]: true,
                 'xpl-input-time--error': !!this.hasErrorState,
-            } }, hAsync("xpl-input", { key: '0d32784cd9fc8acacae1854a966bb426fa135fb5', pre: hAsync("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : undefined, 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 && (hAsync("xpl-dropdown", { key: '206c668ca8ee29ceffaf14f14acd90fb076fc0ae', options: this.options, isOpen: this.showOptions, ref: (el) => {
+            } }, hAsync("xpl-input", { key: 'e73a120a00a6f110e99e1a7d54bc75c024a2e1dc', pre: hAsync("xpl-icon", { class: "xpl-input-time__clock-icon", icon: "clock", size: 24 }), post: this.timeFormat === '12h' ? this.amPm || 'AM' : undefined, 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 && (hAsync("xpl-dropdown", { key: '454de00fca4a891eaffc71738538425fa9f4e34f', options: this.options, isOpen: this.showOptions, ref: (el) => {
                 this.dropdown = el ?? undefined;
             }, class: "xpl-input-time__dropdown" }))));
     }
@@ -27168,7 +27168,7 @@ class LargeCard {
         }
     }
     render() {
-        return (hAsync(Host, { key: '9fdddb5c8d02400545f57499c92af0ee0aa4be67', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, hAsync("dt", { key: '3854e5f89efa2c968f7abeb8284c0ab8e3e31fda', class: "xpl-large-card__header" }, hAsync("header", { key: '0057d377780108f886dae2d9a6a1f3d81748b5fc' }, hAsync("slot", { key: '243d38d7635a2e288a1ec7f7894b772d5005acee', name: "title" }, this.name), this.link && (hAsync("span", { key: 'f2ce2ff09a50471ee255bac8bda406908c272388', class: "xpl-large-card__header-arrow" }, hAsync("xpl-icon", { key: '86233617aaf74a137d84639e1477c311671fad7b', icon: "chevron-right", size: 16 })))), this.description && (hAsync("div", { key: 'ab0c0134a2468d22d122dfe810306d570beee8e8', class: "xpl-large-card__description" }, this.description))), hAsync("dd", { key: '6fb1262327dc91fd0a982bd31ee7deaa94625e12', class: "xpl-large-card__body" }, this.graphContentPresent && hAsync("slot", { key: 'b1e170a19004aad87015786307b926e58d031751', name: GRAPH_CONTENT_SLOT }))));
+        return (hAsync(Host, { key: '879f57b756e3c25bb9bebbc06f144a137bf0b78b', role: "group", class: `xpl-large-card ${this.link ? 'xpl-large-card__link' : ''}`, tabindex: "0" }, hAsync("dt", { key: '1336da473527a06e485c559925156954c0162696', class: "xpl-large-card__header" }, hAsync("header", { key: '69073fa20879ae4b9709ec54cc01cad85fba6366' }, hAsync("slot", { key: 'c9381d78ba477f7ba9f1ce6a2e82c149bbe50ad0', name: "title" }, this.name), this.link && (hAsync("span", { key: '8075678983d86cc192b9a2fc7a43fb4c022dbace', class: "xpl-large-card__header-arrow" }, hAsync("xpl-icon", { key: '960d96210c4d5f37b51782947b9acdb3cb4d125d', icon: "chevron-right", size: 16 })))), this.description && (hAsync("div", { key: '0162c71c16faa14385da912cbcf6a24f182b1012', class: "xpl-large-card__description" }, this.description))), hAsync("dd", { key: 'd48d1348b8d0b5b3db776d64be10b23d884cd35c', class: "xpl-large-card__body" }, this.graphContentPresent && hAsync("slot", { key: '7aa25f469d81ebc5046cc382920fcac9a3d59a9c', name: GRAPH_CONTENT_SLOT }))));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -27554,10 +27554,10 @@ class List {
     render() {
         const ariaLabelledBy = this.labelledBy?.trim() ? this.labelledBy.trim() : undefined;
         const ariaLabel = !ariaLabelledBy && this.label?.trim() ? this.label.trim() : undefined;
-        return (hAsync(Host, { key: '8b055baaf9acc04df19be097d0fb5bcb86c7165a', role: "list", class: { 'xpl-list': true }, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, this.items?.map((item, index) => {
+        return (hAsync(Host, { key: '5516f433d051a8cac2d01255e7e4b43956f088c5', role: "list", class: { 'xpl-list': true }, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, this.items?.map((item, index) => {
             const legacyRowId = item.id ?? `item-${index}`;
             return (hAsync("xpl-list-item", { key: `legacy-item-${legacyRowId}`, item: item, href: item.href, itemId: legacyRowId }));
-        }), hAsync("slot", { key: '103e3fb6cb29f9527b090dd9e53412528ed7b9c2' }), this.reorderable ? (hAsync("div", { class: "xpl-list__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)) : null));
+        }), hAsync("slot", { key: '68216fa87a1034e09363b8b20fc436d0d3725cc3' }), this.reorderable ? (hAsync("div", { class: "xpl-list__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)) : null));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27609,7 +27609,7 @@ class MainNav {
         this.navWidthHandler();
     }
     render() {
-        return (hAsync(Host, { key: '936e7393a8037c6c78c7a6d5d284d9c37be2f866', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, hAsync("nav", { key: '45fd74c979b53bbd8080ca92ea15e3135d0d49ae' }, hAsync("header", { key: 'cb692d0e90aa70bce5e09af43e54d864849f4800', "aria-label": "Sidebar Header" }, hAsync("slot", { key: '778c33ef024895ca44616ef9655843330e3c563b', name: "logo" }), hAsync("slot", { key: '7728db09b46999e708c46d10d5de56c65ab9a9fa', name: "brand-name" })), hAsync("div", { key: '0376fefe7921b061f3f2fdc972aa381ed7d124a2', class: "xpl-main-nav__main_section" }, hAsync("slot", { key: '12a61a53d6c93695d38c70d9a953fe4e37438178', name: "navigation" })), hAsync("footer", { key: '8cd0e32231e155324c78878dcaad955ab7b3e4fb', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, hAsync("slot", { key: 'cdaf0bec22d3d8229441e7e036c3fcbcb244c32f', name: "footer" })))));
+        return (hAsync(Host, { key: '965f7a4faa40d7ec386c947e16fb5bc4621496a0', class: `xpl-main-nav xpl-main-nav--${this.width}`, "aria-label": "Sidebar" }, hAsync("nav", { key: '1237191a5c5e6d3eacfba46d7b9cb6c5e1fcc191' }, hAsync("header", { key: '903b017b0610dfd4fee28aa0d00d9c2f030506bc', "aria-label": "Sidebar Header" }, hAsync("slot", { key: 'ec0c4c0a92ae8578372895c3a0ee225da2bc2bb8', name: "logo" }), hAsync("slot", { key: 'd2b9d45cfde83df6f7f76889fc5c05520f5346d6', name: "brand-name" })), hAsync("div", { key: '93d7a1d1ca940db7fedf4c634c092d2554c9e9e6', class: "xpl-main-nav__main_section" }, hAsync("slot", { key: '0a0c0ee4ae85a4db09cf87c7fe9693bd1f64721a', name: "navigation" })), hAsync("footer", { key: '21d2eaa5f1446145656954966e550150c867357c', class: "xpl-main-nav__footer", "aria-label": "Sidebar Footer" }, hAsync("slot", { key: 'd2b84a7ea550a1da9460df7e9ace73354929707f', name: "footer" })))));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -27715,7 +27715,7 @@ class Modal {
         }, 250);
     }
     render() {
-        return (hAsync(Host, { key: '3194d5377b7438543a3f6e6ab41fd7c307674a28', class: "xpl-modal" }, this.isOpen && hAsync("xpl-backdrop", { key: 'dfc30ff7879364920669a1d1ebfdaea39951b966' }), hAsync("dialog", { key: 'bfb33a8d97d17981f582768b0e34b0d167cf60cb', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}`, "aria-labelledby": this.titleId }, hAsync("div", { key: '0b71adc30bde109aa831a28200c918a458a7da52', class: "xpl-modal__header" }, hAsync("div", { key: '657c5aad60fa85e4285e299dcbe24209742277e6', class: "xpl-modal__title" }, hAsync("xpl-button", { key: '2301014d0f4bd129dbbfc7b1eb242db98622f866', type: "button", class: "xpl-modal__close-button", "icon-only": true, variant: "tertiary", "aria-label": "Close modal", onClick: this.handleDialogClose }, hAsync("xpl-icon", { key: 'a978ff514926ca4b319c4920b2057baa50a1fb24', icon: "xmark" })), this.variant === 'warning' && (hAsync("xpl-icon", { key: '2a1cf704d1aa75170d53ef3887a4d1e7874762fa', size: 20, icon: "triangle-warning", class: "xpl-modal__alert-icon" })), hAsync("span", { key: 'd2bcd4c5b4596e80875eb9000ee75d592e41ce74', class: "xpl-modal__title-text", id: this.titleId }, hAsync("slot", { key: 'cf009856b6e86bab36bc16a249ad9b3ebc09fd1c', name: "title" }))), hAsync("div", { key: '29258401d4ec72c81a5a7e28e2365efd2227445e', class: "xpl-modal__subtitle" }, hAsync("slot", { key: '9f749c62f55edabcec4dc5d8677ad9b45e64be50', name: "subtitle" }))), hAsync("div", { key: 'f12dd8ee02ef7f9aeeedd0d7c7b5ffe52c24a336', class: "xpl-modal__body" }, hAsync("slot", { key: '0a9e2d67a7842075560e1cf846e4b3d18bfe1bee', name: "body" })), hAsync("div", { key: '720e9bf0cb5746b31b7dee9cb1ad4226eb13bf11', class: "xpl-modal__footer" }, hAsync("slot", { key: '819ba75ee04742fb872c0345b4cc1732891856ee', name: "primary" }), hAsync("slot", { key: 'b74d4339586fd2d863791d6cb6cd3d593a9c9785', name: "secondary" }), hAsync("slot", { key: 'a4d437d7e9142bf91307edae5ed5dbd89e8921f0', name: "tertiary" })))));
+        return (hAsync(Host, { key: '03f5eb41f33dd1ef6520c5e606f86af3676b1e72', class: "xpl-modal" }, this.isOpen && hAsync("xpl-backdrop", { key: '50419511db07db7e51664f2c64167e8fa1130478' }), hAsync("dialog", { key: 'debe223a70a3e14a5a3937cdba9b18d8e1529497', class: `xpl-modal__dialog xpl-modal-size--${this.size} xpl-modal--${this.isOpen ? 'is-open' : 'is-closed'}`, "aria-labelledby": this.titleId }, hAsync("div", { key: '7b4a1fda4219622c1e482bfeda808fb25a818df7', class: "xpl-modal__header" }, hAsync("div", { key: '4f2f095fd473c97954e7c3b06691133f796df77e', class: "xpl-modal__title" }, hAsync("xpl-button", { key: '9a017bf7cbc52bd6828fe647e06b03a4601f988e', type: "button", class: "xpl-modal__close-button", "icon-only": true, variant: "tertiary", "aria-label": "Close modal", onClick: this.handleDialogClose }, hAsync("xpl-icon", { key: '070c9cb695ee0a85f7bd25e19ceb7cb85ba2d178', icon: "xmark" })), this.variant === 'warning' && (hAsync("xpl-icon", { key: '7478625b27763ff01034195312af4e59411174d6', size: 20, icon: "triangle-warning", class: "xpl-modal__alert-icon" })), hAsync("span", { key: '092491fb296dd9d4658e3bf4fd2425d0cad791ee', class: "xpl-modal__title-text", id: this.titleId }, hAsync("slot", { key: 'd91c682a6f51a08e73281f27944bf83b73a026ee', name: "title" }))), hAsync("div", { key: '9a0b0ff9427d66ac44fd65649460ce62cf7b1cc4', class: "xpl-modal__subtitle" }, hAsync("slot", { key: '41c6093d7cb31838e49b20d237a0c273df79dabf', name: "subtitle" }))), hAsync("div", { key: 'afab32dbee43906310935cb02437e00d2743f555', class: "xpl-modal__body" }, hAsync("slot", { key: 'dbb0a6eb15e6c519f2eb40a0cfc8de2a68a37811', name: "body" })), hAsync("div", { key: '2e3501f03e002a40737dd02a4a6cfd47c0f08205', class: "xpl-modal__footer" }, hAsync("slot", { key: '4b21250f2cc15be589c2622f8cdeda679f881733', name: "primary" }), hAsync("slot", { key: '490d23bfd88b209545e326e1e236beea9f4289da', name: "secondary" }), hAsync("slot", { key: 'b8d1457361776e33ebcc3404db8ab6c901be1500', name: "tertiary" })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -27824,11 +27824,11 @@ class NavHeaderMenu {
     }
     render() {
         const hasProfile = !!this.username || !!this.email;
-        return (hAsync(Host, { key: '36df50ceb427be007b8da6c4e6154ab0267e7e6b', class: {
+        return (hAsync(Host, { key: 'b79342bf524458e0119a92ba754a700c70c8652f', class: {
                 'xpl-nav-header-menu': true,
                 'xpl-nav-header-menu--has-right-aside-mobile': this.rightAsideMobilePresent,
                 dark: true,
-            } }, hasProfile && (hAsync("div", { key: '5906352d9c6580f96cb3e1ba3ae841b04c136a27', class: "xpl-nav-header-menu__profile" }, hAsync("div", { key: '38ad80fe95f2ea56e12f3dfeea32af734f31aafd', class: "xpl-nav-header-menu__info" }, this.username && (hAsync("div", { key: 'a58f2ab162da92c5afbfaf01234748a6478a61db', class: "xpl-nav-header-menu__username", title: this.username }, this.username)), this.email && (hAsync("div", { key: 'd91f764a3b4278937d1bac6ed670f1e2abf899b0', class: "xpl-nav-header-menu__email", title: this.email }, this.email))))), hAsync("div", { key: '78fade2c6cc2ec049b40ca3093f77855b46ee7db', class: "xpl-nav-header-menu__right-aside-mobile" }, hAsync("slot", { key: '9715e86a06f642f1b0455e43f12fc83c1fdc20f8', name: "right-aside-mobile" })), hAsync("div", { key: 'c1893f276e93629ff8dd96f807579b2b991ea884', class: "xpl-nav-header-menu__slot", role: "list" }, hAsync("slot", { key: '23218885442af87a956216af71b598c2eb478eff' }))));
+            } }, hasProfile && (hAsync("div", { key: 'db3789fefeb61c27d081e2f18be1f4f42d4d1696', class: "xpl-nav-header-menu__profile" }, hAsync("div", { key: '00415b3ea671d119ae7b196eb10b0f3fd423d302', class: "xpl-nav-header-menu__info" }, this.username && (hAsync("div", { key: 'e3eb1b9425f3902bffc493fd1f26065cea2e9eb0', class: "xpl-nav-header-menu__username", title: this.username }, this.username)), this.email && (hAsync("div", { key: 'efeaeddcf8598169c014ff84a0dc2bd8c445ec44', class: "xpl-nav-header-menu__email", title: this.email }, this.email))))), hAsync("div", { key: '2fc3f202f45c4fb9e330f16f71ad68d6c03d6dc8', class: "xpl-nav-header-menu__right-aside-mobile" }, hAsync("slot", { key: 'd375a64cc228d4514ab5c6a59d6781799eba174f', name: "right-aside-mobile" })), hAsync("div", { key: '113008a606e34af2e8e23eb7d261858d2d631d28', class: "xpl-nav-header-menu__slot", role: "list" }, hAsync("slot", { key: '214afe30add1001da07ff4870f29bcd932d8c199' }))));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -27857,11 +27857,11 @@ class NavItem {
         }
     }
     render() {
-        return (hAsync(Host, { key: '6632b50719b413f69b1943035e60c086951709d7', class: "xpl-nav-item", role: "listitem", onClick: () => {
+        return (hAsync(Host, { key: '12b0be7801fdf60e06dca270ec5d211e2c81af21', class: "xpl-nav-item", role: "listitem", onClick: () => {
                 if (this.navControl) {
                     this.onNavToggle();
                 }
-            } }, hAsync("slot", { key: '1c7f754d3fa4b67883562f4877414cefc7947920', name: "link" }, hAsync("slot", { key: 'c4268f625e8a4ef9323293d064abee42afee5d1f', name: "icon" }), hAsync("slot", { key: '5f843056b4c5852e3fa89c9a5ef36442b76238a0' }))));
+            } }, hAsync("slot", { key: '1716229d1110bed1911c0921d87dd6238e7f59aa', name: "link" }, hAsync("slot", { key: '653fd2830c8e67d3c9fe65a0994bd167173e110b', name: "icon" }), hAsync("slot", { key: 'a33f79ab45a2a65debca49fbedabf2daef2428c8' }))));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -27955,19 +27955,19 @@ class Pagination {
     render() {
         const disablePrev = this.currentPage <= 1;
         const disableNext = this.currentPage >= this.totalPages;
-        return (hAsync(Host, { key: '23b4aec5d70fcfa1ec02089716f7649d15fcb0ca', class: {
+        return (hAsync(Host, { key: 'c1236f3a51a835bc7609f1871718535ad26c608c', class: {
                 'xpl-pagination': true,
                 'xpl-pagination__with-page-control': this.withPageControl,
                 'xpl-pagination__no-page-control': !this.withPageControl,
-            } }, this.withPageControl && (hAsync("div", { key: '2383d3488dc1435f1384f98cf07459cfb6ccb1bc', class: "xpl-pagination__rows-per-page" }, hAsync("label", { key: 'be3f5e3815a11f5cb02710d253e02e10fdf6236d', class: "xpl-pagination__rows-label" }, "Rows per page:"), hAsync("xpl-select", { key: 'dd06add7fde18b8616b18fc945e78457ddedb8b7', class: "xpl-pagination__rows-per-page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.rowsPerPageOptionsArray.map((option) => ({
+            } }, this.withPageControl && (hAsync("div", { key: 'b9a960512110e71ec4403a7440d9a56d2d25eb5a', class: "xpl-pagination__rows-per-page" }, hAsync("label", { key: '77d5c99067a80412b99fd7319a647fea67be9ae2', class: "xpl-pagination__rows-label" }, "Rows per page:"), hAsync("xpl-select", { key: '530bac1621b9901c52f895649f838ddd7919522f', 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 ?? null;
-            } }))), hAsync("div", { key: '9a41a8e940f04ba2da9a7e9331d5ff496043771f', class: "xpl-pagination__pager" }, hAsync("button", { key: 'cfe0a954aaa79e5b8af00a86d384bf9d1d2831b8', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, hAsync("xpl-icon", { key: 'd3cf107b6f1a2cc02c50e0bd23b19b857ebd812d', icon: "arrow-left", size: 20 })), hAsync("xpl-select", { key: '90d4c563a755c83a759b8e4028aac09b8a0be715', class: "xpl-pagination__page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.pageChoices, "custom-display-value": true, ref: (el) => {
+            } }))), hAsync("div", { key: 'f610c71b562c73d1ef6ce81550ee9c5f5318b46a', class: "xpl-pagination__pager" }, hAsync("button", { key: 'f507f26b1b3239c170c60568da2a068ffdc65def', class: "xpl-pagination__pager-button xpl-pagination__pager-button-prev", disabled: disablePrev, onClick: this.handlePrevPage, "aria-label": "Previous Page", tabindex: "0" }, hAsync("xpl-icon", { key: 'c1079f632bb84a97bcb43ab7f39af19d2532e73c', icon: "arrow-left", size: 20 })), hAsync("xpl-select", { key: 'b50192f67d3e5b5c6723131d554d1dad41f8e2a3', class: "xpl-pagination__page-select", dropdownFlipFallbackPlacements: ['bottom-start'], dropdownPlacement: "top-start", choices: this.pageChoices, "custom-display-value": true, ref: (el) => {
                 this.pageSelectRef = el ?? null;
-            } }, hAsync("div", { key: '3f9071ff9ba2094c5014628366519db328efc466', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), hAsync("button", { key: '474df34b27cd0cd6ffcb58c4408691f5bf765c99', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, hAsync("xpl-icon", { key: '0466f500b1cc7f2fa8e22da485e889775a53b2e8', icon: "arrow-right", size: 20 })))));
+            } }, hAsync("div", { key: '35cb95f79705633857df8ef3a48b479c85d6acdd', slot: "custom-display-value" }, `${this.currentPage} of ${this.totalPages}`)), hAsync("button", { key: '79a8b1f267fe675eb626d655a68ad5c72cd6c89f', class: "xpl-pagination__pager-button xpl-pagination__pager-button-next", disabled: disableNext, onClick: this.handleNextPage, "aria-label": "Next Page", tabindex: "0" }, hAsync("xpl-icon", { key: '01ae55d805794de8fb9f332a37314e152fb1f5bb', icon: "arrow-right", size: 20 })))));
     }
     static get watchers() { return {
         "currentPage": [{
@@ -28683,16 +28683,16 @@ class Popover {
         });
     }
     render() {
-        return (hAsync(Host, { key: 'b747fcdda5987a1d0506486d325cdf9a57cab6a8' }, hAsync("div", { key: '547d595121db1b713c204eb5ac173828fff4b35b', class: {
+        return (hAsync(Host, { key: 'a14924382ef3c963fa0d8c6dc4575c1fcb3a8c3a' }, hAsync("div", { key: 'a9bb868211d6866a8f3d097841c41236c37b0ae5', class: {
                 'xpl-popover': true,
                 [`xpl-popover--${this.actualPosition}`]: true,
                 'xpl-popover--is-open': this.isOpenState,
-            } }, hAsync("span", { key: 'd12773148d327475c8ff51fbb5a717c95231cabf', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
+            } }, hAsync("span", { key: '1502c64a98fbf22af9516e5e9aa905e79ea13ab3', role: "button", tabindex: "0", "aria-haspopup": "dialog", "aria-expanded": this.isOpenState ? 'true' : 'false', onClick: this.togglePopover, ref: (el) => {
                 this.triggerRef = el;
-            } }, hAsync("slot", { key: '6322dc3b9e7292eeb41aaf5c662aa99273868c7d', name: "trigger" })), this.display === 'arrow' && (hAsync("div", { key: '2a3fe87cc9a82c8e914f6917a999bdd4433b9042', class: "xpl-popover__arrow" }, hAsync("svg", { key: 'a191461ac07cf6693d5461aa4d343214e62ed6ef', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: '61003e404b4e031057e0d2ef39a31bc9b7fba6df', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), hAsync("path", { key: '15de3ff2ec9657fd3e47410de79d2362076c797b', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), hAsync("div", { key: 'ec4ae8672673fa63b918ab6222a6fbf7099758ff', class: {
+            } }, hAsync("slot", { key: '56a3bdc8d33b010095645b5bfd4b82890351777b', name: "trigger" })), this.display === 'arrow' && (hAsync("div", { key: 'f69e9e12ab93f55267b8c23707eb48321f79a9c6', class: "xpl-popover__arrow" }, hAsync("svg", { key: '1064f5962035b2cbf6dc2d721b537cddb815323e', width: "17", height: "14", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: '7490e8887c93cd357bc21e93c96ab8de3873892b', d: "M0 5h15l-7.5 7.5L0 5Z", fill: "white", stroke: "none", class: "arrow-fill" }), hAsync("path", { key: '6ab893d176866029ac33622a11e097541d5fdb74', d: "M0 5 L7.5 12.5 L15 5", fill: "none", stroke: "black", "stroke-width": "1", class: "arrow-stroke" })))), hAsync("div", { key: '798414192900fab40f67986489753c8a63ec1d92', class: {
                 'xpl-popover__content': true,
                 [`xpl-popover__content--display-${this.display}`]: true,
-            }, ref: (el) => (this.contentRef = el) }, hAsync("slot", { key: '50c82f8c1833c91f6e2aabdfe3773725c9d9296d' })))));
+            }, ref: (el) => (this.contentRef = el) }, hAsync("slot", { key: '5c1f963e4009f5a8d30aaad7f0169164abf5bd43' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -28748,12 +28748,12 @@ class ProgressBar {
         return this.variant === 'indeterminate';
     }
     render() {
-        return (hAsync(Host, { key: '7c374a5f2f89aed6b0c3a0daa4cc843efea8d262', class: {
+        return (hAsync(Host, { key: 'a33381f58e76e71c5a52d4e80fa1f37181f28c8d', class: {
                 'xpl-progress-bar': true,
                 [`xpl-progress-bar--${this.size}`]: true,
                 [`xpl-progress-bar--${this.variant}`]: true,
                 'xpl-progress-bar--complete': this.isComplete,
-            } }, hAsync("div", { key: 'f1be4a82fbb87ffac27bb2b8d0f479ad36aae340', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (hAsync("div", { key: 'd415f09b3d0d237bc348b33470162d2b44048856', class: "xpl-progress-bar__header" }, this.label && hAsync("div", { key: '48bc06b81c4445d811e6cd5f3ac086192cbcb392', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (hAsync("div", { key: 'd31ccfc3ed1f956fdc89e01ca262b606219bb78e', class: "xpl-progress-bar__icon" }, this.isError ? (hAsync("xpl-icon", { icon: "circle-xmark-1" })) : (hAsync("xpl-icon", { icon: "circle-check-1" })))))), hAsync("div", { key: '5c97c6193a2ebb0626052953f1a11c9afc258da8', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (hAsync("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, hAsync("div", { class: "xpl-progress-bar__indeterminate" }))) : (hAsync("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (hAsync("div", { key: '8e78ed094ab41425272b1818cc004a9094c3632d', class: "xpl-progress-bar__helper" }, this.helperText)))));
+            } }, hAsync("div", { key: '6a86fcdc4933aa2ce4df38c2f1797516c3665c3a', class: "xpl-progress-bar__wrapper" }, (this.label || this.showStatusIcon) && (hAsync("div", { key: '12f708882cd9eb13f6011c6e40a3b0fc6b4314aa', class: "xpl-progress-bar__header" }, this.label && hAsync("div", { key: '7a76032a1b457068607018e646b40fe294457fa8', class: "xpl-progress-bar__label" }, this.label), this.showStatusIcon && (hAsync("div", { key: 'dac51b18dda11bf46049a9d0d175821121eb230d', class: "xpl-progress-bar__icon" }, this.isError ? (hAsync("xpl-icon", { icon: "circle-xmark-1" })) : (hAsync("xpl-icon", { icon: "circle-check-1" })))))), hAsync("div", { key: '1923268a3dc1f8aa748f48eca2e991c1424582e3', class: "xpl-progress-bar__row" }, this.isIndeterminate ? (hAsync("div", { class: "xpl-progress-bar__track xpl-progress-bar__track--indeterminate", role: "progressbar", "aria-label": this.label || 'Progress' }, hAsync("div", { class: "xpl-progress-bar__indeterminate" }))) : (hAsync("progress", { class: "xpl-progress-bar__progress", value: this.clampedValue, max: this.max, "aria-label": this.label || 'Progress' }))), this.helperText && (hAsync("div", { key: 'b01a3ae4f73107a4e4938a53e7fa038867da0c53', class: "xpl-progress-bar__helper" }, this.helperText)))));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -28829,7 +28829,7 @@ class ProgressIndicator {
                 ? `Progress: all ${totalSteps} ${totalSteps === 1 ? 'step' : 'steps'} complete`
                 : `Progress: step ${currentStepNumber} of ${totalSteps}`
             : 'Progress';
-        return (hAsync(Host, { key: '2fa8128b81b665f0733e3c905cb99eaa1917e719', class: hostClasses, role: "group", "aria-label": ariaLabel }, hAsync("div", { key: '279079d456f72748c77ac9f06281c838307ba092', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
+        return (hAsync(Host, { key: 'fd361d06ed53a837d2f585f4c7d1d212cf6cad9b', class: hostClasses, role: "group", "aria-label": ariaLabel }, hAsync("div", { key: '88f819d70853796e7330bce7aab6a457c2ef959f', class: "xpl-progress-indicator-container", role: "list" }, steps.map((step, index) => this.renderStep(step, index)))));
     }
     static get watchers() { return {
         "steps": [{
@@ -28877,14 +28877,14 @@ class Radio {
         return Boolean(this.checked);
     }
     render() {
-        return (hAsync(Host, { key: 'e3626967beb86dee46de974dd2a3c8993314d2d0', class: {
+        return (hAsync(Host, { key: '45436282d29873a5c640519eb4ad9aa3afb25b73', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: !!this.styled,
                 disabled: !!this.disabled,
-            } }, hAsync("input", { key: 'cdc8d7968dd78031f33b4f72024698f7afec27cf', class: "xpl-radio", type: "radio", checked: this.isChecked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), hAsync("label", { key: '5bb2243b7fe42b219d3fa3696c92321b116f8c72', class: {
+            } }, hAsync("input", { key: 'b0f7604cb5751f7fb2dc62960d5e7130d4fc0871', class: "xpl-radio", type: "radio", checked: this.isChecked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, onChange: this.onChange, value: this.value }), hAsync("label", { key: '05d3589852ebcf9ce5c3301cbc685547a45b61d4', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': !!this.disabled,
-            }, htmlFor: this.id }, hAsync("slot", { key: '85f1bf2c73111b8f5c0b0ae26343f590c8a50faf' }), this.description && (hAsync("small", { key: '6452b050fe0df584373a45d105434fe31a8a82ba', class: {
+            }, htmlFor: this.id }, hAsync("slot", { key: '8790f97ad02c180680de269f2f4a0986736c5d4e' }), this.description && (hAsync("small", { key: '94a8e1eea919b8cfe7b4074702dce50e7399c6ab', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': !!this.disabled,
             } }, this.description)))));
@@ -28914,7 +28914,7 @@ class SecondaryNav {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '6fd3db4309ecb98fb1739fd69d964297a77a46eb', class: "xpl-secondary-nav" }, hAsync("nav", { key: 'c08a1df306cee05760b6761409ebfb4ba87c2e4f', "aria-label": "Secondary Nav" }, hAsync("slot", { key: '9d5d0657bdd581bce000f1ace49be8c1d018fe47' }))));
+        return (hAsync(Host, { key: 'dc00b09e91c4baa484084256b7b583363a518905', class: "xpl-secondary-nav" }, hAsync("nav", { key: 'daf32568baecfa600a6d51747446e82c0df44d1a', "aria-label": "Secondary Nav" }, hAsync("slot", { key: '6d6a2fa94e8779b7a4b9414fe29829eb1ee20125' }))));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -29199,21 +29199,21 @@ class Select {
             this.truncate &&
             !this.customDisplayValue;
         const truncatedText = `+ ${Math.abs(this.choicesState.filter((a) => a.isSelected).length - this.visibleChoices)} more`;
-        return (hAsync(Host, { key: 'b080c68630c2c0c6bfeffb6ce27c9b9363898ecc', class: {
+        return (hAsync(Host, { key: '62414ef316ff722af90623136e62c5f875e0bfc4', class: {
                 'xpl-select': true,
                 'xpl-select--disabled': !!this.disabled,
                 'xpl-select--no-truncate': !this.truncate,
                 [this.classNames ?? '']: !!this.classNames,
             }, onKeyDown: this.handleTabKeyDown, ref: (el) => {
                 this.container = el;
-            } }, this.renderLabel(), hAsync("div", { key: 'c2913a9da7988d4e24fd788718637bcebd93fcb6', class: {
+            } }, this.renderLabel(), hAsync("div", { key: '482e2b4e6df0db28031f12f8eeca802f31c36b9b', class: {
                 'xpl-input': true,
                 'xpl-input--disabled': !!this.disabled,
                 'xpl-input--error': this.error !== undefined,
-            } }, hAsync("div", { key: '58ea7fdb31c591b2726258d786ca5550219bcd89', class: "xpl-input-wrapper" }, hAsync("button", { key: 'c4c2b2f0a90cd4ef407b8797fd65b86062387678', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
+            } }, hAsync("div", { key: 'dba46fe22c91e80c4ef7cc279deffb5d054f6d82', class: "xpl-input-wrapper" }, hAsync("button", { key: '9c0ff42202efcfe30a21b599b30271412dd7bba5', class: "xpl-select__trigger", disabled: this.disabled, id: this.id, onKeyDown: this.handleTabKeyDown, onClick: (e) => {
                 e.preventDefault();
                 this.handleDropdownTrigger();
-            }, type: "button" }, hAsync("div", { key: '7ddc58167d4363991c92d90ee6e0881f04bc725f', class: {
+            }, type: "button" }, hAsync("div", { key: '81a43dce597ffd11cb06595361cfd30cc33d24b1', class: {
                 'xpl-select-value': true,
                 'xpl-select-value--active': this.mode === 'multi' && this.value.length > 0,
                 'has-value': this.value.length > 0,
@@ -29233,7 +29233,7 @@ class Select {
                 return this.renderSelectedTags();
             }
             return this.placeholder;
-        })(), isTextTruncated && truncatedText), hAsync("xpl-icon", { key: '8640f1e46263c802edf0e9b18f53d2eb6b2a78a3', class: "xpl-select__chevron-down", icon: this.selectIcon ?? 'chevron-down' }))), !this.disabled && (hAsync("xpl-dropdown", { key: '6fb8d97e175894715a6dbc6ed17bc5b15829ed13', ref: (el) => {
+        })(), isTextTruncated && truncatedText), hAsync("xpl-icon", { key: '6edc9dcc1ff869d5c715ca143d05e4caac8664f9', class: "xpl-select__chevron-down", icon: this.selectIcon ?? 'chevron-down' }))), !this.disabled && (hAsync("xpl-dropdown", { key: '999afef231d38e5ab4271359ccbd71d85ffb65b9', ref: (el) => {
                 this.dropdown = el ?? null;
             }, isOpen: this.dropdownOpenState, options: this.choicesState, selectedValues: this.selectedValues, mode: this.mode, triggerId: this.id, update: (_e, { component }) => {
                 const { options } = component;
@@ -29242,7 +29242,7 @@ class Select {
                 }
             }, onIsOpenChange: (e) => {
                 this.dropdownOpenState = e.detail;
-            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true, flipFallbackPlacements: this.dropdownFlipFallbackPlacements, placement: this.dropdownPlacement })), this.renderError()), hAsync("input", { key: '734ef739b61de3320ce777994853cb90ab8271d2', type: "hidden", name: this.name, value: this.value })));
+            }, onWheel: this.handleDropdownScroll, anchorToTrigger: true, flipFallbackPlacements: this.dropdownFlipFallbackPlacements, placement: this.dropdownPlacement })), this.renderError()), hAsync("input", { key: 'f3c1f01d5077af5ac0d2612ce4538ac861a33ac5', type: "hidden", name: this.name, value: this.value })));
     }
     static get watchers() { return {
         "choices": [{
@@ -29552,10 +29552,10 @@ class SideNav {
             ;
     }
     render() {
-        return (hAsync(Host, { key: '9d8ca908a77dd47e5789708ebb87e0e76ac5a22e', class: {
+        return (hAsync(Host, { key: '8cffb32c21217edd67117acb264f3df5587fa32d', class: {
                 'xpl-side-nav': true,
                 'xpl-side-nav--open': this.open,
-            } }, hAsync("xpl-button", { key: 'eab3df496e7ec249b78f76e9250361b1dccc3cd6', class: "xpl-side-nav__toggle", variant: "tertiary", iconOnly: true, icon: this.open ? 'sidebar-left-hide' : 'sidebar-left-show', "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onToggleClick }), hAsync("div", { key: '4f46792c09ff5c98ae87f27bfb3050c74b847c3f', class: "xpl-side-nav__wrapper" }, hAsync("nav", { key: '55a34c0ba7498f7ad531b519d5d9e6f6a225cfc9', class: "xpl-side-nav__content", "aria-label": this.label }, hAsync("div", { key: '8ff330aef09d3ae1624f8752efbff3a2720e55c5', class: "xpl-side-nav__scroll-area" }, this.hasHeaderSlot && (hAsync("div", { key: '19c0235f1b45454cbe8fd9403351cfabebc5f539', class: "xpl-side-nav__header" }, hAsync("slot", { key: '77a3a18b401714a746c8d8f0d2457e9a949068ca', name: "nav-header" }))), hAsync("div", { key: '8a7c00b508d238f0043dc5dfc6c141d7255967bd', class: "xpl-side-nav__section" }, hAsync("slot", { key: 'b4b11bf6937840704cb9d40483e6b19014bd5236', name: "section" }))), hAsync("div", { key: '766bcd4652c5c680975a3c61c4b2fe4759351a4e', class: "xpl-side-nav__footer" }, hAsync("slot", { key: '04acabfdb7f27e8ed6b6569001493f985f344a1e', name: "nav-footer" })))), hAsync("xpl-backdrop", { key: '9e0c074fbb705e7b665672c79ed85e62e28d2e95', class: "xpl-side-nav__backdrop", onClick: this.onBackdropClick })));
+            } }, hAsync("xpl-button", { key: '5a82bbc6a65690f550fe192aa6cd593efbf86bc8', class: "xpl-side-nav__toggle", variant: "tertiary", iconOnly: true, icon: this.open ? 'sidebar-left-hide' : 'sidebar-left-show', "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Close navigation menu' : 'Open navigation menu', onClick: this.onToggleClick }), hAsync("div", { key: '1315f34c7a6e1c793cc347292117f2e5992f074d', class: "xpl-side-nav__wrapper" }, hAsync("nav", { key: '4b7446999c74b1554dae84d04c439a75b712b429', class: "xpl-side-nav__content", "aria-label": this.label }, hAsync("div", { key: 'bce43018bf61c73dde0adb053fa87d0789edd329', class: "xpl-side-nav__scroll-area" }, this.hasHeaderSlot && (hAsync("div", { key: 'd70ecd07a6c71dd76ce162b9167d3b5a11ba4ea8', class: "xpl-side-nav__header" }, hAsync("slot", { key: 'c9d10e57d77a69cf00e86c2a17a94eba5e54d23e', name: "nav-header" }))), hAsync("div", { key: '6873372f5eb854ee7ef88e6d3085d81be62fc508', class: "xpl-side-nav__section" }, hAsync("slot", { key: 'b07fdb332e8ccaaa69db61ade9bb88e43d6f8753', name: "section" }))), hAsync("div", { key: 'f34e444c538cbf246aee52ebfe35657a8fa1d706', class: "xpl-side-nav__footer" }, hAsync("slot", { key: 'da70c80d9378ad1e0dbf23d33d521021c346ee23', name: "nav-footer" })))), hAsync("xpl-backdrop", { key: '769576cb0961b8a00308c748d0efbaa0ef2b3ca5', class: "xpl-side-nav__backdrop", onClick: this.onBackdropClick })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29664,8 +29664,8 @@ class SideNavHeaderItem {
         const showTrailing = this.hasTrailingSlot || showAutoChevron;
         const leading = showLeading ? (hAsync("span", { class: "xpl-side-nav-header-item__leading" }, hAsync("slot", { name: "leading" }, this.icon ? hAsync("xpl-icon", { icon: this.icon, size: 16 }) : null))) : null;
         const trailing = showTrailing ? (hAsync("span", { class: "xpl-side-nav-header-item__trailing", "aria-hidden": showAutoChevron ? 'true' : undefined }, hAsync("slot", { name: "trailing" }, showAutoChevron ? (hAsync("xpl-icon", { icon: "chevron-expand-y", size: 16 })) : null))) : null;
-        const content = (hAsync("span", { key: 'ff3b2d318760011f01eb6fc3f2a7aefb8e4ff216', class: "xpl-side-nav-header-item__content" }, leading, hAsync("span", { key: '8675686f88cba081281fa76ffcbd9b1b9f121cac', class: "xpl-side-nav-header-item__label" }, this.label ?? ''), trailing));
-        return (hAsync(Host, { key: '1a35eb9ef7530a17b3adc06ebe8b06dc1adc6fa9', class: {
+        const content = (hAsync("span", { key: '3ea94d1fda38199a65303a9bf911de4a7d48aacc', class: "xpl-side-nav-header-item__content" }, leading, hAsync("span", { key: 'a3f369eb6e7bb4e9a283e8f525a356b152d9c017', class: "xpl-side-nav-header-item__label" }, this.label ?? ''), trailing));
+        return (hAsync(Host, { key: 'd979308c18fd071483cbbe8301ed90ffb842a9ac', class: {
                 'xpl-side-nav-header-item': true,
                 'xpl-side-nav-header-item--product-label': !isSubAccount,
                 'xpl-side-nav-header-item--sub-account': isSubAccount,
@@ -29830,14 +29830,14 @@ class SideNavItem {
             expanded: this.expanded,
             selected: this.selected,
         };
-        return (hAsync(Host, { key: '33de33212fc2c0fe5ed3ae6cd8aba38178052a03', class: {
+        return (hAsync(Host, { key: '059210d35fdf3561fa2bc4f541f80fbb1e570506', class: {
                 'xpl-side-nav-item': true,
                 'xpl-side-nav-item--link-disabled': this.link && this.disabled,
             } }, this.link ? (hAsync("slot", null)) : (hAsync("button", { type: "button", class: buttonClass, "aria-current": this.selected ? 'page' : undefined, "aria-expanded": this.hasChildren ? (this.expanded ? 'true' : 'false') : undefined, onClick: this.handleClick, disabled: this.disabled }, hAsync("span", { class: "xpl-side-nav-item__leading" }, hAsync("slot", { name: "leading" }, this.icon ? (hAsync("xpl-icon", { icon: this.icon, size: 16 })) : null)), hAsync("span", { class: "xpl-side-nav-item__label" }, this.label ?? ''), (this.hasTrailingSlot || this.hasChildren) && (hAsync("span", { class: {
                 'xpl-side-nav-item__trailing': true,
                 'xpl-side-nav-item__trailing--chevron': showAutoChevron,
                 expanded: showAutoChevron && this.expanded,
-            }, "aria-hidden": showAutoChevron ? 'true' : undefined }, hAsync("slot", { name: "trailing" }, showAutoChevron ? (hAsync("xpl-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: 16 })) : null))))), this.hasChildren && !this.link && (hAsync("div", { key: 'd9e6ea08b992177a943eb43e64702deee74a95d8', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, hAsync("div", { key: '7a5709e3c20d569fbc7ab1425280096dc21cb40f', class: "xpl-side-nav-item__children-inner" }, hAsync("slot", { key: '883d0336ad81eb78b52dab740440191e57f92618' }))))));
+            }, "aria-hidden": showAutoChevron ? 'true' : undefined }, hAsync("slot", { name: "trailing" }, showAutoChevron ? (hAsync("xpl-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: 16 })) : null))))), this.hasChildren && !this.link && (hAsync("div", { key: '47b1eba18028549e03394678bca58beee9b2f157', class: `xpl-side-nav-item__children ${this.expanded ? 'expanded' : ''}`, inert: !this.expanded ? true : undefined }, hAsync("div", { key: '7b6137a009106e3adfb99928bff429bea92b63e2', class: "xpl-side-nav-item__children-inner" }, hAsync("slot", { key: '3cf83a5e3e8367ef4d5bfbedb8c22bc6bf1efaa7' }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29952,17 +29952,17 @@ class SideNavSection {
         const hasHeading = !!this.heading?.trim();
         const childrenId = this.childrenId ?? ensureSideNavSectionChildrenId(this.el, this.childrenId);
         const titleRow = [
-            hAsync("span", { key: 'c3a19938fa87b21552b5fdff800baf2ee97c186c', class: "xpl-side-nav-section__title" }, this.heading ?? ''),
-            hAsync("span", { key: '9303238b226f336cbf0527ef91c2c5d8bce7771c', class: "xpl-side-nav-section__badge", hidden: !this.hasBadgeSlot }, hAsync("slot", { key: '40921f618390e462b0ac69adc0206acd82b884ca', name: "badge" })),
+            hAsync("span", { key: '41b4dd48eaf9fabca8f4c1e4e506200055d46f77', class: "xpl-side-nav-section__title" }, this.heading ?? ''),
+            hAsync("span", { key: 'af345692b55b47dada80dfad85312e45d7cf5f43', class: "xpl-side-nav-section__badge", hidden: !this.hasBadgeSlot }, hAsync("slot", { key: '381c23d89de7de9b1663cd746ce9561688a27463', name: "badge" })),
             this.collapsible ? (hAsync("span", { class: "xpl-side-nav-section__chevron", "aria-hidden": "true" }, hAsync("xpl-icon", { icon: this.expanded ? 'chevron-down' : 'chevron-right', size: 16 }))) : null,
         ];
-        return (hAsync(Host, { key: 'fae9c5e2d179a174aae5114a21a442fa787269ad', class: {
+        return (hAsync(Host, { key: 'b3d7e988d1b64afce020137c0d8f8ef89481ef43', class: {
                 'xpl-side-nav-section': true,
                 'xpl-side-nav-section--static': !this.collapsible,
-            } }, this.collapsible ? (hAsync("button", { type: "button", class: "xpl-side-nav-section__header", "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": childrenId, "aria-label": hasHeading || this.hasNamedBadgeSlot ? undefined : 'Toggle section', onClick: this.handleHeaderClick }, titleRow)) : (hAsync("div", { class: "xpl-side-nav-section__header" }, titleRow)), hAsync("div", { key: 'c33a5478f2c226b915fddf006802312eb7de29e9', id: childrenId, class: {
+            } }, this.collapsible ? (hAsync("button", { type: "button", class: "xpl-side-nav-section__header", "aria-expanded": this.expanded ? 'true' : 'false', "aria-controls": childrenId, "aria-label": hasHeading || this.hasNamedBadgeSlot ? undefined : 'Toggle section', onClick: this.handleHeaderClick }, titleRow)) : (hAsync("div", { class: "xpl-side-nav-section__header" }, titleRow)), hAsync("div", { key: '0e442a9a70a8eacb4b9454f941a3ee0c466c3496', id: childrenId, class: {
                 'xpl-side-nav-section__children': true,
                 expanded: showChildren,
-            }, inert: !showChildren ? true : undefined }, hAsync("div", { key: 'ed7de4040c1e5677ad3b74eb65fc4f6357bab3b6', class: "xpl-side-nav-section__children-inner" }, hAsync("slot", { key: '3f8434e92bb7fcdd7c8a825481a12ef24ba1da28' })))));
+            }, inert: !showChildren ? true : undefined }, hAsync("div", { key: 'f1bc884e69c5a8902f7e12829901e289f73a530e', class: "xpl-side-nav-section__children-inner" }, hAsync("slot", { key: 'bd9f9db68b6f6e1d3a28527d87f4bf797ae49022' })))));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -29988,7 +29988,7 @@ class Skeleton {
         this.size = 'custom';
     }
     render() {
-        return (hAsync(Host, { key: '4c8f4f0e0742c67f965d04aed382259cd120d922', class: {
+        return (hAsync(Host, { key: 'faa4173a2910d1dc3943fca5e7efbf5d1805aa9b', class: {
                 'xpl-skeleton': true,
                 [`xpl-skeleton--shape-${this.shape}`]: true,
                 [`xpl-skeleton--size-${this.size}`]: true,
@@ -30050,7 +30050,7 @@ class Slideout {
         this.handleScroll();
     }
     render() {
-        return (hAsync(Host, { key: '0031856dad46059b22c544b17d9c3c486fad49ef', class: "xpl-slideout" }, this.backdrop && this.isOpen && (hAsync("xpl-backdrop", { key: '476ebe60d3761a12edce8a70b79c5458a3a49b88', onClick: this.handleClose })), hAsync("aside", { key: 'e093e4f88719d109e1b76e5843fa799adf77023a', class: `slideout slideout--${!this.isOpen && 'closed'}` }, hAsync("header", { key: '861ce3bafb6f104cd088788e86d5dec891d34559', class: "header" }, hAsync("div", { key: 'f4a9a82d62a118acf4847ae32f6699755103cdeb', class: "title" }, hAsync("slot", { key: '142fabb21a5894d0e505b3555b1de49a3457f01a', name: "title" }), hAsync("xpl-button", { key: 'b5424c903db35139aca7070a223c3e8ccad0286d', class: "close-button", "icon-only": true, size: "sm", variant: "tertiary", onClick: this.handleClose }, hAsync("xpl-icon", { key: 'a7597b061ba78ec8877f4ca119ddfe4fb6f07057', icon: "xmark" }))), hAsync("div", { key: 'fbd6496bcd1854cbbe584a62a27621cc6c730472', class: "subtitle" }, hAsync("slot", { key: 'a9a059571945b74f064d1b4c6a672a7964ff20d7', name: "subtitle" })), hAsync("div", { key: '575d405c99e6a0ded114d274832d7c9a119f8acd', class: "search" }, hAsync("slot", { key: '6db25fde2a6decdfe2f280aae9f784b1e992d070', name: "search" }))), hAsync("xpl-divider", { key: 'dd382afb3181fbad00b1efacd438842c23249978', tier: 0, class: "divider top" }), hAsync("article", { key: 'a8832b326372ede5872d2004308f8dff30955e1a', class: "content", tabIndex: 0 }, hAsync("slot", { key: 'e46c7df8ebc6caecbc82117dd7b5097377dcf163', name: "content" })), this.showFooter && (hAsync("footer", { key: '41e237ffa63f9dfc50ca1792848f4087375edecc' }, hAsync("xpl-divider", { key: '888ece8b783152856696cf792c1db7abedd393fa', tier: 0, class: "divider bottom" }), hAsync("div", { key: '4ee6dcf7cb794ca32c3e0095b9d3ffdda2578870', class: "footer" }, hAsync("slot", { key: '286ecc097c88e7b6655fb27f707cb6163e49374b', name: "tertiary" }), hAsync("slot", { key: '9154a9de3de154cb8f228a00875d81b4c8d1899a', name: "secondary" }), hAsync("slot", { key: 'c510b271b930b8419b8ed26e4a9ce444453f9330', name: "primary" })))))));
+        return (hAsync(Host, { key: '6a677f3ef03392e8c17e96eb1a35244cc65249cc', class: "xpl-slideout" }, this.backdrop && this.isOpen && (hAsync("xpl-backdrop", { key: '8e93a0fe45fdbf00f9b9d72a3b703f4ed91724b7', onClick: this.handleClose })), hAsync("aside", { key: '451a572b79f74f614756c77b7aae9ece7e53a615', class: `slideout slideout--${!this.isOpen && 'closed'}` }, hAsync("header", { key: '4e6f0d5c525ffe16f20a2d85d21e6c85d6213f1e', class: "header" }, hAsync("div", { key: 'bf69e4a7e0be7b1ea763b5d17da90b31f122e7fe', class: "title" }, hAsync("slot", { key: 'b5b3298d2f05a5e99dc2ba934c306c7167eeb861', name: "title" }), hAsync("xpl-button", { key: 'da76c0538824d6d7cdce7385daf77c74fd3e6432', class: "close-button", "icon-only": true, variant: "tertiary", onClick: this.handleClose }, hAsync("xpl-icon", { key: '02d4e1b6d191683f95c5fe9d93db6a8eb6260e32', icon: "xmark" }))), hAsync("div", { key: 'daf09af3d4ec41943ca063fb0b0afddc6075e549', class: "subtitle" }, hAsync("slot", { key: '755b4e4f6bfdcc7f94f0b2ed67526d7f97c77842', name: "subtitle" })), hAsync("div", { key: '294b6650cdc4b15a8f5b9005a24304cccda91ddb', class: "search" }, hAsync("slot", { key: '4b85802d14eb9ab528749727846637a0702ff2d1', name: "search" }))), hAsync("xpl-divider", { key: '335792083b7072b6973e4b684062d6498d1cfc57', tier: 0, class: "divider top" }), hAsync("article", { key: '3a0920577f4599b0ea9a3762ea066b0e8b9d932a', class: "content", tabIndex: 0 }, hAsync("slot", { key: 'b085ef369c4d685ae0e6e518c28e95cd883d1e03', name: "content" })), this.showFooter && (hAsync("footer", { key: '663e2392d8484bb4875dcb4b9411b8ae6b805087' }, hAsync("xpl-divider", { key: '6d0d50a6cc038a19ed5465a9fe79854b2519e70b', tier: 0, class: "divider bottom" }), hAsync("div", { key: '29e9eaea051247ff8e9be18af54f0d3959590759', class: "footer" }, hAsync("slot", { key: '4e9d8e3a054a72fba8392afdefcdca63e8ce8068', name: "tertiary" }), hAsync("slot", { key: '44b764a99064de792309995cdc53b4ca8a82f8da', name: "secondary" }), hAsync("slot", { key: 'c96cedf9662bab571a8cab244c8fce6172691628', name: "primary" })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30953,10 +30953,10 @@ class TabPanel {
         const t = this.target ?? '';
         const panelId = tabPanelDomId(groupId, t);
         const labelledBy = tabTriggerId(groupId, t);
-        return (hAsync(Host, { key: 'b92d723fe68be63d6438fab8ae8f93a06122c29a', "aria-labelledby": labelledBy, class: {
+        return (hAsync(Host, { key: 'ab151f12048635eb5e47f4cbafcd6f04637f7dfd', "aria-labelledby": labelledBy, class: {
                 'xpl-tab-panel': true,
                 'xpl-tab-panel--selected': this.selected,
-            }, id: panelId, role: "tabpanel" }, hAsync("slot", { key: 'e18aeb92b7082c0c2e809396570b43ac41c34f87' })));
+            }, id: panelId, role: "tabpanel" }, hAsync("slot", { key: '81d82c0f3d8b019ec0abf6cbec34529b216b6533' })));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -30972,6 +30972,53 @@ class TabPanel {
     }; }
 }
 
+const XPL_TABLE_COLUMN_WIDTHS_CHANGE_EVENT = 'xplTableColumnWidthsChange';
+const TABLE_HEADER_CELL_MIN_WIDTH_PX = 48;
+const getGridColumnWidthFromHeaderCell = (cell) => {
+    if (cell.tagName.toLowerCase() !== 'xpl-table-header-cell') {
+        return 'auto';
+    }
+    const host = cell;
+    const fromProp = typeof host.columnWidth === 'string' ? host.columnWidth.trim() : '';
+    const fromAttr = cell.getAttribute('column-width')?.trim() ?? '';
+    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':
@@ -30982,58 +31029,148 @@ 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 ?? 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;
+}
 class Table {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.tableSelect = createEvent(this, "tableSelect", 7);
+        this.rowOrderChange = createEvent(this, "rowOrderChange", 3);
+        this.rowSelectionChange = createEvent(this, "rowSelectionChange", 3);
         this.sortChanged = createEvent(this, "sortChanged", 3);
-        this.selectedValues = [];
-        this.isSortable = false;
-        this.sortableColumns = [];
+        this.tableSelect = createEvent(this, "tableSelect", 7);
+        this.columnWidthsToken = '';
+        this.lastEmittedRowSelectionKey = '';
+        this.draggedRow = null;
+        this.pendingDragRow = null;
+        this.pointerUpClearPending = null;
+        this.reorderKeyboardTimers = new TimerManager();
+        this.onReorderHandleKeydown = (ev) => {
+            this.handleReorderHandleKeyDown(ev);
+        };
         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.rowReorderable = false;
+        this.selectedValues = [];
+        this.sortableColumns = [];
+        this.onGridScroll = (e) => {
+            this.hasScrolled = e.target.scrollLeft > 0;
+        };
         this.selectAll = (e) => {
-            const checked = e.detail;
+            const { target } = e;
+            if (!(target instanceof HTMLInputElement))
+                return;
+            const { checked } = target;
             this.areAllSelected = checked;
             this.selected =
-                this.selectedValues.length > 0
-                    ? Array.from(this.el.querySelectorAll('tbody td:first-child xpl-checkbox')).map((checkbox) => (checked ? (checkbox.value ?? checked) : checked))
+                this.selectedValues && this.selectedValues.length > 0
+                    ? Array.from(this.el.querySelectorAll('tbody td:first-child input')).map((input) => (checked ? input?.value : checked))
                     : this.selected.map(() => checked);
-            this.onChange();
+            this.onSelectionChange();
         };
         this.selectOne = (e, checkboxIdx) => {
-            const checked = e.detail;
-            const { value } = e.target;
+            const { target } = e;
+            if (!(target instanceof HTMLInputElement))
+                return;
+            const { checked, value } = target;
+            this.areAllSelected = false;
             this.selected = this.selected.map((v, selectedIdx) => {
                 if (selectedIdx !== checkboxIdx)
                     return v;
-                return this.selectedValues.length > 0
+                return this.selectedValues && this.selectedValues.length > 0
                     ? checked
-                        ? (value ?? checked)
+                        ? value
                         : checked
                     : checked;
             });
-            this.areAllSelected = this.selected.every((v) => !!v);
-            this.onChange();
+            this.onSelectionChange();
         };
-        this.onChange = () => {
+        this.onSelectionChange = () => {
             this.tableSelect.emit({
                 selected: this.selected,
                 areAllSelected: this.areAllSelected,
             });
         };
-        this.onScroll = () => {
+        this.onLegacyScroll = () => {
             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]) {
@@ -31044,17 +31181,1062 @@ class Table {
                     this.rowData.sort((a, b) => handleSort(b, a));
                     break;
                 default:
-                    this.rowData = this.data ? Array.from(this.data) : [];
+                    this.rowData = this.data !== undefined ? Array.from(this.data) : [];
                     this.sortTypeArray[col] = null;
                     break;
             }
-            this.rowData = Array.from(this.rowData);
+            this.rowData = Array.from(this.rowData);
+        };
+        this.setData = () => {
+            this.rowData = this.data !== undefined ? Array.from(this.data) : [];
+        };
+        this.setFooterData = () => {
+            this.rowFooterData = this.footer !== undefined ? Array.from(this.footer) : [];
+        };
+    }
+    watchColumns() {
+        this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
+    }
+    watchData() {
+        this.setData();
+    }
+    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) => {
+                r.removeAttribute('draggable');
+                r.querySelector('.xpl-table__row-drag-handle')?.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();
+        }
+    }
+    componentWillLoad() {
+        if (this.isLegacyMode) {
+            this.ensureSelectAllValue();
+            this.areAllSelected = false;
+            this.setData();
+            this.setFooterData();
+            this.selected = new Array(this.rowData.length).fill(false);
+            this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
+        }
+    }
+    ensureSelectAllValue() {
+        if (this.selectAllValue !== undefined) {
+            return;
+        }
+        const hostId = this.el.id?.trim();
+        if (hostId) {
+            this.selectAllValue = `${hostId}-select-all`;
+            return;
+        }
+        const persisted = this.el.getAttribute('data-select-all-value');
+        if (persisted) {
+            this.selectAllValue = persisted;
+            return;
+        }
+        Table.selectAllSeq += 1;
+        this.selectAllValue = `select-all-${Table.selectAllSeq}`;
+        this.el.setAttribute('data-select-all-value', this.selectAllValue);
+    }
+    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) {
+        if (this.isLegacyMode || !this.selectable)
+            return;
+        if (!this.isEventFromThisTable(ev.target))
+            return;
+        const path = ev.composedPath?.() ?? [];
+        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') ?? undefined;
+        }
+        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) {
+        if (this.isLegacyMode || !this.selectable)
+            return;
+        if (!this.isEventFromThisTable(ev.target))
+            return;
+        const path = ev.composedPath?.() ?? [];
+        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') {
+            const maybeCell = ev.target.closest('xpl-table-header-cell[type="checkbox"]');
+            if (maybeCell instanceof HTMLElement) {
+                headerCell = maybeCell;
+            }
+        }
+        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) {
+        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 = Table.getRowIdForRow(row) ?? '';
+        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);
+        };
+    }
+    handleRowReorderDragStart(ev) {
+        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', Table.getRowIdForRow(row) ?? '');
+        }
+        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;
+        }
+        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) {
+        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 = Table.getRowIdForRow(source) ?? '';
+        const runMove = () => {
+            moveRowInTableBody(body, source, dropRow);
+        };
+        runMove();
+        const orderedRowIds = this.getVisibleBodyRowsForReorder().map((r) => Table.getRowIdForRow(r) ?? '');
+        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) {
+        const el = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === tag);
+        return el ?? 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) {
+        const id = row.getAttribute('row-id')?.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) => {
+            if (!(node instanceof Element))
+                return;
+            if (node.closest('xpl-table') !== this.el)
+                return;
+            node.parentElement?.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() {
+        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 = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header') ?? null;
+        if (header) {
+            const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
+            const container = 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() {
+        const header = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header') ?? null;
+        if (!header)
+            return;
+        const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
+        const container = 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) => {
+            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(Table.getRowIdForRow(row) ?? '');
+                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) {
+        const inKeyboardMode = this.keyboardReorderRowId !== null &&
+            rowId !== '' &&
+            rowId === this.keyboardReorderRowId;
+        if (inKeyboardMode) {
+            if (this.reorderHandleIconKeyboard === '') {
+                return null;
+            }
+            return this.reorderHandleIconKeyboard ?? 'caret-expand-y';
+        }
+        if (this.reorderHandleIcon === '') {
+            return null;
+        }
+        return this.reorderHandleIcon ?? 'grip-dots-vertical';
+    }
+    syncInjectedReorderHandleIcons() {
+        this.queryBodyRows().forEach((row) => {
+            const btn = row.querySelector('.xpl-table__row-drag-handle');
+            if (!btn) {
+                return;
+            }
+            const rowId = Table.getRowIdForRow(row) ?? '';
+            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) => {
+            const btn = row.querySelector('.xpl-table__row-drag-handle');
+            if (!btn) {
+                return;
+            }
+            const rid = Table.getRowIdForRow(row) ?? '';
+            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) => Table.getRowIdForRow(r) ?? '');
+        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?.querySelector('.xpl-table__row-drag-handle');
+            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?.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) {
+        const cells = Table.getBodyRowCells(row);
+        const labelCell = cells.find((c, i) => (selectionColIndex === null || i !== selectionColIndex) &&
+            !c.hasAttribute(ROW_REORDER_MARK));
+        const first = labelCell ?? cells[0];
+        if (!first)
+            return 'Select row';
+        const raw = first.textContent?.replace(/\s+/g, ' ').trim() ?? '';
+        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?.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) {
+        const c = cell;
+        const raw = (c.sortKey ?? c.label ?? '').trim();
+        if (raw.length > 0) {
+            return raw.replace(/ /g, '-').toLowerCase();
+        }
+        return `column-${columnIndex}`;
+    }
+    handleCompositionalHeaderSort(ev) {
+        if (this.isLegacyMode)
+            return;
+        if (!this.isEventFromThisTable(ev.target))
+            return;
+        ev.stopPropagation();
+        const source = ev.target;
+        const headerRow = source.closest('xpl-table-header xpl-table-row') ?? 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?.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) => {
+            const hc = cell;
+            if (!hc.sortable)
+                return;
+            sortState[Table.sortKeyFromHeaderCell(hc, i)] = hc.sortDirection ?? null;
+        });
+        const sortTypeArr = cells.map((cell) => {
+            const hc = cell;
+            return hc.sortable ? (hc.sortDirection ?? null) : null;
+        });
+        const colName = Table.sortKeyFromHeaderCell(cells[columnIndex], columnIndex);
+        const detail = {
+            ...sortState,
+            colNum: columnIndex,
+            colName,
+            sortTypeArr,
         };
-        this.setData = () => {
-            this.rowData = this.data !== undefined ? Array.from(this.data) : [];
+        this.sortChanged.emit(detail);
+    }
+    legacySortStatePayload() {
+        const out = {};
+        if (!this.columns?.length)
+            return out;
+        this.columns.forEach((col, i) => {
+            const key = col.replace(/ /g, '-').toLowerCase();
+            out[key] = this.sortTypeArray[i] ?? null;
+        });
+        return out;
+    }
+    legacySortChangedDetail(colNum) {
+        const base = this.legacySortStatePayload();
+        const title = this.columns?.[colNum] ?? '';
+        const colName = title.replace(/ /g, '-').toLowerCase();
+        return {
+            ...base,
+            colNum,
+            colName,
+            sortTypeArr: [...this.sortTypeArray],
         };
     }
-    handleSort(clickEvt, isColumnSortable, colNum, colName) {
+    getCompositionalHeaderCells() {
+        const header = Array.from(this.el.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-header') ?? null;
+        if (!header)
+            return [];
+        const firstRow = Array.from(header.children).find((c) => c.tagName.toLowerCase() === 'xpl-table-row');
+        const container = 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)
@@ -31071,104 +32253,112 @@ class Table {
                     return 'asc';
             }
         });
-        const evt = this.sortChanged.emit({
-            colNum,
-            colName,
-            sortTypeArr: this.sortTypeArray,
-        });
+        const evt = this.sortChanged.emit(this.legacySortChangedDetail(colNum));
         if (!evt.defaultPrevented)
             this.sortBy(colNum, this.sortTypeArray);
     }
-    watchData() {
-        this.setData();
-    }
-    watchColumns() {
-        this.sortTypeArray = this.columns ? this.columns.map(() => null) : [];
-    }
-    componentWillLoad() {
-        this.ensureSelectAllValue();
-        this.areAllSelected = false;
-        this.setData();
-        this.selected = new Array(this.rowData.length).fill(false);
-        this.ensureSortTypeArray();
-    }
-    ensureSelectAllValue() {
-        if (this.selectAllValue !== undefined) {
-            return;
-        }
-        const hostId = this.el.id?.trim();
-        if (hostId) {
-            this.selectAllValue = `${hostId}-select-all`;
-            return;
-        }
-        const persisted = this.el.getAttribute('data-select-all-value');
-        if (persisted) {
-            this.selectAllValue = persisted;
-            return;
-        }
-        Table.selectAllSeq += 1;
-        this.selectAllValue = `select-all-${Table.selectAllSeq}`;
-        this.el.setAttribute('data-select-all-value', this.selectAllValue);
-    }
-    ensureSortTypeArray() {
+    renderLegacy() {
         if (this.columns &&
             (!this.sortTypeArray || this.sortTypeArray.length !== this.columns.length)) {
             this.sortTypeArray = this.columns.map(() => null);
         }
-        else if (!this.columns) {
-            this.sortTypeArray = [];
-        }
-    }
-    render() {
-        const rowFooterData = this.footer !== undefined ? Array.from(this.footer) : [];
-        return (hAsync(Host, { key: '1e6bf436320a44e1e22e8590a881bc90c4a091d5' }, hAsync("div", { key: '3d2e5361fbe615a6ae8ebe916ce07e00f82c444c', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+        return (hAsync(Host, null, hAsync("div", { class: "xpl-table-container", onScroll: this.onLegacyScroll, ref: (el) => {
                 if (el)
                     this.container = el;
-            } }, hAsync("table", { key: '036672b3ba45a90a42f906c155ce3d59e33c8a7a', class: {
+            } }, hAsync("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 && (hAsync("thead", { key: 'bf0d5a808624234ba985c1c32064f1dab11bfefa' }, this.columns.map((column, i) => {
-            const iconType = getIconType(this.sortTypeArray?.[i]);
-            const isColumnSortable = !!(this.isSortable && this.sortableColumns[i]);
-            return (hAsync("th", null, hAsync("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i, column.replace(/ /g, '-').toLowerCase()), class: isColumnSortable ? 'cursor-pointer' : '' }, this.multiselect && i === 0 && (hAsync("xpl-checkbox", { checked: this.areAllSelected, indeterminate: !this.areAllSelected &&
-                    this.selected.some((a) => a), onClick: (e) => e.stopPropagation(), onCheckboxChange: (e) => this.selectAll(e), value: this.selectAllValue, "aria-label": "Select all rows" })), column, isColumnSortable && !!this.sortTypeArray[i] && (hAsync("xpl-icon", { icon: iconType, size: 16 })))));
-        }))), hAsync("tbody", { key: '7915dbfbf1a9b68719c4168e09c5f0e3ab7fa35a' }, this.rowData.map((row, rowNum) => (hAsync("tr", { class: this.selected && this.selected[rowNum]
+            } }, this.columns && (hAsync("thead", null, this.columns.map((column, i) => {
+            const iconType = getIconType(this.sortTypeArray?.[i] ?? null);
+            const isColumnSortable = !!(this.isSortable && this.sortableColumns?.[i]);
+            return (hAsync("th", null, hAsync("label", { onClick: (e) => this.handleSort(e, isColumnSortable, i), class: isColumnSortable ? 'cursor-pointer' : '' }, this.multiselect && i === 0 && (hAsync("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: this.selectAllValue })), column, isColumnSortable && !!this.sortTypeArray[i] && (hAsync("xpl-icon", { icon: iconType, size: 16 })))));
+        }))), hAsync("tbody", null, this.rowData.map((row, rowNum) => (hAsync("tr", { class: this.selected && this.selected[rowNum]
                 ? 'xpl-table-row-selected'
-                : '' }, row.map((cell, i) => (hAsync("td", null, this.multiselect && i === 0 ? (hAsync("label", null, hAsync("xpl-checkbox", { checked: !!this.selected[rowNum], onCheckboxChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues.length > 0
+                : '' }, row.map((cell, i) => (hAsync("td", null, this.multiselect && i === 0 ? (hAsync("label", { htmlFor: `__xpl-table-row-${rowNum}` }, hAsync("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues &&
+                this.selectedValues.length > 0
                 ? this.selectedValues[rowNum]
-                : `xpl-table-checkbox-${rowNum}`, "aria-label": `Select row ${rowNum + 1}` }), hAsync("div", { innerHTML: cell }))) : (hAsync("div", { innerHTML: cell }))))))))), rowFooterData.length > 0 && (hAsync("tfoot", { key: '78ee72f80c77e61c6234be9500770780952ca669' }, rowFooterData.map((row) => (hAsync("tr", null, row.map((cell) => (hAsync("td", null, hAsync("div", { innerHTML: cell })))))))))))));
+                : `xpl-table-checkbox-${rowNum}` }), hAsync("div", { innerHTML: cell }))) : (hAsync("div", { innerHTML: cell }))))))))), this.rowFooterData?.length > 0 && (hAsync("tfoot", null, this.rowFooterData.map((row) => (hAsync("tr", null, row.map((cell) => (hAsync("td", null, hAsync("div", { innerHTML: cell })))))))))))));
+    }
+    renderCompositional() {
+        const selectionToolbarCount = this.selectedRowIds.length;
+        return (hAsync(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 && (hAsync("div", { class: "xpl-table__reorder-live", "aria-live": "assertive", "aria-atomic": "true" }, this.reorderLiveMessage)), this.selectable && (hAsync("div", { class: {
+                'xpl-toolbar': true,
+                hidden: selectionToolbarCount === 0,
+                'xpl-table__toolbar': true,
+            } }, hAsync("div", { class: "toolbar" }, hAsync("p", { class: "selected-item-count" }, selectionToolbarCount, " Selected"), hAsync("div", { class: "actions" }, hAsync("slot", { name: "toolbar-actions-left" }), hAsync("slot", { name: "toolbar-actions-right" }))))), hAsync("slot", null)));
+    }
+    render() {
+        return this.isLegacyMode ? this.renderLegacy() : this.renderCompositional();
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "columns": [{
+                "watchColumns": 0
+            }],
         "data": [{
                 "watchData": 0
             }],
-        "columns": [{
-                "watchColumns": 0
+        "footer": [{
+                "watchFooterData": 0
+            }],
+        "reorderHandleIcon": [{
+                "watchReorderHandleIcon": 0
+            }],
+        "reorderHandleIconKeyboard": [{
+                "watchReorderHandleIconKeyboard": 0
+            }],
+        "rowReorderable": [{
+                "watchRowReorderable": 0
+            }],
+        "selectable": [{
+                "watchSelectable": 0
             }]
     }; }
     static get cmpMeta() { return {
-        "$flags$": 0,
+        "$flags$": 260,
         "$tagName$": "xpl-table",
         "$members$": {
             "columns": [16],
             "data": [16],
             "footer": [16],
             "freeze": [4],
+            "isSortable": [4, "is-sortable"],
+            "label": [1],
             "multiselect": [4],
-            "striped": [4],
+            "reorderHandleIcon": [1, "reorder-handle-icon"],
+            "reorderHandleIconKeyboard": [1, "reorder-handle-icon-keyboard"],
+            "rowReorderable": [4, "row-reorderable"],
+            "selectable": [4],
             "selectedValues": [16],
-            "isSortable": [4, "is-sortable"],
             "sortableColumns": [16],
+            "striped": [4],
             "areAllSelected": [32],
-            "rowData": [32],
+            "colCount": [32],
             "hasScrolled": [32],
+            "keyboardReorderRowId": [32],
+            "reorderLiveMessage": [32],
+            "rowData": [32],
+            "rowFooterData": [32],
             "selected": [32],
+            "selectedRowIds": [32],
             "sortTypeArray": [32]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[0, "xplTableColumnWidthsChange", "handleHeaderCellColumnWidthsChange"], [0, "checkboxChange", "handleCompositionalCheckboxChange"], [0, "headerCheckboxChange", "handleCompositionalHeaderCheckboxChange"], [3, "pointerdown", "handlePointerDownExitKeyboardReorder"], [3, "pointerdown", "handleRowReorderPointerDown"], [3, "dragstart", "handleRowReorderDragStart"], [3, "dragend", "handleRowReorderDragEnd"], [2, "dragover", "handleRowReorderDragOver"], [2, "dragenter", "handleRowReorderDragEnter"], [3, "dragleave", "handleRowReorderDragLeave"], [2, "drop", "handleRowReorderDrop"], [0, "headerSortChange", "handleCompositionalHeaderSort"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -31180,7 +32370,7 @@ class TableHeader {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '94e6c6f38fa4672ef3c728bf196946801da855d4', role: "row", class: "xpl-table-header" }, hAsync("slot", { key: 'fa41686f082c65d27555273945f734a36c670869' })));
+        return (hAsync(Host, { key: 'fb6c6d0ab301f41a22428583ffa0fea60a30719b', role: "row", class: "xpl-table-header" }, hAsync("slot", { key: '54b058d43266fa281e30d26a644ad93d6559408b' })));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -31195,69 +32385,146 @@ class TableHeader {
 class TableHeaderCell {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sortChanged = createEvent(this, "sortChanged", 7);
-        this.sortable = false;
+        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.sortDirection = 'none';
+        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,
+            });
+        };
     }
-    toggleSort() {
-        if (this.sortDirection === 'asc') {
-            this.sortDirection = 'desc';
-        }
-        else if (this.sortDirection === 'desc') {
-            this.sortDirection = 'none';
+    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() {
+        return Array.from(this.el.parentElement?.children ?? []).indexOf(this.el);
+    }
+    getSortKeySlug() {
+        const raw = (this.sortKey ?? this.label ?? '').trim();
+        if (raw.length > 0) {
+            return raw.replace(/ /g, '-').toLowerCase();
         }
-        else {
-            this.sortDirection = 'asc';
+        return `column-${this.getColumnIndex0()}`;
+    }
+    renderLabelText() {
+        return (hAsync("span", { class: "xpl-table-header-cell__text" }, this.label, hAsync("slot", null)));
+    }
+    renderLabelContent() {
+        if (this.sortable) {
+            const iconName = getSortAffordanceIconName(this.sortDirection);
+            const sortActive = this.sortDirection === 'asc' || this.sortDirection === 'desc';
+            return (hAsync("button", { type: "button", class: "xpl-table-header-cell__sort", onClick: this.onSortActivate }, this.renderLabelText(), hAsync("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 })));
         }
-        this.sortChanged.emit(this.sortDirection);
+        return this.renderLabelText();
     }
     render() {
-        const colIndex = this.el.parentElement
-            ? Array.from(this.el.parentElement.children).indexOf(this.el) + 1
-            : 0;
+        const colIndex = this.getColumnIndex0() + 1;
         const renderContent = () => {
             switch (this.type) {
                 case 'label':
-                    return hAsync("span", null, this.label);
+                    return this.renderLabelContent();
                 case 'checkbox':
-                    return hAsync("xpl-checkbox", null);
+                    return (hAsync("xpl-checkbox", { ariaLabel: this.checkboxAriaLabel ?? 'Select all rows', checked: this.checked, indeterminate: this.indeterminate, onCheckboxChange: this.onHeaderInnerCheckboxChange }));
                 case 'icon':
                     return this.icon ? hAsync("xpl-icon", { icon: this.icon, size: 20 }) : null;
+                case 'empty':
+                    return null;
                 default:
                     return '';
             }
         };
-        const renderSortIcon = () => {
-            switch (this.sortDirection) {
-                case 'none':
-                    return hAsync("xpl-icon", { class: "sort-icon", icon: "arrow-down", size: 16 });
-                case 'asc':
-                    return (hAsync("xpl-icon", { class: "sort-icon sort-icon--sorted", icon: "arrow-up", size: 16 }));
-                case 'desc':
-                    return (hAsync("xpl-icon", { class: "sort-icon sort-icon--sorted", icon: "arrow-down", size: 16 }));
-                default:
-                    return '';
-            }
-        };
-        return (hAsync(Host, { role: "columnheader", "aria-colindex": colIndex, class: `xpl-table-header-cell ${this.sortable ? 'sortable' : 'non-sortable'}`, style: { width: `${this.width}px` } }, this.sortable ? (hAsync("button", { onClick: () => this.toggleSort() }, renderContent(), renderSortIcon())) : (renderContent())));
+        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 (hAsync(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
+            }]
+    }; }
     static get cmpMeta() { return {
-        "$flags$": 0,
+        "$flags$": 260,
         "$tagName$": "xpl-table-header-cell",
         "$members$": {
+            "align": [1],
+            "checkboxAriaLabel": [1, "checkbox-aria-label"],
+            "checked": [4],
+            "columnWidth": [513, "column-width"],
             "icon": [1],
-            "sortable": [4],
+            "indeterminate": [4],
             "label": [1],
-            "type": [1],
-            "width": [2],
-            "sortDirection": [32]
+            "sortDirection": [1537, "sort-direction"],
+            "sortKey": [1, "sort-key"],
+            "sortable": [4],
+            "type": [513],
+            "width": [514]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
+        "$attrsToReflect$": [["columnWidth", "column-width"], ["sortDirection", "sort-direction"], ["type", "type"], ["width", "width"]]
     }; }
 }
 
@@ -31585,11 +32852,11 @@ class Tabs {
     }
     render() {
         const isSegment = this.type === 'segment';
-        return (hAsync(Host, { key: '74e82ed3665bf7d8337d16f6253c2ae79d421473', class: {
+        return (hAsync(Host, { key: '0bb77237fce464cc536ce4efabb29249fa14ef4a', class: {
                 'xpl-tabs': true,
                 'xpl-tabs--full-width': this.fullWidth,
                 'xpl-tabs--segment': isSegment,
-            }, "data-choices-tick": this.choicesTick }, hAsync("xpl-select", { key: '8b706667897c20145cdd528b692affb0db7f7ebc', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
+            }, "data-choices-tick": this.choicesTick }, hAsync("xpl-select", { key: 'fbcc113cc9a308df73bf99f6c941612725e49ddb', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
                 if (event.detail) {
                     this.isMobileSelectChange = true;
                 }
@@ -31600,17 +32867,17 @@ class Tabs {
                     this.tabChange.emit(selectedValue);
                     this.isMobileSelectChange = false;
                 }
-            } }), hAsync("nav", { key: 'd23f6edc5da0525e4c8fc10aa30af64986fdda36', "aria-orientation": "horizontal", class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
+            } }), hAsync("nav", { key: '1b93068116c5ff0ac94d5139e147daffc1157c73', "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 && (hAsync("div", { key: 'd2d080ffc049a408f2d93f3ce3bc694c0954ece3', class: "xpl-tabs__active-bar", style: {
+            } }, !isSegment && (hAsync("div", { key: '38a88df2520d308e3a22b4cd70ff274af7403616', class: "xpl-tabs__active-bar", style: {
                 transform: `translateX(${this.activeBarPosition.left}px)`,
                 width: `${this.activeBarPosition.width}px`,
-            } })), hAsync("slot", { key: '8c4b1403048b0eba5125abfc22494641aaf955cf', name: "heading" })), hAsync("div", { key: '54a04bd883f364457cdf5922cad8ac2b42eceb61', class: "xpl-tabs__panels" }, hAsync("slot", { key: '2b51ebd00605dfbd76c6018d74f63f954016a025', name: "panel" }))));
+            } })), hAsync("slot", { key: 'dc30ab2123d7c1c8b6591ac0129af44da3795977', name: "heading" })), hAsync("div", { key: '36c1fc45216499d4af87b8fc536df3ea6af666ab', class: "xpl-tabs__panels" }, hAsync("slot", { key: 'a660913c7d2fce500da666490b600b4c7fc93746', name: "panel" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31771,7 +33038,7 @@ class Tag {
     }
     render() {
         const dragEnabled = this.isDraggable && !this.disabled;
-        return (hAsync(Host, { key: '4129a867a9581efc82985d11549810860a2c6f87', class: {
+        return (hAsync(Host, { key: '9a05e10e7fbc047112f740884e6ba40c773b472c', class: {
                 'xpl-tag': true,
                 'xpl-tag-container': true,
                 'xpl-tag--disabled': this.disabled,
@@ -31779,7 +33046,7 @@ class Tag {
                 '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 ? (hAsync("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 }, hAsync("slot", null))) : (hAsync("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, hAsync("slot", null))), this.dismissible && (hAsync("button", { key: 'fb10e5fe87053ff4c00f584d887e1f5c29b2dc74', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, hAsync("xpl-icon", { key: 'e8afb0b6fbf1a942cce78cf6a26b420445094f30', icon: "xmark", size: 10 })))));
+            }, onDragOver: dragEnabled ? this.handleDragOver : undefined, onDragEnter: dragEnabled ? this.handleDragEnter : undefined, onDragStart: this.isDraggable ? this.handleHostDragStart : undefined }, dragEnabled ? (hAsync("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 }, hAsync("slot", null))) : (hAsync("button", { class: "xpl-tag__content xpl-tag", type: "button", disabled: this.disabled, onClick: this.handleTagClick }, hAsync("slot", null))), this.dismissible && (hAsync("button", { key: '37f7687aa9675c52cbd4390d66d63ced630904d0', class: "xpl-tag__dismiss xpl-tag__close", type: "button", draggable: false, disabled: this.disabled, "aria-label": `Dismiss ${this.dismissAriaLabelSuffix}`, onClick: this.handleDismissClick }, hAsync("xpl-icon", { key: '104eac0362541d99c59e0fd6b18a5e1b2171030b', icon: "xmark", size: 10 })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31877,11 +33144,11 @@ class Toast {
         }
     }
     render() {
-        return (hAsync(Host, { key: '8628e33a84d0ca36d5b99c791cf7860cadae6fb8', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, hAsync("div", { key: 'd1ea50362731f7cef97152eac2962f4d4084c514', class: "xpl-toast__left" }, this.showIcon && (hAsync("div", { key: '7eab4f78d0f8a2f5af12eeb1d74b14c300914841', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), hAsync("div", { key: '335be6f702b7300498d2960cb7184fe1fec059b4', class: "xpl-toast__notification" }, hAsync("p", { key: '1178d039190352d0482ae7486711ab2adfd2cc8f', class: "xpl-toast__title" }, hAsync("slot", { key: '75a98536db36c7a140b3d908cbd8f3d2e201ca81', name: "title" })), this.caption !== '' && (hAsync("p", { key: '009bba836fe9abbf34edf4618dd172961e9440fa', class: "xpl-toast__caption" }, this.caption?.substring(0, 85))))), hAsync("div", { key: '4f47e498ea0c7627d9041a7a2e898fcecff9f59c', class: "xpl-toast__action", ref: (el) => {
+        return (hAsync(Host, { key: 'd51d901c62de43e0ad248a626e0447a7849e50f3', class: `xpl-toast xpl-toast--${this.variant}`, onAnimationEnd: this.handleAnimationEnd }, hAsync("div", { key: 'e2e3585a43272f51f6ace1ce62544ae41464a3e5', class: "xpl-toast__left" }, this.showIcon && (hAsync("div", { key: 'e3fd60595f205d8e15ed3ca1826e5e6d356e1a63', class: `xpl-toast__icon xpl-toast__icon--${this.variant}` }, this.getIcon())), hAsync("div", { key: '49642e6ee5502c09deb32188b62a160f748bb564', class: "xpl-toast__notification" }, hAsync("p", { key: 'f7176eea6e6e125bec0c4397b0399bb76e8554b7', class: "xpl-toast__title" }, hAsync("slot", { key: 'd5dd0d0413ec4f8198d16f8689791614fea877bc', name: "title" })), this.caption !== '' && (hAsync("p", { key: '966112d3fe6dc1348341034685c606ca98e95d84', class: "xpl-toast__caption" }, this.caption?.substring(0, 85))))), hAsync("div", { key: 'c9ba66aaf64f191d5bab1c3290e0981a86a3ef91', class: "xpl-toast__action", ref: (el) => {
                 if (el) {
                     this.actionSlot = el;
                 }
-            } }, hAsync("slot", { key: '6ad3199d265b1298ea8200ba53690dcc92bdbf92', name: "action" })), this.isDismissible && (hAsync("div", { key: 'b1a1a790a592f5e4c7573c819b0c997a210bd68a', class: "xpl-toast__close" }, hAsync("xpl-button", { key: '2d9ad71fc8f8233f2fc12453ca8268fd5f1d8f74', variant: "tertiary", size: "sm", iconOnly: true, icon: "xmark", type: "button", "aria-label": "Dismiss notification", onClick: this.dismiss })))));
+            } }, hAsync("slot", { key: 'faad90759fd343be3caa4540422c09d04642a217', name: "action" })), this.isDismissible && (hAsync("div", { key: '25f1140170ec9a242e62c6665ebf0eb8aa1bae64', class: "xpl-toast__close" }, hAsync("xpl-button", { key: '635900d579bda4fb905c7280de700de1143d474b', variant: "tertiary", size: "sm", iconOnly: true, icon: "xmark", type: "button", "aria-label": "Dismiss notification", onClick: this.dismiss })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31927,13 +33194,13 @@ class Toggle {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (hAsync(Host, { key: '20b5e00613ac0f2567224d3ff2bcd7b7f761a8fc', class: containerClassName }, (this.heading || this.description) && (hAsync("label", { key: 'a41dfe6403c629ef05792ba8dc7f0632fca9ca37', class: {
+        return (hAsync(Host, { key: '79915f2091093b5440ca3a8e63584e448137f479', class: containerClassName }, (this.heading || this.description) && (hAsync("label", { key: '6660a95ec66eec9ed33016efcf58aaf0940f6f47', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': !!this.disabled,
-            }, htmlFor: this.id }, this.heading, this.description && (hAsync("small", { key: 'b0e1d30a0f5b358a7f588d3f8f0bc32f440b69df', class: {
+            }, htmlFor: this.id }, this.heading, this.description && (hAsync("small", { key: '160f0a90739142bc37779af28725183979de5a4c', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': !!this.disabled,
-            } }, this.description)))), hAsync("input", { key: 'a59406c7cccf8a43349841bb060496ce0832823f', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && hAsync("label", { key: '276ce3ec937627fd9d21f2b3771d9c779c5f91f1', htmlFor: this.id }, this.label)));
+            } }, this.description)))), hAsync("input", { key: 'b136188b1de98d1ede875bf9f80b97c9ee66321d', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && hAsync("label", { key: '0329f2badfa3b3e8c1153c2e5baa4ee76e40ac5d', htmlFor: this.id }, this.label)));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -31968,11 +33235,11 @@ class Toolbar {
         this.selectedItemCount = event.detail.length;
     }
     render() {
-        return (hAsync(Host, { key: 'd834b3f68a399f33c02e2a7d85623d9fbe2a21e2', class: {
+        return (hAsync(Host, { key: '688ada0542f0634df6b447331833205149e88a94', class: {
                 'xpl-toolbar': true,
                 dark: true,
                 hidden: this.selectedItemCount === 0,
-            } }, hAsync("div", { key: '54c4638e003685ade49f243f688e3ff5997f8759', class: "toolbar" }, hAsync("p", { key: '92815a7d1b10582742906aefa0ee9ef81311c459', class: "selected-item-count" }, this.selectedItemCount, " Selected"), hAsync("div", { key: 'dc1b9ee686a57bd7bca45785f90586751770f556', class: "actions" }, hAsync("slot", { key: '2cc26af5467e9ad44962bd1ac65f0b1087f86f7f', name: "actions-left" }), hAsync("slot", { key: 'f5f46662191f52c79f81ffd1ce47a492041c10ad', name: "actions-right" })))));
+            } }, hAsync("div", { key: '6b8c2990c354d2b9ee93225ad98fb8fbaf3dbaf7', class: "toolbar" }, hAsync("p", { key: '60923603e318d109fd794259863a684d749ed52b', class: "selected-item-count" }, this.selectedItemCount, " Selected"), hAsync("div", { key: '77df55c910d8ce89a4ff2a0356bc7cf78120e49a', class: "actions" }, hAsync("slot", { key: '5de2e6bd168c31be133c55758acd2f95c56b715c', name: "actions-left" }), hAsync("slot", { key: '3f8b3540adbd441c28771410f4d33e29d87d3be9', name: "actions-right" })))));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -31996,7 +33263,7 @@ class Tooltip {
         this.hideArrow = false;
     }
     render() {
-        return (hAsync(Host, { key: '834ba80f410bd7ed079b674b6f1d110235aaf826' }, hAsync("div", { key: 'e45a7048339ce835ecabf5ef832a5ef2df6ded70', class: "xpl-tooltip-container" }, hAsync("slot", { key: 'f56272df982aa6dc72ba2bf9776017235223de95' }), hAsync("div", { key: 'c5b1054301d08e1b83da61b565f0116f83f395c7', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text, !this.hideArrow && (hAsync("div", { key: 'e6a833629cf409644969d9c4da461a2016f2986b', class: "xpl-tooltip-arrow" }, hAsync(TooltipArrow, { key: '7a5893a25978635864ada200aea48660ca90d33c' })))))));
+        return (hAsync(Host, { key: '916a12e608a6e40c40ddfdbe40f12e115215758e' }, hAsync("div", { key: '2f6c39a146fb2ba830306933309ffad9e8919eab', class: "xpl-tooltip-container" }, hAsync("slot", { key: '39b1b2cf370620b96fd00b6343dc0896791ad510' }), hAsync("div", { key: '34198d0f1184a3e05236a508e94531f503309691', class: `xpl-tooltip xpl-tooltip--${this.position}` }, this.text, !this.hideArrow && (hAsync("div", { key: '42f42b07b4f0ae6bd7cbd31837e4846a28ed4e72', class: "xpl-tooltip-arrow" }, hAsync(TooltipArrow, { key: 'af8672da89cda34507e53906937e600400b26953' })))))));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -32317,7 +33584,7 @@ class TopNav {
         }
     }
     render() {
-        return (hAsync(Host, { key: '00d598070bc4cee97d311206f48bf5cd873dcc8e', class: {
+        return (hAsync(Host, { key: 'f51ed285523198b4ef39de7ea1e5dc025d5a308a', class: {
                 'xpl-top-nav': true,
                 'xpl-top-nav--nav-control': Boolean(this.navControl),
                 'xpl-top-nav--open': this.open,
@@ -32325,15 +33592,15 @@ class TopNav {
                 'xpl-top-nav--has-brand': this.hasBrand,
                 'xpl-top-nav--has-user-menu': this.hasUserMenu,
                 dark: true,
-            } }, hAsync("nav", { key: '0b42d835c3aa211fa1686d3611ace212d69f1921', "aria-label": this.label ?? 'top-navigation-bar', class: "xpl-top-nav__bar" }, hAsync("div", { key: 'b55f526eca470d1d50b19bf1694f66991d369ad7', class: "xpl-top-nav__inner-left" }, this.navControl && (hAsync("button", { key: '37589314adb7f9cc4a33dd4bc421b2473ece5b54', 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 }, hAsync("xpl-icon", { key: 'acbdd20739df23cf49ff6542605513159cffe1da', class: "xpl-top-nav__control-icon", icon: "menu", size: 32 }))), this.hasBrand && (hAsync("div", { key: '148ba3e7114ce3f1edbf0618a231d94c4cc3c04f', class: "xpl-top-nav__brand-bar" }, hAsync("xpl-top-nav-item", { key: 'cda2c5f5dca554b7b61d95b941bd0b969f871dd0', class: "xpl-top-nav__brand", href: this.brandHref, onNavItemClick: this.onBrandNavItemClick }, this.brandLogo?.trim() ? (hAsync("img", { class: "xpl-top-nav__brand-logo", src: this.brandLogo, alt: this.brandName?.trim()
+            } }, hAsync("nav", { key: 'c2c14ed2ba975299efd76a391dfd6371b9214449', "aria-label": this.label ?? 'top-navigation-bar', class: "xpl-top-nav__bar" }, hAsync("div", { key: 'c223b947ffbcb55c6c6a06fa3adaeaee7661b61e', class: "xpl-top-nav__inner-left" }, this.navControl && (hAsync("button", { key: 'd364b6dd709d59730d40e7a0d41f9dd8fd55d40b', 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 }, hAsync("xpl-icon", { key: 'b84614dc20189f641b2f5a08eef1c76610135598', class: "xpl-top-nav__control-icon", icon: "menu", size: 32 }))), this.hasBrand && (hAsync("div", { key: '90b104133cbdea89643923fd06f54179978862a5', class: "xpl-top-nav__brand-bar" }, hAsync("xpl-top-nav-item", { key: '2b40b31ba1312a76231f7a89b1e95508a5a146a1', class: "xpl-top-nav__brand", href: this.brandHref, onNavItemClick: this.onBrandNavItemClick }, this.brandLogo?.trim() ? (hAsync("img", { class: "xpl-top-nav__brand-logo", src: this.brandLogo, alt: this.brandName?.trim()
                 ? this.brandName.trim()
-                : 'Brand' })) : this.brandLogoSlotPresent ? (hAsync("span", { class: "xpl-top-nav__brand-logo-slot" }, hAsync("slot", { name: "brand-logo" }))) : null, this.brandName?.trim() ? (hAsync("span", { class: "xpl-top-nav__brand-name" }, this.brandName.trim())) : null))), hAsync("div", { key: 'abca8522fe239fe207a291d7bd8bdfd1cab0ffc3', class: {
+                : 'Brand' })) : this.brandLogoSlotPresent ? (hAsync("span", { class: "xpl-top-nav__brand-logo-slot" }, hAsync("slot", { name: "brand-logo" }))) : null, this.brandName?.trim() ? (hAsync("span", { class: "xpl-top-nav__brand-name" }, this.brandName.trim())) : null))), hAsync("div", { key: 'ca3e9b4501ab3756301b2079bcb9632734e56922', class: {
                 'xpl-top-nav__aside': true,
                 'xpl-nav-left': true,
-            } }, hAsync("div", { key: 'f2fde6503e8bc319fbd60a4d5000d93644999d9a', class: "xpl-top-nav__left-primary", role: "list" }, hAsync("slot", { key: 'ebbb61cf32cf5b0246cecc3d967f93f1834b9e11', name: "left-aside" })))), hAsync("div", { key: '18c8d5990551ee655190aabb8ee85ad8d772b54e', class: {
+            } }, hAsync("div", { key: 'f2674faf140853536150058d13a5d40c7399979e', class: "xpl-top-nav__left-primary", role: "list" }, hAsync("slot", { key: '29363ac15d3f3bf7a43b237a7f7e0622c5bd54c4', name: "left-aside" })))), hAsync("div", { key: '7c83bd0a80649b9cbe9ed757ead1136b6fabd09c', class: {
                 'xpl-top-nav__aside': true,
                 'xpl-nav-right': true,
-            } }, hAsync("div", { key: '3120cb36425177943c3a52345396b5b2de9cc028', class: "xpl-nav-right__list" }, hAsync("div", { key: '6fde79b8b6d87bfdb617c591530307382bdff243', class: "xpl-top-nav__right-rail" }, hAsync("div", { key: '7e69e3e660887b7b39db058fb7e8cf42679a730e', class: "xpl-top-nav__right-lead" }, hAsync("slot", { key: 'c198ab94307d3d126b5902890de73b434cb583b1', name: "right-aside" })), this.hasUserMenu ? (hAsync("div", { class: "xpl-top-nav__right-user" }, hAsync("xpl-popover", { class: "xpl-top-nav__user-popover dark", position: "bottom-end", display: "menu" }, this.userMenuTriggerSlotPresent ? (hAsync("slot", { name: "user-menu-trigger", slot: "trigger" })) : this.usesBuiltInChildAccountTrigger ? (hAsync("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
+            } }, hAsync("div", { key: 'c67e6d3365d90cd7f7c55b08dcc4fa56dcb3e291', class: "xpl-nav-right__list" }, hAsync("div", { key: '46b9c3b0b010bf52a5632bc81b279310c0a54438', class: "xpl-top-nav__right-rail" }, hAsync("div", { key: '72279d15a5464dfabd9f92c04bc231e270ea04b9', class: "xpl-top-nav__right-lead" }, hAsync("slot", { key: 'd8b44d01141f9cfbeb7d6b019345ffc8c94fd0c3', name: "right-aside" })), this.hasUserMenu ? (hAsync("div", { class: "xpl-top-nav__right-user" }, hAsync("xpl-popover", { class: "xpl-top-nav__user-popover dark", position: "bottom-end", display: "menu" }, this.userMenuTriggerSlotPresent ? (hAsync("slot", { name: "user-menu-trigger", slot: "trigger" })) : this.usesBuiltInChildAccountTrigger ? (hAsync("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
@@ -32776,7 +34043,7 @@ class TopNavItem {
         return (hAsync("button", { ...shared, type: "button" }, this.renderLeading(), this.renderLabelContent(), this.renderTrailing()));
     }
     render() {
-        return (hAsync(Host, { key: 'f895d73fc0f4c07150e9cd1c34d7b78a338a2032', class: {
+        return (hAsync(Host, { key: 'fe53cfd84cba8502089c4a3fae62dfed10c0cdf0', class: {
                 'xpl-top-nav-item': true,
                 'xpl-top-nav-item--active': this.active,
                 'xpl-top-nav-item--dropdown-open': this.hasDropdown && this.open,
@@ -32784,7 +34051,7 @@ class TopNavItem {
                 'xpl-top-nav-item--has-dropdown': this.hasDropdown,
                 'xpl-top-nav-item--selected': this.selected,
                 dark: true,
-            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, ...(this.hostListitemRole ? { role: 'listitem' } : {}) }, this.renderInner(), this.hasDropdown && (hAsync("div", { key: '3ec121421a45b3e5ef00f3fe76be80c910759f02', id: this.dropdownPanelId, class: "xpl-top-nav-item__dropdown" }, hAsync("slot", { key: '715393a7ba3474c1afc9e0aa29276335537021e5', name: "dropdown" })))));
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, ...(this.hostListitemRole ? { role: 'listitem' } : {}) }, this.renderInner(), this.hasDropdown && (hAsync("div", { key: '954f83c94bd56d9bd328212f2ecc070861b1fd54', id: this.dropdownPanelId, class: "xpl-top-nav-item__dropdown" }, hAsync("slot", { key: '4d830a9386f12026cd1a2ecb454bcb9df2202431', name: "dropdown" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32900,10 +34167,10 @@ class TopNavMenu {
         return (hAsync("xpl-top-nav-item", { class: "xpl-top-nav-menu__back", label: this.label, onNavItemClick: this.handleBackClick }, hAsync("xpl-icon", { slot: "leading-icon", icon: "chevron-left", size: 24 })));
     }
     render() {
-        return (hAsync(Host, { key: '4b28448ecb93e59d9bdc731a8b56dd42ebda2c66', class: {
+        return (hAsync(Host, { key: '10a844d721713b72f636a8a3a3e266139b9c0193', class: {
                 'xpl-top-nav-menu': true,
                 dark: true,
-            }, role: "list", "aria-label": this.label || undefined }, this.renderBackRow(), hAsync("slot", { key: 'aa51dc10509298e469ca41a99ae7108283ee8f89' })));
+            }, role: "list", "aria-label": this.label || undefined }, this.renderBackRow(), hAsync("slot", { key: 'e7db1c580f34bf388658f6baacfc325322e2670e' })));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -32933,7 +34200,7 @@ class UtilityBar {
         this.open = this.isNavOpenAtStartup !== undefined ? this.isNavOpenAtStartup : this.open;
     }
     render() {
-        return (hAsync(Host, { key: '3ed4e8e9214075b9062b221a05f1b27aa0b0bfbf' }, hAsync("nav", { key: 'c809f6f649965d0b60d35c2bda31f721d67ccca1', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (hAsync("div", null, hAsync("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, hAsync("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), hAsync("slot", { name: "aside" }))) : (hAsync("slot", { name: "aside" })), hAsync("slot", { key: '99e22823c94e66c5dce24815485c7513b11e9267', name: "main" }))));
+        return (hAsync(Host, { key: '9bb4778368fca3035fc19b74ec3881b9c21ce856' }, hAsync("nav", { key: '909606f5baaef1a9c7402ac18107a607aa1df742', "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (hAsync("div", null, hAsync("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle() }, hAsync("xpl-icon", { class: "xpl-utility-nav__bars", icon: "three-bars" })), hAsync("slot", { name: "aside" }))) : (hAsync("slot", { name: "aside" })), hAsync("slot", { key: 'd6bce27702906a01823de67d63173406ceb06290', name: "main" }))));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -33436,11 +34703,11 @@ class XplPanel {
     }
     render() {
         const hasAccent = this.accent !== 'none';
-        return (hAsync(Host, { key: '7e2a96b285cc06379f8f7f98ae44affcfac0c8dc', class: {
+        return (hAsync(Host, { key: '61852953ba87a556efaeff011546aecdd27bb6b1', class: {
                 'xpl-panel': true,
                 [`xpl-panel--accent-${this.accent}`]: hasAccent,
                 [`xpl-panel--padding-${this.padding}`]: true,
-            } }, hasAccent && hAsync("div", { key: '3a6740a44c18c9973c86a314d26bd565971c19f2', "aria-hidden": "true", class: "xpl-panel__accent" }), hAsync("div", { key: 'd4951bd49e7600a58fa0ecb31fddf4df1dfe7956', class: "xpl-panel__content" }, hAsync("slot", { key: '2374d130b274a64e875b0c4b1ce03b34d96554b4' }))));
+            } }, hasAccent && hAsync("div", { key: 'b4317b146c7759041d90b1a07ddd18f8dd3f2fd9', "aria-hidden": "true", class: "xpl-panel__accent" }), hAsync("div", { key: 'b6d5634c93f921a002a3928884f54d3f8cce76cf', class: "xpl-panel__content" }, hAsync("slot", { key: '903c5e6f307ab7045b992f6b3bf3ec2c5b563455' }))));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -33460,7 +34727,7 @@ class XplTableBody {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '5a82de617cad4d37dace81ad6a636db1e3a944df', class: "xpl-table-body", role: "rowgroup" }, hAsync("slot", { key: 'd141e2e041789142eb69c6b3453b25523e4ecf59' })));
+        return (hAsync(Host, { key: 'e5934161758f0934269a09e4a1058f3fda919e9d', class: "xpl-table-body", role: "rowgroup" }, hAsync("slot", { key: 'e042714dc35cbe4ecc83cff740f7a24de48feec1' })));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -33472,12 +34739,107 @@ class XplTableBody {
     }; }
 }
 
+const CELL_MANAGED_DISABLED_ATTR = 'data-xpl-table-cell-managed-disabled';
+function isDisablableControl(el) {
+    if ('disabled' in el) {
+        return true;
+    }
+    switch (el.tagName) {
+        case 'BUTTON':
+        case 'INPUT':
+        case 'SELECT':
+        case 'TEXTAREA':
+        case 'FIELDSET':
+        case 'OPTGROUP':
+        case 'OPTION':
+            return true;
+        default:
+            return false;
+    }
+}
+class XplTableCell {
+    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;
+            if (this.disabled) {
+                if (control.disabled) {
+                    return;
+                }
+                control.disabled = true;
+                control.setAttribute('disabled', '');
+                control.setAttribute(CELL_MANAGED_DISABLED_ATTR, '');
+                return;
+            }
+            if (!control.hasAttribute(CELL_MANAGED_DISABLED_ATTR)) {
+                return;
+            }
+            control.disabled = false;
+            control.removeAttribute('disabled');
+            control.removeAttribute(CELL_MANAGED_DISABLED_ATTR);
+        };
+        const walk = (parent) => {
+            Array.from(parent.children).forEach((child) => {
+                if (child.tagName === 'XPL-TABLE') {
+                    return;
+                }
+                setControlDisabled(child);
+                walk(child);
+            });
+        };
+        walk(this.el);
+    }
+    render() {
+        return (hAsync(Host, { key: 'f4e7639b0cb35eda08fdbb13cf1e0ddcb380cb7a', 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,
+            } }, hAsync("slot", { key: '16d9a63cb992b9bbeb56500b5d6537b824336b40' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": [{
+                "onDisabledChange": 0
+            }]
+    }; }
+    static get cmpMeta() { return {
+        "$flags$": 260,
+        "$tagName$": "xpl-table-cell",
+        "$members$": {
+            "align": [1],
+            "bold": [4],
+            "disabled": [4],
+            "underline": [4]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 class XplTableFooter {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '7c0c20a91c48433b21a8a83094d614de532b317b', class: "xpl-table-footer", role: "rowgroup" }, hAsync("slot", { key: 'aebc40fc1edc9ced7b2420303d3a38897c24939f' })));
+        return (hAsync(Host, { key: '57872baa33166a8146bd0c9b3d7af1597e1fb41e', class: "xpl-table-footer", role: "rowgroup" }, hAsync("slot", { key: '65def2bdfee1be95fa966f7f746dedc7176b91e6' })));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -33495,10 +34857,10 @@ class XplTableFooterCell {
         this.align = 'left';
     }
     render() {
-        return (hAsync(Host, { key: '331e85728bbd31aa7cde4fe169874879518b92bd', class: {
+        return (hAsync(Host, { key: '1434aa38de9894875e70b2a7b3c55479726727d5', class: {
                 'xpl-table-footer-cell': true,
                 [`xpl-table-footer-cell--align-${this.align}`]: true,
-            }, role: "gridcell" }, hAsync("slot", { key: '29f074c9c81b9cf38bca0ef3eb92a54a408b2436' })));
+            }, role: "gridcell" }, hAsync("slot", { key: 'e3bac594dbd5265f44c7bd620e1fccfc9248abf0' })));
     }
     static get cmpMeta() { return {
         "$flags$": 260,
@@ -33512,19 +34874,60 @@ class XplTableFooterCell {
     }; }
 }
 
+function isTableCell(node) {
+    return node.nodeName === 'XPL-TABLE-CELL';
+}
 class XplTableRow {
     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() {
+        this.cellObserver?.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 (hAsync(Host, { key: '506e56b764d82707482e58a0715fd342219ef7d9', class: {
+        return (hAsync(Host, { key: '8c49ba27b39d934cb774140b43e811e5ee2bb904', class: {
                 'xpl-table-row': true,
                 'xpl-table-row--disabled': this.disabled,
                 'xpl-table-row--selected': this.selected,
-            }, role: "row" }, hAsync("slot", { key: 'db534bcb1e92bb92441476542c0eaa920f6914e8' })));
+            }, role: "row" }, hAsync("slot", { key: '30788ce629c65d7eab04d268da978d46f0145e99' })));
     }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": [{
+                "onDisabledChange": 0
+            }]
+    }; }
     static get cmpMeta() { return {
         "$flags$": 260,
         "$tagName$": "xpl-table-row",
@@ -33613,6 +35016,7 @@ registerComponents([
   XplListItem,
   XplPanel,
   XplTableBody,
+  XplTableCell,
   XplTableFooter,
   XplTableFooterCell,
   XplTableRow,