@ebrains/components 0.8.0-alpha.0 → 0.9.0-beta

package/dist/collection/components/eds-input-elements/eds-input-range/eds-input-range.js

@@ -11,6 +11,11 @@ export class EdsInputRange {
             const target = e.target;
             this.sliderVal = parseInt(target.value, 10); // Update the slider value dynamically
         };
+        this.onChange = (e) => {
+            const target = e.target;
+            this.sliderVal = parseInt(target.value, 10); // Update the slider value dynamically
+            this.edsrange.emit(this.sliderVal);
+        };
         this.name = undefined;
         this.inputId = 'range';
         this.disabled = false;
@@ -18,7 +23,18 @@ export class EdsInputRange {
         this.min = 0;
         this.max = 100;
         this.step = 1;
-        this.sliderVal = this.max % 2 === 0 ? this.max / 2 : Math.ceil(this.max / 2);
+        this.value = undefined;
+        this.sliderVal = undefined;
+    }
+    componentWillLoad() {
+        this.sliderVal =
+            this.value !== undefined ? this.value : this.max % 2 === 0 ? this.max / 2 : Math.ceil(this.max / 2);
+    }
+    // Keep the internal state in sync when the passed value changes.
+    onValueChange(newVal) {
+        if (newVal !== undefined) {
+            this.sliderVal = newVal;
+        }
     }
     componentDidLoad() {
         // Assign the native input element after the component loads
@@ -29,7 +45,7 @@ export class EdsInputRange {
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '4303ce0031e42249382a049f2214ac9a310f4c1d', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: '25c349147fd3b5673bf9ea42f9c9a8477d178bd2', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput }), h("p", { key: 'e21351977aed715d157bb7577a59cec095f221e9', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
+        return (h("div", { key: '6d0d2daa8e4a727765259ac14709837c5ed23955', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: 'd2e2ca171ff99f106130a0ba6cbcdd413de0b371', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput, onChange: this.onChange }), h("p", { key: '078def92e74b4056555d968fbc767693af15b100', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
     }
     static get is() { return "eds-input-range"; }
     static get properties() {
@@ -158,6 +174,23 @@ export class EdsInputRange {
                 "attribute": "step",
                 "reflect": false,
                 "defaultValue": "1"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The externally provided preset value from init-data."
+                },
+                "attribute": "value",
+                "reflect": false
             }
         };
     }
@@ -166,6 +199,24 @@ export class EdsInputRange {
             "sliderVal": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "edsrange",
+                "name": "edsrange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
     static get methods() {
         return {
             "getInputElement": {
@@ -192,4 +243,10 @@ export class EdsInputRange {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
 }

package/dist/collection/components/eds-input-elements/eds-input-search/eds-input-search.js

@@ -66,7 +66,7 @@ export class EdsInputSearch {
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: 'cd0d0f878ddfdd9de78844a9fe7f54c1afc01f00', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '51580657eebca704fda0c40acfbac435bbd843ae', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: 'db878dfcad30f8a4a718d4f8b0184c27366038e8', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `search-input w-full rounded-sm f-body-01 pl-36 px-6 py-6 gap-x-12 block appearance-none border-0 effect-color effect-focus ${this.decorate}`,
+        return (h("div", { key: '6258597f79cddca1995825142e26eafc560a553a', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: 'e7379f4b8fe1f749153da3eaaeef4a8ac690b21f', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '2c37c1e6a0b7c60507fdb62de441109be6ea0888', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
             //onInput={this.onInput}
             onChange: this.onChange })));
     }

package/dist/collection/components/eds-input-elements/eds-input-select/eds-input-select.js

@@ -102,7 +102,10 @@ export class EdsInputSelect {
         return path.split('.').reduce((acc, part) => acc && acc[part], obj);
     }
     render() {
-        return (h("div", { key: 'cf167d50401aec809a3c399886feecb854f8a038', class: "relative", "aria-busy": this.loading ? 'true' : 'false' }, h("select", { key: '74d9a2404616824c98f9625ff1fdd1d82fbc22d9', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled || this.loading, required: this.required, onChange: this.handleChange }, h("option", { key: '237f4e20cd20d4fe9e35afe21eaa5537d12c583a', value: "", disabled: true, hidden: true }, this.loading ? 'Loading options...' : `Please select ${this.name}`), this.dynamicOptions.map((option, index) => (h("option", { key: index, value: this.getValueByPath(option, this.dynamicValueKey) }, this.getValueByPath(option, this.dynamicLabelKey))))), h("span", { key: '481eddf49aa0f78fa6534f65484fbff953ca2c59', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled || this.loading ? 'text-lightest bg-transparent' : ''}` }, h("eds-icon-wrapper", { key: '5b73e8c045df38fa1260a4f5c940c0148a41b4c8', class: "w-20 h-20", icon: "chevron-right" }))));
+        return (h("div", { key: 'cc940456a2e0ce84f3b1c05d83a8b37db076c38d', class: "relative", "aria-busy": this.loading ? 'true' : 'false' }, h("select", { key: '105ee19d398aee3df6a6bdde282d4930f4391bc1', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled || this.loading, required: this.required, onChange: this.handleChange }, h("option", { key: '057fd3d0305d390dff0b5b8e0bf40d803cab7b02', value: "", disabled: true, hidden: true }, this.loading ? 'Loading options...' : `Please select ${this.name}`), this.dynamicOptions.map((option, index) => {
+            const optionValue = this.getValueByPath(option, this.dynamicValueKey);
+            return (h("option", { key: index, value: optionValue, selected: optionValue === this.value }, this.getValueByPath(option, this.dynamicLabelKey)));
+        })), h("span", { key: '39a047ac87650db1402db082379b4f4169d5116e', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled || this.loading ? 'text-lightest bg-transparent' : ''}` }, h("eds-icon-wrapper", { key: 'bee0a8b2a54d855452fb547347c5888cae9f4024', class: "w-20 h-20", icon: "chevron-right" }))));
     }
     static get is() { return "eds-input-select"; }
     static get properties() {

package/dist/collection/components/eds-input-field/eds-input-field.js

@@ -12,6 +12,28 @@ import { h } from "@stencil/core";
  */
 export class EdsInputField {
     constructor() {
+        this.handleNativeInput = (ev) => {
+            var _a;
+            // 1) Call any passed-in handler
+            (_a = this.onInput) === null || _a === void 0 ? void 0 : _a.call(this, ev);
+            // 2) Re-emit on host so Vue/others can catch it
+            const newValue = ev.target.value;
+            this.hostEl.dispatchEvent(new CustomEvent('oninput', {
+                detail: { value: newValue },
+                bubbles: true,
+                composed: true
+            }));
+        };
+        this.handleNativeChange = (ev) => {
+            var _a;
+            (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, ev);
+            const target = ev.target;
+            this.hostEl.dispatchEvent(new CustomEvent('onchange', {
+                detail: { value: target.value },
+                bubbles: true,
+                composed: true
+            }));
+        };
         this.name = undefined;
         this.inputId = undefined;
         this.placeholder = undefined;
@@ -54,8 +76,8 @@ export class EdsInputField {
             id: this.inputId,
             placeholder: this.placeholder,
             disabled: this.disabled,
-            onChange: this.onChange,
-            onInput: this.onInput,
+            onInput: this.handleNativeInput,
+            onChange: this.handleNativeChange,
             type: this.type,
             required: this.required,
             value: this.value,
@@ -63,11 +85,20 @@ export class EdsInputField {
             icon: this.icon,
             checked: this.checked
         };
-        return (h("div", { key: 'ef0defab1a025c7764c3e0c085968924c0d77dda', class: "space-y-8" }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4 mt-8" }, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.parsedOptions.map((option) => (h("div", { class: "flex items-center gap-x-2", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { value: option.value })), h("eds-input-label", { name: `${this.name}-${option.value}`, label: option.label })))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts)), this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (h("div", null, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.type === 'select' ? (h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (h("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChange, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
+        return (h("div", { key: 'd8d68bdff663749f22dcd25986a22b0459346f0d', class: "space-y-8" }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4 mt-8" }, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.parsedOptions.map((option) => (h("div", { class: "flex items-center gap-x-2", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { value: option.value, checked: (typeof this.value === 'string' ? this.value.split(',') : []).includes(String(option.value)) })), h("eds-input-label", { name: `${this.name}-${option.value}`, label: option.label })))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts, { value: this.value, checked: this.value === 'on' })), this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (h("div", null, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.type === 'select' ? (h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (h("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChange, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
             var _a, _b, _c;
+            const rangeProps = {
+                name: inputOpts.name,
+                inputId: inputOpts.id || inputOpts.name,
+                disabled: inputOpts.disabled,
+                required: inputOpts.required,
+                onInput: inputOpts.onInput,
+                onChange: inputOpts.onChange
+            };
             const opt = this.parsedOptions;
-            return (h("eds-input-range", { min: (_a = opt[0]) === null || _a === void 0 ? void 0 : _a.value, max: (_b = opt[1]) === null || _b === void 0 ? void 0 : _b.value, step: (_c = opt[2]) === null || _c === void 0 ? void 0 : _c.value, name: "range-slider" }));
-        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("eds-input-footer", { key: '1bbe8ffc01260083f33ce7747c55836d7507ffc0', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
+            const numberValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value || 0;
+            return (h("eds-input-range", Object.assign({}, rangeProps, { min: (_a = opt[0]) === null || _a === void 0 ? void 0 : _a.value, max: (_b = opt[1]) === null || _b === void 0 ? void 0 : _b.value, step: (_c = opt[2]) === null || _c === void 0 ? void 0 : _c.value, value: numberValue })));
+        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("eds-input-footer", { key: 'ecf472d91e754c93899d3bbece01f03babfbe985', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
     }
     static get is() { return "eds-input-field"; }
     static get encapsulation() { return "shadow"; }
@@ -416,4 +447,5 @@ export class EdsInputField {
             }
         };
     }
+    static get elementRef() { return "hostEl"; }
 }

package/dist/collection/components/eds-input-field/eds-input-field.stories.js

@@ -50,6 +50,7 @@ const Template = (args) => {
       ${args.required ? `required="${args.required}"` : ''}
       ${args.label ? `label="${args.label}"` : ''}
       ${args.hint ? `hint="${args.hint}"` : ''}
+      ${args.link ? `link="${args.link}"` : ''}
       ${args.icon ? `icon="${args.icon}"` : ''}
       ${linkJson ? `link='${linkJson}'` : ''}
       ${args.message ? `message="${args.message}"` : ''}

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

@@ -5657,9 +5657,18 @@ input[type="range"]::-webkit-slider-thumb {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
+.-ml-8 {
+  margin-left: -0.5rem;
+}
 .-ml-16 {
   margin-left: -1rem;
 }
+.-mr-4 {
+  margin-right: -0.25rem;
+}
+.-mr-8 {
+  margin-right: -0.5rem;
+}
 .-mr-16 {
   margin-right: -1rem;
 }
@@ -5858,6 +5867,9 @@ input[type="range"]::-webkit-slider-thumb {
 .h-full {
   height: 100%;
 }
+.\!min-h-0 {
+  min-height: 0rem !important;
+}
 .\!min-h-20 {
   min-height: 1.25rem !important;
 }

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

@@ -40,15 +40,15 @@ const linkStyles = cva([
                 // aria-disabled:line-through
             ],
             blueish: [
-                '-top-1 !px-0 !py-0 !min-h-20 text-[#0034CB] decoration-[#0034CB] underline underline-offset-4 ',
+                '!px-0 !py-0 !min-h-20 text-[#0034CB] decoration-[#0034CB] underline underline-offset-4',
                 'effect-focus focus-visible:rounded-xs',
-                'hover:before:opacity-100 focus-visible:before:opacity-0',
+                'hover:no-underline',
                 'aria-disabled:bg-transparent aria-disabled:no-underline'
-                // aria-disabled:line-through
+                //aria-disabled:line-through
             ],
             underline: [
-                'decoration-accent underline underline-offset-4 !py-0',
-                'hover:no-underline effect-focus focus-visible:rounded-xs'
+                'decoration-accent underline underline-offset-4 !px-0 !py-0',
+                'hover:no-underline effect-focus focus-visible:rounded-xs !min-h-0'
             ]
         },
         iconSmall: {
@@ -59,8 +59,12 @@ const linkStyles = cva([
             true: '',
             false: ''
         },
+        hasIcon: {
+            true: '',
+            false: ''
+        },
         size: {
-            underline: 'f-body-02',
+            underline: 'f-body-02 ',
             small: 'min-h-36 f-ui-02 px-12',
             large: 'min-h-44 f-ui-01 px-16'
         }
@@ -76,6 +80,8 @@ const linkStyles = cva([
             size: 'large',
             class: 'pr-8'
         },
+        { intent: 'blueish', hasIcon: true, class: '-mr-4 -top-1' },
+        { intent: 'underline', hasIcon: true, class: '-mr-4 -top-1' },
         // Active state
         {
             intent: 'primary',
@@ -117,7 +123,8 @@ const linkStyles = cva([
         //intent: 'primary',
         isActive: false,
         iconSmall: false,
-        size: 'small'
+        size: 'small',
+        hasIcon: false
     }
 });
 /**
@@ -200,14 +207,15 @@ export class EdsLink {
             intent: this.intent,
             size: this.getLinkSize(),
             iconSmall: this.iconSmall,
-            isActive: this.current
+            isActive: this.current,
+            hasIcon: !!this.icon
         });
         // If no visible label is provided, ensure ariaLabel is set.
         const computedAriaLabel = this.ariaLabel || this.label || 'link';
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h(ComponentType, { key: 'c9ff2d213a68f1391482897d4b5563b9b6e696b8', class: `${classes || ''} ${this.extraClass || ''}`, href: !this.disabled ? this.url : undefined, target: this.external && !this.disabled ? '_blank' : undefined, rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined, "aria-label": computedAriaLabel, "aria-disabled": this.disabled ? 'true' : null, "aria-current": this.current ? 'page' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, h("span", { key: 'd46d94fa6974c608bda4495cef5fd0853c13cd0b', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: '36d5bc8ceb45a1d079653ff66b1a2a8ce2abb664', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (h(ComponentType, { key: 'ef4f274fc66857b4d247449b4aba9a7f45da5eef', class: `${classes || ''} ${this.extraClass || ''}`, href: !this.disabled ? this.url : undefined, target: this.external && !this.disabled ? '_blank' : undefined, rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined, "aria-label": computedAriaLabel, "aria-disabled": this.disabled ? 'true' : null, "aria-current": this.current ? 'page' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, h("span", { key: '44d300a455e51718fdb2d2414ce472b3a9a3a393', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: 'ebd8528be9d2c7ccfba0cb75476823ac1deade68', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     static get is() { return "eds-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@ export class EdsLogo {
     }
     render() {
         const logoContent = this.getLogo();
-        return (h("a", { key: '62d8a900a9836192aecc5333216006186677b2e1', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '54ef695a28d2d27aec7b0e37abb985b6550739d7', innerHTML: logoContent })));
+        return (h("a", { key: '5656cc942833ab3f5511ab634c502d694e982db7', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '3e0763fdd94b7624182af3aee50b314c81f064d6', innerHTML: logoContent })));
     }
     static get is() { return "eds-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,6 +38,14 @@
     z-index: 50;
 }
 
+.z-50 {
+    z-index: 50;
+}
+
+.z-9999999 {
+    z-index: 9999999;
+}
+
 .max-w-full {
     max-width: 100%;
 }
@@ -224,4 +232,27 @@
     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;
+    }
+  }

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

@@ -30,16 +30,16 @@ export class EdsModal {
     getModalPositionClasses() {
         switch (this.position) {
             case 'top':
-                return 'left-1/2 top-20 -translate-x-1/2';
+                return 'md:left-1/2 top-20 md:-translate-x-1/2';
             case 'bottom':
-                return 'left-1/2 bottom-20 -translate-x-1/2';
+                return 'md:left-1/2 bottom-20 md:-translate-x-1/2';
             case 'left':
                 return 'left-20 top-1/2 -translate-y-1/2';
             case 'right':
                 return 'right-20 top-1/2 -translate-y-1/2';
             case 'middle':
             default:
-                return 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2';
+                return 'md:left-1/2 top-1/2 md:-translate-x-1/2 -translate-y-1/2';
         }
     }
     /**
@@ -99,9 +99,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: '456972d43bddeec93053c1518ca35dff028f0416', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: 'f3b84d1086f70f7863691835fe8984a4ff091b8f', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        return (h("div", { key: 'eb2b985e84912dabea52a9a62eb908087004c958', 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: 'ad47334539d1a8a8694f34ba1e90a38b7dce07ab', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), h("div", { key: '5038d3564881f4580e63a1afd883affa0aee8750', 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: '4ce4d6f11afc552579a35f23901bc79e2ae19274', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: 'a9475d9cdcd4d3a1d68bce973f672621a30c53d4', id: titleId, class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), h("eds-button", { key: 'c1e32fb266333856de6f0e63757fca02778330a9', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: '58b1d9a3228516a1de31a81c6cd3a2696c65ce5f', class: "pt-8" }, h("slot", { key: '0d81e88fcaa138bd746cc894543f264e4a3afb2f' })))));
+            onClick: () => this.close() })), h("div", { key: '69d449b6ec986b5cfd73e50cc060363236035915', 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: '17395806ef17a06b5465174055087178db9f5356', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: 'daa5d63b73eab57b9b58ca06d0197f1a7002ca15', id: titleId, class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), h("eds-button", { key: '267ee7d1f10819c19af5eed6715465f2ba5f4831', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: 'fbd3351c851ab1089035117cca2b3ad769c26d18', class: "pt-8" }, h("slot", { key: '9958a61e24320183bef12aef381791f11e421597' })))));
     }
     static get is() { return "eds-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -173,7 +173,7 @@ export class EdsPagination {
         }
     }
     render() {
-        return (h("div", { key: '4ebae5738982b21456e2852babeef2f5e2b4b1e0' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '9c18413928a471adb2b6964c78ea3339f251c81b', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: '3d9d08eaaf7944ef1a6aba9b0912b7d9ebb58e28', 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: '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'
                 ? 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: '259c247cbf6269d1118b652c70cc45e6ea9192b5', 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: 'e6141a6aa1eb8d1f9562028d95f6dfffc2777b11', 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: '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, "%")));
     }
     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: '34344f12d4ca8a80fe7c96537d417c199421e139', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index) => {
+        return (h("div", { key: '2ab4f3dbc4cc3dd5272143e99c67b23086b03e18', 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: '81d5d6f6010c56bb217b32fa520fdaf96e1c7adc' }, h("eds-section-heading", { key: 'c47dda41c2f553ef87f432109ead4bd0debcd99c', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '9276798e2c581440c46ff9914809e87203a86b1b' })));
+        return (h(TagType, { key: '39c4280156ca46b83538de499baa9b152360b1b4' }, h("eds-section-heading", { key: '34da742e606f0e9bb485faac8aba1519eccc8934', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '517b8ecc112565e8c6bb0bf85b02525deaa6f9df' })));
     }
     static get is() { return "eds-section-core"; }
     static get originalStyleUrls() {

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

@@ -33,12 +33,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: '6741f5bbede7d44109c5e60f92290d4b2eda4d42', class: {
+        return (h(TagType, { key: '961a672dc3b656b0a308131a2d334aca51df77f6', 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: 'cc65df919db1dc1d5725116ce1ab473319185901', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: '42eb2ccfba8c83cf140967e39fead6ebddc3a279', 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: '49a825afb039ee46b26609eea60109e0a060c104' }, h("div", { key: '6445a4e7f1e7c553bdee660c42f1db0e011443f2', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '07feeb7736e6d306e2b7baf5d253b2ce96bb2c9e', class: "spinner", style: spinnerStyle }))));
+        return (h(Host, { key: '1e1e4ea2734fff8a680e55ca5163e69d2000a55d' }, h("div", { key: 'acf09f69d43404f317240c0d24e644ec0d046cd7', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '3728629fdff738a0b753cd499dc26052b1e3cb7b', 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: 'd9e216919a58d90017b6fec249e7fc811c4fb681', class: "switch-container" }, this.labelOff && h("span", { key: '161bca12a4c6eebf4240ea0bdd07fd1acba35228', class: "switch-label switch-label--off" }, this.labelOff), h("button", { key: '855477e89765d01d5a52f3d9db279a1e5c56ea9d', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
+        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: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled
-            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: '4486e5f54ee75b95fd174291e1f5d67e181f3243', class: "switch-handle" })), this.labelOn && h("span", { key: '702e5385f6e941dcb67eecdd766725c4b04b8b7c', class: "switch-label switch-label--on" }, this.labelOn)));
+            }, 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)));
     }
     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: 'a9df6351c49bb17abebfaf3640c71a7c7d15cb61' }, this.searchEnabled && (h("div", { key: 'feb5708050593e791835456e6d2244332cee6062' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
+        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...",
             // @ts-ignore
-            onInput: (event) => this.handleSearch(event) }))), h("div", { key: '88dcb3d9e984a77f54735fa352c811dbf4745838', class: "mt-20" }, h("table", { key: '32ff7b76066a96bce51f885e8339c258fdecd0c6', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '9f4bbf0725c618c8c2f8a3b90d6d2f2a7f9c0186' }, h("tr", { key: 'd8f24a31aad07b667ae9cc06257ddddf529f8e31', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            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) => {
             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: '932e2f9cbd51d1115eef42f8b1acb7bb58ccdab7' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((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) => {
             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: '6368d38cec298dc8efa1a790d6b0cb93357f0ae5', class: "mt-20" }, h("eds-pagination", { key: '2183eb4a6861a0e42538706bd0c9fe10a1e5d8bd', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+        }))))))), 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" })))));
     }
     static get is() { return "eds-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,7 +28,7 @@ export class EdsTag {
     }
     render() {
         const classes = tagStyles({ intent: this.intent });
-        return h("span", { key: '314cc7432e8a56cf4676982180ada160c7b14746', class: classes }, this.label);
+        return h("span", { key: '55a6039b040436e5dded9aaf1007668b97091ba3', class: classes }, this.label);
     }
     static get is() { return "eds-tag"; }
     static get encapsulation() { return "shadow"; }