@ebrains/components 3.0.0 → 3.1.0

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { sendAnalytics } from "../../utils/analytics";
 import { parseData } from "../../utils/sharedUtils";
 import { validateFormFields } from "../../utils/eds-form/formValidators";
+import { safeInlineFormat } from "../../utils/eds-form/safeFormat";
 import { validateInputField } from "../../utils/eds-form/validateInput";
 import { getFormInitData } from "../../utils/eds-form/formUtils";
 /**
@@ -199,7 +200,20 @@ export class EdsForm {
         if (this.setFormUrl && typeof window !== 'undefined') {
             formData.set('form_url', window.location.href);
         }
+        // Group fields by name so we can drop values for fields hidden by a condition.
+        // A name may be reused across mutually-exclusive conditional variants (e.g. a
+        // `web_app_url` shown for service_type=web_app AND another for =platform), so a
+        // value is dropped ONLY when EVERY field with that name is hidden — if any
+        // variant is visible, its value is kept.
+        const fieldsByName = {};
+        this.parsedFields.forEach((f) => {
+            (fieldsByName[f.name] = fieldsByName[f.name] || []).push(f);
+        });
         Object.keys(this.values).forEach((key) => {
+            const fields = fieldsByName[key];
+            if (fields && fields.length && !fields.some((f) => this.isFieldVisible(f))) {
+                return; // all fields with this name are conditionally hidden — skip
+            }
             const value = this.values[key];
             // Handle File arrays (from file inputs)
             if (Array.isArray(value)) {
@@ -498,29 +512,53 @@ export class EdsForm {
         return map;
     }
     renderField(field) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!this.isFieldVisible(field)) {
             return null;
         }
+        // 0) Presentational "Text Block" — static formatted text, NOT an input.
+        // It has no value, is never added to the submission (makeFormData only
+        // iterates this.values) and is never validated (see formValidators). The
+        // text runs through formatDescription, which escapes HTML first, so author
+        // content can never inject markup — only the **bold**/[link]/newline subset.
+        if (field.type === 'content') {
+            const raw = ((_b = (_a = field.content) !== null && _a !== void 0 ? _a : field.label) !== null && _b !== void 0 ? _b : '');
+            return (h("div", { class: "eds-content-block f-body-02 text-default", key: field.name, innerHTML: this.formatDescription(raw) }));
+        }
         // 1) Handle rating
         if (field.type === 'rating') {
             // pull the current value (or zero)
             const val = this.values[field.name] || 0;
-            return (h("div", { class: "form-group rating-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `rating-${field.name}`, label: field.label, disabled: field.disabled, required: field.required }))), h("eds-rating", { id: `rating-${field.name}`, "rating-type": field.ratingType, "rating-count": field.ratingCount, "selected-rating": val, onRating: (e) => this.handleRating(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
+            return (h("div", { class: "form-group rating-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `rating-${field.name}`, label: field.label, disabled: field.disabled, required: field.required }))), h("eds-rating", { id: `rating-${field.name}`, "rating-type": field.ratingType, "rating-count": field.ratingCount, "selected-rating": val, onRating: (e) => this.handleRating(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
         }
         else if (field.type === 'nps') {
             // pull the current value (or null)
             const val = this.values[field.name] !== undefined ? this.values[field.name] : null;
-            return (h("div", { class: "form-group nps-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, "selected-value": val, onNps: (e) => this.handleNPS(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name] }))));
+            return (h("div", { class: "form-group nps-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, "selected-value": val, onNps: (e) => this.handleNPS(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, "error-message": (_d = this.errors[field.name]) === null || _d === void 0 ? void 0 : _d.join('<br/>'), error: !!this.errors[field.name] }))));
+        }
+        else if (field.type === 'search-select') {
+            return (h("eds-search-select", { key: field.name, name: field.name, label: field.label, source: field.source, options: field.options, multiple: !!field.multiple, "api-base": field.apiBase || '/api/v1', placeholder: field.placeholder, required: field.required, disabled: field.disabled, hint: field.hint, message: field.message, error: !!this.errors[field.name], "error-message": (_e = this.errors[field.name]) === null || _e === void 0 ? void 0 : _e.join('<br/>'), value: this.values[field.name], onEdsinput: (e) => this.handleInput(e, field), onEdschange: (e) => this.handleChange(e, field) }));
         }
         else if (field.type === 'kg-web-service') {
-            return (h("eds-kg-web-services-select", { key: field.name, name: field.name, label: field.label, "api-endpoint": field.apiEndpoint || '/api/v1/kg/web-services/cached', placeholder: field.placeholder, required: field.required, disabled: field.disabled, hint: field.hint, message: field.message, error: !!this.errors[field.name], "error-message": (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.join('<br/>'), value: this.values[field.name], size: field.size || 500, onEdsinput: (e) => this.handleInput(e, field), onEdschange: (e) => this.handleChange(e, field) }));
+            return (h("eds-kg-web-services-select", { key: field.name, name: field.name, label: field.label, "api-endpoint": field.apiEndpoint || '/api/v1/kg/web-services/cached', placeholder: field.placeholder, required: field.required, disabled: field.disabled, hint: field.hint, message: field.message, error: !!this.errors[field.name], "error-message": (_f = this.errors[field.name]) === null || _f === void 0 ? void 0 : _f.join('<br/>'), value: this.values[field.name], size: field.size || 500, onEdsinput: (e) => this.handleInput(e, field), onEdschange: (e) => this.handleChange(e, field) }));
         }
-        return (h("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, link: field.link, error: !!this.errors[field.name], errorMessage: (_d = this.errors[field.name]) === null || _d === void 0 ? void 0 : _d.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
+        return (h("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, link: field.link, error: !!this.errors[field.name], errorMessage: (_g = this.errors[field.name]) === null || _g === void 0 ? void 0 : _g.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
     }
     async getData() {
         return this.makeFormData();
     }
+    /**
+     * Render the form/step description with a small, safe subset of inline
+     * formatting so authors can add links and emphasis:
+     *   **bold**            → <strong>
+     *   [label](url)        → <a> (only http/https/mailto; others render as text)
+     *   blank line / \n     → paragraph / line break
+     * HTML is escaped FIRST, so author text can never inject markup — only the
+     * whitelisted patterns above produce tags.
+     */
+    formatDescription(text) {
+        return safeInlineFormat(text);
+    }
     render() {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         //const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
@@ -536,9 +574,9 @@ export class EdsForm {
         else if (this.formStyle === 'brand') {
             styleClasses = 'bg-inverse form-brand relative rounded-xs p-32';
         }
-        return (h("form", { key: '5e58460e52950974cdf11001123f9ffb23dc659e', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: 'ff3a33e3a8d311c86712daa68c80aac767d82a9b', class: "flex flex-col gap-y-20 overflow-visible" }, this.title && (h("span", { key: 'b1f363c03074f944a8f60387a40cef6fa791b188', role: "heading", class: "f-heading-05 pb-4 block" }, this.title)), this.description && h("span", { key: '7a9b5ea5451cf59ac47ec81dd1a44c7c9e6326a3', class: "f-body-02 text-light" }, this.description), h("slot", { key: '1e50a245fa37b73149a22308fda4039051d4639c' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
+        return (h("form", { key: '5717a276eb4bcb1b40bb6c3a3d68e2372ccf0b37', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '8e9fec59b6cafccabbb67381a12541f12201cc48', class: "flex flex-col gap-y-20 overflow-visible" }, this.title && (h("span", { key: 'f47c68db954de63773257f9c898141be27278a00', role: "heading", class: "f-heading-05 pb-4 block" }, this.title)), this.description && h("span", { key: '4287bb5f9c31cf5d3953a032de4a8c269e1feb7e', class: "f-body-02 text-light", innerHTML: this.formatDescription(this.description) }), h("slot", { key: 'e9e52696eab6477354ac5ee6cbe08399483b1b37' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
             .filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
-            .map((g) => (h("div", { class: "mt-32", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: '6cd08f342c0f9004d10628827720cb641339fcd5', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), (this.formBtn || this.clearBtn) && (h("div", { key: 'e8d37bedbd49c9fc94cbd2e2a887448f3764b8f9', class: "mt-32 md:mt-64 flex flex-col items-center md:flex-row-reverse md:justify-between gap-y-16 md:gap-y-0" }, this.formBtn && (h("eds-button", { key: 'ec878c5edaa87cf9bff0424b92e5c82605856e67', intent: this.buttonIntent, pill: true, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, icon: 'arrow-right', size: "large", onClick: () => this.handleSubmit() })), this.clearBtn && (h("eds-button", { key: '1158dc2af47f9f523ccd2ee1435a4147fc0a646c', intent: "neutral", pill: true, size: "large", label: this.clearBtnLabel, disabled: this.isSubmitting || !this.values || Object.keys(this.values).length === 0, onClick: (e) => this.handleClear(e) }))))));
+            .map((g) => (h("div", { class: "mt-32", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: '22d248217ea85d68e2be652ddcbfd13ed4775934', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), (this.formBtn || this.clearBtn) && (h("div", { key: '101f9e275d68f59b762938ff3f7d7102660b80f0', class: "mt-32 md:mt-64 flex flex-col items-center md:flex-row-reverse md:justify-between gap-y-16 md:gap-y-0" }, this.formBtn && (h("eds-button", { key: '02d427d951c715634605b6977f61cee67abaa8b0', intent: this.buttonIntent, pill: true, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, icon: 'arrow-right', size: "large", onClick: () => this.handleSubmit() })), this.clearBtn && (h("eds-button", { key: 'abf330715df3acf2a4bdc8d4f322fc13c70c267f', intent: "neutral", pill: true, size: "large", label: this.clearBtnLabel, disabled: this.isSubmitting || !this.values || Object.keys(this.values).length === 0, onClick: (e) => this.handleClear(e) }))))));
     }
     static get is() { return "eds-form"; }
     static get encapsulation() { return "shadow"; }

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

@@ -84,7 +84,7 @@ export class EdsFrame {
         }
     }
     render() {
-        return (h("div", { key: '0fa74cf426f9d934a035b5e3f6c9e5722c40beab', class: this.articleClasses() }, h("div", { key: '65ab4084241ce1b5337e9bfaaffb5c2aaceec28e', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'f1cda1a4d61b47550d9d8cd08986f2253710c4ea', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-up-right" })) : null), h("div", { key: 'e02ffe4f38f1375a0694f2acec72406824745437', class: "border-softer" }, 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: 'ddbc978054f645eb990cde6bdd26647bd01eeb1a', class: this.articleClasses() }, h("div", { key: '0a16fbd950742b8a75428b3705deaa03ef785a5b', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '0c2a84cae101ec1e5352ed7be7b874b6ec45f37d', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-up-right" })) : null), h("div", { key: 'c001f1b33c5136820155b0299e83b6dc49fbbd43', class: "border-softer" }, 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 encapsulation() { return "shadow"; }

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

@@ -54,7 +54,7 @@ export class EdsHeader {
         const logoType = this.variant === 'strong' ? 'negative' : 'positive';
         // Link intent based on header variant
         const linkIntent = this.variant === 'strong' ? 'underlineInverse' : 'underline';
-        return (h("header", { key: '2c1cfca934f70c0d72fa50c163eb14524ca4e5a5', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: 'b7914ad1431d19a167e39814aa5ab7e6c87ce8e4', class: "w-[250px]" }, h("div", { key: 'efb6efcb51f960e48bf236dd94d308ae12480808', class: "p-[24px]" }, h("eds-logo", { key: 'a8b20eee1ed9577fc06da51e6325875f56025694', variant: logoType, href: this.url }))), this.parsedLinks && (h("nav", { key: '3b322f02b8249091158876559339baf4ba763242', role: "navigation", "aria-label": "Primary", class: "flex-1 flex justify-center items-center hidden md:flex" }, h("ul", { key: '8c74e64f51bddefcc578c09e5d6570f208ecbcf6', class: "flex gap-x-16" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: linkIntent, size: "large", icon: link.icon, external: link.external })))))), h("div", { key: 'c75b261b7bc734a121ac195400d2c1200b58d7ec', class: "w-[250px] flex justify-end items-center" }, h("slot", { key: '1b447037e7158d3e06f68add6084da957ff8c8b0', name: "actions" })), this.menu && (h("div", { key: '8e92ee65ed8a235ad0af4d61588ce6118a92b07f', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '8b79d619d4b51dac26f0ff5347909611383cb635', "aria-label": "Menu", intent: this.variant === 'strong' ? 'ghostInverse' : 'ghost', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
+        return (h("header", { key: 'fd95f6b0126d620ab1d4f58240d471301d607fa5', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: 'e7b1bd9a146543107d87ff6f4c8575ad63fc3889', class: "w-[250px]" }, h("div", { key: '257a8bf3d0efea39bd0e7f5c92d2a6bcbaa66d48', class: "p-[24px]" }, h("eds-logo", { key: '71365268524d0db6999dc6ff4a9227e388d53cdf', variant: logoType, href: this.url }))), this.parsedLinks && (h("nav", { key: '085b2bd5f667ea7e0be4de77cb4bd3d1a2bb6e3c', role: "navigation", "aria-label": "Primary", class: "flex-1 flex justify-center items-center hidden md:flex" }, h("ul", { key: 'b5c015e6e1fb376f6b48805cc5d0db436234a5fc', class: "flex gap-x-16" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: linkIntent, size: "large", icon: link.icon, external: link.external })))))), h("div", { key: '9bca10c081cd1b8157579fa587615538dc624817', class: "w-[250px] flex justify-end items-center" }, h("slot", { key: '360fb5fe76b41b2513cba2f8705ea5ea91cae9a9', name: "actions" })), this.menu && (h("div", { key: '7feaa2b97062e7ceb94bacc35e61a12edc0b2e54', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '706c1668e3b04517cfe0cb92da5b459980986df0', "aria-label": "Menu", intent: this.variant === 'strong' ? 'ghostInverse' : 'ghost', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
     }
     static get is() { return "eds-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@ export default {
     title: 'Components/Header/Main',
     component: 'eds-header',
     argTypes: {
-        homeUrl: {
+        url: {
             control: 'text',
             description: 'URL for the home logo link.'
         },
@@ -10,31 +10,45 @@ export default {
             control: 'object',
             description: 'An array of link objects for the header navigation'
         },
-        menuEnabled: {
+        menu: {
             control: 'boolean',
-            description: 'Shows/hides burger menu on small screens.'
+            description: 'Shows/hides burger menu toggle on small screens.'
         },
-        headerVariant: {
+        variant: {
             control: { type: 'select' },
             options: ['default', 'inverse', 'strong'],
-            description: 'The header variant'
+            description: 'Header style variant: determines text and background colors.'
         }
     },
     args: {
-        homeUrl: '/',
+        url: '/',
         links: [
             { label: 'About', url: '#' },
             { label: 'Contact', url: '#' }
         ],
-        menuEnabled: false,
-        headerVariant: 'default'
+        menu: false,
+        variant: 'default'
     }
 };
-export const Default = (args) => `
+export const Default = (args) => {
+    // The burger menu toggle is hidden on wide viewports (md:hidden) and only
+    // renders on small screens. When `menu` is enabled, surface a notice so the
+    // toggle isn't "missing" — mirrors the eds-footer story's matomo notice.
+    const menuNotice = String(args.menu) === 'true'
+        ? `<eds-alert
+         intent="info"
+         icon="information"
+         message="The burger menu toggle only appears on small screens. Resize the viewport (or use Storybook's responsive viewport toolbar) to see it."
+         class="mb-16"
+       ></eds-alert>`
+        : '';
+    return `
+    ${menuNotice}
     <eds-header
-      home-url="${args.homeUrl}"
+      url="${args.url}"
       links='${JSON.stringify(args.links)}'
-      menu-enabled="${args.menuEnabled}"
-      header-variant="${args.headerVariant}"
+      menu="${args.menu}"
+      variant="${args.variant}"
     ></eds-header>
   `;
+};

package/dist/collection/components/eds-icon-wrapper/eds-icon-wrapper.js

@@ -5,6 +5,7 @@ export class EdsIconWrapper {
     constructor() {
         this.name = undefined;
         this.size = 20;
+        this.label = undefined;
     }
     render() {
         const iconSvg = ICONS[this.name];
@@ -12,7 +13,8 @@ export class EdsIconWrapper {
             console.warn(`Icon "${this.name}" not found in ICONS`);
             return null;
         }
-        return (h(Host, { role: "img" }, h("span", { class: `icon icon--${this.size}`, innerHTML: iconSvg })));
+        const decorative = !this.label;
+        return (h(Host, { role: decorative ? null : 'img', "aria-label": decorative ? null : this.label, "aria-hidden": decorative ? 'true' : null }, h("span", { class: `icon icon--${this.size}`, innerHTML: iconSvg })));
     }
     static get is() { return "eds-icon-wrapper"; }
     static get encapsulation() { return "shadow"; }
@@ -68,6 +70,23 @@ export class EdsIconWrapper {
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "20"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the icon. Set this when the icon conveys meaning on its\nown (e.g. a standalone status/action icon) \u2014 it is exposed as `role=\"img\"` +\n`aria-label`. When omitted, the icon is treated as decorative and hidden from\nassistive technology (`aria-hidden`), which is correct when it sits next to a\ntext label that already describes it."
+                },
+                "attribute": "label",
+                "reflect": false
             }
         };
     }

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: 'c4a043469698de97b7433749599ee04746df7f8e', class: this.class, innerHTML: euSvg });
+        return h("span", { key: '56f0efdfb37b2dd4474dc2e69ef649915a9f4bbc', 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: '41c0a44af7394753c8c656f5a1de86b1446f05e3', class: this.class, innerHTML: gitlabBlack });
+        return h("span", { key: 'd1c7c0c1e3cae3b45377e305792192df46ef064a', class: this.class, innerHTML: gitlabBlack });
     }
     static get is() { return "eds-icon-gitlab"; }
     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: 'c2d0ffef1833f4a53a4447d517c6505ce9be70a4', class: this.class, innerHTML: bluesky });
+        return h("span", { key: 'f2c2ad35173c7bfeae50e5b4de8f59e362d9656f', 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: '8498500cd0da2784b889a7b2b2ca9ff4e8414ab6', class: this.class, innerHTML: facebook });
+        return h("span", { key: '798a3ad6a040dfce879fe62c0a32c83cbd529ad0', 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: '02a55590ddf6ee6b873370913e9e7cbfe5390c79', class: this.class, innerHTML: linkedin });
+        return h("span", { key: 'd8c97d9140baa6609917021bbc67fc7cca47ee32', 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: '633a54b9f7bdeec8d704d7994de959a8e12ebe4f', class: this.class, innerHTML: mastodon });
+        return h("span", { key: '8498500cd0da2784b889a7b2b2ca9ff4e8414ab6', 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: '6f20d0106096d427556e05b663e3fa133852470e', class: this.class, innerHTML: twitter });
+        return h("span", { key: '1d2f811831f0c876e8b1133c0df03b6f15acaccb', 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: 'e07946107d2e0e5a0705bc52d27a436e0f4d5956', class: this.class, innerHTML: youtube });
+        return h("span", { key: '7ebb80fd84ed9ed7c227b1f1ddf213d0502160f9', 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: '401f46b1ba986cbab6ef1617039f2315fb9d5e6b', class: {
+        return (h("div", { key: '122ae0673a7a2c9afd88cdcf8a83b52c11f0643e', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: 'cf2b2803efd4f8f0abb40cd427b1b29eff591b15' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: 'a256bcf9c87284391fdeebcf6dcdb1e95b7fc1f8', ref: (el) => (this.img = el), class: {
+            } }, h("picture", { key: 'b0bb1af0c95375db18bd45453016ee2fd78a6e2a' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '2a8500ea92db1a846f0f6dbb41fa664c3d514f19', 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-img/eds-img.stories.js

@@ -1,3 +1,5 @@
+// Base asset used by the stories.
+const SUMMIT = 'https://ebrains.eu/sites/default/files/styles/864w/public/2025-12/Group-Photo-EBRAINS-Summit-2025-Pierre-Yves-Jortay-Photography.webp?itok=xdOI0A1k';
 export default {
     title: 'Components/Image',
     component: 'eds-img',
@@ -28,7 +30,7 @@ export default {
         },
         formats: {
             control: 'object',
-            description: 'Image formats with type, srcset, and media attributes'
+            description: 'Responsive <picture> sources: array of { type, srcset, media? }. NOTE: when set, a matching <source> overrides `src` — clear this to make `src` the single source of the displayed image.'
         },
         lazyload: {
             control: 'boolean',
@@ -40,62 +42,37 @@ export default {
         }
     },
     args: {
-        src: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg',
-        alt: 'EBRAINS Bernstein Conference',
+        src: SUMMIT,
+        alt: 'EBRAINS Summit 2025 group photo',
         width: 400,
         height: 300,
         srcset: '',
-        sizes: '(max-width: 749px) 120px, 230px',
-        formats: [
-            {
-                type: 'image/webp',
-                srcset: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg?fit=max&q=80&fm=webp&crop=2269%2C2268%2C924%2C0&w=200 200w, https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg?fit=max&q=80&fm=webp&crop=2269%2C2268%2C924%2C0&w=400 400w, ...',
-                media: '(max-width: 899px)'
-            },
-            {
-                type: 'image/jpeg',
-                srcset: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg?fit=max&q=80&fm=jpg&crop=2269%2C2268%2C924%2C0&w=200 200w, https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg?fit=max&q=80&fm=jpg&crop=2269%2C2268%2C924%2C0&w=400 400w, ...',
-                media: '(min-width: 900px)'
-            }
-        ],
+        sizes: '',
+        formats: [],
         lazyload: true,
         withBg: true
-    },
-    parameters: {}
+    }
+};
+// Helper shared by the stories: build the element imperatively so object
+// props (formats) are assigned as real props, not stringified attributes.
+const renderImg = (args) => {
+    const edsImg = document.createElement('eds-img');
+    edsImg.src = args.src;
+    edsImg.alt = args.alt;
+    edsImg.width = args.width;
+    edsImg.height = args.height;
+    edsImg.srcset = args.srcset;
+    edsImg.sizes = args.sizes;
+    edsImg.formats = args.formats;
+    edsImg.lazyload = args.lazyload;
+    edsImg.withBg = args.withBg;
+    return edsImg;
 };
+/**
+ * Default — a single image driven entirely by `src`. `formats` is empty, so
+ * whatever you type into the `src` control is exactly what renders. Paste any
+ * direct image URL (e.g. a .jpg/.png/.webp) to try it.
+ */
 export const Default = {
-    render: (args) => {
-        const edsImg = document.createElement('eds-img');
-        edsImg.src = args.src;
-        edsImg.alt = args.alt;
-        edsImg.width = args.width;
-        edsImg.height = args.height;
-        edsImg.srcset = args.srcset;
-        edsImg.sizes = args.sizes;
-        edsImg.formats = args.formats;
-        edsImg.lazyload = args.lazyload;
-        edsImg.withBg = args.withBg;
-        return edsImg;
-    },
-    args: {
-        src: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg',
-        alt: 'EBRAINS Bernstein Conference',
-        width: 400,
-        height: 300,
-        sizes: '(max-width: 749px) 120px, 230px',
-        formats: [
-            {
-                type: 'image/webp',
-                srcset: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg?...',
-                media: '(max-width: 899px)'
-            },
-            {
-                type: 'image/jpeg',
-                srcset: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg?...',
-                media: '(min-width: 900px)'
-            }
-        ],
-        lazyload: true,
-        withBg: true
-    }
+    render: renderImg
 };

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

@@ -91,7 +91,7 @@ export class EdsInputDropzone {
     }
     render() {
         const dropzoneClass = `eds-input-dropzone ${this.isDragging ? 'dragging' : ''} ${this.disabled ? 'disabled' : ''}`;
-        return (h("div", { key: 'a5f1b90a46927fc9b6396c7aa46b6871233f543a', class: "eds-input-dropzone-container" }, h("input", { key: '3eefd790de82dc7686f1eaeb70f974155830d0e1', ref: (el) => (this.fileInputRef = el), type: "file", id: this.inputId || this.name, name: this.name, class: "eds-input-dropzone-hidden", disabled: this.disabled, required: this.required, multiple: this.multiple, accept: this.accept, onChange: this.handleFileSelect }), h("div", { key: 'e9f2a824fd9df33e943b6b4ab80dff9b6b0c031d', class: dropzoneClass, onClick: this.handleDropzoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("svg", { key: 'f7535c3bb5e80e894520176de395da72732fa714', class: "dropzone-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: 'c16c8692d38cf348ec967b2a3617422afff7909a', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: '13d7a4c1ae764156957c86c03dbeb4e18f4df227', points: "17 8 12 3 7 8" }), h("line", { key: 'ddd716e98d7defa01360ecaa726696141116c860', x1: "12", y1: "3", x2: "12", y2: "15" })), h("div", { key: '2ab160b911248c5db33b00100b2dbacfeebd6145', class: "dropzone-text" }, h("p", { key: '4dc47aaa591673211e7b6b2fbd84565a3986bf8e', class: "dropzone-primary" }, this.primaryText), h("p", { key: '92d44b3198860ad6509743a7c55a7c1f949fab70', class: "dropzone-secondary" }, this.secondaryText))), this.selectedFiles.length > 0 && (h("div", { key: '84b2403ba93872292c4d15206d9fcbe1a71a21a5', class: "eds-input-dropzone-chips" }, this.selectedFiles.map((item) => (h("div", { key: item.id, class: "eds-input-dropzone-chip" }, this.getFileIcon(item.file.name), h("span", { class: "eds-input-dropzone-chip-name" }, item.file.name), h("span", { class: "eds-input-dropzone-chip-size" }, this.formatFileSize(item.file.size)), h("button", { type: "button", class: "eds-input-dropzone-chip-remove", onClick: () => this.handleRemoveFile(item.id), disabled: this.disabled, "aria-label": `Remove ${item.file.name}` }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))))));
+        return (h("div", { key: '8c6d9cdd919e72f5e85a7b01a2db3cb6fadface0', class: "eds-input-dropzone-container" }, h("input", { key: 'fb643c39fa588971f825a01b20e8da6ac2da7d36', ref: (el) => (this.fileInputRef = el), type: "file", id: this.inputId || this.name, name: this.name, class: "eds-input-dropzone-hidden", disabled: this.disabled, required: this.required, multiple: this.multiple, accept: this.accept, onChange: this.handleFileSelect }), h("div", { key: 'fd000cfb95b10eb54798ea5575810692c8cce65d', class: dropzoneClass, onClick: this.handleDropzoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("svg", { key: 'ed7588f87e4182351f5301992ae582df1f21be5e', class: "dropzone-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '9977271ac6bb26c6d642708eb6a7d2f2ca242dcc', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: 'f32b1ff2bea2718e075d78985837ba71acf23ce9', points: "17 8 12 3 7 8" }), h("line", { key: '326bc6f0e24c191a26859567653f807c81745a77', x1: "12", y1: "3", x2: "12", y2: "15" })), h("div", { key: 'f880855ecf537d527663101a5348591f975e7074', class: "dropzone-text" }, h("p", { key: '4747da3e157c6b1c3e56774867fc0258e2e77059', class: "dropzone-primary" }, this.primaryText), h("p", { key: '7852be7ecdcdfabf5fed632065b14128941461ee', class: "dropzone-secondary" }, this.secondaryText))), this.selectedFiles.length > 0 && (h("div", { key: '36347980293d2ea800a845a4ab5bb9c28fedc485', class: "eds-input-dropzone-chips" }, this.selectedFiles.map((item) => (h("div", { key: item.id, class: "eds-input-dropzone-chip" }, this.getFileIcon(item.file.name), h("span", { class: "eds-input-dropzone-chip-name" }, item.file.name), h("span", { class: "eds-input-dropzone-chip-size" }, this.formatFileSize(item.file.size)), h("button", { type: "button", class: "eds-input-dropzone-chip-remove", onClick: () => this.handleRemoveFile(item.id), disabled: this.disabled, "aria-label": `Remove ${item.file.name}` }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))))));
     }
     static get is() { return "eds-input-dropzone"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,6 +28,7 @@ export class EdsInput {
         this.min = undefined;
         this.max = undefined;
         this.step = undefined;
+        this.inputTabIndex = undefined;
         this.innerVal = '';
         this.maxLengthReached = false;
     }
@@ -50,7 +51,7 @@ export class EdsInput {
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (h("div", { key: '5e5aabb89e931e0129ad606f9ed6070e336f9d98', 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", Object.assign({ 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 }, (this.type === 'number'
+        return (h("div", { key: '0261b14034860a2f59dde8de72d6729ec411d2cf', 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", Object.assign({ id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, tabindex: this.inputTabIndex, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined }, (this.type === 'number'
             ? {
                 min: this.min,
                 max: this.max,
@@ -61,7 +62,7 @@ export class EdsInput {
               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: 'b3f75c5b363dc5320d4552ca9d9544975fdd89e0', 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: 'e3d18b7c5089e635ee3c4341f039482fdf37f5f1', class: `absolute top-1/2 left-[12px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, name: 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: 'f2a7b410ee586d3266d05d422f3376488392fc6b', 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: '37581bbd64652b25a00a401ab359736169814b1f', class: `absolute top-1/2 left-[12px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, name: this.icon }))));
     }
     static get is() { return "eds-input"; }
     static get properties() {
@@ -364,6 +365,23 @@ export class EdsInput {
                 },
                 "attribute": "step",
                 "reflect": false
+            },
+            "inputTabIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Explicit tabindex for the native input. Radio/checkbox groups\ninside the `eds-input-field` shadow root (delegatesFocus) get\nskipped by sequential keyboard navigation unless each input is\nexplicitly in the tab order."
+                },
+                "attribute": "input-tab-index",
+                "reflect": false
             }
         };
     }

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

@@ -2,6 +2,35 @@ p {
   margin: 0;
 }
 
+/* Inline links inside a field message (from safeInlineFormat) — match eds-link's
+   "underline" intent. */
+.eds-desc-link {
+  position: relative;
+  display: inline-block;
+  color: var(--brand-black);
+  text-decoration: none;
+}
+.eds-desc-link::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background-color: var(--brand-green);
+  transition: width 0.3s ease;
+}
+.eds-desc-link:hover::after { width: 100%; }
+.eds-desc-link:focus-visible::after { width: 0; }
+
+/* The help link (rendered as <eds-link size="small"> = f-ui-02) sits next to the
+   footer message (f-ui-04). Shrink the link to match the helper text by
+   redefining the f-ui-02 font-size token within the link's subtree (custom
+   properties cascade across the shadow boundary). */
+eds-link {
+  --f-ui-02-fontSize: var(--f-ui-04-fontSize);
+}
+
 .text-error {
   color: var(--red-700);
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { safeInlineFormat } from "../../../utils/eds-form/safeFormat";
 export class EdsInputFooter {
     constructor() {
         this.name = undefined;
@@ -8,7 +9,7 @@ export class EdsInputFooter {
         this.link = undefined;
     }
     render() {
-        return (h("div", { key: 'b6e571eae554f1292e897d99443ea03b6dfa4fe3' }, this.error && this.errorMessage && (h("div", { key: '9240b3db2aee19b5cbc1c54aa7a90994c23580d0', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '68b17235d0396119275c9b2a883bb47ee365c266', name: "warning", size: 20 }), h("p", { key: 'bfb1721ddcc7ad63583e56911b8c4a31f1147c51', class: "f-ui-04 ml-4 mb-4 pt-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '390c9ea7b3b2754a1a090c9f3f3ec6996a8f0945', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("eds-link", { key: '0777fb8b099d5cc7fa2902bf1b741f28592515a1', label: this.link.label, url: this.link.url, intent: "underline", size: "small", external: true }))));
+        return (h("div", { key: '866e375b5dd1d9c958f2255537e919a8c1f25dc7' }, this.error && this.errorMessage && (h("div", { key: '95d11c9cbb7746cc727ad9e037d00a28d9475bfc', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: 'face7f905ffa7c5f4dc7a7e6825d185e0d6b7901', name: "warning", size: 20 }), h("p", { key: '2011af93e06df1d91972843a510e843763f53b0b', class: "f-ui-04 ml-4 mb-4 pt-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '39d6833a30e7b93f75154a14bee1e6b4500575cb', id: `desc_${this.name}`, class: "f-ui-04 text-lighter", innerHTML: safeInlineFormat(this.message) }), this.link && (h("eds-link", { key: 'bfbf95e704574ada6f857ca08a90409ab38c1a5e', label: this.link.label, url: this.link.url, intent: "underline", size: "small", external: true }))));
     }
     static get is() { return "eds-input-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class EdsInputLabel {
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: '7790bae024ee253c12b47ee43dd7697329ff5602', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '1f8e72cee3848171c0f70ce7564524c9f2646eeb' }, h("span", { key: '5ac8ccbe9b984c54ae3a556ea0dc09d6fa625f24', "aria-hidden": "true" }, "*"), h("span", { key: 'a562b41bce8a4e671596266c7705a98f5b2252d0', class: "sr-only" }, "required")))));
+        return (h("label", { key: '40867ae01e94ab7a69b6f82658e4ee1b1e5b87cf', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'e3cfc44ea2a7f53f51c544648b3c635557cb8248' }, h("span", { key: 'ff7559b58cb22ce2a3066ed15e77f6088f299aaa', "aria-hidden": "true" }, "*"), h("span", { key: '2c831682aae410ac71589171e2b04981c60052bb', class: "sr-only" }, "required")))));
     }
     static get is() { return "eds-input-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -47,7 +47,7 @@ export class EdsInputRange {
     render() {
         var _a;
         const currentValue = (_a = this.sliderVal) !== null && _a !== void 0 ? _a : Math.round(this.min + (this.max - this.min) / 2);
-        return (h("div", { key: '9be1a9d4241844c03d7e2b851ebc5ce181bfadf6', class: "relative flex flex-col items-start" }, h("input", { key: '746c10f7a466a6b498f57812dcb6d9b9ff1e685d', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: currentValue, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": currentValue, onInput: this.onInput, onChange: this.onChange }), h("p", { key: '97b516ab9c20d9b5c7a783b369081b29eb3a83f0', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-light" }, "Current value: ", currentValue)));
+        return (h("div", { key: '231ae0f34900dfa3b8edeb9745ce07220735c613', class: "relative flex flex-col items-start" }, h("input", { key: '2cbfbbb410694a4764f44c26a74f4cbca9b98f3c', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: currentValue, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": currentValue, onInput: this.onInput, onChange: this.onChange }), h("p", { key: '8e7036cbaeebb62c6cd4b7f2105d3fa487ad463e', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-light" }, "Current value: ", currentValue)));
     }
     static get is() { return "eds-input-range"; }
     static get properties() {