@eunomia/elements 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/components/form/checkbox/check-card.styles.js

@@ -50,7 +50,7 @@ const base = css `
     --_padding: var(--check-card-padding, var(--eun-space-m, 16px));
     --_borderRadius: var(
       --check-card-border-radius,
-      var(--eun-borderRadius-m, 10px)
+      var(--eun-border-radius-m, 10px)
     );
     --_indicatorBackground: transparent;
     --_indicatorBorder: var(--_borderColor);
@@ -134,7 +134,7 @@ const base = css `
     align-items: center;
     justify-content: center;
     border: 1px solid var(--_indicatorBorder);
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     background: var(--_indicatorBackground);
     color: var(--_indicatorIcon);
     transition: all 0.15s ease;

package/dist/components/form/checkbox/checkbox-list.d.ts

@@ -4,7 +4,7 @@ import type { EunomiaCheckbox } from "./checkbox.js";
  * Tag name of the checkbox list component.
  */
 export declare const EunomiaCheckboxListTagName = "eun-checkbox-list";
-declare const EunomiaCheckboxList_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/form-label.mixin.js").FormLabelMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/readonly.mixin.js").ReadonlyMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/form.mixin.js").FormMixinInterface<string[]>> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/disabled.mixin.js").DisabledMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/validators.mixin.js").ValidatorsMixinInterface> & typeof LitElement;
+declare const EunomiaCheckboxList_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/form-label.mixin.js").FormLabelMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/readonly.mixin.js").ReadonlyMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/form.mixin.js").FormMixinInterface<string[]>> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/disabled.mixin.js").DisabledMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/validators.mixin.js").ValidatorsMixinInterface<string[]>> & typeof LitElement;
 /**
  * Groups checkbox children into a select some of many list, wrapped so
  * the group has a single accessible name and reads as one unit to

package/dist/components/form/checkbox/checkbox-list.js

@@ -219,7 +219,7 @@ let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(Reado
      */
     sendChangeEvent() {
         this.checkValidity(this.value);
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * Handler called when slot content changes.

package/dist/components/form/checkbox/checkbox.d.ts

@@ -13,7 +13,7 @@ export declare const EunomiaCheckboxTagName = "eun-checkbox";
  * Type of the checkbox base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaCheckboxBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string> & CheckMixinInterface;
+type EunomiaCheckboxBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<boolean> & FormMixinInterface<string> & CheckMixinInterface;
 /**
  * Base class with composed mixins used to handle component extends elements type
  * @internal

package/dist/components/form/checkbox/checkbox.styles.js

@@ -25,7 +25,7 @@ const base = css `
     );
     --_boxBackground: var(
       --checkbox-background,
-      var(--eun-color-grey-200, #ecedf0)
+      var(--eun-surface-sunken, #ecedf0)
     );
     --_errorColor: var(
       --checkbox-error-color,
@@ -42,7 +42,7 @@ const base = css `
     );
     --_icon: transparent;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     display: inline-flex;
     align-items: center;
     outline: none;
@@ -74,7 +74,7 @@ const base = css `
     );
     --_boxBackground: var(
       --checkbox-background-hover,
-      var(--eun-content-hover, #edeff0)
+      var(--eun-surface-sunken-hover, #edeff0)
     );
   }
   :host(
@@ -89,7 +89,7 @@ const base = css `
     );
     --_boxBackground: var(
       --checkbox-background-pressed,
-      var(--eun-content-pressed, #e4e6e8)
+      var(--eun-surface-sunken-pressed, #e4e6e8)
     );
   }
 
@@ -158,10 +158,10 @@ const base = css `
     height: var(--_boxSize);
     width: var(--_boxSize);
     background: var(--_boxBackground);
-    border: var(--eun-borderWidth-s, 1px) solid var(--_boxBorder);
+    border: var(--eun-border-width-s, 1px) solid var(--_boxBorder);
     border-radius: var(
       --checkbox-border-radius,
-      var(--eun-borderRadius-s, 5px)
+      var(--eun-border-radius-s, 5px)
     );
     display: inline-flex;
     align-items: center;

package/dist/components/form/color-picker/color-picker.d.ts

@@ -17,7 +17,7 @@ export declare const EunomiaColorPickerTagName = "eun-color-picker";
  * interface elements.
  * @internal
  */
-type EunomiaColorPickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface;
+type EunomiaColorPickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface;
 declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
 /**
  * A field for picking a color, as a `#rrggbb` hex string. Declare preset

package/dist/components/form/color-picker/color-picker.js

@@ -555,7 +555,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
     handleSelect(value) {
         this.value = value;
         this.hexDraft = value;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
         this.closeListbox();
     }
     /**
@@ -775,7 +775,9 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
           type="text"
           id="hex-input"
           aria-label=${this.hexInputLabel}
-          aria-invalid=${this.hexDraftInvalid ? "true" : "false"}
+          aria-invalid=${!this.hideError &&
+            !this.disabled &&
+            this.hexDraftInvalid}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           .value=${live(this.hexDraft)}
@@ -849,9 +851,9 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
             aria-label=${this.label || this.hexInputLabel}
             aria-describedby=${hasDescription ? "description" : nothing}
             aria-required=${this.required ? "true" : "false"}
-            aria-invalid=${this.hexDraftInvalid || !this.valid
-            ? "true"
-            : "false"}
+            aria-invalid=${!this.hideError &&
+            !this.disabled &&
+            (this.hexDraftInvalid || !this.valid)}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
             .value=${live(this.hexDraft)}
@@ -913,7 +915,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
           aria-describedby=${hasDescription ? "description" : nothing}
           ?disabled=${this.disabled}
           aria-required=${this.required ? "true" : "false"}
-          aria-invalid=${this.valid ? "false" : "true"}
+          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
           @click=${this.handleFieldActivate}
           @keydown=${this.handleFieldKeydown}
         >
@@ -986,7 +988,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
             aria-label=${ifDefined(this.triggerAccessibleLabel)}
             aria-describedby=${hasDescription ? "description" : nothing}
             ?disabled=${this.disabled || this.readonly}
-            aria-invalid=${this.valid ? "false" : "true"}
+            aria-invalid=${!this.hideError && !this.disabled && !this.valid}
             .value=${live(this.value || "#000000")}
             @input=${this.handleNativeInput}
           />

package/dist/components/form/color-picker/color-picker.styles.js

@@ -44,7 +44,7 @@ const colorPicker = css `
   #field-arrow {
     flex: 0 0 auto;
     color: var(--_iconColor);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     transition: transform 0.15s ease;
   }
   #field-arrow.open {
@@ -55,8 +55,8 @@ const colorPicker = css `
     display: inline-block;
     width: var(--color-picker-swatch-size, 20px);
     height: var(--color-picker-swatch-size, 20px);
-    border-radius: var(--eun-borderRadius-xl, 999px);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-radius: var(--eun-border-radius-xl, 999px);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     background-color: var(--_swatchColor, transparent);
     outline: 2px solid transparent;
     transition:
@@ -81,8 +81,8 @@ const colorPicker = css `
   #swatches-label,
   #custom-label {
     display: block;
-    font-size: var(--eun-fontSize-xs, 12px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-xs, 12px);
+    font-weight: var(--eun-font-weight-l, 700);
     color: var(--_placeholderColor);
     text-transform: uppercase;
     margin: 0 0 var(--eun-space-xs, 4px);
@@ -106,7 +106,7 @@ const colorPicker = css `
   }
   .swatch-button[aria-checked="true"] .swatch {
     border-color: var(--eun-color-primary-500, #3d6fff);
-    border-width: calc(var(--eun-borderWidth-m, 1.5px) * 2);
+    border-width: calc(var(--eun-border-width-m, 1.5px) * 2);
   }
   .swatch-button:focus-visible .swatch {
     outline-color: var(--_focusIndicator);
@@ -147,7 +147,7 @@ const colorPicker = css `
     font: inherit;
     color: var(--_textColor);
     background-color: var(--_background);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     padding: var(--_padding);
     box-sizing: border-box;

package/dist/components/form/counter/counter.d.ts

@@ -14,7 +14,7 @@ export declare const EunomiaCounterTagName = "eun-counter";
  * Type of the counter base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaCounterBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<number> & FormLabelMixinInterface & FieldVariantMixinInterface;
+type EunomiaCounterBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<number> & FormMixinInterface<number> & FormLabelMixinInterface & FieldVariantMixinInterface;
 declare const EunomiaCounterMixinBase: Constructor<EunomiaCounterBase>;
 /**
  * A numeric field with increment and decrement buttons, built on a native

package/dist/components/form/counter/counter.js

@@ -213,7 +213,7 @@ let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
      */
     commitValue(next) {
         this.value = next;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * Increments or decrements the value by `step`, clamped to `min`/`max`.
@@ -246,7 +246,7 @@ let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
         const parsed = raw === "" ? undefined : Number(raw);
         this.value =
             parsed === undefined || Number.isNaN(parsed) ? undefined : parsed;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * Jumps to `min`/`max` on `Home`/`End`, the one bit of custom keyboard
@@ -313,7 +313,7 @@ let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
           max=${ifDefined(this.max)}
           step=${this.step}
           inputmode=${hasDecimalStep ? "decimal" : "numeric"}
-          aria-invalid=${this.valid ? "false" : "true"}
+          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
           aria-label=${ifDefined(this.label)}
           aria-describedby=${hasDescription ? "description" : nothing}
           @input=${this.handleInput}

package/dist/components/form/counter/counter.styles.js

@@ -39,11 +39,11 @@ const base = css `
     );
     --_borderRadius: var(
       --counter-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
     --_fieldWidth: var(--counter-field-width, 3.5rem);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     display: block;
     width: fit-content;
     max-width: 100%;
@@ -61,7 +61,7 @@ const base = css `
     display: inline-flex;
     align-items: stretch;
     background-color: var(--_background);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     outline: 1px solid transparent;
     box-sizing: border-box;
@@ -122,11 +122,11 @@ const base = css `
   }
 
   #decrement {
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    border-inline-end: var(--eun-border-width-s, 1px) solid var(--_borderColor);
   }
 
   #increment {
-    border-inline-start: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    border-inline-start: var(--eun-border-width-s, 1px) solid var(--_borderColor);
   }
 
   #decrement:hover:not(:disabled),
@@ -187,13 +187,13 @@ const base = css `
     border-color: transparent;
   }
   :host([variant="fill"]) #field-wrapper:has(#field[aria-invalid="true"]) {
-    box-shadow: inset 0 0 0 var(--eun-borderWidth-m, 1.5px) var(--_errorColor);
+    box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
   :host([variant="underline"]) #field-wrapper {
     border: none;
     outline: none;
     border-radius: 0;
-    border-bottom: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
   }
   :host([variant="underline"]) #field-wrapper:focus-within {
     outline: none;

