@ebrains/components 3.0.0 → 3.2.0

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: 'a449a7323e89e495479822dd750e2ec7935491f1', 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: '1dec6051705f876a5263741023164c02f49097e4', 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: '5478b4eafaaa8df66ab3e172d1dae11a7bd8aab3', 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: '44a7797929e643d63c492dfb0959d61b0513ce47', 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: '39eaed2d3eec8d05b46d26a2d5a00be18d305b58', 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: 'e51e5c0a49b1e85511113f649abd58cd110218e8', 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: 'b5169c7ad799a7aa85362caf30d3868aead43fec', 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: '9c794891fbf5800cbd877731c1a9d1cd8782647b', 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: '2b9ac7ccd4ed8b525c368059ec0c99fce03e5367', 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: 'fe98dc4ac3197c0cd363ce6ed34ff33ad655de3b' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '48cd85fd0bbbf5155fdac71de07a20214399080b', 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

@@ -9,8 +9,9 @@ export class EdsInputDropzone {
         };
         this.handleFileSelect = (event) => {
             const input = event.target;
-            if (!input.files)
+            if (!input.files) {
                 return;
+            }
             this.addFiles(Array.from(input.files));
         };
         this.handleDragOver = (event) => {
@@ -30,8 +31,9 @@ export class EdsInputDropzone {
             event.preventDefault();
             event.stopPropagation();
             this.isDragging = false;
-            if (this.disabled)
+            if (this.disabled) {
                 return;
+            }
             const files = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
             if (files && files.length > 0) {
                 this.addFiles(Array.from(files));
@@ -71,8 +73,9 @@ export class EdsInputDropzone {
         this.edsfile.emit({ files });
     }
     formatFileSize(bytes) {
-        if (bytes === 0)
+        if (bytes === 0) {
             return '0 B';
+        }
         const k = 1024;
         const sizes = ['B', 'KB', 'MB', 'GB'];
         const i = Math.floor(Math.log(bytes) / Math.log(k));
@@ -91,7 +94,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: '3a6f1876c879e361934a9e8730afe9d14a50d8e2', class: "eds-input-dropzone-container" }, h("input", { key: '293c9d66be6da5cf34b470f00468b3ede6abfb35', 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: '56457ccacc1e643258447ee929bdeb6b0e6e4fe7', class: dropzoneClass, onClick: this.handleDropzoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("svg", { key: '017fa615ec5b04dd3edd65d2e064ea58039d422b', class: "dropzone-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '796dee372172d244dae644cab2136fce784e0865', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: 'cdd841be70c9a89c6040909797da1277b1ce244b', points: "17 8 12 3 7 8" }), h("line", { key: 'b4a8af3db664bdebd0c9651e4c806811ea21d905', x1: "12", y1: "3", x2: "12", y2: "15" })), h("div", { key: '5c799c8a751b06c743f4fc7c1810a91f35307d46', class: "dropzone-text" }, h("p", { key: '0d3971953c6f472bbde247378fccb4171606872d', class: "dropzone-primary" }, this.primaryText), h("p", { key: 'c64910c2d7ba60e6d315fa2831aca54faba84a79', class: "dropzone-secondary" }, this.secondaryText))), this.selectedFiles.length > 0 && (h("div", { key: 'b6f19ccc0304ba8a4369c95e86a61ad084dd9256', 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: '6456b8536db4d219eb307603c986e0aca4867a66', 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: '216f52d80eefa2f89e388e020e597493015ae8d6', 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: 'd3771580564237c9a8ded4e07f4293517bc885fd', 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,45 @@ p {
   margin: 0;
 }
 
+/* Helper / hint text below the input — matches the brand mockup (.help):
+   mono, 10.5px, quiet grey. */
+.eds-help {
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 10.5px;
+  line-height: 1.45;
+  letter-spacing: 0.01em;
+  color: #8a8c8a;
+}
+
+/* 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: 'e3cf47ad941e608ec8f5daefd89d72e6d0af0f28' }, this.error && this.errorMessage && (h("div", { key: '0771ab5b0ba362a01df27c4b6ce0949ec51ec857', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '43f86aa8632ea24b311e00a336b7d4b00b47ac80', name: "warning", size: 20 }), h("p", { key: '734a138c54dc0120fc6fdd320122c737b33b9d3b', class: "f-ui-04 ml-4 mb-4 pt-4", innerHTML: this.errorMessage }))), this.message && (h("p", { key: 'f8c6d5c1f48e10f9c556fc8d44189836b3b46dbf', id: `desc_${this.name}`, class: "eds-help text-lighter", innerHTML: safeInlineFormat(this.message) })), this.link && (h("eds-link", { key: 'fe7a52e14c6cf0791d36b781a92d7bbeca487ccc', 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.css

@@ -1,9 +1,14 @@
+/* Field question label — a compact, medium-bold label matching the brand
+   mockup (14.5px). Set explicitly rather than via utility classes so the weight
+   doesn't depend on class ordering. We load IBM Plex Sans 400/600 only, so 600
+   is our "medium" (the mockup's 500 isn't bundled and would fall back to 400). */
 .input-label {
-  font-family: var(--f-ui-02-fontFamily);
-  font-weight: var(--f-ui-02-fontWeight);
-  font-size: var(--f-ui-02-fontSize);
-  line-height: var(--f-ui-02-lineHeight);
-  letter-spacing: var(--f-ui-02-letterSpacing);
+  font-family: var(--plex-sans, 'IBM Plex Sans', system-ui, sans-serif);
+  font-size: 14.5px;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: 0;
+  color: var(--brand-black, #07140d);
 }
 .input-label b,.input-label strong {
   font-weight: var(--f-ui-02---bold-weight, bold);
@@ -11,6 +16,13 @@
 .text-lighter {
   color: var(--grey-600);
 }
+/* Required asterisk. Inherits the label colour by default; brand forms set
+   --eds-field-accent (via eds-form's brand body) to turn it green. */
+.req-mark {
+  color: var(--eds-field-accent, currentColor);
+  margin-left: 1px;
+  font-weight: 600;
+}
 .sr-only {
   position: absolute;
   width: 1px;

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: '46f04462b12694d932be79bb1d252cd001d29e58', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'c747f5a7896b395f5c1b54725a966d54c7e5dfcd' }, h("span", { key: '2a27cfce971df8eab6186028f6c8319f19504317', "aria-hidden": "true", class: "req-mark" }, "*"), h("span", { key: '5876e15a66aa95a62b934edec0d64f01f713d1a8', 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

@@ -30,11 +30,13 @@ export class EdsInputRange {
         var _a;
         this.sliderVal = (_a = this.value) !== null && _a !== void 0 ? _a : Math.round(this.min + (this.max - this.min) / 2);
     }
-    // Keep the internal state in sync when the passed value changes.
+    // Keep the internal state in sync when the passed value changes. When the
+    // value is cleared (undefined/null — e.g. "Clear form"), fall back to the
+    // default midpoint so BOTH the thumb and the filled track reset together
+    // (the fill is derived from sliderVal, so it must be updated too).
     onValueChange(newVal) {
-        if (newVal !== undefined) {
-            this.sliderVal = newVal;
-        }
+        this.sliderVal =
+            newVal !== undefined && newVal !== null ? newVal : Math.round(this.min + (this.max - this.min) / 2);
     }
     componentDidLoad() {
         // Assign the native input element after the component loads
@@ -47,7 +49,15 @@ 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)));
+        // Paint the "filled" portion of the track up to the current value. Uses the
+        // brand accent when present (the var inherits from eds-form's brand body),
+        // else the default green — so non-brand forms look exactly as before.
+        const pct = this.max > this.min ? ((currentValue - this.min) / (this.max - this.min)) * 100 : 0;
+        const trackStyle = {
+            background: `linear-gradient(90deg, var(--eds-field-accent, var(--green-500)) ${pct}%, var(--grey-light, #ececec) ${pct}%)`
+        };
+        const mid = Math.round(this.min + (this.max - this.min) / 2);
+        return (h("div", { key: '742f329624bc2a8632640b6a93b6258d915f6deb', class: "eds-range" }, h("div", { key: '112ef4ef42761c85350f9624c10436fbd2600fce', class: "eds-range-top" }, h("span", { key: '2b2dbde929434f68c85a36380cbed1780707dfd8', id: `desc_${this.name}`, class: "eds-range-val" }, currentValue)), h("input", { key: 'd5bcbf157647324a1ddafab2001518707ae0de9b', id: this.inputId || this.name, name: this.name, style: trackStyle, min: this.min, max: this.max, step: this.step, value: currentValue, required: this.required, disabled: this.disabled, type: "range", class: "w-full input eds-range-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("div", { key: 'e72eed37dc3dc0bd596f9198f4d3f59ac11e1c40', class: "eds-range-scale", "aria-hidden": "true" }, h("span", { key: 'ba65117d4dc0c498878760ddf124d614c19af7b9' }, this.min), h("span", { key: '82e42ecec8f53634c005acc151f12a3c6f390ab3' }, mid), h("span", { key: 'b2272241e488952785c92b4a495b1ba744e13d19' }, this.max))));
     }
     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: '849afaf3483b07fd2579d1138fbc1c1eee3930be', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '1b9a30ee46d4575116b585efe8a2d0c6d6b83b39', name: "search", class: "absolute top-1/2 left-[14px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '174fc93f10851aec47cb440895105c34600de601', 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: '900ca7578601ff528b717e5bc3e1fe6b43562fb6', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '722eecc1031f51f83100f9d35719a7ea837f680d', name: "search", class: "absolute top-1/2 left-[14px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '0445caabbf5e3077b708a2b8bdbe0fcee3133398', 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-search/eds-input-search.stories.js

@@ -0,0 +1,30 @@
+export default {
+    title: 'Components/Inputs/Search',
+    component: 'eds-input-search',
+    argTypes: {
+        label: { control: 'text', description: 'Accessible label for the search field.' },
+        placeholder: { control: 'text', description: 'Placeholder text.' },
+        value: { control: 'text', description: 'Current value of the search field.' },
+        disabled: { control: 'boolean', description: 'If true, the input is disabled.' },
+        required: { control: 'boolean', description: 'If true, the input is required.' }
+    },
+    args: {
+        label: 'Search',
+        placeholder: 'Search…',
+        disabled: false,
+        required: false
+    }
+};
+export const Default = {
+    render: (args) => `
+    <eds-input-search
+      name="search-box"
+      input-id="search-main"
+      ${args.label ? `label="${args.label}"` : ''}
+      ${args.placeholder ? `placeholder="${args.placeholder}"` : ''}
+      ${args.value ? `value="${args.value}"` : ''}
+      ${args.disabled ? 'disabled="true"' : ''}
+      ${args.required ? 'required="true"' : ''}
+    ></eds-input-search>
+  `
+};

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

@@ -26,12 +26,16 @@ export class EdsInputSelect {
         const selectId = this.inputId || this.name;
         const placeholderText = this.placeholder || `Pick from the list`;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : undefined;
-        return (h("div", { key: 'c2f809a88f8b9eab6a36b86bb49daaa39ac1a832', class: "relative" }, h("select", { key: '0847d6526bd118db744627279d96a979dafd19d1', id: selectId, name: this.name, class: {
+        return (h("div", { key: '303df3cd45f076ae5b29f301c9dc742e1664887a', class: "relative" }, h("select", { key: '7635ec7c53e7f07c7c71ab25e8475ed53a8d013e', id: selectId, name: this.name, class: {
                 input: true,
                 'input-error': this.error,
+                // No real value yet → the placeholder option is showing. Lets CSS
+                // render the select text in the light placeholder colour (grey-500),
+                // matching text inputs, instead of the dark default text colour.
+                'is-placeholder': !this.value && this.value !== 0,
                 '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: '1d66602cc92028fddfd047bb2fc79c8f3602ba8e', value: "", disabled: true, selected: !this.value || this.value === '' }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: '40f750ff55b0ac5707c4010868835c6d82537d17', 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: 'ef8c068e287819be7228940bfbe0b8b923e22087', class: "w-20 h-20", name: "chevron-right" }))));
+            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: '793cd7db90936a9746810075246b5408710ce7ac', value: "", disabled: true, selected: !this.value || this.value === '' }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: '41a1eb4a753c304148ee6cdc71049fa15cbd61f6', 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: '4ee4022f9d47fc26b27006f144fc598367f50169', class: "w-20 h-20", name: "chevron-right" }))));
     }
     static get is() { return "eds-input-select"; }
     static get properties() {