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

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

@@ -11,15 +11,16 @@ import { classMap } from "lit/directives/class-map.js";
 import { DisabledMixin, } from "../../../mixins/disabled.mixin.js";
 import { ReadonlyMixin, } from "../../../mixins/readonly.mixin.js";
 import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
-import { FormMixin } from "../../../mixins/form.mixin.js";
+import { FormMixin, hasErrorDisplayChange, } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
-import { FieldVariantMixin, } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
 import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { addDays, addMonths, addYears, formatDateRange, isSameMonth, isSameYear, isWeekend, startOfDay, startOfMonth, startOfWeek, } from "../../../utils/date.utils.js";
 import { dateToSegments, getSegmentOrder, isSegmentGroupComplete, segmentKindsForGranularity, segmentsToDate, } from "../../../utils/date-segments.utils.js";
 import { checkTimeOfDayBounds, clockSegmentKinds, clockSegmentsToTime, getClockSegmentOrder, isClockSegmentGroupComplete, parseTimeOfDay, resolveHourFormat, timeToClockSegments, to12Hour, to24Hour, togglePeriod, } from "../../../utils/clock.utils.js";
+import { mediaBelow } from "../../../breakpoints.js";
 import { getRuntimeTimeZone, getTimeZoneOffsetLabel, getZonedParts, isSameTimeZone, setZonedTime, zonedTimeToUtc, } from "../../../utils/timezone.utils.js";
 import { renderTimePickerColumns } from "../time-picker/time-picker-columns.js";
 import { timePickerColumnsStyles } from "../time-picker/time-picker-columns.styles.js";
@@ -33,6 +34,7 @@ import { isWebKit } from "../../../utils/browser.utils.js";
 import { isDisabledDay, renderDatePickerDayGrid, } from "./date-picker-day-grid.js";
 import { isDisabledMonth, renderDatePickerMonthGrid, } from "./date-picker-month-grid.js";
 import { getYearPageStart, isDisabledYear, renderDatePickerYearGrid, } from "./date-picker-year-grid.js";
+import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
 /**
  * Tag name of the date-picker component.
  */
@@ -55,7 +57,7 @@ const SEGMENT_SPIN_BOUNDS = {
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldVariantMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
+const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
 /**
  * A date field entered across segmented numeric day, month, and year
  * inputs, following the same accessible pattern used by several
@@ -77,7 +79,7 @@ const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldVar
  * normalized to January first of the selected year. The range mode
  * composes with all three.
  *
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {'single' | 'range'} [mode='single'] - Whether a single value or a start and end range is picked
  * @prop {'day' | 'month' | 'year'} [granularity='day'] - How precise the picked value is. Controls both the number of segments rendered and which calendar surface opens
  * @prop {Date | null} value - The picked value, in single mode. Normalized to the first of the month or January first of the year outside day granularity
@@ -96,7 +98,8 @@ const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldVar
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether the field is required
- * @prop {boolean} [hideError=false] - Whether the errors are hidden
+ * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<Validators<Date | null>>} validators - The list of custom validation rules applied to the value
  * @prop {string} [todayLabel='Today'] - The label of the day grid's jump to today shortcut. Only shown with day granularity
  * @prop {string} [applyLabel='Apply'] - The label of the mobile modal's confirm button
@@ -139,6 +142,9 @@ const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldVar
  * @cssprop [--date-picker-range-background] - Sets a background tint for every cell in a picked range, start, end, and in between alike, in range mode, one uniform color across the whole span
  * @cssprop [--date-picker-panel-background] - Sets the background color of the popover panel
  * @cssprop [--date-picker-panel-transition-duration=200ms] - Sets the duration of the popover panel's open and close transition, disabled entirely by the no-animation attribute or reduced motion settings
+ * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-label-font-size] - Sets the font size of the label
+ * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-date-picker
  */
 let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
@@ -372,7 +378,10 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
                 : [this.rangeSegments.start, this.rangeSegments.end];
             const hasBadInput = groups.some((group) => isPartiallyFilled(group) && !segmentsToDate(group, kinds));
             if (hasBadInput) {
-                return { validity: { badInput: true }, message: "Enter a valid date" };
+                return {
+                    validity: { badInput: true },
+                    message: this.dictionary.validation.invalidDate,
+                };
             }
             if (this.isWithTimeActive()) {
                 const format = this.resolvedHourFormat();
@@ -419,7 +428,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
             let message;
             if (this.required && isEmpty) {
                 validity.valueMissing = true;
-                message = "Field value is missing";
+                message = this.dictionary.validation.valueMissing;
             }
             return { validity, message };
         };
@@ -447,7 +456,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
                 this.isModalOpen = true;
                 return;
             }
