@ebrains/components 0.3.0-alpha.0 → 0.5.0-alpha.0

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { toast } from "../../utils/toastManager";
+import { sendAnalytics } from "../../utils/analytics";
 /**
  * `EdsForm` is a comprehensive form component designed to handle form submission with validation,
  * error handling, and customizable fields. It offers several options for handling alerts and
@@ -60,13 +61,20 @@ export class EdsForm {
             this.hasError = Object.keys(newErrors).length > 0;
         };
         this.handleSubmit = async (e) => {
-            var _a;
+            var _a, _b, _c;
             e.preventDefault();
             if (this.isSubmitting) {
                 return;
             }
             this.validateForm();
             if (this.hasError) {
+                sendAnalytics({
+                    category: 'ui-component',
+                    parentContext: null,
+                    tag: this.el.tagName.toLowerCase(),
+                    name: `${(_a = this.submitBtnLabel) === null || _a === void 0 ? void 0 : _a.toLowerCase()}/error` || '',
+                    action: 'click'
+                });
                 this.alertMessage = this.errorMessage;
                 return;
             }
@@ -87,7 +95,7 @@ export class EdsForm {
                 formData.set('form_url', window.location.href);
             }
             if (this.authUser) {
-                formData.set('form_user', (_a = this.authUser) === null || _a === void 0 ? void 0 : _a.email);
+                formData.set('form_user', (_b = this.authUser) === null || _b === void 0 ? void 0 : _b.email);
             }
             /*const formDataObject = Object.fromEntries((formData as any).entries());
             console.log(JSON.stringify(formDataObject));*/
@@ -113,6 +121,13 @@ export class EdsForm {
                 //this.alertMessage = data.message || this.successMessage;
                 toast.show(data.message || this.successMessage, 'success');
                 this.formEl.reset();
+                sendAnalytics({
+                    category: 'ui-component',
+                    parentContext: null,
+                    tag: this.el.tagName.toLowerCase(),
+                    name: `${(_c = this.submitBtnLabel) === null || _c === void 0 ? void 0 : _c.toLowerCase()}/success` || '',
+                    action: 'click'
+                });
             }
             catch (err) {
                 this.hasError = true;
@@ -125,7 +140,6 @@ export class EdsForm {
                 this.formSubmitting.emit(this.isSubmitting);
             }
         };
-        this.smallAlert = false;
         this.setFormUrl = true;
         this.submitBtn = true;
         this.submitBtnLabel = 'Submit';
