@ebrains/components 2.4.1 → 3.1.0

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

@@ -0,0 +1,300 @@
+import { h } from "@stencil/core";
+export class EdsInputDropzone {
+    constructor() {
+        this.handleDropzoneClick = () => {
+            var _a;
+            if (!this.disabled) {
+                (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click();
+            }
+        };
+        this.handleFileSelect = (event) => {
+            const input = event.target;
+            if (!input.files)
+                return;
+            this.addFiles(Array.from(input.files));
+        };
+        this.handleDragOver = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!this.disabled) {
+                this.isDragging = true;
+            }
+        };
+        this.handleDragLeave = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.isDragging = false;
+        };
+        this.handleDrop = (event) => {
+            var _a;
+            event.preventDefault();
+            event.stopPropagation();
+            this.isDragging = false;
+            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));
+            }
+        };
+        this.handleRemoveFile = (id) => {
+            this.selectedFiles = this.selectedFiles.filter((item) => item.id !== id);
+            this.emitFileChange();
+        };
+        this.name = undefined;
+        this.inputId = undefined;
+        this.disabled = false;
+        this.required = false;
+        this.multiple = true;
+        this.accept = undefined;
+        this.maxFileSize = undefined;
+        this.primaryText = 'Drag and drop files here';
+        this.secondaryText = 'or click to browse';
+        this.selectedFiles = [];
+        this.isDragging = false;
+    }
+    addFiles(newFiles) {
+        const fileItems = newFiles.map((file) => ({
+            file,
+            id: `${file.name}-${Date.now()}-${Math.random()}`
+        }));
+        if (this.multiple) {
+            this.selectedFiles = [...this.selectedFiles, ...fileItems];
+        }
+        else {
+            this.selectedFiles = fileItems.slice(0, 1);
+        }
+        this.emitFileChange();
+    }
+    emitFileChange() {
+        const files = this.selectedFiles.map((item) => item.file);
+        this.edsfile.emit({ files });
+    }
+    formatFileSize(bytes) {
+        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));
+        return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+    }
+    getFileIcon(filename) {
+        var _a;
+        const ext = (_a = filename.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        const imageExts = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'];
+        if (imageExts.includes(ext || '')) {
+            // Image icon
+            return (h("svg", { class: "file-chip-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), h("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), h("polyline", { points: "21 15 16 10 5 21" })));
+        }
+        // Document icon (default)
+        return (h("svg", { class: "file-chip-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), h("polyline", { points: "14 2 14 8 20 8" })));
+    }
+    render() {
+        const dropzoneClass = `eds-input-dropzone ${this.isDragging ? 'dragging' : ''} ${this.disabled ? 'disabled' : ''}`;
+        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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-input-dropzone.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-input-dropzone.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The `name` attribute of the input element. Required for form submission."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `id` attribute of the internal input element. Defaults to `name` if not set."
+                },
+                "attribute": "input-id",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the input is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the input is required."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, allows multiple file selection."
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accepted file types (e.g., \".pdf,.png,.jpg\" or \"image/*\")."
+                },
+                "attribute": "accept",
+                "reflect": false
+            },
+            "maxFileSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum file size in bytes. If not set, no size limit is enforced client-side."
+                },
+                "attribute": "max-file-size",
+                "reflect": false
+            },
+            "primaryText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary text shown in dropzone."
+                },
+                "attribute": "primary-text",
+                "reflect": false,
+                "defaultValue": "'Drag and drop files here'"
+            },
+            "secondaryText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary text shown in dropzone."
+                },
+                "attribute": "secondary-text",
+                "reflect": false,
+                "defaultValue": "'or click to browse'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedFiles": {},
+            "isDragging": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "edsfile",
+                "name": "edsfile",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when files are selected or removed.\nUse `event.detail.files` to access the FileList."
+                },
+                "complexType": {
+                    "original": "{ files: File[] }",
+                    "resolved": "{ files: File[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+}

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

@@ -0,0 +1,34 @@
+export default {
+    title: 'Components/Inputs/Dropzone',
+    component: 'eds-input-dropzone',
+    argTypes: {
+        name: { control: 'text', description: 'The name attribute for form submission.' },
+        inputId: { control: 'text', description: 'The id attribute of the internal input element.' },
+        disabled: { control: 'boolean', description: 'If true, the input is disabled.' },
+        required: { control: 'boolean', description: 'If true, the input is required.' },
+        multiple: { control: 'boolean', description: 'If true, allows multiple file selection.' },
+        accept: { control: 'text', description: 'Accepted file types (e.g., ".pdf,.png,.jpg" or "image/*").' },
+        maxFileSize: { control: 'number', description: 'Maximum file size in bytes.' },
+        primaryText: { control: 'text', description: 'Primary text shown in dropzone.' },
+        secondaryText: { control: 'text', description: 'Secondary text shown in dropzone.' }
+    },
+    args: {
+        name: 'file-upload',
+        disabled: false,
+        required: false,
+        multiple: true,
+        primaryText: 'Drag and drop files here',
+        secondaryText: 'or click to browse'
+    }
+};
+export const Default = {
+    render: (args) => `
+    <eds-input-dropzone
+      name="${args.name}"
+      ${args.disabled ? 'disabled' : ''}
+      ${args.required ? 'required' : ''}
+      ${args.multiple ? 'multiple' : ''}
+      primary-text="${args.primaryText}"
+      secondary-text="${args.secondaryText}">
+    </eds-input-dropzone>`
+};

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: '10cacc49f2e61f8b357d1d0dd303822d7b3d7800', 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: '2f17e830e7d5977c06dff45e248ec6d4bcf2885c', 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: 'd171f505b869787c01945720489343a6d57e02bf', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
+              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput }))), this.maxLength && this.type === 'textarea' && (h("span", { key: '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() {
@@ -245,9 +246,15 @@ export class EdsInput {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "IconName",
+                    "resolved": "\"copy\" | \"arrow-right\" | \"chevron-right\" | \"chevron-left\" | \"chevron-down\" | \"chevron-up\" | \"arrow-left\" | \"arrow-up-right\" | \"close\" | \"add\" | \"edit\" | \"checkmark\" | \"download\" | \"upload\" | \"view\" | \"exit\" | \"caretSort\" | \"bookmark\" | \"createLink\" | \"activity\" | \"account\" | \"analytics\" | \"template\" | \"documentExport\" | \"documentDownload\" | \"trashCan\" | \"chooseItem\" | \"copyLink\" | \"dragHorizontal\" | \"dragVertical\" | \"login\" | \"logout\" | \"move\" | \"replicate\" | \"sortAscending\" | \"sortDescending\" | \"requestQuote\" | \"reset\" | \"resultDraft\" | \"share\" | \"play\" | \"book\" | \"chatOff\" | \"forum\" | \"shareKnowledge\" | \"time\" | \"help\" | \"customerService\" | \"code\" | \"rocket\" | \"compass\" | \"menu\" | \"search\" | \"settings\" | \"notification\" | \"user\" | \"group\" | \"save\" | \"document\" | \"folder\" | \"image\" | \"calendar\" | \"information\" | \"warning\" | \"error\" | \"checkmark-filled\" | \"star\" | \"thumbs-up\" | \"thumbs-down\" | \"twitter\" | \"linkedin\" | \"facebook\" | \"youtube\" | \"mastodon\" | \"bluesky\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../../utils/icons",
+                            "id": "../../../packages/components/src/utils/icons.ts::IconName"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
@@ -358,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

@@ -1,16 +1,48 @@
-
 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);
 }
+
 .flex {
   display: flex;
 }
+
 .items-center {
   align-items: center;
 }
+
 .f-ui-04 {
   font-family: var(--f-ui-04-fontFamily);
   font-weight: var(--f-ui-04-fontWeight);
@@ -18,12 +50,19 @@ p {
   line-height: var(--f-ui-04-lineHeight);
   letter-spacing: var(--f-ui-04-letterSpacing);
 }
+
 .ml-4 {
   margin-left: 0.25rem;
 }
+
+.pt-4 {
+  padding-top: 0.25rem;
+}
+
 .mb-4 {
   margin-bottom: 0.25rem;
 }
+
 .f-ui-05 {
   font-family: var(--f-ui-05-fontFamily);
   font-weight: var(--f-ui-05-fontWeight);
@@ -31,21 +70,26 @@ p {
   line-height: var(--f-ui-05-lineHeight);
   letter-spacing: var(--f-ui-05-letterSpacing);
 }
+
 .text-lighter {
   color: var(--grey-600);
 }
+
 .effect-color {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+
 .hover\:text-lighter:hover {
   color: var(--grey-600);
 }
+
 .underline {
   text-decoration-line: underline;
 }
+
 .underline-offset-4 {
   text-underline-offset: 4px;
 }

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: 'ac60e5d56a86af64ea34445f9376c942258c9026' }, this.error && this.errorMessage && (h("div", { key: '25ff09f276f7028e1b2877133ab639b35cdebaba', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '2add9a34a966428af96598f3e8e07f9535da8728', icon: "warning" }), h("p", { key: 'bcb624339190c0585e960a0c4debc3fec2ada4eb', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '00944237618f325774f316faaf4620e5eb507289', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("eds-link", { key: '464c5a59e9c36a06f1cdae9be9e09a4f8b05d282', 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: '8a421c62ddec859bd7837454aa664a116001fd31', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'ad49202fb172a182822587248c141e0f8d7bcc6f' }, h("span", { key: 'e682ff5f3ac83b8adce37c8c9893c2aa235c97b1', "aria-hidden": "true" }, "*"), h("span", { key: '343d2abb7c452fc2a6a67b04727237fea9519838', 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

@@ -27,8 +27,8 @@ export class EdsInputRange {
         this.sliderVal = undefined;
     }
     componentWillLoad() {
-        this.sliderVal =
-            this.value !== undefined ? this.value : this.max % 2 === 0 ? this.max / 2 : Math.ceil(this.max / 2);
+        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.
     onValueChange(newVal) {
@@ -45,7 +45,9 @@ export class EdsInputRange {
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '27c60fe7ad5cf3cf8255129529ef64905c87b609', class: "relative flex flex-col items-start" }, h("input", { key: '8ef115e18b6afd956c57a30cd4b9ee45ecd79334', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput, onChange: this.onChange }), h("p", { key: 'beb95f6aa032db57ec401839cea48ac1d3a1861d', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-lighter" }, "Current value: ", this.sliderVal)));
+        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: '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() {

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: '4057975b193458daff5cc779e7671f3aa8df82fb', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '47366d7737c3c044aa97f6e5a5a76301c5f688ae', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '70195ba54b9afd1c953735899d6fbfd668f81c71', 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: '52676b3559e14b5153f7d8f0fa6cd12e49354d87', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '754e8753607c01dab63d156d306f3325547049aa', name: "search", class: "absolute top-1/2 left-[14px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: 'b49d523195711316c0817de67776d379a6c7248b', 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,12 @@ 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: '5f73cb76010cac41f433921395aaf779765e298a', class: "relative" }, h("select", { key: '0705adad43076b6048900d5c62b8be2dff090270', id: selectId, name: this.name, class: {
+        return (h("div", { key: '8365ffbc8f6f6386edfc1626d16c9152fd3cce9f', class: "relative" }, h("select", { key: '52e712898a3251cea5447a379886449175e7c8b8', id: selectId, name: this.name, class: {
                 input: true,
                 'input-error': this.error,
                 'px-4': true,
                 'py-2': true
-            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: '6b2d7856821cfe804f63f6f289f78bd3f7a8273c', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: '161692e967ed9c094feb171c6d067058dfafa146', 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: '513a74b4753a08280326970dfbb16642b5c6b986', class: "w-20 h-20", icon: "chevron-right" }))));
+            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: 'd52c376ffb683abc0dec72177dba445273d148f7', 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: 'fecbcb47793f8a57de44711b33d3650be5297aa7', 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: '4fda1345a62eeb212093057382d877f31bb6112d', class: "w-20 h-20", name: "chevron-right" }))));
     }
     static get is() { return "eds-input-select"; }
     static get properties() {