@ebrains/components 2.4.0 → 3.0.0

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: '1ff909ca6fe3fe40ca5659cea033b404a45580fb', class: {
+        return (h("div", { key: '401f46b1ba986cbab6ef1617039f2315fb9d5e6b', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: '92c92a5aaebd84d96a7bf8c291542d6a8cf4d896' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: 'ac8eb664987b1205d5a96c723840ac3ccd779ac1', ref: (el) => (this.img = el), class: {
+            } }, 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: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded

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

@@ -0,0 +1,195 @@
+/* Container */
+.eds-input-dropzone-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.75rem;
+  max-width: 100%;
+}
+
+/* Hidden native input */
+.eds-input-dropzone-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Dropzone Area */
+.eds-input-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  width: 100%;
+  min-height: 200px;
+  padding: 2rem;
+  border: 2px dashed var(--color-border-soft, #d0d0d0);
+  border-radius: 8px;
+  background-color: var(--color-bg-inverse, #ffffff);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.eds-input-dropzone:hover:not(.disabled) {
+  border-color: var(--color-border-strong, #07140D);
+  background-color: var(--color-bg-softer, #ECECEC);
+}
+
+.eds-input-dropzone.dragging:not(.disabled) {
+  border-color: var(--color-accent, #00FF9D);
+  background-color: var(--color-bg-softest, #F8F8F8);
+  border-width: 3px;
+}
+
+.eds-input-dropzone.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--color-bg-disabled, #f5f5f5);
+}
+
+.eds-input-dropzone:focus-visible {
+  outline: 2px solid var(--color-accent, #00FF9D);
+  outline-offset: 2px;
+}
+
+/* Dropzone Icon */
+.dropzone-icon {
+  width: 48px;
+  height: 48px;
+  color: var(--color-text-light, #7A7B7A);
+  flex-shrink: 0;
+}
+
+.eds-input-dropzone.dragging .dropzone-icon {
+  color: var(--color-accent, #00FF9D);
+}
+
+/* Dropzone Text */
+.dropzone-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  text-align: center;
+}
+
+.dropzone-primary {
+  font-family: var(--font-family, 'IBM Plex Sans', sans-serif);
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--color-text-default, #07140D);
+  margin: 0;
+}
+
+.dropzone-secondary {
+  font-family: var(--font-family, 'IBM Plex Sans', sans-serif);
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: var(--color-text-light, #7A7B7A);
+  margin: 0;
+}
+
+/* File Chips Container */
+.eds-input-dropzone-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+/* Individual File Chip */
+.eds-input-dropzone-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4rem 0.75rem;
+  background-color: var(--color-bg-softer, #ECECEC);
+  border-radius: 100px;
+  font-size: 0.75rem;
+  color: var(--color-text-default, #07140D);
+}
+
+.file-chip-icon {
+  width: 14px;
+  height: 14px;
+  color: var(--color-text-light, #7A7B7A);
+  flex-shrink: 0;
+}
+
+.eds-input-dropzone-chip-name {
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 400;
+}
+
+.eds-input-dropzone-chip-size {
+  font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
+  font-size: 0.625rem;
+  color: var(--color-text-light, #7A7B7A);
+  flex-shrink: 0;
+}
+
+.eds-input-dropzone-chip-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-text-light, #7A7B7A);
+  cursor: pointer;
+  transition: color 0.2s ease;
+  flex-shrink: 0;
+}
+
+.eds-input-dropzone-chip-remove:hover:not(:disabled) {
+  color: var(--color-error, #e53935);
+}
+
+.eds-input-dropzone-chip-remove:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.eds-input-dropzone-chip-remove svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .eds-input-dropzone {
+    min-height: 160px;
+    padding: 1.5rem;
+  }
+
+  .dropzone-icon {
+    width: 40px;
+    height: 40px;
+  }
+
+  .dropzone-primary {
+    font-size: 0.875rem;
+  }
+
+  .dropzone-secondary {
+    font-size: 0.75rem;
+  }
+
+  .eds-input-dropzone-chip-name {
+    max-width: 120px;
+  }
+}

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: '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" }))))))))));
+    }
+    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

@@ -50,7 +50,7 @@ export class EdsInput {
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (h("div", { key: '1800587d54da282566893c538d47aadf9f9bb390', 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: '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'
             ? {
                 min: this.min,
                 max: this.max,
@@ -61,7 +61,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: 'cc6cc50cdebea1d4eaecb78bc6ab2b4b92503893', 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: 'ff4b36e873438f7208eb660c77381f87f0805109', 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: '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 }))));
     }
     static get is() { return "eds-input"; }
     static get properties() {
@@ -245,9 +245,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,

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

@@ -1,16 +1,19 @@
-
 p {
   margin: 0;
 }
+
 .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 +21,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 +41,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

@@ -8,7 +8,7 @@ export class EdsInputFooter {
         this.link = undefined;
     }
     render() {
-        return (h("div", { key: '6c045ff40d674a27cf4fe4c1a125251edd7455ab' }, this.error && this.errorMessage && (h("div", { key: 'd6edd41359f7efb8f0a3bce487b852c1b26c035a', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: 'cd24f34b58c81f00046cc1d90a5b993928e72be8', icon: "warning" }), h("p", { key: 'bf718bcf0e04c5af1924381f567d5921bd43edec', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '4ea38b231e7b7fba679a05c12773a486aa3201bc', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("eds-link", { key: 'e2e1255c198b707abb2b2194100b83f7b00de9e7', label: this.link.label, url: this.link.url, intent: "underline", size: "small", external: true }))));
+        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 }))));
     }
     static get is() { return "eds-input-footer"; }
     static get encapsulation() { return "shadow"; }