@ebrains/components 0.9.1-beta → 0.9.3-beta

package/dist/components/eds-modal.js

@@ -3,7 +3,7 @@ import { s as sendAnalytics } from './analytics.js';
 import { d as defineCustomElement$3 } from './eds-button2.js';
 import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 
-const edsModalCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.z-50{z-index:50}.z-9999999{z-index:9999999}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.left-20{left:1.25rem}.right-20{right:1.25rem}.top-1\\/2{top:50%}.top-20{top:1.25rem}.bottom-20{bottom:1.25rem}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.ml-8{margin-left:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}@media (min-width: 750px){.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:gap-y-12{row-gap:0.75rem}}";
+const edsModalCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.z-50{z-index:50}.z-9999999{z-index:9999999}.w-full{width:100%}.min-w-full{min-width:100%}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.left-20{left:1.25rem}.right-20{right:1.25rem}.top-1\\/2{top:50%}.top-0{top:0rem}.left-0{left:0rem}.top-20{top:1.25rem}.bottom-0{bottom:0rem}.bottom-20{bottom:1.25rem}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strong{background-color:var(--grey-700)}.bg-strongest{background-color:var(--black)}.ml-8{margin-left:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}@media (min-width: 750px){.md\\:bottom-20{bottom:1.25rem}.md\\:w-auto{width:auto}.md\\:top-20{top:1.25rem}.md\\:top-1\\/2{top:50%}.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:gap-y-12{row-gap:0.75rem}}";
 const EdsModalStyle0 = edsModalCss;
 
 const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLElement {
@@ -11,14 +11,14 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.isOpen = false;
         this.heading = '';
-        this.truncate = true;
-        this.truncateLines = '1';
+        this.truncate = 1;
         this.position = 'middle';
+        this.inverseHeader = false;
+        this.isOpen = false;
     }
     getTruncateClass() {
-        return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
+        return this.truncate ? `line-clamp-${this.truncate}` : '';
     }
     /**
      * Returns the Tailwind CSS classes to position the modal based on the `position` prop.
@@ -29,16 +29,38 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
     getModalPositionClasses() {
         switch (this.position) {
             case 'top':
-                return 'md:left-1/2 top-20 md:-translate-x-1/2';
+                return [
+                    // mobile: pinned to top, full-width
+                    'top-0',
+                    'left-0',
+                    'w-full',
+                    // desktop: half-width centred and offset down
+                    'md:left-1/2',
+                    'md:w-auto',
+                    'md:-translate-x-1/2',
+                    'md:top-20'
+                ].join(' ');
             case 'bottom':
-                return 'md:left-1/2 bottom-20 md:-translate-x-1/2';
-            case 'left':
-                return 'left-20 top-1/2 -translate-y-1/2';
+                return ['bottom-0', 'left-0', 'w-full', 'md:left-1/2', 'md:w-auto', 'md:-translate-x-1/2', 'md:bottom-20'].join(' ');
+            /*case 'left':
+              …
             case 'right':
-                return 'right-20 top-1/2 -translate-y-1/2';
+              …*/
             case 'middle':
             default:
-                return 'md:left-1/2 top-1/2 md:-translate-x-1/2 -translate-y-1/2';
+                return [
+                    // mobile: full-width, start from top with a little padding
+                    'top-0',
+                    'left-0',
+                    'w-full',
+                    'pt-4',
+                    // desktop: centred both axes
+                    'md:left-1/2',
+                    'md:top-1/2',
+                    'md:w-auto',
+                    'md:-translate-x-1/2',
+                    'md:-translate-y-1/2'
+                ].join(' ');
         }
     }
     /**
@@ -98,17 +120,17 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
     render() {
         // Generate a unique id for the title so we can reference it for aria-labelledby.
         const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
-        return (h("div", { key: '3965b74182a1015d34ebc0d5692ab89de44774e6', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: 'c0df46234deb0945ba266e8f36a0b3944bd6d7bd', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        return (h("div", { key: '3a2446813eebf215f2c7aafc26d5688f58020c54', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: '7081928b01c09e692cac0f61dbc58b4f5578271d', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), h("div", { key: '7fd65a4651ca67101b3a3e08ffd439070ccb8a96', class: `container max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '80102734c692934c486fd2e2d707286dd5660c69', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: 'b98138881f6eb4ee1fad3614eda4c91e5349b563', id: titleId, class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '82f08e8ec6cbcb291c5d984ae97622d364bff5d0', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: '2ea2fc21a8b734c40b1de4a20025a50f7369d375', class: "pt-8" }, h("slot", { key: 'ca0fa40b4076af9eea37c6b088d26751173e815c' })))));
+            onClick: () => this.close() })), h("div", { key: '0fc5f4716022cb01c2da9a28738586710625c70f', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '8e4bdffba2f69b18e8846e4c2709c5c423b0a99e', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { key: '6e0d237fc95c1b74b1b0c0456848684578367302', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '3499de216da4ba38edb66cdcd688872f51b41aaf', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: 'f723dded796961e925cc2b046c31e7345fd3e159', class: "pt-8 px-20 py-20" }, h("slot", { key: 'ffe1213b65e60dfaf7c220e3c7e3dd8495706dcf' })))));
     }
     get el() { return this; }
     static get style() { return EdsModalStyle0; }
 }, [1, "eds-modal", {
         "heading": [1, "title"],
-        "truncate": [4],
-        "truncateLines": [1, "truncate-lines"],
+        "truncate": [2],
         "position": [1],
+        "inverseHeader": [4, "inverse-header"],
         "isOpen": [32],
         "open": [64],
         "close": [64],

package/dist/components/eds-pagination2.js

@@ -172,7 +172,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         }
     }
     render() {
-        return (h("div", { key: 'b33415e05457ccc78ea3744a1baa9affbf38ca4a' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'e555e94a3fd13cf0d57108bd2cca3fb97cd0c688', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'c63f1d5aa6154a23d714c74dcd9a0a75b68df579', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
+        return (h("div", { key: '1d53f69179791434224f152503c0b81c4cfc7cd3' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '00ae324b49d62a74feee9d1cde21d67cd726ecf0', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'dedf2ce2700eae9d1386b305ec1d1904b133f992', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
                 ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
                 : this.isFirstPage()
                     ? '#'

package/dist/components/eds-progress-bar2.js

@@ -19,7 +19,7 @@ const EdsProgressBar = /*@__PURE__*/ proxyCustomElement(class EdsProgressBar ext
     }
     render() {
         const progressValue = this.value;
-        return (h("div", { key: '9a7fa42058034305b22818d464e7b633d7831d67', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, h("div", { key: '90b0ac9a538b575a30163c0dbbf437e1cfe8ce39', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
+        return (h("div", { key: '0f47fedbf9d44887f65b399e184215f0937b1df1', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, h("div", { key: 'a2d095d778842c969832ea6b1ba7f7ef917d1390', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
     }
     static get style() { return EdsProgressBarStyle0; }
 }, [1, "eds-progress-bar", {

package/dist/components/eds-rating2.js

@@ -49,7 +49,7 @@ const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLE
         this.rating.emit(rating);
     }
     render() {
-        return (h("div", { key: '2ab4f3dbc4cc3dd5272143e99c67b23086b03e18', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index) => {
+        return (h("div", { key: 'd1650c37f02bf467f888d0afd0a025198bc0eedc', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index) => {
             const starRating = index + 1;
             const isSelected = starRating <= this.selectedRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.

package/dist/components/eds-section-core2.js

@@ -14,7 +14,7 @@ const EdsSectionCore = /*@__PURE__*/ proxyCustomElement(class EdsSectionCore ext
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (h(TagType, { key: '39c4280156ca46b83538de499baa9b152360b1b4' }, h("eds-section-heading", { key: '34da742e606f0e9bb485faac8aba1519eccc8934', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '517b8ecc112565e8c6bb0bf85b02525deaa6f9df' })));
+        return (h(TagType, { key: 'f07162204271dca0f1ec8a3d309ab9d38a9fff4f' }, h("eds-section-heading", { key: 'c4db2a67151fcec22306f624b071725518292e65', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: 'e610f4777f1b334e20482862504085f5317a63df' })));
     }
     static get style() { return EdsSectionCoreStyle0; }
 }, [4, "eds-section-core", {

package/dist/components/eds-section-heading2.js

@@ -26,12 +26,12 @@ const EdsSectionHeading = /*@__PURE__*/ proxyCustomElement(class EdsSectionHeadi
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (h(TagType, { key: '346654c0118e056276162b42723c6c163712ab4f', class: {
+        return (h(TagType, { key: 'efa6dd7e228db2b86961efdff9b5dd9729a1a24b', class: {
                 'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
                 container: this.withContainer,
                 'pt-48': this.spacingLarge,
                 'pt-28': !this.spacingLarge
-            } }, h(HeadingTag, { key: 'c7d17fc22b3926495c799da0bc8bde7dc949e46a', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: 'dd50f0fe3baf084c71dc4c8fa745484645a58f76', class: this.getHeadingClass() }, this.sectionTitle)));
     }
 }, [0, "eds-section-heading", {
         "sectionTitle": [1, "section-title"],

package/dist/components/eds-social-networks2.js

@@ -58,7 +58,7 @@ const EdsSocialNetworks = /*@__PURE__*/ proxyCustomElement(class EdsSocialNetwor
      * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (h("div", { key: '830f2648d282b24630f9266bc07dcf9d1fb528de' }, h("p", { key: '14d58e971d0ca585376d21400258742d2067471d', class: "f-ui-02" }, this.heading), h("ul", { key: 'd5ff24b6dbcfa25bae9b863b64e635e5c838db50', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
+        return (h("div", { key: 'f78431d66b849abfd16c60fc42d341e50fa38c47' }, h("p", { key: '1f905e5bb56695352d1da528862f597bdaa66933', class: "f-ui-02" }, this.heading), h("ul", { key: 'b281b99744549c8f2b941e10ce9b239df2ef6b63', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
     }
     static get style() { return EdsSocialNetworksStyle0; }
 }, [1, "eds-social-networks", {

package/dist/components/eds-spinner2.js

@@ -44,7 +44,7 @@ const EdsSpinner = /*@__PURE__*/ proxyCustomElement(class EdsSpinner extends HTM
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (h(Host, { key: '1e1e4ea2734fff8a680e55ca5163e69d2000a55d' }, h("div", { key: 'acf09f69d43404f317240c0d24e644ec0d046cd7', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '3728629fdff738a0b753cd499dc26052b1e3cb7b', class: "spinner", style: spinnerStyle }))));
+        return (h(Host, { key: '77f17386e37b3dae21c2893dab53ef046d74b8fb' }, h("div", { key: 'c9420f866d61331901df7d6d681d09f75e31846c', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '83497de6228b75fad77225a1b6fee9a614d68fe4', class: "spinner", style: spinnerStyle }))));
     }
     static get style() { return EdsSpinnerStyle0; }
 }, [1, "eds-spinner", {

package/dist/components/eds-steps-v2.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './eds-button2.js';
 import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$2 } from './eds-img2.js';
 
-const edsStepsV2Css = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.from-\\[\\#9CE142\\]{--tw-gradient-from:#9CE142 var(--tw-gradient-from-position);--tw-gradient-to:rgb(156 225 66 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-\\[\\#00C959\\]{--tw-gradient-to:rgb(0 201 89 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #00C959 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-\\[\\#00A595\\]{--tw-gradient-to:#00A595 var(--tw-gradient-to-position)}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.bg-dark{background-color:var(--grey-300)}.bg-strong{background-color:var(--grey-700)}.text-default{color:var(--black)}.text-error{color:var(--red-700)}.text-extra-light{color:var(--grey-300)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}.mb-28{margin-bottom:1.75rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-16{padding:1rem}.p-24{padding:1.5rem}.p-48{padding:3rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.bg-opacity-90{--tw-bg-opacity:0.9}";
+const edsStepsV2Css = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.from-\\[\\#9CE142\\]{--tw-gradient-from:#9CE142 var(--tw-gradient-from-position);--tw-gradient-to:rgb(156 225 66 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-\\[\\#00C959\\]{--tw-gradient-to:rgb(0 201 89 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #00C959 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-\\[\\#00A595\\]{--tw-gradient-to:#00A595 var(--tw-gradient-to-position)}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.bg-dark{background-color:var(--grey-300)}.bg-strong{background-color:var(--grey-700)}.text-default{color:var(--black)}.text-error{color:var(--red-700)}.text-extra-light{color:var(--grey-300)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mt-16{margin-top:1rem}.mb-0{margin-bottom:0rem}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}.mb-28{margin-bottom:1.75rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-16{padding:1rem}.p-24{padding:1.5rem}.p-48{padding:3rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.bg-opacity-90{--tw-bg-opacity:0.9}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}";
 const EdsStepsV2Style0 = edsStepsV2Css;
 
 const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends HTMLElement {
@@ -65,7 +65,7 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
     articleClasses() {
         return [
             this.bg ? 'bg-inverse' : 'bg-default',
-            'border-softer effect-focus-within relative rounded-lg border-2 p-16'
+            'border-softer effect-focus-within relative rounded-lg border-2'
         ].join(' ');
     }
     handleStepClick(index) {
@@ -83,9 +83,9 @@ const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends H
     }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: '06d6c64cd4389908276a6b0c738700c315d693af', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "mb-28" }, h("eds-img", { src: this.imageSrc, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: "mb-28 w-full bg-[#00A595] relative" }, h("div", { class: "text-inverse f-heading-04 p-24 md:p-48" }, this.message)))), this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter my-16", innerHTML: step.content }), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))) : (
+        return (h("div", { key: 'e86620aed9aafbf0c8e0cde0230b2147df952379', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: "w-full bg-[#00A595] rounded-t-lg border-2" }, h("div", { class: "p-24" }, h("span", { class: "text-inverse f-heading-04 " }, this.message))))), h("div", { key: '773e51621fbfbc7b828d196d1e64a9752d02e5a4', class: "p-8" }, this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step space-y-8", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter mt-16", innerHTML: step.content }), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))) : (
         // Static mode: show all steps with their content.
-        h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter my-16", innerHTML: step.content })))))))));
+        h("div", { class: "steps space-y-8" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter mt-16", innerHTML: step.content }))))))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/eds-switch.js

@@ -24,11 +24,11 @@ const EdsSwitch$1 = /*@__PURE__*/ proxyCustomElement(class EdsSwitch extends HTM
     render() {
         // Compute an accessible name based on state.
         const accessibleLabel = this.labelOn || this.labelOff ? (this.checked ? this.labelOn : this.labelOff) : 'Toggle switch';
-        return (h("div", { key: '842d7ecb771ab848481c9f1f6a1aa2f5f04505a7', class: "switch-container" }, this.labelOff && h("span", { key: 'f20f4293896dcbde94346e82d10ed748bdeae0f6', class: "switch-label switch-label--off" }, this.labelOff), h("button", { key: 'ac485fe118bae7f6a42ddb9f7edeccba2224312c', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
+        return (h("div", { key: 'ef70db7a5ed4f8e8db7e1a9e94334a3686ec1d0e', class: "switch-container" }, this.labelOff && h("span", { key: '4a18de129ba0b4e643a0929b6fc797b7bc35cb4c', class: "switch-label switch-label--off" }, this.labelOff), h("button", { key: '2d75656fadf36a38269d361fef176e243e1291c2', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled
-            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: '3701615162b3b8946fa5b9040e77dfa20b7de3fe', class: "switch-handle" })), this.labelOn && h("span", { key: 'b57bd428c7d6818bcec1f069a920a7aa2a2e776d', class: "switch-label switch-label--on" }, this.labelOn)));
+            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: '71bd3c8c042ac337c1392977c27e8f4ccde5e79f', class: "switch-handle" })), this.labelOn && h("span", { key: '7cfa0b1f805271c9281853a872cedf93db7e07d8', class: "switch-label switch-label--on" }, this.labelOn)));
     }
     static get style() { return EdsSwitchStyle0; }
 }, [1, "eds-switch", {

package/dist/components/eds-table2.js

@@ -180,15 +180,15 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-        return (h("div", { key: '43add2309d8e2c85c98676709cd87fc07e4de017' }, this.searchEnabled && (h("div", { key: '1213d8aaa8a2402bd1705e03375d17f570877d5e' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
+        return (h("div", { key: '9ac7ad4f02237c02eaf5d3b351ded21bce29bd6c' }, this.searchEnabled && (h("div", { key: '1cecf9a9089391c3bce72dd53a6f5ffa92692661' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
             // @ts-ignore
-            onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'a2ec6392ed99a527e4de46a9018bc1ea9b383ecb', class: "mt-20" }, h("table", { key: 'ef79ce872f0cb1439dd6a7987f24cac005ac23ea', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '0853a09e45f748b4bc85e319cbb08efd97426617' }, h("tr", { key: '64e114ae3661a027e9ab744ba45801d98f2faee9', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            onInput: (event) => this.handleSearch(event) }))), h("div", { key: '435bbfd0a4dd3ddd0a7766863cdd8c2eaf41eb8f', class: "mt-20" }, h("table", { key: '4785490532015b7069be068e80135220f37c3955', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '8a99a961cf350bca26b1f73b8ffd6c8e1c48378f' }, h("tr", { key: 'a4ee04e342687830e905a3bd5217e53e513f0167', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
             var _a;
             return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, column));
-        }))), h("tbody", { key: '1afd468551bab11221bbfc70d0f19f4e105e7432' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+        }))), h("tbody", { key: '3c764ac7137d1b21f45003c6df5324e7d0db749f' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
             var _a;
             return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[column], column)));
-        }))))))), this.shouldEnablePagination() && (h("div", { key: 'c415ded700580eec2464a72a1659bd8be5bcacb3', class: "mt-20" }, h("eds-pagination", { key: '81088574b7c7fd254e07761ceed6cd1d69c2f2ed', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+        }))))))), this.shouldEnablePagination() && (h("div", { key: '98a1179b45fbc1b2f079825c899410ef4faf8c45', class: "mt-20" }, h("eds-pagination", { key: '662c479139658ea7f3d2a3955c77e24d44dd6e74', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     get hostEl() { return this; }
     static get watchers() { return {