@eunomia/elements 1.0.0-beta.9 → 1.0.0

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

@@ -57,7 +57,7 @@ declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
  * @prop {EunomiaDateRange} defaultRangeValue - The default range applied when the field connects, and restored on form reset, in range mode
  * @prop {0 | 1} [weekStartsOn=1] - Which weekday a week starts on, Sunday or Monday. Only relevant with day granularity
  * @prop {boolean} [workWeek=false] - Whether to drop Saturdays and Sundays entirely from the day grid, as a five-column grid instead of seven. Only relevant with day granularity
- * @prop {string} [locale] - The locale used for month and weekday labels and the segments' field order. Defaults to the runtime's own
+ * @prop {string} [locale] - The locale used for month and weekday labels and the segments' field order. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {Date} minDate - The earliest selectable value
  * @prop {Date} maxDate - The latest selectable value
  * @prop {(date: Date) => boolean} isDateDisabled - An optional predicate disabling specific days, months, or years on top of minDate and maxDate
@@ -86,7 +86,7 @@ declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
  * @attr {12 | 24} [hour-format] - Overrides the time picker panel's hour format
  * @prop {number} [stepMinute=1] - The time picker panel's minute column increment step. Only relevant when withTime is set
  * @attr {number} [step-minute=1] - The time picker panel's minute column increment step
- * @prop {string} [minTime] - The earliest selectable time of day, as an HH:mm string, when withTime is set. A value outside minTime or maxTime reports as invalid rather than being blocked
+ * @prop {string} [minTime] - The earliest selectable time of day, as an HH:mm string, when withTime is set. The panel greys out the times outside minTime and maxTime, and a typed value outside them reports as invalid
  * @attr {string} [min-time] - The earliest selectable time of day, as an HH:mm string
  * @prop {string} [maxTime] - The latest selectable time of day, as an HH:mm string. When earlier than minTime, the valid range wraps past midnight instead of being empty
  * @attr {string} [max-time] - The latest selectable time of day, as an HH:mm string
@@ -481,11 +481,12 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * without this a partially/invalidly typed date (e.g. "31/02/2026", or a
      * segment left empty) never surfaced as `badInput` until the group
      * happened to also complete into a real, committable date. Also keeps
