@usecapsule/core-components 3.1.0 → 3.1.2

package/dist/esm/cpsl-alert_33.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-b9a060b3.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-2c447f86.js';
 import { a as DEFAULT_Z_INDICES, M as MOBILE_SIZE } from './constants-fce138fa.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-1789f0cf.js';
 
@@ -29,7 +29,7 @@ const CpslAlert = class {
         }
     }
     render() {
-        return (h(Host, { key: 'f7534f6c528225bc1c5704870eceb202304a8f37', class: { error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' } }, h("div", { key: 'fade95f15517a992708d924cd7a1ca17a6077c22', class: "alert-container" }, this.iconType && h("cpsl-icon", { key: 'c037b1d18057d53d05e52be9cfbb81f234ea0f1d', icon: this.iconType }), h("slot", { key: 'ec02796cf9ad119f95be56701d28e3490b07bc43' }))));
+        return (h(Host, { key: 'f7534f6c528225bc1c5704870eceb202304a8f37', class: { error: this.variant === 'error', warning: this.variant === 'warning', success: this.variant === 'success' } }, h("div", { key: 'fade95f15517a992708d924cd7a1ca17a6077c22', class: "alert-container" }, this.iconType && h("cpsl-icon", { icon: this.iconType }), h("slot", { key: '8a2ed501e583e444203fa6168c7eb10011ec57fe' }))));
     }
 };
 CpslAlert.style = CpslAlertStyle0;
@@ -45,10 +45,10 @@ const CpslAppBar = class {
         this.zIndexOverride = undefined;
     }
     render() {
-        return (h(Host, { key: '4608b0dc424585b7e7f865d55b3d217ebe172f04', style: Object.assign({ height: `${this.height}px` }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})) }, h("div", { key: 'c598749bcfb29c806856573b9f61141b7b68022e', class: "container", part: "container", style: {
+        return (h(Host, { key: '045bc58e1719b02dea67276200abb0cd05d6f717', style: Object.assign({ height: `${this.height}px` }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})) }, h("div", { key: 'e29aa3326057f15b83e4ca9e2718074fda98e177', class: "container", part: "container", style: {
                 position: this.position,
                 height: `${this.height}px`,
-            } }, h("slot", { key: '7e2bd9efbe98ca5ff70dd0bc33333d95799f5fe7' })), this.position === 'fixed' && (h("div", { key: 'fc4e1e9f6414ccf74c816f19be79b7d4b0df8bd5', style: {
+            } }, h("slot", { key: '566c990b33134045c54195b7c762f07049a6bd22' })), this.position === 'fixed' && (h("div", { style: {
                 height: `${this.height}px`,
             } }))));
     }
@@ -67,7 +67,7 @@ const CpslAvatar = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '04dfd668bc6ab12f758e82ccfd915f06e1de3504' }, h("span", { key: '906c7c6e113040b95273c987689e848954e14a1c', class: { round: this.variant === 'round' } }, h("img", { key: '2d952a27ebbeb118c931162487f2d7e13370b41f', src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : 'avatar' }))));
+        return (h(Host, { key: 'c148e7d268c681fa6a7273c109b9ab418f433c24' }, h("span", { key: 'd1f977ab0c5d6f6758f84fb33ed9e72d9a1270c9', class: { round: this.variant === 'round' } }, h("img", { key: '3a13f96266ee6476df2154a09b433dcf7ba44daf', src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : 'avatar' }))));
     }
 };
 CpslAvatar.style = CpslAvatarStyle0;
@@ -87,7 +87,7 @@ const CpslButton = class {
         this.variant = 'primary';
     }
     render() {
-        return (h(Host, { key: '554350e7af597bd14c9584f9924f73e04fe44093', class: {
+        return (h(Host, { key: 'c8c19be90600d9ca236b51e4e112d8350d7f611c', class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'ghost': this.variant === 'ghost',
@@ -96,7 +96,7 @@ const CpslButton = class {
                 'full-width': this.fullWidth,
                 'small': this.size === 'small',
                 'medium': this.size === 'medium',
-            } }, h(this.as, { key: '20b6865c03e312d263c523f681bb775d8626fc9c', href: this.href, target: this.target, part: "button-native", class: "button-native" }, h("slot", { key: '4ee8d68b06ce21288e63bfcff9aa186908b89af2', name: "start" }), h("slot", { key: '9c0a5f0daa64c75886d03fb830739c8f8cfb65d9' }), h("slot", { key: 'cf9addee55b0a0d8f487313c972d7b48d6f8c75c', name: "end" }))));
+            } }, h(this.as, { key: '9ba756220f648f1d4123bd42df8d4db311800705', href: this.href, target: this.target, part: "button-native", class: "button-native" }, h("slot", { key: '7156e673a1a43ea808aeca1574b5f251c38bdc22', name: "start" }), h("slot", { key: 'a74790e4d6deb92b6e0380f6ca8551aacf5c3b8f' }), h("slot", { key: '73219152509968a55aeff2cdc56beefa9b9e5995', name: "end" }))));
     }
 };
 CpslButton.style = CpslButtonStyle0;
