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

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,8 @@ 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";
+import { isImplicitSubmissionKey, submitImplicitly, } from "../../../utils/implicit-submission.utils.js";
 /**
  * Tag name of the date-picker component.
  */
@@ -96,12 +99,14 @@ 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 {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
+ * @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
- * @prop {string} [cancelLabel='Cancel'] - The label of the mobile modal's cancel button
- * @prop {string} [ariaLabelCalendar='Open calendar'] - The accessible label of the trailing calendar button
+ * @prop {string} [cancelLabel] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [calendarLabel] - The accessible label of the trailing calendar button. Defaults to the localized string for the current locale (English: "Open calendar")
  * @prop {string} [dayPlaceholder='jj'] - The placeholder shown in the empty day segment
  * @prop {string} [monthPlaceholder='mm'] - The placeholder shown in the empty month segment
  * @prop {string} [yearPlaceholder='yyyy'] - The placeholder shown in the empty year segment
@@ -139,11 +144,43 @@ 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 {
+    /**
+     * The default value applied on connection and form reset, in `single`
+     * mode. Overrides the `defaultValue` accessor inherited from `FormMixin`
+     * only to swap its attribute converter : the mixin's generic one always
+     * splits `default-value` on commas (appropriate for e.g. a multi-select's
+     * array value), which would silently produce the wrong thing for a
+     * `Date`. The actual get/set logic (applying the default when the field
+     * resets) still comes from `FormMixin` itself, via `super`.
+     * @default-value-format yyyy-mm-dd
+     */
+    get defaultValue() {
+        return super.defaultValue;
+    }
+    set defaultValue(value) {
+        // @ts-expect-error — see comment above ; FormMixin's real setter exists.
+        super.defaultValue = value;
+    }
+    /**
+     * Lifecycle callback triggered when the component is connected to the
+     * DOM. `FormMixin`'s own `connectedCallback` already applies
+     * `defaultValue` to `value` for `mode="single"` ; this applies
+     * {@link defaultRangeValue} to `rangeValue` the same way for
+     * `mode="range"`, which `FormMixin` has no knowledge of.
+     */
     constructor() {
-        super(...arguments);
+        super();
+        /**
+         * Every change is a complete choice, so its error shows right away.
+         * @internal
+         */
+        this.errorOnChange = true;
         /**
          * Whether a single value or a start/end range is picked.
          * @default single
@@ -223,16 +260,6 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
          * @default Apply
          */
         this.applyLabel = "Apply";
-        /**
-         * Label of the mobile modal's cancel button.
-         * @default Cancel
-         */
-        this.cancelLabel = "Cancel";
-        /**
-         * Accessible label of the trailing calendar button.
-         * @default Open calendar
-         */
-        this.ariaLabelCalendar = "Open calendar";
         /**
          * Placeholder shown in the empty day segment.
          * @default jj
@@ -354,6 +381,25 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
             minute: "",
             period: "",
         };
+        /**
+         * Submits the owning form on Enter in one of the field's segments, as a
+         * native date input does, since the browser never does it from a
+         * shadow root. Left alone while the panel is open, and on keys a
+         * segment already handles, such as Enter toggling the AM/PM segment.
+         * @private
+         */
+        this.handleImplicitSubmission = (event) => {
+            const form = this.internals.form;
+            const origin = event.composedPath()[0];
+            if (!form ||
+                this.isOpen ||
+                !(origin instanceof Element && origin.matches(".segment")) ||
+                !isImplicitSubmissionKey(event)) {
+                return;
+            }
+            event.preventDefault();
+            submitImplicitly(form);
+        };
         /**
          * Reads local validation state : a partially/invalidly typed segment
          * group reports as invalid, matching native constraint validation's
@@ -372,7 +418,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 +468,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 +496,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 +534,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;
@@ -969,31 +1018,8 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
                     break;
             }
         };
+        this.addEventListener("keydown", this.handleImplicitSubmission);
     }
-    /**
-     * The default value applied on connection and form reset, in `single`
-     * mode. Overrides the `defaultValue` accessor inherited from `FormMixin`
-     * only to swap its attribute converter : the mixin's generic one always
-     * splits `default-value` on commas (appropriate for e.g. a multi-select's
-     * array value), which would silently produce the wrong thing for a
-     * `Date`. The actual get/set logic (applying the default when the field
-     * resets) still comes from `FormMixin` itself, via `super`.
-     * @default-value-format yyyy-mm-dd
-     */
-    get defaultValue() {
-        return super.defaultValue;
-    }
-    set defaultValue(value) {
-        // @ts-expect-error — see comment above ; FormMixin's real setter exists.
-        super.defaultValue = value;
-    }
-    /**
-     * Lifecycle callback triggered when the component is connected to the
-     * DOM. `FormMixin`'s own `connectedCallback` already applies
-     * `defaultValue` to `value` for `mode="single"` ; this applies
-     * {@link defaultRangeValue} to `rangeValue` the same way for
-     * `mode="range"`, which `FormMixin` has no knowledge of.
-     */
     connectedCallback() {
         super.connectedCallback?.();
         if (this.mode === "range" && this.defaultRangeValue) {
@@ -1083,12 +1109,18 @@ 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));
         }
     }
+    /**
+     * The host is never a tab stop of its own : sequential navigation goes
+     * straight to the controls inside, in both directions, and
+     * {@link focus} covers a direct call on the host.
+     */
+    get hostTabStop() {
+        return false;
+    }
     /**
      * Returns the first segment field to focus/anchor on validation errors.
      *
@@ -1111,7 +1143,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 +1360,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 +1370,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 +1388,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 +1426,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 +1498,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 +1511,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 +1628,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 +1889,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 +1986,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)}
           `;
@@ -2043,6 +2058,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         data-target=${target}
         role="group"
         aria-label=${groupLabel}
+        aria-describedby=${this.description?.length ? "description" : nothing}
       >
         ${order.map((kind, index) => html `
             ${index > 0
@@ -2083,7 +2099,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         maxlength=${maxLength}
         size=${maxLength}
         placeholder=${this.placeholderFor(kind)}
-        aria-label=${capitalize(kind)}
+        aria-label=${this.dictionary.datePicker[kind]}
         .value=${values[kind]}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -2242,15 +2258,16 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         ${this.mode === "single"
             ? this.renderSegmentGroup("value", this.label ?? this.headingFor())
             : html `
-              ${this.renderSegmentGroup("start", "Start date")}
+              ${this.renderSegmentGroup("start", this.dictionary.datePicker.startDate)}
               <span class="range-separator" aria-hidden="true">–</span>
-              ${this.renderSegmentGroup("end", "End date")}
+              ${this.renderSegmentGroup("end", this.dictionary.datePicker.endDate)}
             `}
         ${this.isWithTimeActive() ? this.renderTimeSegmentGroup() : nothing}
         <button
           type="button"
           id="calendar-trigger"
-          aria-label=${this.ariaLabelCalendar}
+          aria-label=${this.calendarLabel ??
+            this.dictionary.datePicker.openCalendar}
           aria-haspopup="dialog"
           aria-expanded=${this.isOpen || this.isModalOpen ? "true" : "false"}
           ?disabled=${this.disabled}
@@ -2371,7 +2388,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();
@@ -2399,7 +2416,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
           id="popover-cancel"
           @click=${this.handlePopoverCancel}
         >
-          ${this.cancelLabel}
+          ${this.cancelLabel ?? this.dictionary.common.cancel}
         </eun-button>
         <eun-button id="popover-apply" @click=${this.handlePopoverApply}>
           ${this.applyLabel}
@@ -2425,7 +2442,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         ?open=${this.isModalOpen}
         .closeable=${false}
         confirm-label=${this.applyLabel}
-        cancel-label=${this.cancelLabel}
+        cancel-label=${this.cancelLabel ?? this.dictionary.common.cancel}
         aria-label=${this.label ?? this.headingFor()}
         @eunconfirm=${this.handleModalConfirm}
         @euncancel=${this.handleModalCancel}
@@ -2451,7 +2468,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
             id="cancel"
             @click=${() => this.modalEl?.cancel()}
           >
-            ${this.cancelLabel}
+            ${this.cancelLabel ?? this.dictionary.common.cancel}
           </eun-button>
           <eun-button id="confirm" @click=${() => this.modalEl?.confirm()}>
             ${this.applyLabel}
@@ -2488,10 +2505,10 @@ EunomiaDatePicker.styles = [
  */
 EunomiaDatePicker.SWIPE_THRESHOLD_PX = 40;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDatePicker.prototype, "mode", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDatePicker.prototype, "granularity", void 0);
 __decorate([
     property({
@@ -2551,8 +2568,8 @@ __decorate([
     property({ attribute: "cancel-label" })
 ], EunomiaDatePicker.prototype, "cancelLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-calendar" })
-], EunomiaDatePicker.prototype, "ariaLabelCalendar", void 0);
+    property({ attribute: "calendar-label" })
+], EunomiaDatePicker.prototype, "calendarLabel", void 0);
 __decorate([
     property({ attribute: "day-placeholder" })
 ], EunomiaDatePicker.prototype, "dayPlaceholder", void 0);