-     * {@link timeSegments} in sync whenever the committed value (or the time
-     * zone/format it's read through) changes from outside, while
-     * {@link withTime} is active — deliberately here rather than in
-     * `updated()`, unlike the day/month/year `segments`' own sync just below
-     * : setting a reactive property from `updated()` schedules a *second*,
+     * the typed segments in sync whenever the committed value/range changes
+     * from outside (a direct property assignment, form reset, ...), and
+     * {@link timeSegments} whenever the value (or the time zone/format it's
+     * read through) changes while {@link withTime} is active — deliberately
+     * here rather than in `updated()` : setting a reactive property from
+     * `updated()` schedules a *second*,
      * separate update pass (Lit warns about exactly this), which a single
      * `await el.updateComplete` after an external `value`/`timezone` change
      * wouldn't reliably wait through — see `eun-time-picker`'s identical
@@ -495,9 +496,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      */
     protected willUpdate(changed: PropertyValues): void;
     /**
-     * Lifecycle hook called whenever reactive properties change. Keeps the
-     * typed segments in sync whenever the committed value/range changes from
-     * outside (a direct property assignment, form reset, ...), and mirrors
+     * Lifecycle hook called whenever reactive properties change. Mirrors
      * `valid`/`hideError`/`disabled` onto the host's `aria-invalid` — the
      * `#field-wrapper`/`:host([aria-invalid="true"])` error styling in
      * `date-picker.styles.ts` depends on it, matching the same host-attribute
@@ -511,7 +510,10 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
     /**
      * Reads local validation state : a partially/invalidly typed segment
      * group reports as invalid, matching native constraint validation's
-     * `badInput`. While {@link withTime} is active, also checks the typed
+     * `badInput`. A committed date before {@link minDate} or after
+     * {@link maxDate} reports `rangeUnderflow`/`rangeOverflow`, and one
+     * rejected by {@link isDateDisabled} reports `badInput`, whether it was
+     * typed, picked or assigned. While {@link withTime} is active, also checks the typed
      * time segments the same way, and the committed value's time of day
      * against {@link minTime}/{@link maxTime}, reporting
      * `rangeUnderflow`/`rangeOverflow` exactly like a native
@@ -557,6 +559,20 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @private
      */
     private isMobileViewport;
+    /**
+     * Which constraint a committed date breaks at the current
+     * `granularity`, read on its calendar day in {@link timezone} while
+     * {@link withTime} is active : the same checks that grey out the
+     * calendar's cells.
+     * @private
+     */
+    private dateConstraintViolation;
+    /**
+     * Formats a `minDate`/`maxDate` bound for a validation message, at the
+     * current `granularity`.
+     * @private
+     */
+    private formatConstraintDate;
     /**
      * @private
      */
@@ -571,7 +587,8 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
     private isYearDisabled;
     /**
      * Seeds the in-progress staging state from the last committed
-     * value/range, and centers the calendar on it (or today, if unset).
+     * value/range (or, in single mode, a fully typed date still waiting for
+     * its time), and centers the calendar on it (or today, if unset).
      * Also seeds {@link stagingTime} from that same value's current
      * hour/minute (in {@link timezone}) when {@link withTime} is set —
      * midnight, absent a value yet.
@@ -1013,6 +1030,12 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @private
      */
     private playSwipeAnimation;
+    /**
+     * Selects a segment's whole content when it gets focus or a click, so
+     * typing replaces it instead of being blocked by its `maxlength`.
+     * @private
+     */
+    private readonly selectSegmentText;
     /**
      * Updates a single segment's typed value, auto-advancing to the next
      * segment (in locale order) once it's fully typed, and committing the
@@ -1020,7 +1043,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * (`isSegmentGroupComplete` — not just "parses so far", which a 1-3 digit
      * year like `"202"` already does as year 202 AD ; gating on length too
      * avoids committing mid-keystroke and stomping the segment the user is
-     * still typing when `updated()` reformats it from the committed value)
+     * still typing when `willUpdate()` reformats it from the committed value)
      * and composes a real calendar date.
      *
      * @param event the native input event.
@@ -1040,6 +1063,17 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @private
      */
     private commitSegmentGroupIfComplete;
+    /**
+     * The typed single-mode {@link segments}, once fully typed into a real
+     * date.
+     * @private
+     */
+    private typedDate;
+    /**
+     * The typed {@link timeSegments}, once fully typed into a real time.
+     * @private
+     */
+    private typedTime;
     /**
      * Moves focus to the previous segment (in locale order) when Backspace
      * is pressed on an already-empty segment, and to the previous/next
@@ -1319,5 +1353,8 @@ declare global {
     interface HTMLElementTagNameMap {
         [EunomiaDatePickerTagName]: EunomiaDatePicker;
     }
+    interface EunomiaStringAttributeMap {
+        [EunomiaDatePickerTagName]: "default-value" | "default-range-value";
+    }
 }
 export {};

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

@@ -93,7 +93,7 @@ const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(RoundedM
  * @prop {EunomiaDateRange} defaultRangeValue - The default range applied when the field connects, and restored on form reset, in range mode
  * @prop {0 | 1} [weekStartsOn=1] - Which weekday a week starts on, Sunday or Monday. Only relevant with day granularity
  * @prop {boolean} [workWeek=false] - Whether to drop Saturdays and Sundays entirely from the day grid, as a five-column grid instead of seven. Only relevant with day granularity
- * @prop {string} [locale] - The locale used for month and weekday labels and the segments' field order. Defaults to the runtime's own
+ * @prop {string} [locale] - The locale used for month and weekday labels and the segments' field order. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {Date} minDate - The earliest selectable value
  * @prop {Date} maxDate - The latest selectable value
  * @prop {(date: Date) => boolean} isDateDisabled - An optional predicate disabling specific days, months, or years on top of minDate and maxDate
@@ -122,7 +122,7 @@ const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(RoundedM
  * @attr {12 | 24} [hour-format] - Overrides the time picker panel's hour format
  * @prop {number} [stepMinute=1] - The time picker panel's minute column increment step. Only relevant when withTime is set
  * @attr {number} [step-minute=1] - The time picker panel's minute column increment step
- * @prop {string} [minTime] - The earliest selectable time of day, as an HH:mm string, when withTime is set. A value outside minTime or maxTime reports as invalid rather than being blocked
+ * @prop {string} [minTime] - The earliest selectable time of day, as an HH:mm string, when withTime is set. The panel greys out the times outside minTime and maxTime, and a typed value outside them reports as invalid
  * @attr {string} [min-time] - The earliest selectable time of day, as an HH:mm string
  * @prop {string} [maxTime] - The latest selectable time of day, as an HH:mm string. When earlier than minTime, the valid range wraps past midnight instead of being empty
  * @attr {string} [max-time] - The latest selectable time of day, as an HH:mm string
@@ -369,7 +369,10 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         /**
          * Reads local validation state : a partially/invalidly typed segment
          * group reports as invalid, matching native constraint validation's
-         * `badInput`. While {@link withTime} is active, also checks the typed
+         * `badInput`. A committed date before {@link minDate} or after
+         * {@link maxDate} reports `rangeUnderflow`/`rangeOverflow`, and one
+         * rejected by {@link isDateDisabled} reports `badInput`, whether it was
+         * typed, picked or assigned. While {@link withTime} is active, also checks the typed
          * time segments the same way, and the committed value's time of day
          * against {@link minTime}/{@link maxTime}, reporting
          * `rangeUnderflow`/`rangeOverflow` exactly like a native
@@ -389,9 +392,34 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
                     message: this.dictionary.validation.invalidDate,
                 };
             }
+            const committed = this.mode === "single"
+                ? [this.value]
+                : [this.rangeValue.start, this.rangeValue.end];
+            for (const date of committed) {
+                const violation = date ? this.dateConstraintViolation(date) : null;
+                if (violation === "min") {
+                    return {
+                        validity: { rangeUnderflow: true },
+                        message: this.dictionary.validation.rangeUnderflow(this.formatConstraintDate(this.minDate)),
+                    };
+                }
+                if (violation === "max") {
+                    return {
+                        validity: { rangeOverflow: true },
+                        message: this.dictionary.validation.rangeOverflow(this.formatConstraintDate(this.maxDate)),
+                    };
+                }
+                if (violation === "disabled") {
+                    return {
+                        validity: { badInput: true },
+                        message: this.dictionary.validation.unavailableDate,
+                    };
+                }
+            }
             if (this.isWithTimeActive()) {
                 const format = this.resolvedHourFormat();
-                if (isTimeSegmentsPartiallyFilled(this.timeSegments) &&
+                const isTimeMissing = !this.value && isPartiallyFilled(this.segments);
+                if ((isTimeMissing || isTimeSegmentsPartiallyFilled(this.timeSegments)) &&
                     !clockSegmentsToTime(this.timeSegments, format)) {
                     return {
                         validity: { badInput: true },
@@ -405,11 +433,11 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
                         return bounds.violation === "min"
                             ? {
                                 validity: { rangeUnderflow: true },
-                                message: `Time must be at or after ${this.minTime}`,
+                                message: this.dictionary.timePicker.mustBeAtOrAfter(this.minTime ?? ""),
                             }
                             : {
                                 validity: { rangeOverflow: true },
-                                message: `Time must be at or before ${this.maxTime}`,
+                                message: this.dictionary.timePicker.mustBeAtOrBefore(this.maxTime ?? ""),
                             };
                     }
                 }
@@ -942,6 +970,14 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         this.handleSwipeCancel = () => {
             this.swipeStart = null;
         };
+        /**
+         * Selects a segment's whole content when it gets focus or a click, so
+         * typing replaces it instead of being blocked by its `maxlength`.
+         * @private
+         */
+        this.selectSegmentText = (event) => {
+            event.currentTarget.select();
+        };
         /**
          * @private
          */
@@ -1016,11 +1052,12 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
      * without this a partially/invalidly typed date (e.g. "31/02/2026", or a
      * segment left empty) never surfaced as `badInput` until the group
      * happened to also complete into a real, committable date. Also keeps
-     * {@link timeSegments} in sync whenever the committed value (or the time
-     * zone/format it's read through) changes from outside, while
-     * {@link withTime} is active — deliberately here rather than in
-     * `updated()`, unlike the day/month/year `segments`' own sync just below
-     * : setting a reactive property from `updated()` schedules a *second*,
+     * the typed segments in sync whenever the committed value/range changes
+     * from outside (a direct property assignment, form reset, ...), and
+     * {@link timeSegments} whenever the value (or the time zone/format it's
+     * read through) changes while {@link withTime} is active — deliberately
+     * here rather than in `updated()` : setting a reactive property from
+     * `updated()` schedules a *second*,
      * separate update pass (Lit warns about exactly this), which a single
      * `await el.updateComplete` after an external `value`/`timezone` change
      * wouldn't reliably wait through — see `eun-time-picker`'s identical
@@ -1029,9 +1066,23 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
      * @param changed the changed properties.
      */
     willUpdate(changed) {
+        if (changed.has("value") && this.mode === "single") {
+            this.segments = dateToSegments(this.value ?? null);
+        }
+        if (changed.has("rangeValue") && this.mode === "range") {
+            this.rangeSegments = {
+                start: dateToSegments(this.rangeValue.start),
+                end: dateToSegments(this.rangeValue.end),
+            };
+        }
         let revalidate = changed.has("segments") ||
             changed.has("rangeSegments") ||
             changed.has("timeSegments") ||
+            changed.has("rangeValue") ||
+            changed.has("minDate") ||
+            changed.has("maxDate") ||
+            changed.has("isDateDisabled") ||
+            changed.has("granularity") ||
             changed.has("minTime") ||
             changed.has("maxTime");
         if (this.isWithTimeActive() &&
@@ -1055,9 +1106,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         super.willUpdate(changed);
     }
     /**
-     * Lifecycle hook called whenever reactive properties change. Keeps the
-     * typed segments in sync whenever the committed value/range changes from
-     * outside (a direct property assignment, form reset, ...), and mirrors
+     * Lifecycle hook called whenever reactive properties change. Mirrors
      * `valid`/`hideError`/`disabled` onto the host's `aria-invalid` — the
      * `#field-wrapper`/`:host([aria-invalid="true"])` error styling in
      * `date-picker.styles.ts` depends on it, matching the same host-attribute
@@ -1069,15 +1118,6 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
      */
     updated(changed) {
         super.updated(changed);
-        if (changed.has("value") && this.mode === "single") {
-            this.segments = dateToSegments(this.value ?? null);
-        }
-        if (changed.has("rangeValue") && this.mode === "range") {
-            this.rangeSegments = {
-                start: dateToSegments(this.rangeValue.start),
-                end: dateToSegments(this.rangeValue.end),
-            };
-        }
         if (hasErrorDisplayChange(changed)) {
             this.setAttribute("aria-invalid", String(this.showError));
         }
@@ -1114,6 +1154,48 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
     isMobileViewport() {
         return window.matchMedia(mediaBelow("tablet")).matches;
     }
+    /**
+     * Which constraint a committed date breaks at the current
+     * `granularity`, read on its calendar day in {@link timezone} while
+     * {@link withTime} is active : the same checks that grey out the
+     * calendar's cells.
+     * @private
+     */
+    dateConstraintViolation(date) {
+        let day = date;
+        if (this.isWithTimeActive()) {
+            const parts = getZonedParts(date, this.timezone);
+            day = new Date(parts.year, parts.month - 1, parts.day);
+        }
+        const isDisabled = this.granularity === "year"
+            ? isDisabledYear
+            : this.granularity === "month"
+                ? isDisabledMonth
+                : isDisabledDay;
+        if (isDisabled(day, this.minDate, undefined, undefined)) {
+            return "min";
+        }
+        if (isDisabled(day, undefined, this.maxDate, undefined)) {
+            return "max";
+        }
+        if (isDisabled(day, undefined, undefined, this.isDateDisabled)) {
+            return "disabled";
+        }
+        return null;
+    }
+    /**
+     * Formats a `minDate`/`maxDate` bound for a validation message, at the
+     * current `granularity`.
+     * @private
+     */
+    formatConstraintDate(date) {
+        const options = this.granularity === "year"
+            ? { year: "numeric" }
+            : this.granularity === "month"
+                ? { month: "2-digit", year: "numeric" }
+                : { day: "2-digit", month: "2-digit", year: "numeric" };
+        return new Intl.DateTimeFormat(this.resolvedLocale, options).format(date);
+    }
     /**
      * @private
      */
@@ -1134,14 +1216,15 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
     }
     /**
      * Seeds the in-progress staging state from the last committed
-     * value/range, and centers the calendar on it (or today, if unset).
+     * value/range (or, in single mode, a fully typed date still waiting for
+     * its time), and centers the calendar on it (or today, if unset).
      * Also seeds {@link stagingTime} from that same value's current
      * hour/minute (in {@link timezone}) when {@link withTime} is set —
      * midnight, absent a value yet.
      * @private
      */
     resetStaging() {
-        this.stagingValue = this.value ?? null;
+        this.stagingValue = this.value ?? this.typedDate();
         this.stagingRange = {
             start: this.rangeValue.start,
             end: this.rangeValue.end,
@@ -1149,7 +1232,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         this.hoverDate = null;
         this.navLevel = this.granularity;
         const anchor = this.mode === "single"
-            ? (this.value ?? new Date())
+            ? (this.stagingValue ?? new Date())
             : (this.rangeValue.start ?? new Date());
         this.displayedAnchor = anchor;
         this.focusedDate = startOfDay(anchor);
@@ -1182,7 +1265,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
      * @private
      */
     resolvedHourFormat() {
-        return resolveHourFormat(this.locale, this.hourFormat);
+        return resolveHourFormat(this.resolvedLocale, this.hourFormat);
     }
     /**
      * Folds {@link stagingTime}'s hour/minute into `date`'s calendar day (in
@@ -1321,7 +1404,16 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
             return;
         }
         const time = clockSegmentsToTime(group, format);
-        if (time) {
+        if (!time) {
+            return;
+        }
+        // A date already typed in full takes the time with it, rather than
+        // the committed value's day (or today's).
+        const date = this.typedDate();
+        if (date) {
+            this.commitTypedDate("value", date);
+        }
+        else {
             this.commitTypedTime(time.hour, time.minute);
         }
     }
@@ -1614,7 +1706,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
      * (`isSegmentGroupComplete` — not just "parses so far", which a 1-3 digit
      * year like `"202"` already does as year 202 AD ; gating on length too
      * avoids committing mid-keystroke and stomping the segment the user is
-     * still typing when `updated()` reformats it from the committed value)
+     * still typing when `willUpdate()` reformats it from the committed value)
      * and composes a real calendar date.
      *
      * @param event the native input event.
@@ -1650,11 +1742,40 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         if (!isSegmentGroupComplete(group, kinds)) {
             return;
         }
+        // A first date typed with `withTime` waits for its time instead of
+        // committing at midnight.
+        if (target === "value" &&
+            this.isWithTimeActive() &&
+            !this.value &&
+            !this.typedTime()) {
+            return;
+        }
         const date = segmentsToDate(group, kinds);
         if (date) {
             this.commitTypedDate(target, date);
         }
     }
+    /**
+     * The typed single-mode {@link segments}, once fully typed into a real
+     * date.
+     * @private
+     */
+    typedDate() {
+        const kinds = segmentKindsForGranularity(this.granularity);
+        return isSegmentGroupComplete(this.segments, kinds)
+            ? segmentsToDate(this.segments, kinds)
+            : null;
+    }
+    /**
+     * The typed {@link timeSegments}, once fully typed into a real time.
+     * @private
+     */
+    typedTime() {
+        const format = this.resolvedHourFormat();
+        return isClockSegmentGroupComplete(this.timeSegments, format)
+            ? clockSegmentsToTime(this.timeSegments, format)
+            : null;
+    }
     /**
      * Moves focus to the previous segment (in locale order) when Backspace
      * is pressed on an already-empty segment, and to the previous/next
@@ -1756,7 +1877,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
      */
     visibleSegmentOrder() {
         const kinds = segmentKindsForGranularity(this.granularity);
-        return getSegmentOrder(this.locale).filter((kind) => kinds.includes(kind));
+        return getSegmentOrder(this.resolvedLocale).filter((kind) => kinds.includes(kind));
     }
     /**
      * Focuses the segment before `kind` (in locale order) within the same
@@ -1779,10 +1900,15 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
     focusNextSegment(target, kind) {
         const order = this.visibleSegmentOrder();
         const index = order.indexOf(kind);
-        if (index === -1 || index >= order.length - 1) {
+        if (index === -1) {
             return;
         }
-        this.focusSegment(target, order[index + 1]);
+        if (index < order.length - 1) {
+            this.focusSegment(target, order[index + 1]);
+        }
+        else if (target === "value" && this.isWithTimeActive()) {
+            this.focusTimeSegment(this.visibleTimeSegmentOrder()[0]);
+        }
     }
     /**
      * @private
@@ -1905,7 +2031,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
      */
     visibleTimeSegmentOrder() {
         const kinds = clockSegmentKinds(this.resolvedHourFormat());
-        return getClockSegmentOrder(this.locale).filter((kind) => kinds.includes(kind));
+        return getClockSegmentOrder(this.resolvedLocale).filter((kind) => kinds.includes(kind));
     }
     /**
      * @private
@@ -1913,10 +2039,13 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
     focusPreviousTimeSegment(kind) {
         const order = this.visibleTimeSegmentOrder();
         const index = order.indexOf(kind);
-        if (index <= 0) {
-            return;
+        if (index === 0) {
+            const dateOrder = this.visibleSegmentOrder();
+            this.focusSegment("value", dateOrder[dateOrder.length - 1]);
+        }
+        else if (index > 0) {
+            this.focusTimeSegment(order[index - 1]);
         }
-        this.focusTimeSegment(order[index - 1]);
     }
     /**
      * @private
@@ -2005,6 +2134,8 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         .value=${this.timeSegments[kind]}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
+        @focus=${this.selectSegmentText}
+        @click=${this.selectSegmentText}
         @input=${(event) => this.handleTimeSegmentInput(event, kind)}
         @keydown=${(event) => this.handleTimeSegmentKeydown(event, kind)}
       />
@@ -2073,6 +2204,8 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         .value=${values[kind]}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
+        @focus=${this.selectSegmentText}
+        @click=${this.selectSegmentText}
         @input=${(event) => this.handleSegmentInput(event, target, kind)}
         @keydown=${(event) => this.handleSegmentKeydown(event, target, kind)}
       />
@@ -2094,7 +2227,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
             focusedDate: this.focusedDate,
             weekStartsOn: this.weekStartsOn,
             hideWeekends: this.workWeek,
-            locale: this.locale,
+            locale: this.resolvedLocale,
             minDate: this.minDate,
             maxDate: this.maxDate,
             isDateDisabled: this.isDateDisabled,
@@ -2130,7 +2263,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
             rangeValue: isPrimary ? this.stagingRange : { start: null, end: null },
             hoverDate: isPrimary ? this.hoverDate : null,
             focusedDate: this.focusedDate,
-            locale: this.locale,
+            locale: this.resolvedLocale,
             minDate: this.minDate,
             maxDate: this.maxDate,
             isDateDisabled: this.isDateDisabled,
@@ -2282,7 +2415,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         }
         const options = this.previewFormatOptions();
         const effectiveEnd = end ?? start;
-        return `${start.toLocaleDateString(this.locale, options)} – ${effectiveEnd.toLocaleDateString(this.locale, options)}`;
+        return `${start.toLocaleDateString(this.resolvedLocale, options)} – ${effectiveEnd.toLocaleDateString(this.resolvedLocale, options)}`;
     }
     /**
      * Renders the mobile modal's prominent date preview — a large, live
@@ -2300,14 +2433,14 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         let text;
         if (this.mode === "single") {
             text = this.stagingValue
-                ? this.stagingValue.toLocaleDateString(this.locale, this.previewFormatOptions())
+                ? this.stagingValue.toLocaleDateString(this.resolvedLocale, this.previewFormatOptions())
                 : phrase.single;
         }
         else if (!this.stagingRange.start) {
             text = phrase.range;
         }
         else if (this.granularity === "day") {
-            text = formatDateRange(this.stagingRange.start, this.stagingRange.end ?? this.stagingRange.start, this.locale);
+            text = formatDateRange(this.stagingRange.start, this.stagingRange.end ?? this.stagingRange.start, this.resolvedLocale);
         }
         else {
             text = this.formatCoarseRangePreview();
@@ -2340,6 +2473,8 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
             minute: time.minute,
             period,
             stepMinute: this.stepMinute,
+            minTime: parseTimeOfDay(this.minTime),
+            maxTime: parseTimeOfDay(this.maxTime),
             disabled: this.disabled,
             noAnimation: this.noAnimation,
             labels: this.dictionary.timePicker,
@@ -2364,7 +2499,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         }
         const reference = this.stagingValue ?? new Date();
         const label = getTimeZoneOffsetLabel(reference, this.timezone, {
-            locale: this.locale,
+            locale: this.resolvedLocale,
         });
         return html `<p id="timezone-label">${label}</p>`;
     }
@@ -2411,7 +2546,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
       </div>
       <eun-modal
         ?open=${this.isModalOpen}
-        .closeable=${false}
+        close-on-backdrop
         confirm-label=${this.applyLabel ?? this.dictionary.common.apply}
         cancel-label=${this.cancelLabel ?? this.dictionary.common.cancel}
         aria-label=${this.label ?? this.headingFor()}

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

@@ -205,7 +205,7 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
                 "rangeOverflow",
                 "stepMismatch",
                 "badInput",
-            ]);
+            ], this.validationDictionary.validation);
         };
         this.addEventListener("keydown", this.handleImplicitSubmission);
     }
@@ -235,9 +235,6 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
      * @returns the native field element, if rendered.
      */
     getFocusAnchor() {
-        // `@query` resolves to `null` (not `undefined`) when `#field` isn't rendered
-        // (e.g. in the readonly display). `ElementInternals.setValidity` rejects a
-        // `null` anchor, so it must be normalized to `undefined` (treated as omitted).
         return this.fieldEl ?? undefined;
     }
     /**

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

@@ -33,7 +33,7 @@ const base = css `
     --_textColor: var(--input-file-text-color, var(--eun-text-color, #071621));
     --_iconColor: var(
       --input-file-icon-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
     --_errorColor: var(
       --input-file-error-color,
@@ -41,7 +41,7 @@ const base = css `
     );
     --_hintColor: var(
       --input-file-hint-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
     --_focusIndicator: var(
       --input-file-focus-outline-color,

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

@@ -329,8 +329,9 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
         if (!query) {
             return available;
         }
-        return available.filter(({ iso, dialCode }) => getCountryName(iso, this.locale).toLowerCase().includes(query) ||
-            dialCode.includes(query));
+        return available.filter(({ iso, dialCode }) => getCountryName(iso, this.resolvedLocale)
+            .toLowerCase()
+            .includes(query) || dialCode.includes(query));
     }
     /**
      * Lifecycle hook called whenever reactive properties change. Keeps
@@ -726,7 +727,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
                       >${getFlagEmoji(iso)}</span
                     >
                     <span class="country-name"
-                      >${getCountryName(iso, this.locale)}</span
+                      >${getCountryName(iso, this.resolvedLocale)}</span
                     >
                     <span class="country-dial-code">+${countryDialCode}</span>
                   </li>

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

@@ -19,7 +19,7 @@ const base = css `
   slot[name="instructions"] {
     display: block;
     font-size: var(--field-message-font-size, var(--eun-font-size-xs, 12px));
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--eun-text-secondary, #666e8a);
   }
   .required {
     color: var(--eun-color-critical-100, #aa0014);