@ebrains/components 3.1.0 → 3.2.0

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

@@ -51,7 +51,7 @@ export class EdsInput {
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        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'
+        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,
@@ -62,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: '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 }))));
+              `, "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() {

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

@@ -2,6 +2,16 @@ 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 {

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

@@ -9,7 +9,7 @@ export class EdsInputFooter {
         this.link = undefined;
     }
     render() {
-        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 }))));
+        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: '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")))));
+        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: '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)));
+        // 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: '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}`,
+        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-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: '8365ffbc8f6f6386edfc1626d16c9152fd3cce9f', class: "relative" }, h("select", { key: '52e712898a3251cea5447a379886449175e7c8b8', 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: '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" }))));
+            }, "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() {

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

@@ -5881,6 +5881,17 @@ video {
 .input::placeholder {
   color: var(--grey-500);
 }
+/* A <select> has no ::placeholder — when no option is chosen yet it shows the
+   placeholder <option> in the normal dark text colour, which looks heavier than
+   text-input placeholders. is-placeholder (set by eds-input-select while empty)
+   matches them by rendering the closed select in grey-500; real options in the
+   open dropdown stay dark for readability. */
+.input.is-placeholder {
+  color: var(--grey-500);
+}
+.input.is-placeholder option {
+  color: var(--brand-black);
+}
 .input {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -6372,6 +6383,9 @@ input[type="range"]::-webkit-slider-thumb {
 .mt-8 {
   margin-top: 0.5rem;
 }
+.mb-8 {
+  margin-bottom: 0.5rem;
+}
 .mt-auto {
   margin-top: auto;
 }
@@ -7768,3 +7782,208 @@ input[type="range"]::-webkit-slider-thumb {
   }
 }
 
+/* ============================================================
+   Field input styling — the new "brand form" look, applied to
+   every field type rendered through eds-input-field (the wrapper).
+   Element+class selectors (input.input / textarea.input / select.input)
+   beat the global utility-based `.input` reliably. Focus colour reads
+   --eds-field-accent (set by eds-form's brand body) and falls back to
+   the brand-green-dark default, so this looks consistent everywhere.
+   ============================================================ */
+
+/* Text-like inputs + select box.
+   NB: radio/checkbox/range also carry the `.input` class, so they're excluded
+   here (otherwise the box sizing would balloon them) — they're styled below. */
+input.input:not([type='radio']):not([type='checkbox']):not([type='range']),
+textarea.input,
+select.input {
+  min-height: 50px;
+  padding: 0 16px;
+  border: 1px solid var(--line-color, #e2e2e2);
+  border-radius: 10px;
+  background: var(--white, #ffffff);
+  color: var(--brand-black, #07140d);
+  box-shadow: none;
+  transition: border-color 0.14s ease, box-shadow 0.14s ease;
+}
+
+/* Leading-icon inputs: restore the left padding that clears the icon (the icon
+   sits absolutely at left:12px). The `.input-icon` + full :not() chain out-
+   specifies the `padding: 0 16px` rule above, which would otherwise let the
+   placeholder / text sit under the icon. */
+input.input.input-icon:not([type='radio']):not([type='checkbox']):not([type='range']) {
+  padding-left: 42px;
+}
+
+input.input:not([type='radio']):not([type='checkbox']):not([type='range'])::placeholder,
+textarea.input::placeholder {
+  color: #a9aba9;
+}
+
+input.input:not([type='radio']):not([type='checkbox']):not([type='range']):hover,
+textarea.input:hover,
+select.input:hover {
+  border-color: #c9ccca;
+}
+
+input.input:not([type='radio']):not([type='checkbox']):not([type='range']):focus,
+input.input:not([type='radio']):not([type='checkbox']):not([type='range']):focus-visible,
+textarea.input:focus,
+textarea.input:focus-visible,
+select.input:focus,
+select.input:focus-visible {
+  outline: none;
+  border-color: var(--eds-field-accent, #00c87b);
+  box-shadow: 0 0 0 3px var(--eds-field-focus-ring, rgba(0, 200, 123, 0.16));
+}
+
+input.input:not([type='radio']):not([type='checkbox']):not([type='range']):disabled,
+textarea.input:disabled,
+select.input:disabled {
+  background: #f7f7f7;
+  color: #a9aba9;
+  cursor: not-allowed;
+}
+
+/* Textarea — taller, top-aligned, resizable */
+textarea.input,
+textarea.input-textarea {
+  min-height: 108px;
+  padding: 14px 16px;
+  line-height: 1.55;
+  resize: vertical;
+  align-items: flex-start;
+}
+
+/* Select — keep room for the chevron the select renders on the right */
+select.input,
+select.input-select {
+  padding-right: 44px;
+  cursor: pointer;
+}
+
+/* Range — not a boxed input; a clean track (green fill is painted inline
+   by eds-input-range up to the current value) */
+input[type='range'].input {
+  min-height: 0;
+  height: 6px;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  box-shadow: none;
+}
+input[type='range'].input:focus,
+input[type='range'].input:focus-visible {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
+/* Range thumb — brand-black knob with a green ring (matches the mockup). */
+input[type='range'].input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--brand-black, #07140d);
+  border: 3px solid var(--eds-field-accent, #00c87b);
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+input[type='range'].input::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--brand-black, #07140d);
+  border: 3px solid var(--eds-field-accent, #00c87b);
+  cursor: pointer;
+}
+
+/* Range layout: value readout (top-right) + min/mid/max scale (below). */
+.eds-range {
+  display: flex;
+  flex-direction: column;
+  padding-top: 6px;
+}
+.eds-range-top {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 12px;
+}
+.eds-range-val {
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--eds-field-accent, #00c87b);
+  font-variant-numeric: tabular-nums;
+}
+.eds-range-scale {
+  display: flex;
+  justify-content: space-between;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 10px;
+  color: #7a7b7a;
+  margin-top: 10px;
+}
+
+/* Radio & checkbox — brand-green when selected (white mark stays) */
+input.input-radio:checked,
+input.input-checkbox:checked {
+  background-color: var(--eds-field-accent, #00c87b);
+  border-color: var(--eds-field-accent, #00c87b);
+}
+
+/* Radio / checkbox options as selectable cards (matches the brand mockup).
+   :has(input:checked) works because eds-input is light-DOM, so there's no
+   shadow boundary between the card and the control. */
+.eds-option-list {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
+.eds-option-card {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 13px 15px;
+  border: 1px solid var(--line-color, #e2e2e2);
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 14.5px;
+  transition: border-color 0.14s ease, background-color 0.14s ease,
+    box-shadow 0.14s ease;
+}
+
+.eds-option-card:hover {
+  border-color: #c9ccca;
+  background: #fcfefd;
+}
+
+.eds-option-card:has(input:checked) {
+  border-color: var(--eds-field-accent, #00c87b);
+  background: rgba(0, 255, 157, 0.05);
+  box-shadow: 0 0 0 2px var(--eds-field-card-ring, rgba(0, 255, 157, 0.12));
+}
+
+.eds-option-card.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.eds-option-text {
+  flex: 0 1 auto;
+}
+
+.eds-option-help {
+  margin-left: auto;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  color: #8a8c8a;
+}
+

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

@@ -118,7 +118,12 @@ export class EdsInputField {
             // Icons are only supported on text inputs for now — ignore the prop for
             // every other type so e.g. number/select/checkbox never render one.
             icon: this.type === 'text' ? this.icon : undefined, checked: this.checked }, (this.type === 'number' ? { min: this.min, max: this.max, step: this.step } : {}));
-        return (h("div", { key: '2072cce16b572431b41363beff779d8631de7abc' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4" }, (this.label || this.hint) && (h("div", { class: "flex justify-between mb-4" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)))), this.parsedOptions.map((option) => (h("div", { class: "flex items-center gap-x-4 gap-y-4", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { inputId: `${this.inputId || this.name}-${option.value}`, inputTabIndex: 0, value: option.value, checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value)) })), h("label", { htmlFor: `${this.inputId || this.name}-${option.value}`, class: `input-label-options ${this.disabled ? 'text-lighter' : ''}` }, option.label)))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts, { inputTabIndex: 0, value: this.value, checked: this.value === 'on' || this.checked })), this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (h("div", null, (this.label || this.hint) && (h("div", { class: "flex justify-between mb-4" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)))), this.type === 'select' ? (h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (h("eds-input-file", { name: this.name, inputId: this.inputId, disabled: this.disabled, required: this.required, multiple: true, onEdsfile: this.handleFileChange })) : this.type === 'dropzone' ? (h("eds-input-dropzone", { name: this.name, inputId: this.inputId, disabled: this.disabled, required: this.required, multiple: true, onEdsfile: this.handleFileChange })) : this.type === 'range' ? ((() => {
+        return (h("div", { key: '2f4fc787a53ec8b3afcd8a6c372075e9c077e220' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "eds-option-list" }, (this.label || this.hint) && (h("div", { class: "flex justify-between mb-12" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)))), this.parsedOptions.map((option) => (
+        // Each option is a selectable card. The native control lives in
+        // eds-input (light DOM), so the card highlights via :has(input:checked)
+        // — no JS state needed. The label wraps the control, so clicking
+        // anywhere on the card toggles it.
+        h("label", { class: `eds-option-card ${this.disabled ? 'is-disabled' : ''}`, key: option.value }, h("eds-input", Object.assign({}, inputOpts, { inputId: `${this.inputId || this.name}-${option.value}`, inputTabIndex: 0, value: option.value, checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value)) })), h("span", { class: "eds-option-text" }, option.label), option.description && h("span", { class: "eds-option-help" }, option.description)))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts, { inputTabIndex: 0, value: this.value, checked: this.value === 'on' || this.checked })), this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (h("div", null, (this.label || this.hint) && (h("div", { class: "flex justify-between mb-8" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)))), this.type === 'select' ? (h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (h("eds-input-file", { name: this.name, inputId: this.inputId, disabled: this.disabled, required: this.required, multiple: true, onEdsfile: this.handleFileChange })) : this.type === 'dropzone' ? (h("eds-input-dropzone", { name: this.name, inputId: this.inputId, disabled: this.disabled, required: this.required, multiple: true, onEdsfile: this.handleFileChange })) : this.type === 'range' ? ((() => {
             var _a, _b, _c, _d, _e, _f;
             const rangeProps = {
                 name: inputOpts.name,
@@ -134,7 +139,7 @@ export class EdsInputField {
             // type="number"); fall back to options[0..2].value for
             // backward compatibility with existing range fields.
             return (h("eds-input-range", Object.assign({}, rangeProps, { min: (_a = this.min) !== null && _a !== void 0 ? _a : (_b = opt[0]) === null || _b === void 0 ? void 0 : _b.value, max: (_c = this.max) !== null && _c !== void 0 ? _c : (_d = opt[1]) === null || _d === void 0 ? void 0 : _d.value, step: (_e = this.step) !== null && _e !== void 0 ? _e : (_f = opt[2]) === null || _f === void 0 ? void 0 : _f.value, value: numberValue })));
-        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("div", { key: 'f3ab7ef07c5c35f6d5e5d7a3ec35f98fe133ab5b', class: "mt-6" }, h("eds-input-footer", { key: 'a72af69114cd3916e9ffa6ca8a65dced572dadf7', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }))));
+        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("div", { key: '33bfae3f5ef4a8a1a0c529fade0d1a8616eff100', class: "mt-8" }, h("eds-input-footer", { key: 'c4b6b192d052c486965b9b89fc6756324138975c', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }))));
     }
     static get is() { return "eds-input-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,10 +17,26 @@ export default {
         label: { control: 'text', description: 'Label for the input field', table: { category: 'Core' } },
         placeholder: { control: 'text', description: 'Placeholder text', table: { category: 'Core' } },
         // ── State & validation ──
-        required: { control: 'boolean', description: 'Whether the input is required', table: { category: 'State & validation' } },
-        disabled: { control: 'boolean', description: 'Whether the input is disabled', table: { category: 'State & validation' } },
-        error: { control: 'boolean', description: 'Render the input in an error state', table: { category: 'State & validation' } },
-        errorMessage: { control: 'text', description: 'Error message shown when invalid', table: { category: 'State & validation' } },
+        required: {
+            control: 'boolean',
+            description: 'Whether the input is required',
+            table: { category: 'State & validation' }
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the input is disabled',
+            table: { category: 'State & validation' }
+        },
+        error: {
+            control: 'boolean',
+            description: 'Render the input in an error state',
+            table: { category: 'State & validation' }
+        },
+        errorMessage: {
+            control: 'text',
+            description: 'Error message shown when invalid',
+            table: { category: 'State & validation' }
+        },
         checked: {
             control: 'boolean',
             description: 'Checked state (checkbox/radio only)',
@@ -29,15 +45,27 @@ export default {
         },
         // ── Helper text & decoration ──
         hint: { control: 'text', description: 'Hint text next to the label', table: { category: 'Helper & decoration' } },
-        message: { control: 'text', description: 'Message displayed below the input', table: { category: 'Helper & decoration' } },
+        message: {
+            control: 'text',
+            description: 'Message displayed below the input',
+            table: { category: 'Helper & decoration' }
+        },
         icon: {
             control: { type: 'select' },
             options: ICON_OPTIONS,
             description: 'Icon name to display inside the input (from the EDS icon set)',
             table: { category: 'Helper & decoration' }
         },
-        link: { control: 'object', description: 'Help/docs link `{ url, label }`', table: { category: 'Helper & decoration' } },
-        maxLength: { control: 'number', description: 'Maximum length for text input', table: { category: 'Helper & decoration' } },
+        link: {
+            control: 'object',
+            description: 'Help/docs link `{ url, label }`',
+            table: { category: 'Helper & decoration' }
+        },
+        maxLength: {
+            control: 'number',
+            description: 'Maximum length for text input',
+            table: { category: 'Helper & decoration' }
+        },
         // ── Number & range (min/max/step apply to type="number" and type="range") ──
         min: { control: 'number', description: 'Minimum value (number & range)', table: { category: 'Number & range' } },
         max: { control: 'number', description: 'Maximum value (number & range)', table: { category: 'Number & range' } },

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

@@ -7,8 +7,9 @@ export class EdsInputFile {
         };
         this.handleFileSelect = (event) => {
             const input = event.target;
-            if (!input.files)
+            if (!input.files) {
                 return;
+            }
             const newFiles = Array.from(input.files).map((file) => ({
                 file,
                 id: `${file.name}-${Date.now()}-${Math.random()}`
@@ -40,8 +41,9 @@ export class EdsInputFile {
         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));
@@ -60,7 +62,7 @@ export class EdsInputFile {
     }
     render() {
         const effectiveLabel = this.buttonLabel || (this.multiple ? 'Choose Files' : 'Choose File');
-        return (h("div", { key: 'e02d98fbc01dbe7a89eeb3010f966ed4a373ede6', class: "eds-input-file-container" }, h("input", { key: '2013826fda9453aade4528c9f051aac98780662f', ref: (el) => (this.fileInputRef = el), type: "file", id: this.inputId || this.name, name: this.name, class: "eds-input-file-hidden", disabled: this.disabled, required: this.required, multiple: this.multiple, accept: this.accept, onChange: this.handleFileSelect }), h("button", { key: 'f5e5cf91376ccb69b39ef3c9b11095aca8bfb728', type: "button", class: "eds-input-file-btn", onClick: this.handleButtonClick, disabled: this.disabled }, h("svg", { key: '563066375b42d0a8c14f14ac9fdfb587539f4e76', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: 'ebe5549fffa0c2453ab98891da75a464c09e9fa2', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: '69036b82e15103e481770d0ef2c500b0dcad0399', points: "17 8 12 3 7 8" }), h("line", { key: 'e0531be95796ec6dc7f9fe359e4736a15a0e3640', x1: "12", y1: "3", x2: "12", y2: "15" })), effectiveLabel), this.selectedFiles.length > 0 && (h("div", { key: '62590fb46cee89d2524f1ede71c7af341c3e426a', class: "eds-input-file-chips" }, this.selectedFiles.map((item) => (h("div", { key: item.id, class: "eds-input-file-chip" }, this.getFileIcon(item.file.name), h("span", { class: "eds-input-file-chip-name" }, item.file.name), h("span", { class: "eds-input-file-chip-size" }, this.formatFileSize(item.file.size)), h("button", { type: "button", class: "eds-input-file-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: '810e30b054b1a6a43c9cc79e318ae487679de1d7', class: "eds-input-file-container" }, h("input", { key: '21a2162df7e6cc430b230407891bd1568bb4fe18', ref: (el) => (this.fileInputRef = el), type: "file", id: this.inputId || this.name, name: this.name, class: "eds-input-file-hidden", disabled: this.disabled, required: this.required, multiple: this.multiple, accept: this.accept, onChange: this.handleFileSelect }), h("button", { key: 'd297cf5c5e63c002558e878a140b931a68a25f54', type: "button", class: "eds-input-file-btn", onClick: this.handleButtonClick, disabled: this.disabled }, h("svg", { key: 'eb08b7516dce89647e28ca0c0ec1f70ade64b2cd', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: 'b0eefaf19325e60d5f974039644f8ab962bbfe92', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), h("polyline", { key: 'd0bfb65f3c6e3e9d019d23e94ceeb08ba3f6976e', points: "17 8 12 3 7 8" }), h("line", { key: '3e7b0172924b54c26b9100ea264e85be73beabe9', x1: "12", y1: "3", x2: "12", y2: "15" })), effectiveLabel), this.selectedFiles.length > 0 && (h("div", { key: '633d574a840479eb58ec596078960c88fbf4ce94', class: "eds-input-file-chips" }, this.selectedFiles.map((item) => (h("div", { key: item.id, class: "eds-input-file-chip" }, this.getFileIcon(item.file.name), h("span", { class: "eds-input-file-chip-name" }, item.file.name), h("span", { class: "eds-input-file-chip-size" }, this.formatFileSize(item.file.size)), h("button", { type: "button", class: "eds-input-file-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-file"; }
     static get encapsulation() { return "shadow"; }