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

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

@@ -63,7 +63,8 @@ declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
  * @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
@@ -106,6 +107,9 @@ declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
  * @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
  */
 export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
@@ -645,12 +649,12 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * handing control back to it.
      * @private
      */
-    private handleTriggerClick;
+    private readonly handleTriggerClick;
     /**
      * 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
@@ -675,7 +679,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * doc for the split.
      * @private
      */
-    private handlePopoverToggle;
+    private readonly handlePopoverToggle;
     /**
      * Closes the popover, if open — accepting an instant, unanimated close
      * for a native light-dismiss (an outside click, `Escape`) instead of
@@ -700,37 +704,37 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * Commits the staged selection and closes the modal.
      * @private
      */
-    private handleModalConfirm;
+    private readonly handleModalConfirm;
     /**
      * Discards the staged selection and closes the modal.
      * @private
      */
-    private handleModalCancel;
+    private readonly handleModalCancel;
     /**
      * Commits the staged selection and closes the desktop popover — the
      * `withTime` popover footer's counterpart to {@link handleModalConfirm}.
      * @private
      */
-    private handlePopoverApply;
+    private readonly handlePopoverApply;
     /**
      * Discards the staged selection and closes the desktop popover, without
      * committing — the `withTime` popover footer's counterpart to
      * {@link handleModalCancel}.
      * @private
      */
-    private handlePopoverCancel;
+    private readonly handlePopoverCancel;
     /**
      * @private
      */
-    private handleTimeHourChange;
+    private readonly handleTimeHourChange;
     /**
      * @private
      */
-    private handleTimeMinuteChange;
+    private readonly handleTimeMinuteChange;
     /**
      * @private
      */
-    private handleTimePeriodChange;
+    private readonly handleTimePeriodChange;
     /**
      * Focuses the roving-tabindex active cell (`tabindex="0"`) within
      * whichever calendar surface is currently open. `.grid-cell` is the
@@ -797,7 +801,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @param day the day the event originated from.
      * @private
      */
-    private handleDayKeydown;
+    private readonly handleDayKeydown;
     /**
      * Handles keyboard navigation within the month grid : arrow keys move by
      * month/row (3 columns), `Home`/`End` jump to January/December of the
@@ -814,7 +818,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * navigation there too.
      * @private
      */
-    private handleMonthKeydown;
+    private readonly handleMonthKeydown;
     /**
      * Handles keyboard navigation within the year grid : arrow keys move by
      * year/row (3 columns), `Home`/`End` jump to the first/last year of the
@@ -830,7 +834,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * drives navigation there too.
      * @private
      */
-    private handleYearKeydown;
+    private readonly handleYearKeydown;
     /**
      * Selects `cell` : updates the staged value/range, then — once the
      * selection is "complete" for the active mode — commits it. The
@@ -870,11 +874,11 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * {@link navLevel}.
      * @private
      */
-    private enterMonthNav;
+    private readonly enterMonthNav;
     /**
      * @private
      */
-    private enterYearNav;
+    private readonly enterYearNav;
     /**
      * Handles a month cell picked while the month grid is a quick-nav level
      * (`navLevel === "month"` with `granularity === "day"`, drilled up to
@@ -885,7 +889,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @param month the clicked/activated month cell.
      * @private
      */
-    private handleQuickNavMonthClick;
+    private readonly handleQuickNavMonthClick;
     /**
      * Handles a year cell picked while the year grid is a quick-nav level
      * (`navLevel === "year"` with `granularity` `"day"` or `"month"`, drilled
@@ -898,7 +902,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @param year the clicked/activated year cell.
      * @private
      */
-    private handleQuickNavYearClick;
+    private readonly handleQuickNavYearClick;
     /**
      * Tracks the pointer for the range-mode in-progress span preview. Shared
      * by all three grids : the callback signature (a nullable `Date`) is
@@ -907,14 +911,14 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @param cell the hovered cell, or `null` when the pointer leaves the grid.
      * @private
      */
-    private handleHover;
-    private handlePreviousMonth;
-    private handleNextMonth;
-    private handlePreviousYear;
-    private handleNextYear;
-    private handlePreviousYearsPage;
-    private handleNextYearsPage;
-    private handleToday;
+    private readonly handleHover;
+    private readonly handlePreviousMonth;
+    private readonly handleNextMonth;
+    private readonly handlePreviousYear;
+    private readonly handleNextYear;
+    private readonly handlePreviousYearsPage;
+    private readonly handleNextYearsPage;
+    private readonly handleToday;
     /**
      * Steps whichever grid `navLevel` currently shows one unit back/forward —
      * the same thing its own prev/next header buttons do, so a touch swipe
@@ -922,11 +926,11 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * that direction.
      * @private
      */
-    private navigateGridPrevious;
+    private readonly navigateGridPrevious;
     /**
      * @private
      */
-    private navigateGridNext;
+    private readonly navigateGridNext;
     /**
      * The pointer's position at the start of an in-progress touch swipe on
      * the mobile modal's calendar (see {@link handleSwipeStart}), or `null`
@@ -951,7 +955,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @param event the native pointer event.
      * @private
      */
-    private handleSwipeStart;
+    private readonly handleSwipeStart;
     /**
      * Ends a tracked swipe : a mostly-horizontal drag past
      * {@link SWIPE_THRESHOLD_PX} steps the grid backward/forward (see
@@ -962,13 +966,13 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @param event the native pointer event.
      * @private
      */
-    private handleSwipeEnd;
+    private readonly handleSwipeEnd;
     /**
      * Discards a tracked swipe if the gesture is interrupted (e.g. the
      * browser takes over for a system gesture) instead of completing it.
      * @private
      */
-    private handleSwipeCancel;
+    private readonly handleSwipeCancel;
     /**
      * Replays the CSS slide-in animation on {@link swipeAreaEl} once the grid
      * has re-rendered for the newly swiped-to period — `"next"` slides the
@@ -1117,7 +1121,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
     /**
      * @private
      */
-    private handlePeriodSegmentClick;
+    private readonly handlePeriodSegmentClick;
     /**
      * `ArrowUp`/`ArrowDown`/`Enter`/`Space` toggle the period ; `A`/`P` set it
      * directly ; `ArrowLeft`/`ArrowRight` move focus like the other time
@@ -1126,7 +1130,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @param event the native keyboard event.
      * @private
      */
-    private handlePeriodSegmentKeydown;
+    private readonly handlePeriodSegmentKeydown;
     /**
      * The time segment kinds rendered at the active hour format, in locale
      * order — the {@link timeSegments} counterpart to

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

@@ -11,7 +11,7 @@ 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 { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
 import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
@@ -20,6 +20,7 @@ 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.
  */
@@ -96,7 +98,8 @@ const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * @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(FieldApp
  * @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)) {
@@ -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

@@ -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

@@ -45,7 +45,8 @@ const EunomiaInputMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(
  * @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 = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(
  * @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 = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(
  * @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}

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);