-            this.updateComplete.then(() => {
+            void this.updateComplete.then(() => {
                 const popover = this.popoverEl;
                 if (!popover) {
                     return;
@@ -485,7 +494,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
                     });
                 }
                 this.observeAnchorVisibility(this.fieldWrapperEl, () => this.closePopover());
-                this.updateComplete.then(() => this.focusCalendarCell());
+                void this.updateComplete.then(() => this.focusCalendarCell());
                 return;
             }
             this.isOpen = false;
@@ -1083,10 +1092,8 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
                 end: dateToSegments(this.rangeValue.end),
             };
         }
-        if (changed.has("valid") ||
-            changed.has("hideError") ||
-            changed.has("disabled")) {
-            this.setAttribute("aria-invalid", String(!this.hideError && !this.disabled && !this.valid));
+        if (hasErrorDisplayChange(changed)) {
+            this.setAttribute("aria-invalid", String(this.showError));
         }
     }
     /**
@@ -1111,7 +1118,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
      * @private
      */
     isMobileViewport() {
-        return window.matchMedia("(max-width: 767px)").matches;
+        return window.matchMedia(mediaBelow("tablet")).matches;
     }
     /**
      * @private
@@ -1328,7 +1335,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
      * The popover's open/close animation duration, in ms : `0` if
      * `noAnimation` is set or the browser reports `prefers-reduced-motion:
      * reduce`, otherwise `--date-picker-panel-transition-duration` (default
-     * `200ms`).
+     * `--eun-duration-m`).
      *
      * @param el the popover to read `--date-picker-panel-transition-duration` off.
      * @private
@@ -1338,18 +1345,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
             window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
             return 0;
         }
-        const raw = getComputedStyle(el)
-            .getPropertyValue("--date-picker-panel-transition-duration")
-            .trim();
-        if (raw) {
-            const parsed = raw.endsWith("ms")
-                ? Number.parseFloat(raw)
-                : Number.parseFloat(raw) * 1000;
-            if (Number.isFinite(parsed) && parsed >= 0) {
-                return parsed;
-            }
-        }
-        return 200;
+        return resolveDurationMs(el, "--date-picker-panel-transition-duration", "m", 200);
     }
     /**
      * Plays the fade/scaleY-in, replacing any {@link popoverAnimation}
@@ -1367,7 +1363,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         this.popoverAnimation = popover.animate([
             { opacity: 0, transform: "scaleY(0.01)" },
             { opacity: 1, transform: "scaleY(1)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(popover), fill: "forwards" });
     }
     /**
      * Closes the popover, if open — accepting an instant, unanimated close
@@ -1405,7 +1401,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         const animation = popover.animate([
             { opacity: 1, transform: "scaleY(1)" },
             { opacity: 0, transform: "scaleY(0.01)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(popover), fill: "forwards" });
         this.popoverAnimation = animation;
         animation.finished
             .then(() => {
@@ -1477,7 +1473,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         }
         this.focusedDate = candidate;
         this.syncDisplayedAnchor();
-        this.updateComplete.then(() => this.focusCalendarCell());
+        void this.updateComplete.then(() => this.focusCalendarCell());
     }
     /**
      * Jumps `focusedDate` directly to `date` (no disabled-cell skipping —
@@ -1490,7 +1486,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
     jumpFocused(date) {
         this.focusedDate = date;
         this.syncDisplayedAnchor();
-        this.updateComplete.then(() => this.focusCalendarCell());
+        void this.updateComplete.then(() => this.focusCalendarCell());
     }
     /**
      * @private
@@ -1607,7 +1603,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
      * @private
      */
     playSwipeAnimation(direction) {
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             const el = this.swipeAreaEl;
             if (!el) {
                 return;
@@ -1868,21 +1864,14 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
      */
     adjustTimeSegment(kind, delta) {
         const format = this.resolvedHourFormat();
-        const bounds = kind === "hour"
-            ? format === 12
-                ? { min: 1, max: 12 }
-                : { min: 0, max: 23 }
-            : { min: 0, max: 59 };
+        const hourBounds = format === 12 ? { min: 1, max: 12 } : { min: 0, max: 23 };
+        const bounds = kind === "hour" ? hourBounds : { min: 0, max: 59 };
         const current = Number(this.timeSegments[kind]);
         let next;
         if (this.timeSegments[kind] === "" || Number.isNaN(current)) {
             const parts = getZonedParts(this.value ?? new Date(), this.timezone);
-            next =
-                kind === "hour"
-                    ? format === 12
-                        ? to12Hour(parts.hour).hour
-                        : parts.hour
-                    : parts.minute;
+            const hour = format === 12 ? to12Hour(parts.hour).hour : parts.hour;
+            next = kind === "hour" ? hour : parts.minute;
         }
         else {
             next = current + delta;
@@ -1972,11 +1961,12 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
             const previous = order[index - 1];
             const isHourMinutePair = (previous === "hour" && kind === "minute") ||
                 (previous === "minute" && kind === "hour");
+            const divider = isHourMinutePair ? ":" : " ";
             return html `
             ${index === 0
                 ? nothing
                 : html `<span class="segment-divider" aria-hidden="true"
-                  >${isHourMinutePair ? ":" : " "}</span
+                  >${divider}</span
                 >`}
             ${this.renderTimeSegment(kind)}
           `;
@@ -2371,7 +2361,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
      * @private
      */
     renderTimezoneLabel() {
-        if (!this.timezone || isSameTimeZone(this.timezone, undefined)) {
+        if (!this.timezone || isSameTimeZone(this.timezone)) {
             return nothing;
         }
         const reference = this.stagingValue ?? new Date();

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

@@ -41,8 +41,8 @@ const datePicker = css `
     outline: 1px solid transparent;
     box-sizing: border-box;
     transition:
-      border-color 0.15s ease,
-      outline-color 0.15s ease;
+      border-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease),
+      outline-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
   }
   :host(:not([aria-readonly="true"]))
     #field-wrapper:hover:not(:has(:disabled)) {
@@ -68,22 +68,22 @@ const datePicker = css `
   :host([aria-invalid="true"]) #field-wrapper:focus-within {
     outline-color: var(--_errorColor);
   }
-  :host([variant="fill"]) {
+  :host([appearance="flat"]) {
     --_background: var(--field-background, var(--eun-content-hover, #edeff0));
   }
-  :host([variant="fill"]) #field-wrapper {
+  :host([appearance="flat"]) #field-wrapper {
     border-color: transparent;
   }
-  :host([variant="fill"][aria-invalid="true"]) #field-wrapper {
+  :host([appearance="flat"][aria-invalid="true"]) #field-wrapper {
     box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
-  :host([variant="underline"]) #field-wrapper {
+  :host([appearance="underline"]) #field-wrapper {
     border: none;
     outline: none;
     border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
-  :host([variant="underline"]) #field-wrapper:focus-within {
+  :host([appearance="underline"]) #field-wrapper:focus-within {
     outline: none;
   }
   .segment-group {
@@ -154,7 +154,8 @@ const datePicker = css `
     color: var(--_iconColor);
     outline: 2px solid transparent;
     cursor: pointer;
-    transition: outline 0.2s ease-out;
+    transition: outline var(--eun-duration-m, 200ms)
+      var(--eun-easing-out, ease-out);
   }
   #calendar-trigger:hover:not(:disabled) {
     color: var(--_textColor);
@@ -247,10 +248,12 @@ const datePicker = css `
     }
   }
   #calendar-swipe-area.slide-in-next {
-    animation: eun-date-picker-slide-in-next 180ms ease-out;
+    animation: eun-date-picker-slide-in-next var(--eun-duration-m, 200ms)
+      var(--eun-easing-out, ease-out);
   }
   #calendar-swipe-area.slide-in-previous {
-    animation: eun-date-picker-slide-in-previous 180ms ease-out;
+    animation: eun-date-picker-slide-in-previous var(--eun-duration-m, 200ms)
+      var(--eun-easing-out, ease-out);
   }
   :host([no-animation]) #calendar-swipe-area.slide-in-next,
   :host([no-animation]) #calendar-swipe-area.slide-in-previous {

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

@@ -5,7 +5,7 @@ import { ValidatorsMixinInterface, Validity } from "../../../mixins/validators.m
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { EditableMixinInterface } from "../../../mixins/editable.mixin.js";
-import { FieldVariantMixinInterface } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { EunomiaIconName } from "../../content/icon/icon.type.js";
 import { Constructor } from "../../../utils/constructor.type.js";
 /**
@@ -20,14 +20,14 @@ 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<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface;
+type EunomiaInputBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface;
 declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
 /**
  * A single-line text field, supporting several native input types.
  *
  * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty
  * @prop {'text' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'password'} [type='text'] - The native input type to apply
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} placeholder - The placeholder shown when the field is empty
@@ -37,7 +37,8 @@ declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether the field is required
- * @prop {boolean} [hideError=false] - Whether the errors are hidden
+ * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<Validators<string>>} validators - The list of validation rules applied to the field value
  * @prop {EunomiaIconName} icon - An optional leading icon
  * @prop {boolean} [clearable=false] - Whether a clear button is shown when the field has a value
@@ -64,6 +65,8 @@ declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
  * @cssprop [--field-border-color-focus] - Sets the border color on focus
  * @cssprop [--field-border-radius] - Sets the corner radius of the field
  * @cssprop [--field-padding] - Sets the padding of the field
+ * @cssprop [--field-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --field-padding is set
+ * @cssprop [--field-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --field-padding is set
  * @cssprop [--field-text-color] - Sets the text color of the field
  * @cssprop [--field-placeholder-color] - Sets the color of the placeholder
  * @cssprop [--field-icon-color] - Sets the color of the leading icon and action buttons
@@ -72,6 +75,9 @@ declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
  * @cssprop [--field-focus-outline-color] - Sets the color of the focus outline
  * @cssprop [--field-edit-confirm-color] - Sets the color of the confirm button in readonly-available edit mode
  * @cssprop [--field-edit-cancel-color] - Sets the color of the cancel button in readonly-available edit mode
+ * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-label-font-size] - Sets the font size of the label
+ * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-input
  */
 export declare class EunomiaInput extends EunomiaInputMixinBase {

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

@@ -15,7 +15,7 @@ import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
 import { FormMixin } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { EditableMixin, } from "../../../mixins/editable.mixin.js";
-import { FieldVariantMixin, } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { inputStyles } from "./input.styles.js";
@@ -29,13 +29,13 @@ export const EunomiaInputTagName = "eun-input";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaInputMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))));
+const EunomiaInputMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))));
 /**
  * A single-line text field, supporting several native input types.
  *
  * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty
  * @prop {'text' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'password'} [type='text'] - The native input type to apply
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} placeholder - The placeholder shown when the field is empty
@@ -45,7 +45,8 @@ const EunomiaInputMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(Edi
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether the field is required
- * @prop {boolean} [hideError=false] - Whether the errors are hidden
+ * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<Validators<string>>} validators - The list of validation rules applied to the field value
  * @prop {EunomiaIconName} icon - An optional leading icon
  * @prop {boolean} [clearable=false] - Whether a clear button is shown when the field has a value
@@ -72,6 +73,8 @@ const EunomiaInputMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(Edi
  * @cssprop [--field-border-color-focus] - Sets the border color on focus
  * @cssprop [--field-border-radius] - Sets the corner radius of the field
  * @cssprop [--field-padding] - Sets the padding of the field
+ * @cssprop [--field-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --field-padding is set
+ * @cssprop [--field-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --field-padding is set
  * @cssprop [--field-text-color] - Sets the text color of the field
  * @cssprop [--field-placeholder-color] - Sets the color of the placeholder
  * @cssprop [--field-icon-color] - Sets the color of the leading icon and action buttons
@@ -80,6 +83,9 @@ const EunomiaInputMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(Edi
  * @cssprop [--field-focus-outline-color] - Sets the color of the focus outline
  * @cssprop [--field-edit-confirm-color] - Sets the color of the confirm button in readonly-available edit mode
  * @cssprop [--field-edit-cancel-color] - Sets the color of the cancel button in readonly-available edit mode
+ * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-label-font-size] - Sets the font size of the label
+ * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-input
  */
 let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
@@ -381,7 +387,7 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
             : this.type === "email"
                 ? "email"
                 : nothing}
-          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+          aria-invalid=${this.showError}
           aria-label=${ifDefined(this.label)}
           aria-describedby=${hasDescription ? "description" : nothing}
           @input=${this.handleInput}
@@ -421,7 +427,7 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
             <eun-button
               class="confirm"
               size="s"
-              variant="primary"
+              color="primary"
               appearance="default"
               rounded
               type="button"

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

@@ -37,7 +37,8 @@ declare const EunomiaInputFileMixinBase: Constructor<EunomiaInputFileBase>;
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether at least one file is required
- * @prop {boolean} [hideError=false] - Whether the errors are hidden
+ * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<File[]>>} validators - The list of validation rules applied to the field value
  * @prop {string} [dropLabel='Drag and drop files here, or'] - Static text displayed in the dropzone
  * @attr {string} [drop-label='Drag and drop files here, or'] - Static text displayed in the dropzone
@@ -72,6 +73,8 @@ declare const EunomiaInputFileMixinBase: Constructor<EunomiaInputFileBase>;
  * @cssprop [--input-file-item-border-color] - Sets the border color of each item
  * @cssprop [--input-file-gap] - Sets the gap between the dropzone, header, and items
  * @cssprop [--input-file-thumbnail-size] - Sets the minimum size of image thumbnails
+ * @cssprop [--field-label-font-size] - Sets the font size of the label
+ * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-input-file
  */
 export declare class EunomiaInputFile extends EunomiaInputFileMixinBase {

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

@@ -44,7 +44,8 @@ const EunomiaInputFileMixinBase = FormLabelMixin(ReadonlyMixin(FormMixin(Base)))
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether at least one file is required
- * @prop {boolean} [hideError=false] - Whether the errors are hidden
+ * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<File[]>>} validators - The list of validation rules applied to the field value
  * @prop {string} [dropLabel='Drag and drop files here, or'] - Static text displayed in the dropzone
  * @attr {string} [drop-label='Drag and drop files here, or'] - Static text displayed in the dropzone
@@ -79,6 +80,8 @@ const EunomiaInputFileMixinBase = FormLabelMixin(ReadonlyMixin(FormMixin(Base)))
  * @cssprop [--input-file-item-border-color] - Sets the border color of each item
  * @cssprop [--input-file-gap] - Sets the gap between the dropzone, header, and items
  * @cssprop [--input-file-thumbnail-size] - Sets the minimum size of image thumbnails
+ * @cssprop [--field-label-font-size] - Sets the font size of the label
+ * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-input-file
  */
 let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase {
@@ -446,7 +449,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
         const next = current.filter((candidate) => candidate !== file);
         this.value = next;
         this.dispatchEvent(new ChangeEvent(this.value));
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             if (!next.length) {
                 this.firstFocusable()?.focus();
                 return;
@@ -463,7 +466,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
         this.selected = new Set();
         this.value = [];
         this.dispatchEvent(new ChangeEvent(this.value));
-        this.updateComplete.then(() => this.firstFocusable()?.focus());
+        void this.updateComplete.then(() => this.firstFocusable()?.focus());
     }
     /**
      * Removes every currently-selected file.
@@ -475,7 +478,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
         this.selected = new Set();
         this.value = next;
         this.dispatchEvent(new ChangeEvent(this.value));
-        this.updateComplete.then(() => this.firstFocusable()?.focus());
+        void this.updateComplete.then(() => this.firstFocusable()?.focus());
     }
     toggleSelected(file, checked) {
         const next = new Set(this.selected);
@@ -594,7 +597,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
           ?multiple=${this.multiple}
           ?disabled=${disabled}
           aria-label=${ifDefined(this.label)}
-          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+          aria-invalid=${this.showError}
           aria-describedby=${hasDescription ? "description" : nothing}
           @change=${this.handleNativeChange}
         />

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

@@ -99,8 +99,9 @@ const base = css `
     cursor: pointer;
     box-sizing: border-box;
     transition:
-      border-color 0.15s ease,
-      background-color 0.15s ease;
+      border-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease),
+      background-color var(--eun-duration-s, 150ms)
+        var(--eun-easing-default, ease);
   }
   #dropzone #drop-icon {
     --icon-color: var(--_iconColor);

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

@@ -4,7 +4,7 @@ import { ReadonlyMixinInterface } from "../../../mixins/readonly.mixin.js";
 import { ValidatorsMixinInterface } from "../../../mixins/validators.mixin.js";
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
-import { FieldVariantMixinInterface } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { AnchorPositionMixinInterface } from "../../../mixins/anchor-position.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
 /**
@@ -16,7 +16,7 @@ export declare const EunomiaInputPhoneTagName = "eun-input-phone";
  * interface element.
  * @internal
  */
-type EunomiaInputPhoneBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface;
+type EunomiaInputPhoneBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface;
 declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
 /**
  * A phone number field rendered in two adjacent parts: a compact country
@@ -38,7 +38,7 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * digits only.
  *
  * @slot [default] - An optional list of option elements restricting which countries appear in the dropdown, such as an option with value FR for France. When omitted, every built-in country is available
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} name - The field name
@@ -54,7 +54,8 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether the field is required
- * @prop {boolean} [hideError=false] - Whether the errors are hidden
+ * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<Validators<string>>} validators - The list of validation rules applied to the field value
  * @prop {string} [placeholder] - The placeholder shown when the field is empty. Defaults to a generic formatted digit pattern, not a real per-country example, when unset
  * @prop {string} [countrySearchPlaceholder='Search a country…'] - The placeholder of the search field inside the country dropdown
@@ -70,6 +71,8 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * @cssprop [--field-border-color-focus] - Sets the border color on focus
  * @cssprop [--field-border-radius] - Sets the corner radius of the field
  * @cssprop [--field-padding] - Sets the padding of the field
+ * @cssprop [--field-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --field-padding is set
+ * @cssprop [--field-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --field-padding is set
  * @cssprop [--field-text-color] - Sets the text color of the field
  * @cssprop [--field-placeholder-color] - Sets the color of the placeholder
  * @cssprop [--field-icon-color] - Sets the color of the country selector button
@@ -80,6 +83,9 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the dropdown panel's open and close height transition, disabled entirely under reduced motion settings
  * @cssprop [--eun-viewport-inset-top] - Reserves space, such as a page's sticky header height, that the dropdown panel keeps clear of at the top of the viewport. Set on the root or an ancestor rather than on the field itself
  * @cssprop [--eun-viewport-inset-bottom] - The same as eun-viewport-inset-top, reserved at the bottom of the viewport, such as for a sticky footer
+ * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-label-font-size] - Sets the font size of the label
+ * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-input-phone
  */
 export declare class EunomiaInputPhone extends EunomiaInputPhoneMixinBase {
@@ -290,7 +296,7 @@ export declare class EunomiaInputPhone extends EunomiaInputPhoneMixinBase {
     /**
      * The listbox's open/close animation duration, in ms : `0` under
      * `prefers-reduced-motion: reduce`, otherwise `--field-listbox-
-     * transition-duration` (default `200ms`) — same custom property
+     * transition-duration` (default `--eun-duration-m`) — same custom property
      * `eun-select`/`eun-search` share.
      *
      * @param el the listbox to read `--field-listbox-transition-duration` off.