package/dist/components/form/date-picker/date-picker-day-grid.styles.js

@@ -13,7 +13,7 @@ export const datePickerDayGridStyles = css `
   }
   #calendar-weekdays span {
     color: var(--date-picker-weekday-color, var(--eun-text-secondary, #484e61));
-    font-size: var(--eun-fontSize-xxs, 10px);
+    font-size: var(--eun-font-size-xxs, 10px);
     text-align: center;
     text-transform: uppercase;
   }
@@ -26,7 +26,7 @@ export const datePickerDayGridStyles = css `
     grid-template-columns: repeat(5, 1fr);
   }
   .grid-cell.cell-day {
-    --_cellRadius: var(--eun-borderRadius-full, 999px);
+    --_cellRadius: var(--eun-border-radius-full, 999px);
     aspect-ratio: 1;
     border-radius: var(--_cellRadius);
   }

package/dist/components/form/date-picker/date-picker-grid.styles.js

@@ -36,8 +36,8 @@ export const datePickerGridStyles = css `
     padding-inline: var(--eun-space-xs, 4px);
   }
   #grid-label {
-    font-size: var(--eun-fontSize-s, 14px);
-    font-weight: var(--eun-fontWeight-l);
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: var(--eun-font-weight-l);
     text-transform: capitalize;
   }
   button#grid-label.grid-label-button {
@@ -46,7 +46,7 @@ export const datePickerGridStyles = css `
     color: inherit;
     font: inherit;
     padding: var(--eun-space-xxs, 1.6px) var(--eun-space-xs, 4px);
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     cursor: pointer;
   }
   button#grid-label.grid-label-button:hover {
