@ebrains/components 0.9.1-beta → 0.9.3-beta

package/dist/collection/components/eds-modal/eds-modal.css

@@ -45,6 +45,12 @@
 .z-9999999 {
     z-index: 9999999;
 }
+.w-full {
+    width: 100%;
+  }
+.min-w-full {
+    min-width: 100%;
+}
 
 .max-w-full {
     max-width: 100%;
@@ -112,10 +118,18 @@
     top: 50%;
 }
 
+.top-0 {
+    top: 0rem;
+  }
+  .left-0 {
+    left: 0rem;
+  }
 .top-20 {
     top: 1.25rem;
 }
-
+.bottom-0 {
+    bottom: 0rem;
+  }
 .bottom-20 {
     bottom: 1.25rem;
 }
@@ -194,6 +208,26 @@
     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;
 }
@@ -235,6 +269,18 @@
 }
 
 @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%;
     }

package/dist/collection/components/eds-modal/eds-modal.js

@@ -12,14 +12,14 @@ import { h } from "@stencil/core";
  */
 export class EdsModal {
     constructor() {
-        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.
@@ -30,16 +30,38 @@ export class EdsModal {
     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(' ');
         }
     }
     /**
@@ -99,9 +121,9 @@ export class EdsModal {
     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' })))));
     }
     static get is() { return "eds-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -136,58 +158,58 @@ export class EdsModal {
                 "defaultValue": "''"
             },
             "truncate": {
-                "type": "boolean",
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "1 | 2 | 3 | 4",
+                    "resolved": "1 | 2 | 3 | 4",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A boolean indicating whether the description should be truncated.\nDefault is `true`."
+                    "text": "The number of lines to truncate the title to.\nDefault is 3 lines."
                 },
                 "attribute": "truncate",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "1"
             },
-            "truncateLines": {
+            "position": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'middle' | 'top' | 'bottom'",
+                    "resolved": "\"bottom\" | \"middle\" | \"top\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of lines to truncate the description to.\nDefault is 3 lines."
+                    "text": "Specifies the position of the modal.\n\nAcceptable values are:\n- `\"middle\"` (default): The modal is centered both vertically and horizontally.\n- `\"top\"`: The modal is positioned near the top of the viewport.\n- `\"bottom\"`: The modal is positioned near the bottom of the viewport.\n- `\"left\"`: The modal is positioned on the left side of the viewport, centered vertically.\n- `\"right\"`: The modal is positioned on the right side of the viewport, centered vertically."
                 },
-                "attribute": "truncate-lines",
+                "attribute": "position",
                 "reflect": false,
-                "defaultValue": "'1'"
+                "defaultValue": "'middle'"
             },
-            "position": {
-                "type": "string",
+            "inverseHeader": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "'middle' | 'top' | 'bottom' | 'left' | 'right'",
-                    "resolved": "\"bottom\" | \"left\" | \"middle\" | \"right\" | \"top\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the position of the modal.\n\nAcceptable values are:\n- `\"middle\"` (default): The modal is centered both vertically and horizontally.\n- `\"top\"`: The modal is positioned near the top of the viewport.\n- `\"bottom\"`: The modal is positioned near the bottom of the viewport.\n- `\"left\"`: The modal is positioned on the left side of the viewport, centered vertically.\n- `\"right\"`: The modal is positioned on the right side of the viewport, centered vertically."
+                    "text": "Whether to use the inverse header style\n(light text on strong background) instead of the default."
                 },
-                "attribute": "position",
+                "attribute": "inverse-header",
                 "reflect": false,
-                "defaultValue": "'middle'"
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/eds-modal/eds-modal.stories.js

@@ -10,24 +10,36 @@ export default {
         },
         position: {
             control: 'select',
-            options: ['middle', 'top', 'bottom', 'left', 'right'],
+            options: ['default', 'top', 'bottom'],
             description: 'Position of the modal in the viewport'
+        },
+        truncate: {
+            control: { type: 'range', min: 1, max: 4, step: 1 },
+            description: 'Number of lines to truncate the title (1–4)',
+            defaultValue: 1
+        },
+        inverseHeader: {
+            control: 'boolean',
+            description: 'Use inverse (light text on strong BG) for the title bar',
+            defaultValue: false
         }
     },
     args: {
         title: 'Default Modal Title',
-        position: 'middle'
+        position: 'middle',
+        truncate: 1,
+        inverseHeader: false
     }
 };
-const Template = ({ title, position }) => {
+const Template = ({ title, position, truncate, inverseHeader }) => {
     const openModal = () => {
         var _a;
         // Open the first instance of eds-modal on the page
         (_a = document.querySelector('eds-modal')) === null || _a === void 0 ? void 0 : _a.open();
     };
     return html `
-    <!-- Modal component with dynamic title and position -->
-    <eds-modal title="${title}" position="${position}">
+    <!-- Modal component with dynamic title, position, and truncation -->
+    <eds-modal title="${title}" position="${position}" truncate="${truncate}" inverse-header="${inverseHeader}">
       <p>This is the content inside the modal.</p>
     </eds-modal>
 
@@ -38,29 +50,25 @@ const Template = ({ title, position }) => {
 export const Default = Template.bind({});
 Default.args = {
     title: 'Default Modal Title',
-    position: 'middle'
+    position: 'middle',
+    truncate: 1,
+    inverseHeader: false
 };
-const TemplateWithForm = ({ title, position }) => {
+const TemplateWithForm = ({ title, position, truncate, inverseHeader }) => {
     const openModal = () => {
         var _a;
         (_a = document.querySelector('eds-modal')) === null || _a === void 0 ? void 0 : _a.open();
     };
     return html `
     <!-- Modal with eds-form inside the slot -->
-    <eds-modal title="${title}" position="${position}">
+    <eds-modal title="${title}" position="${position}" truncate="${truncate}" inverse-header="${inverseHeader}">
       <eds-form
         name="extended-form"
-        endpoint="http://127.0.0.1:5000/api/data"
         fields='[
           {"name": "username", "label": "Username", "type": "text", "required": true, "maxlength": 10},
           {"name": "email", "label": "Email", "type": "email", "required": true},
           {"name": "number", "label": "Number", "type": "number", "required": true}
         ]'
-        success-message="Form submitted successfully!"
-        error-message="Please fix the errors in the form."
-        submit-btn="true"
-        small-alert="false"
-        set-form-url="true"
       ></eds-form>
     </eds-modal>
 
@@ -76,5 +84,6 @@ const TemplateWithForm = ({ title, position }) => {
 export const ModalWithForm = TemplateWithForm.bind({});
 ModalWithForm.args = {
     title: 'Extended Form Modal',
-    position: 'middle'
+    position: 'middle',
+    truncate: 1
 };

package/dist/collection/components/eds-pagination/eds-pagination.js

@@ -173,7 +173,7 @@ export class EdsPagination {
         }
     }
     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/collection/components/eds-progress-bar/eds-progress-bar.js

@@ -12,7 +12,7 @@ export class EdsProgressBar {
     }
     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 is() { return "eds-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-rating/eds-rating.js

@@ -39,7 +39,7 @@ export class EdsRating {
         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/collection/components/eds-section/eds-section-core/eds-section-core.js

@@ -17,7 +17,7 @@ export class EdsSectionCore {
     }
     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 is() { return "eds-section-core"; }
     static get originalStyleUrls() {

package/dist/collection/components/eds-section/eds-section-heading/eds-section-heading.js

@@ -36,12 +36,12 @@ export class EdsSectionHeading {
     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)));
     }
     static get is() { return "eds-section-heading"; }
     static get properties() {

package/dist/collection/components/eds-spinner/eds-spinner.js

@@ -37,7 +37,7 @@ export class EdsSpinner {
                 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 is() { return "eds-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-switch/eds-switch.js

@@ -16,11 +16,11 @@ export class EdsSwitch {
     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 is() { return "eds-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-table/eds-table.js

@@ -174,15 +174,15 @@ export class EdsTable {
         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" })))));
     }
     static get is() { return "eds-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-tag/eds-tag.js

@@ -36,7 +36,7 @@ export class EdsTag {
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return h("span", { key: '20ad2f289c8362346e28e42677b3bc3d626e154d', class: classes }, this.label);
+        return h("span", { key: '4531e69a8dce962b77107b2da984aeae6ba4b4c4', class: classes }, this.label);
     }
     static get is() { return "eds-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-timeline/eds-timeline.css

@@ -6192,9 +6192,6 @@ input[type="range"]::-webkit-slider-thumb {
 .bottom-0 {
   bottom: 0rem;
 }
-.bottom-20 {
-  bottom: 1.25rem;
-}
 .bottom-4 {
   bottom: 0.25rem;
 }
@@ -6207,9 +6204,6 @@ input[type="range"]::-webkit-slider-thumb {
 .left-1\/2 {
   left: 50%;
 }
-.left-20 {
-  left: 1.25rem;
-}
 .left-4 {
   left: 0.25rem;
 }
@@ -6219,9 +6213,6 @@ input[type="range"]::-webkit-slider-thumb {
 .right-0 {
   right: 0rem;
 }
-.right-20 {
-  right: 1.25rem;
-}
 .right-4 {
   right: 0.25rem;
 }
@@ -6243,9 +6234,6 @@ input[type="range"]::-webkit-slider-thumb {
 .top-16 {
   top: 1rem;
 }
-.top-20 {
-  top: 1.25rem;
-}
 .top-full {
   top: 100%;
 }
@@ -7710,15 +7698,27 @@ input[type="range"]::-webkit-slider-thumb {
   }
 }
 @media (min-width: 750px) {
+  .md\:bottom-20 {
+    bottom: 1.25rem;
+  }
   .md\:left-1\/2 {
     left: 50%;
   }
+  .md\:top-1\/2 {
+    top: 50%;
+  }
+  .md\:top-20 {
+    top: 1.25rem;
+  }
   .md\:flex {
     display: flex;
   }
   .md\:hidden {
     display: none;
   }
+  .md\:w-auto {
+    width: auto;
+  }
   .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));
@@ -7730,9 +7730,6 @@ input[type="range"]::-webkit-slider-thumb {
   .md\:gap-y-12 {
     row-gap: 0.75rem;
   }
-  .md\:p-48 {
-    padding: 3rem;
-  }
   .md\:pt-28 {
     padding-top: 1.75rem;
   }

package/dist/collection/components/eds-timeline/eds-timeline.js

@@ -38,7 +38,7 @@ export class EdsTimeline {
         }
     }
     render() {
-        return (h("div", { key: 'c17be7d774b926cf9010f767e4ba0eb22c127037', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '3e026116855d9468194f6a354776c39f2ce7086d', class: "relative" }, h("div", { key: '5046d3533850cd8a589ddbb24c3ed5c79bf85380', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: 'e1954f23d1b8f22b954b729c176bce8ba9443647', class: "space-y-16" }, this.parsedEvents.map((event, index) => (h("div", { class: "relative flex" }, h("div", { class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}` }, index % 2 === 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
+        return (h("div", { key: '47b46ebc0621df79434201a219d73ab8e2fd62fa', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '7b5b89161bbb9420a3450ed4eb0e49d608eec2d6', class: "relative" }, h("div", { key: '21472cb756ca069b9f25e894899def03bb78751a', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '3972b2885995d9656f426cf17ec54c5410ecd385', class: "space-y-16" }, this.parsedEvents.map((event, index) => (h("div", { class: "relative flex" }, h("div", { class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}` }, index % 2 === 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]
                 : [{ label: 'pending', style: 'default' }]), onClick: () => this.handleEventClick(event) }))), h("div", { class: "flex items-center justify-center relative" }, event.completed ? (h("div", { class: "w-32 h-32 bg-accent rounded-full shadow flex items-center justify-center" })) : (h("div", { class: "w-32 h-32 bg-strong rounded-full shadow flex items-center justify-center" }))), h("div", { class: `w-1/2 ${index % 2 !== 0 ? 'pl-4' : ''}` }, index % 2 !== 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]

package/dist/collection/components/eds-tooltip/eds-tooltip.js

@@ -90,7 +90,7 @@ export class EdsTooltip {
         }
     }
     render() {
-        return (h("div", { key: '61455282a8a27a420e571ddb0abd31b6761d12ff', class: "relative" }, h("slot", { key: '8a29dd5f74c6a497111786fadcad766e410a1e34' }), this.isVisible && this.isPositioned && this.content && (h("div", { key: '34e5eef506a0d203e898027275c96f2dc3d3bd92', class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6", role: "tooltip", style: {
+        return (h("div", { key: '7bc92c002eaf263a2d10a2391f356f40e23d5998', class: "relative" }, h("slot", { key: 'cc8126196b03fd02bb17701aa4f55d4a406f685a' }), this.isVisible && this.isPositioned && this.content && (h("div", { key: '00d854649ef43b958081bbb336319a537c181574', class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6", role: "tooltip", style: {
                 top: this.tooltipStyle.top,
                 left: this.tooltipStyle.left,
                 transform: this.tooltipStyle.transform

package/dist/collection/components/eds-trl/eds-trl.js

@@ -41,7 +41,7 @@ export class EdsTrl {
             Application: { format: 'code' },
             'Current TRL Stage': { format: 'text' }
         };
-        return (h("div", { key: '00a54a2865be6f24f9b67bd47008551070c45438', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: '5f60e2a9e4b6bb3b16981c4be01269cd3d985086', "table-data": JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
+        return (h("div", { key: '7f2775e107e053cf1e8091f97915e6bc372c3954', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: '9576b1c5dc72335ef0f7158fa4eaa44835acd8db', "table-data": JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
     }
     static get is() { return "eds-trl"; }
     static get properties() {

package/dist/collection/eds-docs-ui/colors/color-palette/primary.js

@@ -33,7 +33,7 @@ export class ColorPrimaryPalette {
         ];
     }
     render() {
-        return (h("ul", { key: '970e6baf4b258e9a0ed194316daf1c862d17733e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (h("ul", { key: 'af0b4133a365f9c2db08ea05eab950de32536950', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
     static get is() { return "color-primary-palette"; }
 }

package/dist/collection/eds-docs-ui/colors/color-palette/secondary.js

@@ -58,7 +58,7 @@ export class ColorSecondaryPalette {
         this.show = undefined;
     }
     render() {
-        return (h("ul", { key: '54f985b91b28ae253a06ec313872ccc81449bf51', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (h("ul", { key: '059dacf5e142b2e4bd61a7977f1bdd79554ddca9', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
     static get is() { return "color-secondary-palette"; }
     static get properties() {

package/dist/collection/eds-docs-ui/colors/color-palette/support.js

@@ -58,7 +58,7 @@ export class ColorSupportPalette {
         return 'text-default';
     }
     render() {
-        return (h("ul", { key: 'cf31dbb2778735cb95f40243f557e97c15cd29f0', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
+        return (h("ul", { key: '2cadb1ac7f985ba4960eb2a8b8d64c543c07dafa', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
             // compute once
             const textClass = this.getTextColor(color.background);
             return (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: `f-body-02 ${textClass}` }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' }, class: textClass })), h("div", { class: "grid" }, h("span", { class: `f-body-02 ${textClass}` }, color.pantoneC), h("span", { class: `f-body-02 ${textClass}` }, color.pantoneU)))));

package/dist/collection/eds-docs-ui/colors/gradient-palette/primary.js

@@ -33,7 +33,7 @@ export class GradientPrimaryPalette {
         ];
     }
     render() {
-        return (h("ul", { key: '469fc7f19a4346b7e930095c489c0e89cc58e6df', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (h("ul", { key: 'b77f4fad55c2aa54422fd3b18ef09d4004490014', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
                 background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
             } }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16" }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }