@ebrains/components 1.0.0 → 1.2.0

package/dist/collection/components/eds-icons/social/eds-icon-twitter/eds-icon-twitter.js

@@ -8,7 +8,7 @@ export class EdsIconTwitter {
         this.class = '';
     }
     render() {
-        return h("span", { key: '1a7ad8d7cbef70822ebda2f152d8b537df1eaf27', class: this.class, innerHTML: twitter });
+        return h("span", { key: 'c2ee643b5da517a53bd97ec6263161927ad229a7', class: this.class, innerHTML: twitter });
     }
     static get is() { return "eds-icon-twitter"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-youtube/eds-icon-youtube.js

@@ -8,7 +8,7 @@ export class EdsIconYoutube {
         this.class = '';
     }
     render() {
-        return h("span", { key: '2236f8f5ede15d7eef54f2fd4fe6ca81c996166f', class: this.class, innerHTML: youtube });
+        return h("span", { key: '0a6abd6b62e24c07b4338f0f1f6febbec876791f', class: this.class, innerHTML: youtube });
     }
     static get is() { return "eds-icon-youtube"; }
     static get properties() {

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

@@ -57,10 +57,10 @@ export class EdsImg {
             imgOpts['loading'] = 'lazy';
             imgOpts['decoding'] = 'async';
         }
-        return (h("div", { key: 'de3328e21b2b038984e74c08cd757cd85c7a7e01', class: {
+        return (h("div", { key: '13ed3aa346c99321c609e49ce045b6361921350f', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: '4e623a25c64ce1b2c09adf3519f12bde04280ba3' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '6d87af22189017aa1e158c01a8295c98381a1ba1', ref: (el) => (this.img = el), class: {
+            } }, h("picture", { key: '56aa0ed8fd1ef8f9faf6ad576dd05edc34139c9b' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '78e3ed9adcfe423d48388bf30140f4b70649faf7', ref: (el) => (this.img = el), class: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded

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

@@ -47,12 +47,12 @@ export class EdsInput {
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (h("div", { key: 'bb88b782042a37d2fcbd8a93f03056199d822559', class: "relative flex items-center" }, this.type === 'textarea' ? (h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (h("input", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined, class: `
+        return (h("div", { key: '5c66c14b19aa3d5fc37e7a77a2d1194fa0be9b8c', class: "relative flex items-center" }, this.type === 'textarea' ? (h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (h("input", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined, class: `
               ${this.extraClass || ''} 
               input ${this.type === 'radio' ? 'input-radio' : this.type === 'checkbox' ? 'input-checkbox' : ''}
               ${withIcon && this.type !== 'radio' && this.type !== 'checkbox' ? 'input-icon pl-36' : ''} 
               ${this.error ? 'input-error' : ''}
-              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })), this.maxLength && this.type === 'textarea' && (h("span", { key: '7b1cc490731455d00d500308458e6b2cd320fccf', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: 'ce4d5548bc0fa1e681e3b74b03d071d73d8372d5', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
+              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })), this.maxLength && this.type === 'textarea' && (h("span", { key: '4326db3729dea8bbddb7a109a90424aa832aded7', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: 'df2f5598aedd36b9cb2ce886fb8ea08da58dc5ff', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
     }
     static get is() { return "eds-input"; }
     static get properties() {

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

@@ -11,7 +11,7 @@ export class EdsInputFooter {
         this.link = undefined;
     }
     render() {
-        return (h("div", { key: 'c3dbdb05ce4cc9244a1ebc9f3ce5718742924ea1', class: "space-y-4 mt-4" }, this.error && this.errorMessage && (h("div", { key: 'ccfde4960e1bec5697774de57da1a7948b5112c4', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: 'cc7171c96a7251c064f7ce527fe715aaac9a74e2', icon: "warning" }), h("p", { key: '99893066c8aeac76793fef4d5cf6d5b34dbbc25f', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '55a6881d02d06440e6adac174a43a1cd59adf34b', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: 'bb84693685aedbe7ba28551a1d944c0e1d8eda57', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        return (h("div", { key: 'd5424778da81d6558246efe97917d3e3ccfa9aaa', class: "space-y-4 mt-4" }, this.error && this.errorMessage && (h("div", { key: 'e915fc1f4719f48eca5a831ac72913d2f91f633b', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '9cc87cfd4955766947a2581604fe1e072f8d82a9', icon: "warning" }), h("p", { key: '564a2397fb7e8185e43e1c2be216c76060e7498e', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '24e0702df7e5c2fe4ef0cc6755159fefe76b70a7', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: '9e3720a3ded9d755afd7755104df0942246f1fbe', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
     }
     static get is() { return "eds-input-footer"; }
     static get properties() {

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

@@ -10,7 +10,7 @@ export class EdsInputLabel {
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: '815b70d78f4004afb77a0c01772f750478dea1b3', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'de2cba1c7e89632b3aac40de573d730cf38a85c6' }, h("span", { key: '58326fb23edd4521b0f1c6e67366e7c589217387', "aria-hidden": "true" }, "*"), h("span", { key: 'e2208159652c9244e49c2c3d476a099a442d28ac', class: "sr-only" }, "required")))));
+        return (h("label", { key: 'd700690a67a8348836aec27d2ff4f4d4ee18b9c8', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '9b52c053652db132a9bdb2d9fc64c569a529c2d9' }, h("span", { key: 'cd17268b6048ebaa70dc7f905fc7f7bf3ed3fa34', "aria-hidden": "true" }, "*"), h("span", { key: '352d7b5ef080336a5c7b53e0b710d5b0d7aa0efe', class: "sr-only" }, "required")))));
     }
     static get is() { return "eds-input-label"; }
     static get properties() {

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

@@ -45,7 +45,7 @@ export class EdsInputRange {
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '9901432821b3dbdbf67e3b905c75acd7095ec8e9', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: '44023ef4a7e3fec22666103ccec3e2346aea885d', 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: 'b74e14f619acbe7b98966bac8ea2c5206d05ad62', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
+        return (h("div", { key: '5c55f65e2acd6f4554af7d8ba513c9d9dfd445eb', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: '4fcd0d3d978ddba7929958dd22a283c2ba61ee48', 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: 'c63b223e6af149efb68cabbe5228e77b09ca2168', 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() {

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: '2d74c44bf05f4ccbe81df14a3af112a763b01b5f', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: 'c7c7c479801a9c5e6da0b616448f7b89ba25b040', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '8e4954dc67ae59d46f2e3423325eccda0944363a', 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}`,
+        return (h("div", { key: '27d6871df962e2bd27eac38b1a105142b1b68bab', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: 'b4b497cb435c673a550b169dea93fbc7006d0c5e', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '1419cd8f5b8791b5b812c57ba649567e1b6ec0bb', 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

@@ -26,12 +26,12 @@ export class EdsInputSelect {
         const selectId = this.inputId || this.name;
         const placeholderText = this.placeholder || `Please select ${this.name}`;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : undefined;
-        return (h("div", { key: '0e1bf5f1ebf30d675e0b4927e7812a305f58d2b9', class: "relative" }, h("select", { key: 'b92542caca12d77e3160baa84760b37bbbe172c7', id: selectId, name: this.name, class: {
+        return (h("div", { key: '80cbdab87f5baa21df5edc857685c3af4dee3a58', class: "relative" }, h("select", { key: '4e8f84fd9dbc63df7981898cadc24450f48aa92a', id: selectId, name: this.name, class: {
                 input: true,
                 'input-error': this.error,
                 'px-4': true,
                 'py-2': true
-            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: 'fa911a07fd0053f6c7e5044aac3e6d0846344899', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: 'afa3c7ad3c583dec2ffc2fd5087d7695509a2a25', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: '1bb2a24fc9798a7359b9b45019b1432ff2e50e70', class: "w-20 h-20", icon: "chevron-right" }))));
+            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: '54b90339cae4c5c80711793a8c68c4587e0c2495', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: '6c9f0a0606f1d6f282c756f84ace7618584d5fa3', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: '4524af72468d3b37c01b0252d4b6b2bf7454514e', 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

@@ -1,50 +1,27 @@
 import { h } from "@stencil/core";
-/**
- * `EdsInputField` is a versatile form input component that supports various input types and customization options.
- *
- * Key Features:
- * - Supports multiple input types (text, checkbox, radio, select, file) with corresponding behaviors and styling.
- * - Provides options for validation, including required fields and max length.
- * - Allows custom messages and error handling with `message` and `errorMessage` props.
- * - Offers additional features like icons, labels, links, and hints to enhance user experience.
- *
- * This component provides a structured and configurable form input with additional features to suit various input requirements.
- */
 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);
             if (this.shouldEmitValue()) {
-                // 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: false,
-                    composed: true
-                }));
+                this.edsinput.emit({ value: newValue });
             }
         };
         this.handleNativeChange = (ev) => {
             var _a;
-            (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, ev);
+            (_a = this.onChangeNative) === null || _a === void 0 ? void 0 : _a.call(this, ev);
             if (this.shouldEmitValue()) {
                 const target = ev.target;
-                this.hostEl.dispatchEvent(new CustomEvent('onchange', {
-                    detail: { value: target.value },
-                    bubbles: false,
-                    composed: true
-                }));
+                const value = target.value;
+                this.edschange.emit({ value });
             }
         };
         this.name = undefined;
         this.inputId = undefined;
         this.placeholder = undefined;
         this.disabled = false;
-        this.onChange = undefined;
-        this.onInput = undefined;
-        this.type = 'text';
         this.required = false;
         this.label = undefined;
         this.hint = undefined;
@@ -57,22 +34,22 @@ export class EdsInputField {
         this.value = undefined;
         this.maxLength = undefined;
         this.options = undefined;
+        this.type = 'text';
+        this.onChangeNative = undefined;
+        this.onInput = undefined;
         this.exposeValueEvents = true;
     }
     shouldEmitValue() {
-        // Never emit for password fields, and respect the exposeValueEvents prop
         return this.exposeValueEvents && this.type !== 'password';
     }
     get parsedOptions() {
-        if (Array.isArray(this.options)) {
+        if (Array.isArray(this.options))
             return this.options;
-        }
-        else if (typeof this.options === 'string') {
+        if (typeof this.options === 'string') {
             try {
                 return JSON.parse(this.options);
             }
             catch (_a) {
-                // eslint-disable-next-line
                 console.warn('Invalid options format');
                 return [];
             }
@@ -94,7 +71,8 @@ export class EdsInputField {
             icon: this.icon,
             checked: this.checked
         };
-        return (h("div", { key: '5243586c0bf3acc86d42684dbcd0288b3360b00c', 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' ? ((() => {
+        return (h("div", { key: '2ff82dedd17922c5cb72fc30b7f616c7fafa7b07', 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.onChangeNative, 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,
@@ -107,7 +85,7 @@ export class EdsInputField {
             const opt = this.parsedOptions;
             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: 'e4e1f28766471d5451f342aa4d60d58fca2ddd01', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
+        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("eds-input-footer", { key: '4b8513dcd713d56953934b158ba1b9182e1497a8', 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"; }
@@ -135,7 +113,7 @@ export class EdsInputField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The `name` attribute for the input element. Required for form submissions."
+                    "text": "The `name` attribute of the input element. Required for form submission."
                 },
                 "attribute": "name",
                 "reflect": false
@@ -152,7 +130,7 @@ export class EdsInputField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The unique `id` for the input element. Defaults to the `name` attribute if not provided."
+                    "text": "The `id` attribute of the internal input element. Defaults to `name` if not set."
                 },
                 "attribute": "input-id",
                 "reflect": false
@@ -169,7 +147,7 @@ export class EdsInputField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The placeholder text for the input element."
+                    "text": "Placeholder text for the input field."
                 },
                 "attribute": "placeholder",
                 "reflect": false
@@ -186,70 +164,12 @@ export class EdsInputField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, disables the input field."
+                    "text": "If `true`, the input is disabled."
                 },
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "onChange": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(event: Event) => void",
-                    "resolved": "(event: Event) => void",
-                    "references": {
-                        "Event": {
-                            "location": "global",
-                            "id": "global::Event"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The `onChange` event handler for the input element."
-                }
-            },
-            "onInput": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(event: InputEvent) => void",
-                    "resolved": "(event: InputEvent) => void",
-                    "references": {
-                        "InputEvent": {
-                            "location": "global",
-                            "id": "global::InputEvent"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The `onInput` event handler for the input element."
-                }
-            },
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The type of the input element. Defaults to `text`.\nSupported types: `text`, `checkbox`, `radio`, `select`, `file`, `search`, etc."
-                },
-                "attribute": "type",
-                "reflect": false,
-                "defaultValue": "'text'"
-            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -262,7 +182,7 @@ export class EdsInputField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the input field is required."
+                    "text": "If `true`, the input is required."
                 },
                 "attribute": "required",
                 "reflect": false,
@@ -280,7 +200,7 @@ export class EdsInputField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The label text for the input field."
+                    "text": "Label text for the input field."
                 },
                 "attribute": "label",
                 "reflect": false
@@ -297,7 +217,7 @@ export class EdsInputField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "A short hint displayed alongside the input field."
+                    "text": "Optional hint displayed next to the label."
                 },
                 "attribute": "hint",
                 "reflect": false
@@ -314,7 +234,7 @@ export class EdsInputField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The icon name to be displayed within the input field."
+                    "text": "Optional icon name to display inside the input."
                 },
                 "attribute": "icon",
                 "reflect": false
@@ -331,7 +251,7 @@ export class EdsInputField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "A link object containing the URL and label to display alongside the input field."
+                    "text": "Optional link associated with the input (for help or docs)."
                 }
             },
             "message": {
@@ -346,7 +266,7 @@ export class EdsInputField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "An additional message displayed below the input field."
+                    "text": "Message shown below the input (e.g., additional info or validation message)."
                 },
                 "attribute": "message",
                 "reflect": false
@@ -363,7 +283,7 @@ export class EdsInputField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, marks the input field as having an error."
+                    "text": "If `true`, renders the input with error styles."
                 },
                 "attribute": "error",
                 "reflect": false,
@@ -381,7 +301,7 @@ export class EdsInputField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the input field is checked (for `checkbox` or `radio` types)."
+                    "text": "If `true`, the checkbox/radio is checked."
                 },
                 "attribute": "checked",
                 "reflect": false
@@ -398,7 +318,7 @@ export class EdsInputField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The error message displayed when validation fails."
+                    "text": "Error message text shown when validation fails."
                 },
                 "attribute": "error-message",
                 "reflect": false
@@ -415,7 +335,7 @@ export class EdsInputField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The value of the input field."
+                    "text": "The value of the input. Can be `string` or `number`."
                 },
                 "attribute": "value",
                 "reflect": false
@@ -432,7 +352,7 @@ export class EdsInputField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The maximum length of the input value (for `text` types)."
+                    "text": "The maximum allowed length for text input."
                 },
                 "attribute": "max-length",
                 "reflect": false
@@ -449,11 +369,70 @@ export class EdsInputField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Options for `checkbox`, `radio`, or `select` inputs. Can be a JSON string or an array of objects."
+                    "text": "Options for select, checkbox, radio, or range inputs.\nCan be a JSON string or an array of `{ value, label }` objects."
                 },
                 "attribute": "options",
                 "reflect": false
             },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of the input: e.g., `text`, `checkbox`, `select`, `range`, etc."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "onChangeNative": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: Event) => void",
+                    "resolved": "(event: Event) => void",
+                    "references": {
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Event"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Native `onChange` handler for React/Vue wrappers.\nEnables use without manually attaching DOM event listeners."
+                }
+            },
+            "onInput": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: InputEvent) => void",
+                    "resolved": "(event: InputEvent) => void",
+                    "references": {
+                        "InputEvent": {
+                            "location": "global",
+                            "id": "global::InputEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Native `onInput` handler for React/Vue wrappers.\nEnables use without manually attaching DOM event listeners."
+                }
+            },
             "exposeValueEvents": {
                 "type": "boolean",
                 "mutable": false,
@@ -466,7 +445,7 @@ export class EdsInputField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Control whether the component emits value events (`oninput` / `onchange`).\nDefaults to `true`. Password fields are always suppressed for security."
+                    "text": "If `true`, emits `edsChange` and `edsInput` events for external usage.\nSet to `false` to disable value emission entirely."
                 },
                 "attribute": "expose-value-events",
                 "reflect": false,
@@ -474,5 +453,38 @@ export class EdsInputField {
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "edsinput",
+                "name": "edsinput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits on every user input (key press, typing, etc.).\nUse `event.detail.value` to access the new value."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "edschange",
+                "name": "edschange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits on blur or change event (e.g., selecting an option, leaving the field).\nUse `event.detail.value` to access the final value."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "hostEl"; }
 }

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

@@ -216,7 +216,7 @@ export class EdsLink {
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h(ComponentType, { key: 'ee6e8eeb12df62ee801164877a357c075590ebae', 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: '7b35e3ddca346ff09730aa332b9f47b6d6707721', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: 'fe4201815e3791e6e3d6da8856d7a7a9e0211cfc', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (h(ComponentType, { key: '8c7ab8b80b9765e83e4e57d59ba1b45fe36f15b7', 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: '94284b425a331f6a56a3e63db89fed5fa1a207c1', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: '7496886c7c975d6795633c36b9cc8d31673d5a4b', 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: 'a23e44227ebaa3b999c961e1354c268f2c916a6f', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: 'cba53a54e6d31aabfa62ddcd8aa53bda56b8b706', innerHTML: logoContent })));
+        return (h("a", { key: 'ab11d53e1f417221dcca2de441c7b3efa96f99a5', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '0d4a6b970788534d34d55b28fe83407ce7c4e00e', innerHTML: logoContent })));
     }
     static get is() { return "eds-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,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: '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
+        return (h("div", { key: 'affa340307adc5bdd637696b56a59e3f73cbf7e9', 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: 'e4359b32052a155f879070deea34fbca2fb67e3b', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            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' })))));
+            onClick: () => this.close() })), h("div", { key: 'ba95f463e8c807e2ac2e900b3167191908ca2f5d', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '1fc4649d6ba728745e4f1ed73e8fb8bdac6eda59', 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: '731e7cb6c7aaa36bcda8d1c32bd1b8da9d85f253', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '89657ac29b27ce173569353f3101e998cb756eec', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: '2e39edaa1f5cc5389873e203c3e4294de8b56678', class: "pt-8 px-20 py-20" }, h("slot", { key: '0fb09f52100042fc5f20f5f443a8f5cff381d944' })))));
     }
     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: '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'
+        return (h("div", { key: '6377e0187e461bcbeac835dd7cb83e93ef199865' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'ec2a6b6a40c76352743d012c51cda5d7fe1137df', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: '3a23e3d156f87167b0dacb4085870958ce19e793', 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

@@ -39,7 +39,7 @@ export class EdsProgressBar {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h("div", { key: '8760afff9f85f05fec52b0a7fb668661e49dc06f', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: '06165b69fe7e170f4f61d9f95b5a44342d4ee67a', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '0c48e65c5a6cb0b4dff7a7e3e248052cdc29957d', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: 'fc6f7396cf741ba18d1b5d065bdd1b7bfff12abe', class: "text-default f-body-02" }, progressValue, "%"))));
+        return (h("div", { key: '3360c1a9e61c83fee5312d007f6d2965a8983eba', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: '7210dc5931f08626b286c30ae790a3a864533632', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '7586cd593b4e851f4605ad33b96781841ee0b1aa', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: '21fa3de543e5e717ed4fd76c689aa47c3fa6a853', class: "text-default f-body-02" }, 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: '685ac01e4db577b07d00030b0c25e10b9b0defa8', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index) => {
+        return (h("div", { key: '6686575f0b8b9017bf19b105208f6adbfd46dabd', 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.