@@ -2678,12 +2695,6 @@ function todaysSegmentPart(kind) {
             return today.getDate();
     }
 }
-/**
- * @private
- */
-function capitalize(value) {
-    return value.charAt(0).toUpperCase() + value.slice(1);
-}
 /**
  * Parses an ISO (`yyyy-mm-dd`) date string, as used by the `default-value`
  * and `default-range-value` attributes. Returns `null` for an empty or

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

@@ -8,6 +8,7 @@ import { EditableMixinInterface } from "../../../mixins/editable.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";
+import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the input component.
  */
@@ -20,7 +21,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<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface;
+type EunomiaInputBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & LocalizableMixinInterface;
 declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
 /**
  * A single-line text field, supporting several native input types.
@@ -37,7 +38,9 @@ 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 {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
+ * @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
@@ -50,12 +53,12 @@ declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
  * @prop {string} min - The native minimum constraint forwarded to the field
  * @prop {string} max - The native maximum constraint forwarded to the field
  * @prop {string} step - The native step constraint forwarded to the field
- * @prop {string} [emptyValueLabel='No value set'] - Text displayed in place of the value when readonly and empty
- * @prop {string} [confirmLabel='Save'] - The label of the confirm button in edit mode
- * @prop {string} [cancelLabel='Cancel'] - The label of the cancel button in edit mode
- * @prop {string} [ariaLabelClear='Clear field'] - The accessible label of the clear button
- * @prop {string} [ariaLabelShowPassword='Show password'] - The accessible label of the show password button
- * @prop {string} [ariaLabelHidePassword='Hide password'] - The accessible label of the hide password button
+ * @prop {string} [emptyValueLabel] - Text displayed in place of the value when readonly and empty. Defaults to the localized string for the current locale (English: "No value set")
+ * @prop {string} [confirmLabel] - The label of the confirm button in edit mode. Defaults to the localized string for the current locale (English: "Save")
+ * @prop {string} [cancelLabel] - The label of the cancel button in edit mode. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [clearLabel] - The accessible label of the clear button. Defaults to the localized string for the current locale (English: "Clear field")
+ * @prop {string} [showPasswordLabel] - The accessible label of the show password button. Defaults to the localized string for the current locale (English: "Show password")
+ * @prop {string} [hidePasswordLabel] - The accessible label of the hide password button. Defaults to the localized string for the current locale (English: "Hide password")
  * @fires {ChangeEvent} eunchange - Fired on every value change
  * @fires {CommitEvent} euncommit - Fired when an edit is confirmed in readonlyAvailable mode
  * @cssprop [--field-background] - Sets the background color of the field
@@ -64,6 +67,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 +77,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 {
@@ -143,34 +151,34 @@ export declare class EunomiaInput extends EunomiaInputMixinBase {
     step?: string;
     /**
      * Text displayed in place of the value when readonly and empty.
-     * @default No value set
+     * Falls back to the localized string for the current locale when unset.
      */