@@ -134,7 +148,7 @@ export class EdsForm {
         this.submitBtnHintMessage = 'To participate, please sign in using your EBRAINS account. If you do not have an account yet, you can easily create one on the EBRAINS portal.';
         this.endpoint = undefined;
         this.name = 'form';
-        this.fields = undefined;
+        this.fields = [];
         this.values = {};
         this.coupleAuth = false;
         this.formSubmitted = false;
@@ -144,6 +158,7 @@ export class EdsForm {
         this.alertMessage = null;
         this.isAuthenticated = false;
         this.authUser = undefined;
+        this.parsedFields = [];
     }
     onAuthStatusChanged(event) {
         var _a;
@@ -151,21 +166,23 @@ export class EdsForm {
         this.authUser = event.detail.user;
     }
     componentDidLoad() {
+        this.parseFields(this.fields);
         // Emit context for each eds-link element after the component is fully loaded
-        const links = this.el.querySelectorAll('eds-button');
+        /*const links = this.el.querySelectorAll('eds-button');
         links.forEach((link) => {
-            this.emitContext(link);
-        });
-    }
-    emitContext(linkElement) {
-        const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.el.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        linkElement.dispatchEvent(event);
+          this.emitContext(link);
+        });*/
     }
+    /*emitContext(linkElement: HTMLElement) {
+      const event = new CustomEvent<ParentContextDetail>('parentContext', {
+        detail: {
+          componentName: this.el.tagName.toLowerCase(),
+          identifier: null
+        }
+      });
+  
+      linkElement.dispatchEvent(event);
+    }*/
     // Visibility helper
     isFieldVisible(field) {
         if (!field.condition) {
@@ -223,7 +240,7 @@ export class EdsForm {
     validateForm() {
         this.errors = {};
         this.hasError = false;
-        this.parseFields.forEach((field) => {
+        this.parsedFields.forEach((field) => {
             if (field.type !== 'hidden') {
                 if ((field.type === 'checkbox' || field.type === 'radio') && !field.options) {
                     // Single checkbox validation
@@ -305,19 +322,38 @@ export class EdsForm {
         });
         return formData;
     }
-    get parseFields() {
-        return JSON.parse(this.fields);
+    parseFields(newValue) {
+        try {
+            if (typeof newValue === 'string') {
+                this.parsedFields = JSON.parse(newValue);
+            }
+            else if (Array.isArray(newValue)) {
+                this.parsedFields = newValue;
+            }
+            else if (newValue && typeof newValue === 'object') {
+                // In case a single object is passed, wrap it in an array.
+                this.parsedFields = newValue;
+            }
+            else {
+                this.parsedFields = [];
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Error parsing fields prop:', error);
+            this.parsedFields = [];
+        }
     }
     render() {
-        const hiddenFields = this.parseFields.filter((field) => field.type === 'hidden');
-        const otherFields = this.parseFields.filter((field) => field.type !== 'hidden');
-        return (h("form", { key: 'fdb974998dfd27c0d857d0fbfbbe9e769e55d7bb', ref: (el) => (this.formEl = el), enctype: "multipart/form-data", autocomplete: "on", method: "post", onSubmit: this.handleSubmit }, h("div", { key: 'dfbe5adce9e5685736169e88408590088aba5b1e' }, h("slot", { key: 'f5c5356a8b87bf63fdd21901da81291c596f1487' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
+        const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
+        const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
+        return (h("form", { key: '3d4ae34d48c0551f9de6dacb50ceee15b487b5de', ref: (el) => (this.formEl = el), enctype: "multipart/form-data", autocomplete: "on", method: "post", onSubmit: this.handleSubmit }, h("div", { key: '344c56dcba3de5a1b55255d794a78fb0f19d04b5' }, h("slot", { key: '3ca6d203458d67fa66840fac55f94d71acc2ee4d' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
             var _a, _b;
             if (!this.isFieldVisible(field)) {
                 return null;
             }
             return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, type: field.type, icon: field.icon || null, required: field.required, maxLength: field.maxlength, hint: field.hint, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
-        })), this.submitBtn && (h("div", { key: '2c3165a56d5bec9135a8695cae1b87981167c949', class: "mt-20" }, h("eds-button", { key: 'f311628ff58cd03ebbd0f7ccb0623df817d416da', intent: "primary", label: this.submitBtnLabel, disabled: this.isSubmitting || (this.coupleAuth && !this.isAuthenticated), loading: this.isSubmitting, onClick: (e) => this.handleSubmit(e) }), this.coupleAuth && !this.isAuthenticated ? (h("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.submitBtnHintMessage)) : null)), this.alertMessage && (this.formSubmitted || this.hasError) && (h("div", { key: '1c7adc93081294eb86b71e808933215fe04fa033', class: "mt-20" }, h("eds-alert", { key: 'd221dd0674be734a8b7382ea2eeb97509f6bc3a6', message: this.alertMessage, intent: this.hasError ? 'error' : 'success', direction: "horizontal" })))));
+        })), this.submitBtn && (h("div", { key: '22915285f3522f6d260e358eea964c59a9557a55', class: "mt-20" }, h("eds-button", { key: '9e2191ba8cc49d7ac2a6588c0fa468214773c791', intent: "primary", label: this.submitBtnLabel, disabled: this.isSubmitting || (this.coupleAuth && !this.isAuthenticated), loading: this.isSubmitting, onClick: (e) => this.handleSubmit(e) }), this.coupleAuth && !this.isAuthenticated ? (h("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.submitBtnHintMessage)) : null)), this.alertMessage && (this.formSubmitted || this.hasError) && (h("div", { key: '8045c3dff26286a6735157b82afd56ec9001ba14', class: "mt-20" }, h("eds-alert", { key: 'dc8c8f74e8aada9023f110bb862afee1fb629601', message: this.alertMessage, intent: this.hasError ? 'error' : 'success', direction: "horizontal" })))));
     }
     static get is() { return "eds-form"; }
     static get originalStyleUrls() {
@@ -332,24 +368,6 @@ export class EdsForm {
     }
     static get properties() {
         return {
-            "smallAlert": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, displays a small alert for messages."
-                },
-                "attribute": "small-alert",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "setFormUrl": {
                 "type": "boolean",
                 "mutable": false,
@@ -497,8 +515,8 @@ export class EdsForm {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | any[]",
+                    "resolved": "any[] | string",
                     "references": {}
                 },
                 "required": false,
@@ -508,7 +526,8 @@ export class EdsForm {
                     "text": "A JSON string representing the fields in the form.\nExample:\n```json\n[\n  { \"name\": \"email\", \"label\": \"Email\", \"type\": \"text\", \"required\": true },\n  { \"name\": \"password\", \"label\": \"Password\", \"type\": \"password\", \"required\": true }\n]\n```"
                 },
                 "attribute": "fields",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "[]"
             },
             "coupleAuth": {
                 "type": "boolean",
@@ -539,7 +558,8 @@ export class EdsForm {
             "isSubmitting": {},
             "alertMessage": {},
             "isAuthenticated": {},
-            "authUser": {}
+            "authUser": {},
+            "parsedFields": {}
         };
     }
     static get events() {
@@ -561,6 +581,12 @@ export class EdsForm {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "fields",
+                "methodName": "parseFields"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "authStatusChanged",

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

@@ -17,7 +17,6 @@ export default {
             defaultValue: 'Please fix the errors in the form.'
         },
         submitBtn: { control: 'boolean', description: 'Show submit button', defaultValue: true },
-        smallAlert: { control: 'boolean', description: 'Show small alert message', defaultValue: false },
         setFormUrl: { control: 'boolean', description: 'Include the current URL in the form data', defaultValue: true }
     }
 };
@@ -29,7 +28,6 @@ const Template = (args) => html `
     success-message="${args.successMessage}"
     error-message="${args.errorMessage}"
     ?submit-btn="${args.submitBtn}"
-    ?small-alert="${args.smallAlert}"
     ?set-form-url="${args.setFormUrl}"
   ></eds-form>
 `;
@@ -84,6 +82,5 @@ Default.args = {
     successMessage: 'Form submitted successfully!',
     errorMessage: 'Please fix the errors in the form.',
     submitBtn: true,
-    smallAlert: false,
     setFormUrl: true
 };

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

@@ -91,7 +91,7 @@ export class EdsFrame {
         return `${this.storybookUrl}/iframe.html?id=${this.storyPath}&viewMode=story`;
     }
     render() {
-        return (h("div", { key: '0c3a43efc1a125af5999af88c4eb071b5c3bc6c5', class: this.articleClasses() }, h("div", { key: '32303d5e2c2f3b01efe1ceaf828346f873bea6b6', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '75f7f6750413dad4af2ea62c12ffb994491d5d01', class: "f-ui-02" }, this.frameLabel), !this.iframeError ? (h("eds-link", { label: this.urlLabel, url: this.storyLink, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '1fd99f6eda026814910b0cd93635616b7d3ffe09', class: "border-softer border-t-2" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
+        return (h("div", { key: '20786dd40414d29f98d496e29720bd78b9d7cf8e', class: this.articleClasses() }, h("div", { key: '208612330c9d2872c68aeb310e164c8a915a51ef', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'ada2a40384ffaffadc8887580aa6184422008a68', class: "f-ui-02" }, this.frameLabel), !this.iframeError ? (h("eds-link", { label: this.urlLabel, url: this.storyLink, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '26a5ae1c81b60b05b6f4859ffa4dbd13bb2557f3', class: "border-softer border-t-2" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
     }
     static get is() { return "eds-frame"; }
     static get properties() {

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

@@ -43,25 +43,26 @@ Default.args = {
     bg: true,
     withHover: true
 };
-export const SmallFrame = Template.bind({});
+/*export const SmallFrame = Template.bind({});
 SmallFrame.args = {
-    frameLabel: 'Small Frame',
-    urlLabel: 'Small Frame Link',
-    urlLink: 'https://gitlab-org.gitlab.io/gitlab-ui?path=%2Fstory%2Fbase-card--default',
-    src: 'https://gitlab-org.gitlab.io/gitlab-ui/iframe.html?id=base-card--default&viewMode=story',
-    intent: 'secondary',
-    tiny: true,
-    bg: true,
-    withHover: false
+  frameLabel: 'Small Frame',
+  urlLabel: 'Small Frame Link',
+  urlLink: 'https://gitlab-org.gitlab.io/gitlab-ui?path=%2Fstory%2Fbase-card--default',
+  src: 'https://gitlab-org.gitlab.io/gitlab-ui/iframe.html?id=base-card--default&viewMode=story',
+  intent: 'secondary',
+  tiny: true,
+  bg: true,
+  withHover: false
 };
+
 export const ErrorState = Template.bind({});
 ErrorState.args = {
-    frameLabel: 'Error Frame',
-    urlLabel: 'Error Link',
-    urlLink: 'https://errorframe.com',
-    src: 'https://invalid-url.com', // Simulating a broken URL to trigger the error state
-    intent: 'inverse',
-    tiny: false,
-    bg: false,
-    withHover: true
-};
+  frameLabel: 'Error Frame',
+  urlLabel: 'Error Link',
+  urlLink: 'https://errorframe.com',
+  src: 'https://invalid-url.com', // Simulating a broken URL to trigger the error state
+  intent: 'inverse',
+  tiny: false,
+  bg: false,
+  withHover: true
+};*/

package/dist/collection/components/eds-icons/chevron/eds-icon-chevron-down/eds-icon-chevron-down.js

@@ -8,7 +8,7 @@ export class EdsIconChevronDown {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'bc01e9e10033245e02403b6b919911018eef9919', class: this.class, innerHTML: chevronDown });
+        return h("span", { key: 'fa8022d27b91e909d4cd5522c6d0406be698a412', class: this.class, innerHTML: chevronDown });
     }
     static get is() { return "eds-icon-chevron-down"; }
     static get properties() {

package/dist/collection/components/eds-icons/chevron/eds-icon-chevron-left/eds-icon-chevron-left.js

@@ -8,7 +8,7 @@ export class EdsIconChevronLeft {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'd74bd0b2ddfd5bd61c97309aebb71d7c29f0cf43', class: this.class, innerHTML: chevronLeft });
+        return h("span", { key: 'c723d7f1bbd596063ae7e66123b8038af5320a54', class: this.class, innerHTML: chevronLeft });
     }
     static get is() { return "eds-icon-chevron-left"; }
     static get properties() {

package/dist/collection/components/eds-icons/chevron/eds-icon-chevron-right/eds-icon-chevron-right.js

@@ -8,7 +8,7 @@ export class EdsIconChevronRight {
         this.class = '';
     }
     render() {
-        return h("span", { key: '998491aed74bd3edd1fb8545f85ab52cf2703b3f', class: this.class, innerHTML: chevronRight });
+        return h("span", { key: 'f770cd9151077e8708c76d2082613c65a20c420f', class: this.class, innerHTML: chevronRight });
     }
     static get is() { return "eds-icon-chevron-right"; }
     static get properties() {

package/dist/collection/components/eds-icons/chevron/eds-icon-chevron-up/eds-icon-chevron-up.js

@@ -8,7 +8,7 @@ export class EdsIconChevronUp {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'd0723afa766fc6dac454ec84602bd50ba4e49950', class: this.class, innerHTML: chevronUp });
+        return h("span", { key: '40d18a840277f2aba5d314a36fca5c1f8fd99cc6', class: this.class, innerHTML: chevronUp });
     }
     static get is() { return "eds-icon-chevron-up"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-arrow-diagonal/eds-icon-arrow-diagonal.js

@@ -8,7 +8,7 @@ export class EdsIconArrowDiagonal {
         this.addClass = '';
     }
     render() {
-        return h("span", { key: '08ebdce5cfbe75bf4bfab8f72493e2178be55c3c', class: this.addClass, innerHTML: arrowDiagonal });
+        return h("span", { key: 'd85a4d425e0c255efe4763d4a13f13b6ff727c2c', class: this.addClass, innerHTML: arrowDiagonal });
     }
     static get is() { return "eds-icon-arrow-diagonal"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-arrow-right/eds-icon-arrow-right.js

@@ -8,7 +8,7 @@ export class EdsIconArrowRight {
         this.class = '';
     }
     render() {
-        return h("span", { key: '6d704324784e6c3d9c221dcaf83bd86a8a6a94ab', class: this.class, innerHTML: arrowRight });
+        return h("span", { key: '4a2b33b86753acab8270a45c7b250603b128bc88', class: this.class, innerHTML: arrowRight });
     }
     static get is() { return "eds-icon-arrow-right"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-close/eds-icon-close.js

@@ -8,7 +8,7 @@ export class EdsIconClose {
         this.class = '';
     }
     render() {
-        return h("span", { key: '365ad476b1be9c708e73598cad1dd42a908fa1cd', class: this.class, innerHTML: close });
+        return h("span", { key: '947f6615e8ee155be98b379a9c771cc0d453becd', class: this.class, innerHTML: close });
     }
     static get is() { return "eds-icon-close"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-copy/eds-icon-copy.js

@@ -8,7 +8,7 @@ export class EdsIconCopy {
         this.class = '';
     }
     render() {
-        return h("span", { key: '770c34b98ec0e0a7e16de4d7b5b41b4afec9911e', class: this.class, innerHTML: copy });
+        return h("span", { key: '1e23d4493d5a1d07bc794da20cc4e445a87d56b0', class: this.class, innerHTML: copy });
     }
     static get is() { return "eds-icon-copy"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-eu/eds-icon-eu.js

@@ -8,7 +8,7 @@ export class EdsIconEu {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'cc6e5f7d7333ff7ed4a6f716e0ee90806fa782f9', class: this.class, innerHTML: euSvg });
+        return h("span", { key: '14254e1b9d43562e6f3f943de22aa8dd4d89a044', class: this.class, innerHTML: euSvg });
     }
     static get is() { return "eds-icon-eu"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-gitlab/eds-icon-gitlab.js

@@ -8,7 +8,7 @@ export class EdsIconGitlab {
         this.class = '';
     }
     render() {
-        return h("span", { key: '5a91cfc15c4dec2b50ce57fb0f1d6cc8f57b03e8', class: this.class, innerHTML: gitlabBlack });
+        return h("span", { key: '128f9265dfc1aee95586ba0a3fd20dd131678893', class: this.class, innerHTML: gitlabBlack });
     }
     static get is() { return "eds-icon-gitlab"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-loader/eds-icon-loader.js

@@ -8,7 +8,7 @@ export class EdsIconLoader {
         this.class = '';
     }
     render() {
-        return h("span", { key: '260c4eeb69ff79d943571c1461346b9019ea513a', class: this.class, innerHTML: loader });
+        return h("span", { key: 'f11c60068baa2d2398056b3d7f04129d9deb4517', class: this.class, innerHTML: loader });
     }
     static get is() { return "eds-icon-loader"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-menu/eds-icon-menu.js

@@ -8,7 +8,7 @@ export class EdsIconMenu {
         this.class = '';
     }
     render() {
-        return h("span", { key: '9d15be28017eb074a69846a2a639861de997130b', class: this.class, innerHTML: menu });
+        return h("span", { key: '0084602c8e870b70caa66479f71bed3bd0cce94e', class: this.class, innerHTML: menu });
     }
     static get is() { return "eds-icon-menu"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-more/eds-icon-more.js

@@ -8,7 +8,7 @@ export class EdsIconMore {
         this.class = '';
     }
     render() {
-        return h("span", { key: '0f7d61104f8f2b0a83c5b60a6ce81c6ab91ecb9c', class: this.class, innerHTML: more });
+        return h("span", { key: 'dd9df55fa03c1b27f2f931c7d07ccc69ee940ff4', class: this.class, innerHTML: more });
     }
     static get is() { return "eds-icon-more"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-search/eds-icon-search.js

@@ -8,7 +8,7 @@ export class EdsIconSearch {
         this.class = '';
     }
     render() {
-        return h("span", { key: '6795d973d3a1fff27c2fd6181235d0284abaf3b7', class: this.class, innerHTML: search });
+        return h("span", { key: '42acc730afd956c2884b0789b3ea37ccf323630b', class: this.class, innerHTML: search });
     }
     static get is() { return "eds-icon-search"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-success/eds-icon-success.js

@@ -8,7 +8,7 @@ export class EdsIconSuccess {
         this.class = '';
     }
     render() {
-        return h("span", { key: '15e428fd72496249adfe372847d5c683cd3412b1', class: this.class, innerHTML: success });
+        return h("span", { key: '8b5d4cfeedf6d7e9bea48d7ba892527d484c858d', class: this.class, innerHTML: success });
     }
     static get is() { return "eds-icon-success"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-user/eds-icon-user.js

@@ -8,7 +8,7 @@ export class EdsIconUser {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'dc06f1a54b9542cb2c0165fb3bdff960ecd81cc0', class: this.class, innerHTML: user });
+        return h("span", { key: 'cb31d12146ff577195650b502f51005092404a30', class: this.class, innerHTML: user });
     }
     static get is() { return "eds-icon-user"; }
     static get properties() {

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

@@ -8,7 +8,7 @@ export class EdsIconBluesky {
         this.class = '';
     }
     render() {
-        return h("span", { key: '8b5d4cfeedf6d7e9bea48d7ba892527d484c858d', class: this.class, innerHTML: bluesky });
+        return h("span", { key: '845a157678b9d059b2c9bd8a6265d3a62f33c31a', class: this.class, innerHTML: bluesky });
     }
     static get is() { return "eds-icon-bluesky"; }
     static get properties() {

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

@@ -8,7 +8,7 @@ export class EdsIconFacebook {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'f859db4f8b6679e138e6d72d1d0f5e5bd1bcf997', class: this.class, innerHTML: facebook });
+        return h("span", { key: '902598891dfe926f92ce5d30dc135896c6eccd43', class: this.class, innerHTML: facebook });
     }
     static get is() { return "eds-icon-facebook"; }
     static get properties() {

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

@@ -8,7 +8,7 @@ export class EdsIconLinkedin {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'b8e0661a74a92c72b6db109cb48db12da48dcf92', class: this.class, innerHTML: linkedin });
+        return h("span", { key: '0f9675a371ca7bb460882c04bf2bb0c103273a0d', class: this.class, innerHTML: linkedin });
     }
     static get is() { return "eds-icon-linkedin"; }
     static get properties() {

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

@@ -8,7 +8,7 @@ export class EdsIconMastodon {
         this.class = '';
     }
     render() {
-        return h("span", { key: '902598891dfe926f92ce5d30dc135896c6eccd43', class: this.class, innerHTML: mastodon });
+        return h("span", { key: '1f68e5d0b6f8455f40bf94f6095eceff00b7887e', class: this.class, innerHTML: mastodon });
     }
     static get is() { return "eds-icon-mastodon"; }
     static get properties() {

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: 'cfa2d903e79d5a17fb7511e078c0d26bd6d3abd6', class: this.class, innerHTML: twitter });
+        return h("span", { key: 'a06ab2e79a1ec7603244ec09649ccc2c9ea1950c', 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: 'ecd12a21c5797f93f7d8abe67803b27862967b2f', class: this.class, innerHTML: youtube });
+        return h("span", { key: '4eba69bfec926b7a3490feee15b5947a8ab8a7b9', class: this.class, innerHTML: youtube });
     }
     static get is() { return "eds-icon-youtube"; }
     static get properties() {

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

@@ -25,11 +25,16 @@ export class EdsImg {
             this.loaded = true;
             this.showBg = false;
         };
+        // On error, remove the background effect so users know the image failed to load.
+        this.handleError = () => {
+            this.loaded = true;
+            this.showBg = false;
+        };
         this.handleTransitionEnd = () => {
             this.showBg = false;
         };
         this.src = undefined;
-        this.alt = undefined;
+        this.alt = '';
         this.width = undefined;
         this.height = undefined;
         this.srcset = undefined;
@@ -52,14 +57,14 @@ export class EdsImg {
             imgOpts['loading'] = 'lazy';
             imgOpts['decoding'] = 'async';
         }
-        return (h("div", { key: 'fde8a77bb251e3be2ec3a42b8d83f585eae65b2c', class: {
+        return (h("div", { key: '733be8df2b9e3db1b5b13aaa47c16a9c26f345d7', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: 'e512cbd9134f14f5418856cf451cddfb93ca1760' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '98339035b8d055d8bb8de654ce1f4ba410ef3865', ref: (el) => (this.img = el), class: {
+            } }, h("picture", { key: '3a6a0289bcf8a2851278eb6c6fbe64bfe7004014' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: 'b5d92e20a28f67a13d926f081b5f85dbd981ff78', ref: (el) => (this.img = el), class: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded
-            }, width: this.width, height: this.height, sizes: this.sizes, src: this.src, srcSet: this.srcset, alt: this.alt }, imgOpts, { onLoad: this.handleLoad, onTransitionEnd: this.handleTransitionEnd })))));
+            }, width: this.width, height: this.height, sizes: this.sizes, src: this.src, srcSet: this.srcset, alt: this.alt }, imgOpts, { onLoad: this.handleLoad, onError: this.handleError, onTransitionEnd: this.handleTransitionEnd })))));
     }
     static get is() { return "eds-img"; }
     static get encapsulation() { return "shadow"; }
@@ -101,13 +106,14 @@ export class EdsImg {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The alternative text for the image."
+                    "text": "The alternative text for the image.\nDefaults to an empty string so that decorative images are ignored by assistive technologies."
                 },
                 "attribute": "alt",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "''"
             },
             "width": {
                 "type": "number",

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

@@ -48,12 +48,12 @@ export class EdsInput {
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (h("div", { key: 'aed6c5b0bc70ed712c74041b1bafce771c0da2d3', 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: 'e67c7566fe5a1574d6ff0fff61178b163c5881f9', 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: '2a95bcd05820c60e428c9e5de3cc2c3fc6ceb3db', 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: 'd20b1b17f45c77e1e7ad63ca5cb12db777074601', 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: '35bc563715e65073898259d12b4ef2c467b14439', 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: '54cab667a1b8b1bb906c2359cdbd2fb23171ba8b', 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() {