@ebrains/components 2.4.0 → 3.0.0

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: '5e97f430a0ef1cdc4d0b28618d78402991fda8fe', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'fedf93c4b037f387c4aad3ffab354de94de564d3' }, h("span", { key: '72ae856c25308b676d84d7ee0bf214362218a203', "aria-hidden": "true" }, "*"), h("span", { key: '39fcf9a2b39a0207eb0b6f62c16183885c98f145', class: "sr-only" }, "required")))));
+        return (h("label", { key: '7790bae024ee253c12b47ee43dd7697329ff5602', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '1f8e72cee3848171c0f70ce7564524c9f2646eeb' }, h("span", { key: '5ac8ccbe9b984c54ae3a556ea0dc09d6fa625f24', "aria-hidden": "true" }, "*"), h("span", { key: 'a562b41bce8a4e671596266c7705a98f5b2252d0', class: "sr-only" }, "required")))));
     }
     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: 'c8106420cb482123e72c8e5b00079d9921749290', class: "relative flex flex-col items-start" }, h("input", { key: '752dfbeb9fb73c8a4b5ad874461b63e73477ca99', 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: 'de123d07b20996d3f0c7c5baff788ab42fa0a386', 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: '9be1a9d4241844c03d7e2b851ebc5ce181bfadf6', class: "relative flex flex-col items-start" }, h("input", { key: '746c10f7a466a6b498f57812dcb6d9b9ff1e685d', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: currentValue, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": currentValue, onInput: this.onInput, onChange: this.onChange }), h("p", { key: '97b516ab9c20d9b5c7a783b369081b29eb3a83f0', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-light" }, "Current value: ", currentValue)));
     }
     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: 'f8484e4e4a971db07a75ca91b66d4b3cddd5cee9', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '68782ac168c062564d6378bc1bc62e58efeb3555', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: 'c59e9b91f214fc94fc4fb4c991c3e667ea3c24ae', 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: '849afaf3483b07fd2579d1138fbc1c1eee3930be', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '1b9a30ee46d4575116b585efe8a2d0c6d6b83b39', name: "search", class: "absolute top-1/2 left-[14px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '174fc93f10851aec47cb440895105c34600de601', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
             //onInput={this.onInput}
             onChange: this.onChange })));
     }

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: '7f6a81c0f3d1f998c2bd671722cd06992b382540', class: "relative" }, h("select", { key: '3e62519e3973cf1136cda70a3af1cc2a2e093451', id: selectId, name: this.name, class: {
+        return (h("div", { key: 'c2f809a88f8b9eab6a36b86bb49daaa39ac1a832', class: "relative" }, h("select", { key: '0847d6526bd118db744627279d96a979dafd19d1', 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: '4292bd21e8c912f3bb0bc727ed2657051a3e03b8', 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: 'a03c59be80950fd17a89b0adc693654e99496018', 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: '0183976264d130c3c12b30c829fae36512607ac4', 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: '1d66602cc92028fddfd047bb2fc79c8f3602ba8e', value: "", disabled: true, selected: !this.value || this.value === '' }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: '40f750ff55b0ac5707c4010868835c6d82537d17', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: 'ef8c068e287819be7228940bfbe0b8b923e22087', class: "w-20 h-20", name: "chevron-right" }))));
     }
     static get is() { return "eds-input-select"; }
     static get properties() {

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

@@ -1786,16 +1786,16 @@ video {
     bottom: -var(--outer-gutter, 0px);
   }
   .md\:grid-line-x-default[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .md\:grid-line-y-default[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .md\:grid-line-xy-default[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .md\:grid-line-xy-default[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .md\:grid-line-x-inverse[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--white);
@@ -1870,16 +1870,16 @@ video {
     border-inline-end-color: rgba(0, 0, 0, .05 );
   }
   .md\:grid-line-x-accent[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .md\:grid-line-y-accent[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
   }
   .md\:grid-line-xy-accent[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .md\:grid-line-xy-accent[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
   }
   .md\:grid-line-x-error[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--red-700);
@@ -2649,16 +2649,16 @@ video {
     bottom: -var(--outer-gutter, 0px);
   }
   .lg\:grid-line-x-default[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .lg\:grid-line-y-default[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .lg\:grid-line-xy-default[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .lg\:grid-line-xy-default[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .lg\:grid-line-x-inverse[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--white);
@@ -2733,16 +2733,16 @@ video {
     border-inline-end-color: rgba(0, 0, 0, .05 );
   }
   .lg\:grid-line-x-accent[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .lg\:grid-line-y-accent[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
   }
   .lg\:grid-line-xy-accent[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .lg\:grid-line-xy-accent[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
   }
   .lg\:grid-line-x-error[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--red-700);
@@ -3512,16 +3512,16 @@ video {
     bottom: -var(--outer-gutter, 0px);
   }
   .xl\:grid-line-x-default[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .xl\:grid-line-y-default[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .xl\:grid-line-xy-default[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .xl\:grid-line-xy-default[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .xl\:grid-line-x-inverse[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--white);
@@ -3596,16 +3596,16 @@ video {
     border-inline-end-color: rgba(0, 0, 0, .05 );
   }
   .xl\:grid-line-x-accent[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .xl\:grid-line-y-accent[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
   }
   .xl\:grid-line-xy-accent[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .xl\:grid-line-xy-accent[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
   }
   .xl\:grid-line-x-error[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--red-700);
@@ -4375,16 +4375,16 @@ video {
     bottom: -var(--outer-gutter, 0px);
   }
   .xxl\:grid-line-x-default[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .xxl\:grid-line-y-default[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .xxl\:grid-line-xy-default[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .xxl\:grid-line-xy-default[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .xxl\:grid-line-x-inverse[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--white);
@@ -4459,16 +4459,16 @@ video {
     border-inline-end-color: rgba(0, 0, 0, .05 );
   }
   .xxl\:grid-line-x-accent[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .xxl\:grid-line-y-accent[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
   }
   .xxl\:grid-line-xy-accent[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .xxl\:grid-line-xy-accent[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
   }
   .xxl\:grid-line-x-error[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--red-700);
@@ -5238,16 +5238,16 @@ video {
     bottom: -var(--outer-gutter, 0px);
   }
   .xxxl\:grid-line-x-default[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .xxxl\:grid-line-y-default[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .xxxl\:grid-line-xy-default[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .xxxl\:grid-line-xy-default[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .xxxl\:grid-line-x-inverse[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--white);
@@ -5322,16 +5322,16 @@ video {
     border-inline-end-color: rgba(0, 0, 0, .05 );
   }
   .xxxl\:grid-line-x-accent[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .xxxl\:grid-line-y-accent[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
   }
   .xxxl\:grid-line-xy-accent[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .xxxl\:grid-line-xy-accent[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
   }
   .xxxl\:grid-line-x-error[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--red-700);
@@ -5860,10 +5860,10 @@ video {
   border-color: rgba(0, 0, 0, .1 );
 }
 .input:hover {
-  border-color: var(--black);
+  border-color: var(--brand-black);
 }
 .input:active {
-  border-color: var(--black);
+  border-color: var(--brand-black);
 }
 .input {
   font-family: var(--f-ui-02-light-fontFamily);
@@ -5888,7 +5888,7 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   outline-width: 3px;
   outline-offset: 2px;
-  outline-color: var(--green-500);
+  outline-color: var(--brand-green);
 }
 .input:focus-visible {
   outline-style: solid;
@@ -5936,8 +5936,8 @@ video {
   border-color: var(--transparent);
 }
 .input-checkbox:checked {
-  border-color: var(--black);
-  background-color: var(--black);
+  border-color: var(--brand-black);
+  background-color: var(--brand-black);
 }
 .input-checkbox:checked::after {
   border-color: var(--white);
@@ -5977,8 +5977,8 @@ video {
   background-color: var(--transparent);
 }
 .input-radio:checked {
-  border-color: var(--black);
-  background-color: var(--black);
+  border-color: var(--brand-black);
+  background-color: var(--brand-black);
 }
 .input-radio:checked::after {
   background-color: var(--white);
@@ -6004,8 +6004,8 @@ input[type="range"]::-webkit-slider-thumb {
     height: 1.5rem;
     width: 1.5rem;
     border-radius: 9999px;
-    outline: 2px solid var(--green-400); /* This adds an outline */
-    background-color: var(--green-500);
+    outline: 2px solid var(--brand-green); /* This adds an outline */
+    background-color: var(--brand-green-dark);
       -webkit-appearance: none;
               appearance: none; /* Ensure the thumb can be styled */
 }
@@ -6072,7 +6072,7 @@ input[type="range"]::-webkit-slider-thumb {
 .effect-focus {
   outline-width: 3px;
   outline-offset: 2px;
-  outline-color: var(--green-500);
+  outline-color: var(--brand-green);
 }
 .effect-focus:focus-visible {
   outline-style: solid;
@@ -6080,7 +6080,7 @@ input[type="range"]::-webkit-slider-thumb {
 .effect-focus-within {
   outline-width: 3px;
   outline-offset: 2px;
-  outline-color: var(--green-500);
+  outline-color: var(--brand-green);
 }
 .effect-focus-within:focus-within {
   outline-style: solid;
@@ -6211,8 +6211,8 @@ input[type="range"]::-webkit-slider-thumb {
 .left-4 {
   left: 0.25rem;
 }
-.left-\[4px\] {
-  left: 4px;
+.left-\[12px\] {
+  left: 12px;
 }
 .right-0 {
   right: 0rem;
@@ -6852,13 +6852,13 @@ input[type="range"]::-webkit-slider-thumb {
   border-color: rgb(210 210 210 / var(--tw-border-opacity));
 }
 .border-accent {
-  border-color: var(--green-500);
+  border-color: var(--brand-green);
 }
 .border-current {
   border-color: currentColor;
 }
 .border-default {
-  border-color: var(--black);
+  border-color: var(--brand-black);
 }
 .border-error {
   border-color: var(--red-700);
@@ -6879,7 +6879,7 @@ input[type="range"]::-webkit-slider-thumb {
   border-color: rgba(0, 0, 0, .1 );
 }
 .border-softest {
-  border-color: rgba(0, 0, 0, .05 );
+  border-color: var(--grey-light);
 }
 .border-transparent {
   border-color: var(--transparent);
@@ -6897,7 +6897,7 @@ input[type="range"]::-webkit-slider-thumb {
   background-color: var(--grey-800) !important;
 }
 .bg-accent {
-  background-color: var(--green-500);
+  background-color: var(--brand-green);
 }
 .bg-accent-dark {
   background-color: var(--green-600);
@@ -6915,7 +6915,7 @@ input[type="range"]::-webkit-slider-thumb {
   background-color: var(--grey-400);
 }
 .bg-default {
-  background-color: var(--grey-200);
+  background-color: var(--grey-light);
 }
 .bg-error {
   background-color: var(--red-200);
@@ -6948,7 +6948,7 @@ input[type="range"]::-webkit-slider-thumb {
   background-color: var(--grey-900);
 }
 .bg-strongest {
-  background-color: var(--black);
+  background-color: var(--brand-black);
 }
 .bg-strongest-soft {
   background-color: rgba(0, 0, 0, .05);
@@ -7167,13 +7167,13 @@ input[type="range"]::-webkit-slider-thumb {
   color: rgb(0 52 203 / var(--tw-text-opacity));
 }
 .text-accent {
-  color: var(--green-500);
+  color: var(--brand-green);
 }
 .text-current {
   color: currentColor;
 }
 .text-default {
-  color: var(--black);
+  color: var(--brand-black);
 }
 .text-error {
   color: var(--red-700);
@@ -7215,7 +7215,7 @@ input[type="range"]::-webkit-slider-thumb {
   text-decoration-color: #0034CB;
 }
 .decoration-accent {
-  text-decoration-color: var(--green-500);
+  text-decoration-color: var(--brand-green);
 }
 .decoration-2 {
   text-decoration-thickness: 2px;
@@ -7436,7 +7436,7 @@ input[type="range"]::-webkit-slider-thumb {
   background-color: var(--grey-400);
 }
 .hover\:bg-default:hover {
-  background-color: var(--grey-200);
+  background-color: var(--grey-light);
 }
 .hover\:bg-inverse:hover {
   background-color: var(--white);
@@ -7448,7 +7448,7 @@ input[type="range"]::-webkit-slider-thumb {
   background-color: var(--transparent);
 }
 .hover\:text-default:hover {
-  color: var(--black);
+  color: var(--brand-black);
 }
 .hover\:text-lighter:hover {
   color: var(--grey-600);
@@ -7477,7 +7477,7 @@ input[type="range"]::-webkit-slider-thumb {
   border-radius: 4px;
 }
 .focus-visible\:text-default:focus-visible {
-  color: var(--black);
+  color: var(--brand-black);
 }
 .focus-visible\:outline-none:focus-visible {
   outline: 2px solid transparent;
@@ -7560,10 +7560,10 @@ input[type="range"]::-webkit-slider-thumb {
   border-color: var(--transparent) !important;
 }
 .after\:border-accent::after {
-  border-color: var(--green-500);
+  border-color: var(--brand-green);
 }
 .after\:border-softest::after {
-  border-color: rgba(0, 0, 0, .05 );
+  border-color: var(--grey-light);
 }
 .after\:opacity-0::after {
   opacity: 0;
@@ -7610,10 +7610,10 @@ input[type="range"]::-webkit-slider-thumb {
   border-width: 2px;
 }
 .before\:border-softest::before {
-  border-color: rgba(0, 0, 0, .05 );
+  border-color: var(--grey-light);
 }
 .before\:bg-default::before {
-  background-color: var(--grey-200);
+  background-color: var(--grey-light);
 }
 .before\:bg-inverse-softer::before {
   background-color: rgba(255, 255, 255, .15);

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

@@ -51,6 +51,25 @@ export class EdsInputField {
                 this.edschange.emit({ value });
             }
         };
+        this.handleFileChange = (ev) => {
+            var _a;
+            // Forward file change event to standard edschange event
+            // Convert File[] to a format that forms can handle
+            const files = ev.detail.files;
+            // Create a new CustomEvent with the correct structure that handleChange expects
+            // handleChange expects e.detail.value, not e.detail.files
+            const valueEvent = new CustomEvent('edschange', {
+                detail: { value: files },
+                bubbles: true
+            });
+            // Call the native callback prop so forms can handle the change
+            (_a = this.onChangeNative) === null || _a === void 0 ? void 0 : _a.call(this, valueEvent);
+            if (this.shouldEmitValue()) {
+                // Emit the files array - forms will handle File objects
+                this.edschange.emit({ value: files });
+                this.edsinput.emit({ value: files });
+            }
+        };
         this.name = undefined;
         this.inputId = undefined;
         this.placeholder = undefined;
@@ -96,7 +115,7 @@ export class EdsInputField {
     }
     render() {
         const inputOpts = Object.assign({ name: this.name, id: this.inputId, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleNativeInput, onChange: this.handleNativeChange, type: this.type, required: this.required, value: this.value, error: this.error, icon: this.icon, checked: this.checked }, (this.type === 'number' ? { min: this.min, max: this.max, step: this.step } : {}));
-        return (h("div", { key: 'aca76f43840c0e8344d548610bc832cd75ff7bd9' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4" }, 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, { value: option.value, checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value)) })), h("label", { htmlFor: this.name, 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, { 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, 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("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChangeNative, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
+        return (h("div", { key: '1568054341b82bcaa01ffe4a48092d5f25a639ed' }, 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, { value: option.value, checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value)) })), h("label", { htmlFor: this.name, 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, { 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 === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
             var _a, _b, _c;
             const rangeProps = {
                 name: inputOpts.name,
@@ -107,9 +126,9 @@ export class EdsInputField {
                 onChange: inputOpts.onChange
             };
             const opt = this.parsedOptions;
-            const numberValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value || 0;
+            const numberValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value;
             return (h("eds-input-range", Object.assign({}, rangeProps, { min: (_a = opt[0]) === null || _a === void 0 ? void 0 : _a.value, max: (_b = opt[1]) === null || _b === void 0 ? void 0 : _b.value, step: (_c = opt[2]) === null || _c === void 0 ? void 0 : _c.value, value: numberValue })));
-        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("div", { key: '27dc5705b9627fb597b04837b488326371fac2e2', class: "mt-6" }, h("eds-input-footer", { key: '6e73fb80b91de81ee22cb33b7589916b7eb882fe', 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: '5df838f8bf73bc9e0dfa0792f76ad1b958f3d1fc', class: "mt-6" }, h("eds-input-footer", { key: 'daf5d0fd8d9cca3241e760b740a47e2663c3e665', 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"; }
@@ -251,9 +270,15 @@ export class EdsInputField {
                 "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,