-    emptyValueLabel: string;
+    emptyValueLabel?: string;
     /**
      * Label of the confirm button in edit mode.
-     * @default Save
+     * Falls back to the localized string for the current locale when unset.
      */
-    confirmLabel: string;
+    confirmLabel?: string;
     /**
      * Label of the cancel button in edit mode.
-     * @default Cancel
+     * Falls back to the localized string for the current locale when unset.
      */
-    cancelLabel: string;
+    cancelLabel?: string;
     /**
      * Accessible label of the clear button.
-     * @default Clear field
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelClear: string;
+    clearLabel?: string;
     /**
      * Accessible label of the show-password button.
-     * @default Show password
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelShowPassword: string;
+    showPasswordLabel?: string;
     /**
      * Accessible label of the hide-password button.
-     * @default Hide password
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelHidePassword: string;
+    hidePasswordLabel?: string;
     /**
      * Whether the password's plain value is currently revealed.
      * @internal
@@ -207,28 +215,25 @@ export declare class EunomiaInput extends EunomiaInputMixinBase {
      * @protected
      */
     protected focusTarget(): HTMLElement | undefined;
+    constructor();
+    /**
+     * Submits the owning form on Enter in the field, as a native text input
+     * does, since the browser never does it from a shadow root. Listened to
+     * on the host so a handler inside, such as `eun-search` picking a
+     * suggestion, can claim the key first. Skipped while editing in
+     * `readonlyAvailable` mode, whose own buttons confirm the edit.
+     * @private
+     */
+    private readonly handleImplicitSubmission;
+    /**
+     * The host is never a tab stop of its own : sequential navigation goes
+     * straight to the native field inside, in both directions, and
+     * {@link focus} covers a direct call on the host.
+     */
+    protected get hostTabStop(): boolean;
     /**
      * Lifecycle hook called whenever reactive properties change. Focuses the
-     * field when entering edit mode, and corrects the host's own `tabindex`
-     * after every `disabled` change.
-     *
-     * `DisabledMixin` puts a real `tabindex="0"` on the host so Tab still
-     * reaches it while enabled — appropriate for a component whose host
-     * *is* the sole interactive surface, but this one always has its own
-     * focusable native field nested inside instead, and keeping the host
-     * itself as a *second*, independent tab stop right next to it broke
-     * Shift+Tab : landing back on the host is a genuine stop of its own as
-     * far as the browser's own backward sequential-navigation is concerned,
-     * and redirecting focus straight back into the field from there (this
-     * class's previous approach) fights that navigation mid-flight, leaving
-     * focus stranded on the host with nothing focused inside it. Removing
-     * the attribute instead lets sequential focus navigation descend
-     * straight into the field on its own, correctly in both directions, with
-     * no separate host stop and no redirect involved at all — this class's
-     * own `focus()` method (see below) covers a direct, explicit call on the
-     * host, the one case that genuinely still needs one. The disabled case
-     * still gets an explicit `-1` so a disabled field is skipped entirely
-     * rather than becoming its own (empty) stop.
+     * field when entering edit mode.
      *
      * @param _changedProperties - Map of changed properties
      */