@@ -138,7 +138,7 @@ const CpslButtonGroup = class {
         return this.el.querySelectorAll('&> *:not(cpsl-button)');
     }
     render() {
-        return (h(Host, { key: '18830efc419c35995cc7b31a89e2405e230f4978' }, h("slot", { key: 'f466f88653fd0fe91b258c03706b13adc78be777' })));
+        return (h(Host, { key: 'e15232f4180db66b6b7bd21b5e22980f197514be' }, h("slot", { key: 'f3c566eaf9574fb38331e8a44c5c369d1edd5223' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -155,7 +155,7 @@ const CpslCard = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '21177f5a9ceec0246dc1fa89a052bfdadacc3063' }, h("div", { key: '0940e0aaf62b24e1be0e99c736069b5bb463854c', class: { card: true }, part: "card-container" }, h("slot", { key: '6317e03f97be9841c03b040845591043bf203e36' }))));
+        return (h(Host, { key: '8633aeaedaaf81af67835ee3ffc8964ec28ced92' }, h("div", { key: '432fabd329701f8ef51fc43ba0ca8af3d5182a47', class: { card: true }, part: "card-container" }, h("slot", { key: 'a23d1063d0a1c74ebc076fc67b63c4023f7f8565' }))));
     }
 };
 CpslCard.style = CpslCardStyle0;
@@ -173,7 +173,7 @@ const CpslCheckbox = class {
         this.checked = undefined;
     }
     render() {
-        return (h(Host, { key: '236c0b027e72c0c25dbc2fd3183a77400c815f8c' }, h("input", { key: '8c350e21268b87d485b16796b2058c4e47f46e75', type: "checkbox", checked: this.checked }), h("span", { key: 'b1d8fc6dd380b67eb8940f55bba47810c54ee189', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, h("cpsl-icon", { key: '2b3ddcad1e2b9007bda8135a810b75a1a2cfaeca', icon: "check" }))));
+        return (h(Host, { key: 'b5d7963285854a20983f8655c8a9545b8d0735e9' }, h("input", { key: 'b822a505e826f06d47f1da51fff0c7f310d9c9ce', type: "checkbox", checked: this.checked }), h("span", { key: '3747cf548b8d88ceee19eae5c1df78cdc5f9c87e', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, h("cpsl-icon", { key: '9d5d0cdba4b22bc2167aed23e7748201320a6553', icon: "check" }))));
     }
 };
 CpslCheckbox.style = CpslCheckboxStyle0;
@@ -268,10 +268,10 @@ const CpslCodeInput = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'cee793d35dc39dce79834dd7c73038bf50e41442' }, h("div", { key: '1df541a5ae880c512c6c70c3b5f1cf64e1a89b8b', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+        return (h(Host, { key: '2f52778c8b8b51ef7c875b53394e7275bd93412f' }, h("div", { key: 'e96c3deea7d1e4eaaef4c72fbaca702b6bb46cf1', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
             var _a;
             return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText) }, id: `code-input-${i}`, maxLength: 1, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_a = this.code) === null || _a === void 0 ? void 0 : _a[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
-        })), (this.errorText || this.helperText) && (h("div", { key: '2001f525a89d0b57287cd97367c6646de0de163a', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { key: 'c274e60e8fd04e18b2ebff6386d1fa46916d2d66', icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", { key: '56566c698720936d4225eea8b07f042e67f570e5' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     get el() { return getElement(this); }
 };
@@ -285,7 +285,7 @@ const CpslDivider = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'd5cffdef9344f7dcac4aae1bc2acca8c02d69946' }, h("div", { key: 'e07f8107804df83537a3b8e40d124c66d2fc6f44' }), h("slot", { key: 'd97f02d46a63d32d107838b5aa50654a9593cc8a' }), h("div", { key: '2316aed010b91a65c961e2f30cc2cde03b892429' })));
+        return (h(Host, { key: '1ed13a5022a89b899e6a16f168bff6b71c3c2ad8' }, h("div", { key: 'e9fec054de82d84298ac7cf7fc45f239a9a78442' }), h("slot", { key: 'c6ab3f0e787ee245d206b300c68192bfb3515aa6' }), h("div", { key: '5591e16b69c4cdce5cd5b9932923a189440b7fd5' })));
     }
 };
 CpslDivider.style = CpslDividerStyle0;
@@ -326,12 +326,12 @@ const CpslDrawer = class {
         const setHeight = this.anchor === 'top' || this.anchor === 'bottom';
         const startingAnchor = (_a = `${this.anchorPosition}px`) !== null && _a !== void 0 ? _a : '0px';
         const size = this.size === 'auto' ? 'auto' : `${this.size}px`;
-        return (h(Host, { key: '9568be6ee1897a96bbdb18dabfd32d40ba6a6fa5', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
+        return (h(Host, { key: 'c8f7717bd060bdd83edec49865d99d2bc885aace', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
                 top: this.anchor === 'top',
                 bottom: this.anchor === 'bottom',
                 left: this.anchor === 'left',
                 right: this.anchor === 'right',
-            } }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { key: '744838970ee22c5bb1798702f6060b6d12f29eb9', open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: 'b3e4d26c18e7d1e5442b941dd67085088d9c33a9', id: "container", class: "container", part: "container" }, h("slot", { key: '1951ec776043562fe15409ed4a19799c21f6e36d' }))));
+            } }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: 'f63a22d66da7ed0b7cb2bd0f9b68dbf7e7c4f985', id: "container", class: "container", part: "container" }, h("slot", { key: 'c5d208e37ea87f4ae95c5d9064218f1d1edbc304' }))));
     }
     get el() { return getElement(this); }
 };