@@ -68,7 +68,7 @@ export const datePickerGridStyles = css `
     width: 28px;
     height: 28px;
     border: none;
-    border-radius: var(--eun-borderRadius-full, 999px);
+    border-radius: var(--eun-border-radius-full, 999px);
     background: none;
     color: var(--eun-text-color, #071621);
     cursor: pointer;
@@ -105,7 +105,7 @@ export const datePickerGridStyles = css `
     background: none;
     color: var(--eun-text-color, #071621);
     font: inherit;
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
     cursor: pointer;
   }
   .grid-cell:hover:not(:disabled):not(.selected) {
@@ -121,8 +121,8 @@ export const datePickerGridStyles = css `
     );
   }
   .grid-cell.today {
-    font-weight: var(--eun-fontWeight-m);
-    box-shadow: inset 0 0 0 var(--eun-borderWidth-m, 1.5px)
+    font-weight: var(--eun-font-weight-m);
+    box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px)
       var(--date-picker-today-color, var(--eun-color-primary-500, #3d6fff));
   }
   .grid-cell:disabled {
@@ -159,21 +159,21 @@ export const datePickerGridStyles = css `
   .grid-cell.in-range.range-start::before {
     border-start-start-radius: var(
       --_cellRadius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     border-end-start-radius: var(
       --_cellRadius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
   }
   .grid-cell.in-range.range-end::before {
     border-start-end-radius: var(
       --_cellRadius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
     border-end-end-radius: var(
       --_cellRadius,
-      var(--eun-borderRadius-full, 999px)
+      var(--eun-border-radius-full, 999px)
     );
   }
   .cell-label {
@@ -184,7 +184,7 @@ export const datePickerGridStyles = css `
     display: flex;
     justify-content: center;
     padding-block-start: var(--eun-space-xs, 4px);
-    border-top: var(--eun-borderWidth-s, 1px) solid
+    border-top: var(--eun-border-width-s, 1px) solid
       var(--_borderColor, var(--eun-color-grey-300, #dee0e7));
   }
   #today-button {
@@ -196,8 +196,8 @@ export const datePickerGridStyles = css `
       var(--eun-color-primary-500, #3d6fff)
     );
     font: inherit;
-    font-size: var(--eun-fontSize-s, 14px);
-    font-weight: var(--eun-fontWeight-m);
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: var(--eun-font-weight-m);
     cursor: pointer;
   }
   #today-button:hover {
@@ -207,6 +207,6 @@ export const datePickerGridStyles = css `
     outline: 2px solid
       var(--_focusIndicator, var(--eun-color-primary-500, #3d6fff));
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
   }
 `;

package/dist/components/form/date-picker/date-picker-month-grid.styles.js

@@ -11,7 +11,7 @@ export const datePickerMonthGridStyles = css `
     grid-template-columns: repeat(3, 1fr);
   }
   .grid-cell.cell-month {
-    --_cellRadius: var(--eun-borderRadius-m, 8px);
+    --_cellRadius: var(--eun-border-radius-m, 8px);
     min-height: 40px;
     padding: var(--eun-space-xs, 4px);
     border-radius: var(--_cellRadius);

package/dist/components/form/date-picker/date-picker-year-grid.styles.js

@@ -11,7 +11,7 @@ export const datePickerYearGridStyles = css `
     grid-template-columns: repeat(3, 1fr);
   }
   .grid-cell.cell-year {
-    --_cellRadius: var(--eun-borderRadius-m, 8px);
+    --_cellRadius: var(--eun-border-radius-m, 8px);
     min-height: 40px;
     padding: var(--eun-space-xs, 4px);
     border-radius: var(--_cellRadius);

package/dist/components/form/date-picker/date-picker.d.ts

@@ -21,7 +21,7 @@ export declare const EunomiaDatePickerTagName = "eun-date-picker";
  * interface element.
  * @internal
  */
-type EunomiaDatePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
+type EunomiaDatePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
 /**
  * A date field entered across segmented numeric day, month, and year

package/dist/components/form/date-picker/date-picker.js

@@ -1225,7 +1225,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
                 end: dateToSegments(this.stagingRange.end),
             };
         }
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.mode === "single" ? this.value : this.rangeValue));
     }
     /**
      * Commits a directly-typed, complete value (bypassing staging entirely —
@@ -1250,7 +1250,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         else {
             this.rangeValue = { ...this.rangeValue, [target]: date };
         }
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(target === "value" ? this.value : this.rangeValue));
         if (this.isOpen || this.isModalOpen) {
             this.resetStaging();
         }
@@ -1301,7 +1301,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
      */
     commitTypedTime(hour24, minute) {
         this.value = setZonedTime(this.value ?? new Date(), this.timezone, hour24, minute);
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
         if (this.isOpen || this.isModalOpen) {
             this.resetStaging();
         }

package/dist/components/form/date-picker/date-picker.styles.js

@@ -34,7 +34,7 @@ const datePicker = css `
     width: 100%;
     color: var(--_textColor);
     background-color: var(--_background);
-    border: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
     padding: var(--eun-space-xs, 4px) var(--eun-space-xs, 4px)
       var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
@@ -75,12 +75,12 @@ const datePicker = css `
     border-color: transparent;
   }
   :host([variant="fill"][aria-invalid="true"]) #field-wrapper {
-    box-shadow: inset 0 0 0 var(--eun-borderWidth-m, 1.5px) var(--_errorColor);
+    box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
   :host([variant="underline"]) #field-wrapper {
     border: none;
     outline: none;
-    border-bottom: var(--eun-borderWidth-m, 1.5px) solid var(--_borderColor);
+    border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
   :host([variant="underline"]) #field-wrapper:focus-within {
@@ -134,7 +134,7 @@ const datePicker = css `
   }
   .time-segment-group {
     padding-inline-start: var(--eun-space-xs, 4px);
-    border-inline-start: var(--eun-borderWidth-s, 1px) solid
+    border-inline-start: var(--eun-border-width-s, 1px) solid
       var(--_borderColor, var(--eun-color-grey-300, #dee0e7));
   }
   .segment-divider,
@@ -148,7 +148,7 @@ const datePicker = css `
     justify-content: center;
     margin-inline-start: auto;
     border: none;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     background: none;
     padding: var(--eun-space-xxs, 1.6px);
     color: var(--_iconColor);
@@ -184,7 +184,7 @@ const datePicker = css `
     max-height: calc(100vh - 16px);
     overflow: auto;
     margin: 0;
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--_borderColor, var(--eun-color-grey-300, #dee0e7));
     border-radius: var(--_borderRadius);
     background: var(
@@ -213,11 +213,11 @@ const datePicker = css `
   #modal-date-preview {
     padding: var(--eun-space-m, 16px);
     margin-block-end: var(--eun-space-s, 8px);
-    border-bottom: var(--eun-borderWidth-s, 1px) solid
+    border-bottom: var(--eun-border-width-s, 1px) solid
       var(--_borderColor, var(--eun-color-grey-300, #dee0e7));
     color: var(--_textColor);
-    font-size: var(--eun-fontSize-l, 28px);
-    font-weight: var(--eun-fontWeight-l);
+    font-size: var(--eun-font-size-l, 28px);
+    font-weight: var(--eun-font-weight-l);
   }
   #modal-date {
     --modal-padding: 0;
@@ -266,21 +266,21 @@ const datePicker = css `
     padding: var(--eun-space-m);
   }
   #time-section {
-    border-top: var(--eun-borderWidth-s, 1px) solid
+    border-top: var(--eun-border-width-s, 1px) solid
       var(--_borderColor, var(--eun-color-grey-300, #dee0e7));
   }
   #timezone-label {
     margin: 0;
     padding-block-end: var(--eun-space-xs, 4px);
     color: var(--_hintColor);
-    font-size: var(--eun-fontSize-xs, 12px);
+    font-size: var(--eun-font-size-xs, 12px);
     text-align: center;
   }
   #popover-footer {
     display: flex;
     justify-content: flex-end;
     gap: var(--eun-space-s, 8px);
-    border-top: var(--eun-borderWidth-s, 1px) solid
+    border-top: var(--eun-border-width-s, 1px) solid
       var(--_borderColor, var(--eun-color-grey-300, #dee0e7));
     padding: var(--eun-space-m);
   }

package/dist/components/form/input/input.d.ts

@@ -20,7 +20,7 @@ export type EunomiaInputType = "text" | "email" | "number" | "tel" | "url" | "se
  * Type of the input base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaInputBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface;
+type EunomiaInputBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface;
 declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
 /**
  * A single-line text field, supporting several native input types.

package/dist/components/form/input/input.js

@@ -262,7 +262,7 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
      */
     handleInput(event) {
         this.value = event.target.value;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
     }
     /**
      * Clears the field value.
@@ -270,7 +270,7 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
      */
     handleClear() {
         this.value = "";
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
         this.fieldEl?.focus();
     }
     /**

package/dist/components/form/input-file/input-file.d.ts

@@ -18,7 +18,7 @@ export type EunomiaInputFileKind = "image" | "file";
  * Type of the input-file base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaInputFileBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface & FormMixinInterface<File[]> & FormLabelMixinInterface;
+type EunomiaInputFileBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<File[]> & FormMixinInterface<File[]> & FormLabelMixinInterface;
 declare const EunomiaInputFileMixinBase: Constructor<EunomiaInputFileBase>;
 /**
  * A file upload field with a dropzone, showing image thumbnails or generic

package/dist/components/form/input-file/input-file.js

@@ -413,7 +413,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
         }
         if (accepted.length) {
             this.value = nextValue;
-            this.dispatchEvent(new ChangeEvent());
+            this.dispatchEvent(new ChangeEvent(this.value));
         }
         if (rejected.length) {
             this.dispatchEvent(new FileRejectEvent(rejected));
@@ -445,7 +445,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
         }
         const next = current.filter((candidate) => candidate !== file);
         this.value = next;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
         this.updateComplete.then(() => {
             if (!next.length) {
                 this.firstFocusable()?.focus();
@@ -462,7 +462,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
     removeAll() {
         this.selected = new Set();
         this.value = [];
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
         this.updateComplete.then(() => this.firstFocusable()?.focus());
     }
     /**
@@ -474,7 +474,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
         const next = current.filter((file) => !this.selected.has(file));
         this.selected = new Set();
         this.value = next;
-        this.dispatchEvent(new ChangeEvent());
+        this.dispatchEvent(new ChangeEvent(this.value));
         this.updateComplete.then(() => this.firstFocusable()?.focus());
     }
     toggleSelected(file, checked) {
@@ -594,7 +594,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
           ?multiple=${this.multiple}
           ?disabled=${disabled}
           aria-label=${ifDefined(this.label)}
-          aria-invalid=${this.valid ? "false" : "true"}
+          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
           aria-describedby=${hasDescription ? "description" : nothing}
           @change=${this.handleNativeChange}
         />