@@ -5143,7 +5143,7 @@ const CpslDropdown = class {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'a997453b8690196f125bcf96fd94d728e645cd9e' }, h("button", { key: '0be8f5b0b6fcb3a27a5885205c0f585a68dc1bb9', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: 'f324edfdd97304de361a0ccd2bec793af25d3aa3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'e1a3a097abb0633bd33caefabce016e2308f1ac0', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { key: '517c74f9f94df623206d8969a32d894b854f95a4', class: "search-bar" }, h("input", { key: '28ed686f30069ecb92dd0ee1852a9b9f94a98264', type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
+        return (h(Host, { key: '121a65b9e15c7fb81a1ecd98c30f2d3d47a0af2c' }, h("button", { key: 'bdea591df3159d30de22a3615362abcd3f222c65', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: '778a3ea1cc1d6c7df3b961acb2b687aefcce38b3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: '490af95f8b21a330a7432e10b0591b4ed81aa1b7', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { class: "search-bar" }, h("input", { type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => (h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value)))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -5278,7 +5278,7 @@ const CpslFileUpload = class {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '762561d4a888f40c6ef7914d44d3b5d29952c6eb' }, this.label && (h("label", { key: 'ca7847701395b4334d14e34cf065f943bec0d1af', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: '370ca2d812f44f13b20383f303ca7d6daefdfd84', name: "label" }), h("div", { key: 'bece00a4a0a32bb37c4573775cbbe5c89ae3030e', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, h("div", { key: '32220f003406b15f94c68337ab321b6b07151be0', class: { 'label-container': true } }, h("slot", { key: '88a46b859592b1dbbea964d871ef36d77760da78', name: "left-content" })), h("div", { key: 'd4cbd5c095c8ba522c51a451d749d20c0fd7a5ab', class: { 'file-container': true } }, this.FileContent), h("input", { key: '3798b69f5670e18e9fa4dc34ae7ca661cd6f9294', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: Boolean(this.file) ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange })), (this.errorText || this.helperText) && (h("div", { key: '9217cfba0fabd2d8cad86ba34fd69f15cf0186a0', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '0e6f9be6e2042f72b0438cc5d979b21eb9f47356' }, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
+        return (h(Host, { key: '71d945bcac5d443719737781fd9ec5166952760d' }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("slot", { key: '63786e91e0a230d85344da507d0508ac1524cc88', name: "label" }), h("div", { key: '74e7296a0c8ef732094c0e7fab3e0a7db916694b', class: { 'container': true, 'error': Boolean(this.errorText), 'drag': this.dragOver, 'drag-error': this.dragError } }, h("div", { key: '1a3030a828d8e7a742f3dfbff784e213f845859e', class: { 'label-container': true } }, h("slot", { key: '1f77e4c6566deffe7cd830fccb96d21c22daee4b', name: "left-content" })), h("div", { key: '3dc0a113348d15d52aae929792de6ee48da795ca', class: { 'file-container': true } }, this.FileContent), h("input", { key: 'a6fc37d212b5e4284f4eeec56dc4e7a32ff8374b', id: this.inputId, type: "file", accept: (_b = (_a = this.fileTypes) === null || _a === void 0 ? void 0 : _a.join(', ')) !== null && _b !== void 0 ? _b : '*', files: Boolean(this.file) ? [this.file] : undefined, onDrop: this.handleDrop, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onChange: this.handleInputChange })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", null, (_c = this.errorText) !== null && _c !== void 0 ? _c : this.helperText)))));
     }
     get el() { return getElement(this); }
 };
@@ -5295,7 +5295,7 @@ const CpslIcon = class {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: 'fe58523210b92237924bd768007f3a191b401a57', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: '06850dc9a6d40b95e8b92ea8722bedfa1dc7b36f', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
     }
 };
 CpslIcon.style = CpslIconStyle0;
@@ -5441,7 +5441,7 @@ const CpslInput = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '9e8eece493074613305b6303e9c095b89ee08eb0', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { key: '97ee8423a02cd2547b764609751fbd301e21ccc9', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '933c4863226a6de14910cfe14b5e48015e6a04fd', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: 'a69f5c53c2fabc038aca226fb4a3965c1516fe53', name: "start" }), h("input", { key: 'f4a7e5234fe5d6b32e14bc226791d5aea9df151d', class: "native-input", ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: '6c74cecde29d9f1f9bf00a05e53197324f83f2bf', name: "end" })), (this.errorText || this.helperText) && (h("div", { key: '245c0413133d70b909415f10cdbfbd21ed03da61', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: 'a96f3e844d74ba481418e375ccaeab85cfb92836' }, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        return (h(Host, { key: '28937d4a0e8c5a4e7b7a00e610013e52fa171f3a', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '8a2c5e7d32c93af2b0d463563c48e8104c639604', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: 'd24440dff32cd3837638565764d2683bf16414ca', name: "start" }), h("input", { key: 'a3df402a5fd5f9a9d2483a1f0b65f9061468df15', class: "native-input", ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: 'f7472b02d119b4a458252128da5e61ebbfbdee56', name: "end" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14864,7 +14864,7 @@ const CpslNavButtonGroup = class {
         return this.el.querySelectorAll('&> *:not(cpsl-button)');
     }
     render() {
-        return (h(Host, { key: 'e677688e630bcbfa89cd8cff36fd84a4bdc1a627' }, h("slot", { key: 'd0c04a917b6818e7b40cdae32fe19e158da2f38d' })));
+        return (h(Host, { key: 'e5cf1902a3d5f8b6df197441e144987dcb016762' }, h("slot", { key: '56322f15e640f356fae1c9eb16f525753d91fdae' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14904,7 +14904,7 @@ const CpslOverlay = class {
         }
     }
     render() {
-        return (h(Host, { key: 'f0a39fa80559007fa5312ca2d88dbbb8d6a65adf', style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {} }, h("slot", { key: '4ff06458ac6e33f80c252afe9215d7e084a1f8d8' })));
+        return (h(Host, { key: 'daa05884bc8489f8227873b6778e129bdf922ffd', style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {} }, h("slot", { key: 'd0783d37893a51fe16fe292c5847dc4acee627ee' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14990,7 +14990,7 @@ const CpslPagination = class {
                 filteredPages.push(this.totalPages - 1);
             }
         }
-        return (h(Host, { key: 'a606e9d711b7e5d3154126e0a9b9f87c192a9e1e' }, h("cpsl-button-group", { key: '7ac1f34cb86fa73897bb58044d9f4c2a76e4b06c', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: '8c78bd8f77c65535ceb6fc414f019b1fa7f8d7e8', class: "arrow-button", onClick: this.handlePrevClick }, h("cpsl-icon", { key: 'da4779051c45a41a7fcec1fbe04eebf75a417e01', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: '63f71be7e364edd629077d71ad4c401445807704', class: "arrow-button", onClick: this.handleNextClick }, h("cpsl-icon", { key: 'd21bc4f342374d026816d6c091fef282a77320d8', class: "icon", icon: "arrowNarrow" })))));
+        return (h(Host, { key: '42ae13b8cdb18ea35db7abc8195d49e36ee4494e' }, h("cpsl-button-group", { key: 'a031f2cda1cbd10724ef65cd2fd74b5b237b9841', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: '83d653a99ce0eea881eb6332c9d7088b328c20dd', class: "arrow-button", onClick: this.handlePrevClick }, h("cpsl-icon", { key: '2e6650d7c873a9e2de4922c08c5b5b2fe27f2b33', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: '4cd4c8623368c96f3457d818a0542fd7ab560182', class: "arrow-button", onClick: this.handleNextClick }, h("cpsl-icon", { key: '52865869846d7afbe7a66f44f9564913caf97380', class: "icon", icon: "arrowNarrow" })))));
     }
     static get watchers() { return {
         "currentPage": ["watchChange"]
@@ -15007,7 +15007,7 @@ const CpslPill = class {
         this.text = undefined;
     }
     render() {
-        return (h(Host, { key: '788ab049c90438152e472230dbdfb6c5204d1694' }, h("div", { key: 'c8da2bc450f16a9dab6bb25af747cc047908ef2e', class: "pill-container" }, h("span", { key: '71013ebcc7c8253a3370ca3abe6f1094b101e602' }, this.text))));
+        return (h(Host, { key: 'c57c4206cb82aef700747dee7712ed15ff5907b9' }, h("div", { key: 'bc60013838c2d7a7632269b711a506aa83e5b98c', class: "pill-container" }, h("span", { key: '6eb81137bfbe02e9fa68a5ef1399b7d73b6bc89b' }, this.text))));
     }
 };
 CpslPill.style = CpslPillStyle0;
@@ -15220,7 +15220,7 @@ const CpslPopover = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'bb9a38fb37e6588041f6b09e064cbe85d0dd46b1', class: {
+        return (h(Host, { key: '0932bff390ad54961067dcae19e121dc2ed701a0', class: {
                 'open': this.open,
                 'transform-h-left': this.transformOriginHorizontal === 'left',
                 'transform-h-center': this.transformOriginHorizontal === 'center',
@@ -15228,7 +15228,7 @@ const CpslPopover = class {
                 'transform-v-top': this.transformOriginVertical === 'top',
                 'transform-v-center': this.transformOriginVertical === 'center',
                 'transform-v-bottom': this.transformOriginVertical === 'bottom',
-            }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: '99478330639eed6be6f7e5a960ebb2f485692cff', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '2d15adf8c986698ce02858dfdca49047777e2c33' }))));
+            }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, h("div", { key: 'a320096955a8ba71b14f8620fbe69eed66b4dc5d', id: "container", class: { container: true, open: this.open } }, h("slot", { key: '745bbee183c48bdbe079d7219690c556e9a9b442' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -15312,7 +15312,7 @@ const CpslQrCode = class {
         qrCode.append(container);
     }
     render() {
-        return (h(Host, { key: '68a11eb026f62f795a769b4bb5b91509bda57c55' }, h("div", { key: 'da47238221fed966d47e50471af27d0eaa407e2a', id: "qr-container", class: "qr-container" })));
+        return (h(Host, { key: '7f549a58192515bbb5a8b42948f042e7b4eaf271' }, h("div", { key: '4464496f4e8236abcdbde9e6e0f20f2e04b5b392', id: "qr-container", class: "qr-container" })));
     }
     get el() { return getElement(this); }
 };
@@ -15333,7 +15333,7 @@ const CpslRadio = class {
         this.checked = undefined;
     }
     render() {
-        return (h(Host, { key: '43659e8ba43bfe8a53578d357d2ab9a3c3bcbd96' }, h("input", { key: 'dc9c9328be5a09b00b4e02b74934ffa02312441d', type: "radio", checked: this.checked }), h("span", { key: '87436a09ace01394e860786950a916efb26a9bb7', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
+        return (h(Host, { key: '15b4fdf30799927941280b3f11f4611e4e4d27b2' }, h("input", { key: 'd5bf9704061977610d98b99a6188933f720ffce3', type: "radio", checked: this.checked }), h("span", { key: 'd56242703448531efc847167b55013b420f17715', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
     }
 };
 CpslRadio.style = CpslRadioStyle0;
@@ -15429,7 +15429,7 @@ const CpslSelect = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: 'dfe6786c9be71ebd71fee236c9b569ef1ad30eac', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { key: 'fbe2cfb2d93558f647442e17b29713f37375be5a', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '9e5fdf3c056a7a6c13fe9ce45caf78e27482e779', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { key: 'c721fcd057a142bad5f8f473c7b4daf090e7722a', name: "selected-item" }), h("div", { key: '58c94ace573965e8151ef4a9c0648385d6b1c4dc', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { key: 'ceb4c60607b6c2cbc17a086fe702045196afbd44', class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue) ? (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select' : (_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue))), h("cpsl-icon", { key: '05cf53f1ce3f8f34e47082c591f2d75d4aeea11b', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: 'a395add0f06b0d10f1e2e6d0ea81478f4a1c07d6', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { key: 'e7f991ed99ed332f5f42e666bfd2d25eecff3113', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: 'f734a586f0dd7e94ccb2d7806fc9a6a5bdb5f50b' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'c45f42267e3b4945823e27f5901b58dc5545a51e', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: 'cd7bdc9a3e06a2c4aed9ebe12ec3cd070e323b12', class: "dropdown" }, h("div", { key: '0e1483542dd9d63ad548242a2bc2ecb2041f8ed5', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: 'e7697bc187fc433ccb2f5728f8944ff2162387d9', name: "items" }))))));
+        return (h(Host, { key: '96b15a986afbf40228adfb0ddfb5934ea79a9df0', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: 'b43bb6ef5670aff411a82391c5695f8840412f85', id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && h("slot", { name: "selected-item" }), h("div", { key: 'fa5654cfbeb30c963fd918599c4fc304e9d894c5', class: "selected-container-content", id: "selected-container-content" }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (h("cpsl-text", { class: { 'selected-text': true, 'placeholder': !Boolean(this.selectedValue) } }, !Boolean(this.selectedValue) ? (_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select' : (_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue))), h("cpsl-icon", { key: '063de47032a31e2c7d114467cc4eaedfcf8d59a8', class: { 'chevron': true, 'open': this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: "chevronUp" }), h("input", { key: '760922353c0971b766d80ac45430ebc806833a9a', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", null, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), h("cpsl-popover", { key: 'fcbf94fcc199d5415dc62faa3b7a0280f16418fa', autoWidth: false, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, h("div", { key: '95aa9ce659bf279c502b0f8b6e068765a1f29d5d', class: "dropdown" }, h("div", { key: '4b83c05b33d370d9ce8fa7450b11b24c75ddb025', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, h("slot", { key: 'a94a087322953b56c4b9e488b5e23ab6f020d37f', name: "items" }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -15453,7 +15453,7 @@ const CpslSelectItem = class {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: 'd85478b3b2eaa5c99ba1f3dbc0e3aae6d368540c' }, h("div", { key: 'd13e45f3997cfbbc4042a2810c76eb9b71b15d22', class: "outer-container", onClick: this.handleItemClick }, h("div", { key: '5c9787fb9ad5b13740515386e269895d2c0ca91d', class: { 'inner-container': true, 'selected': this.selected } }, h("slot", { key: '0fc1ff893cb3e5f53a99978f683b1e4f1fb15410' })))));
+        return (h(Host, { key: '5841f3aa3d70c17dcdfc8b1e0517ac822667ec87' }, h("div", { key: 'cbac6744fdce3f011765f0588f51fe89112239ad', class: "outer-container", onClick: this.handleItemClick }, h("div", { key: '30aee519e6dfd394a01d7ff9c503752cff1c7d64', class: { 'inner-container': true, 'selected': this.selected } }, h("slot", { key: '9458a0da2d73be3de5703c0dde0b6208cdd8a196' })))));
     }
 };
 CpslSelectItem.style = CpslSelectItemStyle0;
@@ -15578,7 +15578,7 @@ const CpslSlideButton = class {
         return this.el.shadowRoot.getElementById('end-icon');
     }
     render() {
-        return (h(Host, { key: 'aecef591819520c5abd43529f797a11d564bbf40' }, h("div", { key: '8d08c211ff7393aaf86569d3cb442216e1f78efd', id: "slider-container", class: "slider-container" }, h("div", { key: '072a8c587c34bf792d289cfa4490cd8564121a16', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '6f656942985f8c490bb96d99475373fe6978c0e0', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '0fcdc94813b54c9c32fdf7d5fc963448e0cf492a', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: 'f45c670469c80f5604c06c8182ef7c9fabc56200', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: 'bc987b8d1495bb731ead75497ae7c411534f7ff0', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: 'bd6ab1e1adaff366e5ebb2bf82415bab514c00e8', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: '0b94b997a625213645e737c77ad736663d41a844', id: "end-text", class: "end-text" }, this.endText))));
+        return (h(Host, { key: '0538d1828e3eed534326536946e16b205e34fd96' }, h("div", { key: 'dfca014b41bcdb615a0fd8ce6242cf361a0399d7', id: "slider-container", class: "slider-container" }, h("div", { key: '8cad818d06a7fcc8b7e5a22b7714a6faf777db16', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '0692e2b89ba22df7dca29d3b927810492591dd51', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '865dc1b876daa97033541efeb32779ac07078179', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: '2e5e0049eee016583715ae1a33dff74e36c6a515', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: '6e484c8497bf2e7777ebf93d3af141477d8f82e8', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: 'b7b8064fa212af5802ee21c170133ef0e32ff14c', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: 'b42e78a763a983bb17e7d02ed51253982be4546f', id: "end-text", class: "end-text" }, this.endText))));
     }
     get el() { return getElement(this); }
 };
@@ -15594,13 +15594,13 @@ const CpslSpinner = class {
         this.speed = 1;
     }
     render() {
-        return (h(Host, { key: '10ec2d7dc8b62b0819e4ff3f683b5b7c7a6dbf19', style: {
+        return (h(Host, { key: '146fc6a1a8101f6738263e432b49ed6c927d8eb3', style: {
                 'height': `${this.size}px`,
                 'width': `${this.size}px`,
                 'animation': `spin ${this.speed}s linear infinite`,
                 '-webkit-animation': `spin ${this.speed}s linear infinite`,
                 '-moz-animation': `spin ${this.speed}s linear infinite`,
-            } }, h("svg", { key: 'e88b02f99bbfe3677eafe55d75ee65f595e829c5', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: 'de3d33313d7509abeb7733c37d3ed99ca9894260', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: '7e0edc7e3222dc95a8c62d3228aceeddaf51593b', cx: "45", cy: "27", r: "5" }))));
+            } }, h("svg", { key: '2f7fadd536c94b7919180bcb38a64e54cf8ff073', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: '427351f7b255cbf337f8b1d45272339b3fef873e', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: '43787fa0376df4defda8a47f5c5c8d01258dde10', cx: "45", cy: "27", r: "5" }))));
     }
 };
 CpslSpinner.style = CpslSpinnerStyle0;
@@ -15618,7 +15618,7 @@ const CpslSwitch = class {
         this.checked = undefined;
     }
     render() {
-        return (h(Host, { key: '1b25c42d27a45e0af756eadba475d15a8034d483' }, h("input", { key: 'fbb246d9b9fd5d3842bef147922095a36277ff0f', type: "checkbox", checked: this.checked }), h("span", { key: 'fe9356dec1f9b41b94cd5597b36ae6e1d5fce7ac', onClick: this.handleSwitchClick, class: { container: true, checked: this.checked } }, h("span", { key: '11d0ce011571a147912b400398ed8b78743d356c', class: { thumb: true, checked: this.checked } }))));
+        return (h(Host, { key: '5757a05c5149c8fb785bcb796d7c110f4725bbfa' }, h("input", { key: 'fdbbc3cdac8674bc3bbcf5563302a763d3678905', type: "checkbox", checked: this.checked }), h("span", { key: '471c0ae137ad553c6b7186a08722e156959ed3cc', onClick: this.handleSwitchClick, class: { container: true, checked: this.checked } }, h("span", { key: '53bbfd9b807c36bc49130ad71611d274757b5fb1', class: { thumb: true, checked: this.checked } }))));
     }
 };
 CpslSwitch.style = CpslSwitchStyle0;
@@ -15650,13 +15650,13 @@ const CpslTab = class {
         }
     }
     render() {
-        return (h(Host, { key: 'cc8785697e46574b6fdb1839098473bb3ca17866', onClick: this.onTabClicked }, h("div", { key: '2c6451937db4c48fa11bd610bfd344154eced8e6', class: { 'tab-container': true } }, h("slot", { key: '1dc724e299adbc96024aa6636f94551b09853c2a' }))));
+        return (h(Host, { key: 'b899e8122b57fdf859c43d9cf9ade27af3bf5c5f', onClick: this.onTabClicked }, h("div", { key: 'f96ead5f65606af3fe63c708af511adfb022f386', class: { 'tab-container': true } }, h("slot", { key: '780d6deda346635aaced9c3dfa875b44ffece7eb' }))));
     }
     get el() { return getElement(this); }
 };
 CpslTab.style = CpslTabStyle0;
 
-const cpslTableCss = ":host{--container-border-radius:var(--cpsl-border-radius-table-container);--container-border-color:var(--cpsl-color-background-16);--container-background-color:var(--cpsl-color-background-0);--container-border-width:1px;--container-header-padding-top:24px;--container-header-padding-bottom:24px;--container-header-padding-start:24px;--container-header-padding-end:24px;--container-header-border-width:1px;--container-header-border-color:var(--cpsl-color-background-16);--container-footer-padding-top:16px;--container-footer-padding-bottom:16px;--container-footer-padding-start:24px;--container-footer-padding-end:24px;--container-footer-border-width:1px;--container-footer-border-color:var(--cpsl-color-background-8);--table-header-padding-top:16px;--table-header-padding-bottom:16px;--table-header-padding-start:24px;--table-header-padding-end:24px;--table-header-background-color:var(--cpsl-color-background-4);--table-header-border-color:var(--cpsl-color-background-16);--table-header-border-width:1px;--table-content-padding-top:16px;--table-content-padding-bottom:16px;--table-content-padding-start:24px;--table-content-padding-end:24px;--table-content-border-color:var(--cpsl-color-background-8);--table-content-border-width:1px;display:block}:host cpsl-card{height:100%;--card-padding-top:0px;--card-padding-bottom:0px;--card-padding-start:0px;--card-padding-end:0px;--card-border-width:var(--container-border-width);--card-border-color:var(--container-border-color);--card-border-radius:var(--container-border-radius);--card-background-color:var(--container-background-color)}:host cpsl-card::part(card-container){height:100%;display:flex;flex-direction:column}.content{overflow:auto;position:absolute;top:0;left:0;right:0;bottom:0}.content-outer-container{flex:1;position:relative}.overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.overlay.horizontal-scroll:not(.vertical-scroll){box-shadow:-24px 0px 24px -24px rgba(0, 0, 0, 0.1) inset}.overlay.vertical-scroll:not(.horizontal-scroll){box-shadow:0px -24px 24px -24px rgba(0, 0, 0, 0.1) inset}.overlay.horizontal-scroll.vertical-scroll{box-shadow:-24px -24px 24px -24px rgba(0, 0, 0, 0.1) inset}.table-wrapper{overflow:auto;height:100%}.container-header{display:none;-webkit-padding-start:var(--container-header-padding-start);padding-inline-start:var(--container-header-padding-start);-webkit-padding-end:var(--container-header-padding-end);padding-inline-end:var(--container-header-padding-end);padding-top:var(--container-header-padding-top);padding-bottom:var(--container-header-padding-bottom);border-bottom:var(--container-header-border-width) solid var(--container-header-border-color)}.container-footer{display:none;-webkit-padding-start:var(--container-footer-padding-start);padding-inline-start:var(--container-footer-padding-start);-webkit-padding-end:var(--container-footer-padding-end);padding-inline-end:var(--container-footer-padding-end);padding-top:var(--container-footer-padding-top);padding-bottom:var(--container-footer-padding-bottom);border-top:var(--container-footer-border-width) solid var(--container-footer-border-color)}.shown{display:block}";
+const cpslTableCss = ":host{--container-border-radius:var(--cpsl-border-radius-table-container);--container-border-color:var(--cpsl-color-background-16);--container-background-color:var(--cpsl-color-background-0);--container-border-width:1px;--container-header-padding-top:24px;--container-header-padding-bottom:24px;--container-header-padding-start:24px;--container-header-padding-end:24px;--container-header-border-width:1px;--container-header-border-color:var(--cpsl-color-background-16);--container-footer-padding-top:16px;--container-footer-padding-bottom:16px;--container-footer-padding-start:24px;--container-footer-padding-end:24px;--container-footer-border-width:1px;--container-footer-border-color:var(--cpsl-color-background-8);--table-header-padding-top:16px;--table-header-padding-bottom:16px;--table-header-padding-start:24px;--table-header-padding-end:24px;--table-header-background-color:var(--cpsl-color-background-4);--table-header-border-color:var(--cpsl-color-background-16);--table-header-border-width:1px;--table-content-padding-top:16px;--table-content-padding-bottom:16px;--table-content-padding-start:24px;--table-content-padding-end:24px;--table-content-border-color:var(--cpsl-color-background-8);--table-content-border-width:1px;display:block}:host cpsl-card{height:100%;--card-padding-top:0px;--card-padding-bottom:0px;--card-padding-start:0px;--card-padding-end:0px;--card-border-width:var(--container-border-width);--card-border-color:var(--container-border-color);--card-border-radius:var(--container-border-radius);--card-background-color:var(--container-background-color)}:host cpsl-card::part(card-container){height:100%;display:flex;flex-direction:column}.content{flex:1;overflow:auto;position:relative}.overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.overlay.horizontal-scroll:not(.vertical-scroll){box-shadow:-24px 0px 24px -24px rgba(0, 0, 0, 0.1) inset}.overlay.vertical-scroll:not(.horizontal-scroll){box-shadow:0px -24px 24px -24px rgba(0, 0, 0, 0.1) inset}.overlay.horizontal-scroll.vertical-scroll{box-shadow:-24px -24px 24px -24px rgba(0, 0, 0, 0.1) inset}.table-wrapper{overflow:auto;height:100%}.container-header{display:none;-webkit-padding-start:var(--container-header-padding-start);padding-inline-start:var(--container-header-padding-start);-webkit-padding-end:var(--container-header-padding-end);padding-inline-end:var(--container-header-padding-end);padding-top:var(--container-header-padding-top);padding-bottom:var(--container-header-padding-bottom);border-bottom:var(--container-header-border-width) solid var(--container-header-border-color)}.container-footer{display:none;-webkit-padding-start:var(--container-footer-padding-start);padding-inline-start:var(--container-footer-padding-start);-webkit-padding-end:var(--container-footer-padding-end);padding-inline-end:var(--container-footer-padding-end);padding-top:var(--container-footer-padding-top);padding-bottom:var(--container-footer-padding-bottom);border-top:var(--container-footer-border-width) solid var(--container-footer-border-color)}.shown{display:block}";
 const CpslTableStyle0 = cpslTableCss;
 
 const CpslTable = class {
@@ -15696,11 +15696,17 @@ const CpslTable = class {
     get contentContainerEl() {
         return this.el.shadowRoot.getElementById('content-container');
     }
+    get headerEl() {
+        return this.el.shadowRoot.getElementById('header-container');
+    }
     get containerSlotEl() {
         return this.el.querySelector('[slot="content"]');
     }
+    get footerEl() {
+        return this.el.shadowRoot.getElementById('footer-container');
+    }
     render() {
-        return (h(Host, { key: '4920aa35da893a515294353ac556fc538092600e' }, h("cpsl-card", { key: '5d5d2e52cd4f913a0052866e3d8f791f33cee3f1', part: "table-container" }, h("div", { key: '24ddcbd96bb87af9075bd5cc2c02dd3530c22bbe', class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: '6801f0628a86ad6d3ef8ab1e34e04fab6460a340', name: "header" })), h("div", { key: 'd6b67587be85a2e0a26112a5a49151c1268f8edd', class: "content-outer-container" }, h("div", { key: '2695f380339328d83288bb420b140441c49ca298', id: "content-container", class: { content: true }, part: "content" }, h("slot", { key: 'e9835ec9a5016db66e3190b7085e1587baeadf67', name: "content" })), h("div", { key: 'b4617eee4bd38cce8902c8a6a2c0521f3a0a684d', class: { 'overlay': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll } })), h("div", { key: 'b0d3c819cbd4760297cc82fe4bc09fc117573924', class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: '989076f53e21802603e89f3a520b308721f87155', name: "footer" })))));
+        return (h(Host, { key: 'c697e33ff0d764f2a99ea98fbbedbb8b3813fb2d' }, h("cpsl-card", { key: 'a1ac41d42ef793cd3d5acd2e7d0468586351b3b4', part: "table-container", style: { position: 'relative' } }, h("div", { key: '5dcce6e3711ce9bdee0e890ab697c2452abdf29e', id: "header-container", class: { 'container-header': true, 'shown': Boolean(this.containerHeaderEl) } }, h("slot", { key: '6256e32a37806f8f6e1fb62a5bc61f937ee16c19', name: "header" })), h("div", { key: 'd151946e88ed755bac82490a237a9336be339abc', id: "content-container", class: { 'content': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll }, part: "content" }, h("slot", { key: '2afa462b208482a645e88060b74ef8150e4fc0d0', name: "content" })), this.headerEl && this.contentContainerEl && this.footerEl && (h("div", { style: { top: `${this.headerEl.clientHeight + 2}px`, height: `${this.contentContainerEl.clientHeight}px` }, class: { 'overlay': true, 'horizontal-scroll': this.hasHorizontalScroll, 'vertical-scroll': this.hasVerticalScroll } })), h("div", { key: '0c8aceeb251955750a45017d5d44eb9be9e2fafc', id: "footer-container", class: { 'container-footer': true, 'shown': Boolean(this.containerFooterEl) } }, h("slot", { key: '0e9f35d9f1d50654a1cca75e008a3cc162fb316c', name: "footer" })))));
     }
     get el() { return getElement(this); }
 };
@@ -15759,7 +15765,7 @@ const CpslTabs = class {
         const tabsPosition = this.el.getBoundingClientRect();
         const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
         const selectedTabRect = this.selectedTabRect;
-        return (h(Host, { key: 'df9361608956f3f8e20b982120068b953a14bd1b', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: 'a9bbb9371172df07aa24c803435b1da21b49744a', class: "tabs-container" }, h("slot", { key: '9d8c82a3531388035ca5a41cbdcc72c5d936cc31' }), h("div", { key: '17271c16be157fbe1296a1a71d1523bd6e9d2c03', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
+        return (h(Host, { key: 'f12c604fc3dadd8088792f02b42bd36618afa298', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: 'be9cfe9c9e069c9593c40d32f474dd23bb8a63fd', class: "tabs-container" }, h("slot", { key: '50ec843d4ae261a0c4f0034d6f60366f5114f55c' }), h("div", { key: '814c5513a2945059ff240912b26a7936a0ee7478', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -15809,7 +15815,7 @@ const CpslText = class {
         }
     }
     render() {
-        return (h(Host, { key: '1886bb20c0cedf9fe76d81bb423a8310d0adf46f', class: {
+        return (h(Host, { key: '97db3be68cbcd4a59851a74bfefac921b9f7efc0', class: {
                 'primary': this.color === 'primary',
                 'secondary': this.color === 'secondary',
                 'tertiary': this.color === 'tertiary',
@@ -15836,7 +15842,7 @@ const CpslText = class {
 };
 CpslText.style = CpslTextStyle0;
 
-const cpslTileButtonCss = ":host{--button-icon-color:var(--cpsl-color-text-primary);--button-border-radius:var(--cpsl-border-radius-tile-button);--button-background-color:var(--cpsl-color-tile-button-surface-default);--button-border-color:var(--cpsl-color-tile-button-border);--button-width:72px;--button-height:56px;--button-gap:4px;--button-box-shadow:0px -4px 4px 0px var(--cpsl-color-alpha-black-2) inset, 0px 4px 4px 0px var(--cpsl-color-alpha-white-4) inset}:host :hover{--button-background-color:var(--cpsl-color-tile-button-surface-hover)}:host :active{--button-background-color:var(--cpsl-color-tile-button-surface-pressed)}.button-native{border-radius:var(--button-border-radius);-webkit-padding-start:var(--button-padding-start);padding-inline-start:var(--button-padding-start);-webkit-padding-end:var(--button-padding-end);padding-inline-end:var(--button-padding-end);padding-top:var(--button-padding-top);padding-bottom:var(--button-padding-bottom);border:1px solid transparent;cursor:pointer;background:var(--button-background-color);border-color:var(--button-border-color);display:flex;flex-direction:column;gap:var(--button-gap);align-items:center;justify-content:center;width:var(--button-width);height:var(--button-height);box-shadow:var(--button-box-shadow)}.button-native cpsl-icon{--icon-color:var(--button-icon-color)}";
+const cpslTileButtonCss = ":host{--button-icon-color:var(--cpsl-color-text-primary);--button-border-radius:var(--cpsl-border-radius-tile-button);--button-background-color:var(--cpsl-color-tile-button-surface-default);--button-border-color:var(--cpsl-color-tile-button-border);--button-width:72px;--button-height:56px;--button-gap:4px}:host :hover{--button-background-color:var(--cpsl-color-tile-button-surface-hover)}:host :active{--button-background-color:var(--cpsl-color-tile-button-surface-pressed)}.button-native{border-radius:var(--button-border-radius);-webkit-padding-start:var(--button-padding-start);padding-inline-start:var(--button-padding-start);-webkit-padding-end:var(--button-padding-end);padding-inline-end:var(--button-padding-end);padding-top:var(--button-padding-top);padding-bottom:var(--button-padding-bottom);border:1px solid transparent;cursor:pointer;background:var(--button-background-color);border-color:var(--button-border-color);display:flex;flex-direction:column;gap:var(--button-gap);align-items:center;justify-content:center;width:var(--button-width);height:var(--button-height);box-shadow:var(--button-box-shadow)}.button-native cpsl-icon{--icon-color:var(--button-icon-color)}";
 const CpslTileButtonStyle0 = cpslTileButtonCss;
 
 const CpslTileButton = class {
@@ -15846,7 +15852,7 @@ const CpslTileButton = class {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: '80829e65291aff559b7fc599c83924646b344242' }, h("button", { key: '5984d2e8439caa4da667691bfb2bedf0b45d499e', class: "button-native" }, h("cpsl-icon", { key: '98e1220e588a050d0daf89873e9c40f0155e1997', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: '9b6b618fbbf527ab07955dde7a99ae27628e4c30' }))));
+        return (h(Host, { key: 'e12a3acf1adac28cb7ed464426bd50b48e5727d8' }, h("button", { key: '005df699f7b93807598568cd6542907f851d0234', class: "button-native" }, h("cpsl-icon", { key: 'af574fff1782925d1bc8d4146538fb179f63dead', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'b6a1d9557e7dbf974411496c7a29b1c0e5d648f3' }))));
     }
 };
 CpslTileButton.style = CpslTileButtonStyle0;