@eunomia/elements 1.0.0-beta.9 → 1.0.0

package/dist/components/form/radio/radio-card.styles.js

@@ -40,12 +40,12 @@ const base = css `
     );
     --_hintColor: var(
       --radio-card-hint-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
     --_color: var(--eun-text-color, #071621);
     --_iconColor: var(
       --radio-card-icon-color,
-      var(--eun-text-secondary, #484e61)
+      var(--eun-text-secondary, #666e8a)
     );
     --_focusIndicator: var(
       --radio-card-focus-outline-color,

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

@@ -30,7 +30,7 @@ const base = css `
       --radio-error-color,
       var(--eun-color-critical-100, #aa0014)
     );
-    --_hintColor: var(--radio-hint-color, var(--eun-text-secondary, #484e61));
+    --_hintColor: var(--radio-hint-color, var(--eun-text-secondary, #666e8a));
     --_borderSize: 1px;
     --_roundGap: 2px;
     --_cursor: pointer;

package/dist/components/form/rating/rating.js

@@ -16,7 +16,6 @@ import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
 import { FormMixin } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
-import { getDefaultLocale } from "../../../i18n/index.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { ratingStyles } from "./rating.styles.js";
@@ -328,9 +327,8 @@ let EunomiaRating = class EunomiaRating extends EunomiaRatingMixinBase {
      * @private
      */
     format(value) {
-        const locale = this.locale ?? getDefaultLocale();
         try {
-            return new Intl.NumberFormat(locale, {
+            return new Intl.NumberFormat(this.resolvedLocale, {
                 maximumFractionDigits: 2,
             }).format(value);
         }
@@ -575,8 +573,8 @@ let EunomiaRating = class EunomiaRating extends EunomiaRatingMixinBase {
         ${this.renderFormLabels()}
         ${this.instructions
             ? html `<span id="group-instructions" hidden
-              >${this.instructions}</span
-            >`
+                >${this.instructions}</span
+              >`
             : nothing}
         <div id="control">
           <div

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

@@ -28,7 +28,7 @@ const base = css `
       --rating-error-color,
       var(--eun-color-critical-100, #aa0014)
     );
-    --_hintColor: var(--rating-hint-color, var(--eun-text-secondary, #484e61));
+    --_hintColor: var(--rating-hint-color, var(--eun-text-secondary, #666e8a));
     --_focusIndicator: var(
       --rating-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
@@ -147,7 +147,7 @@ const base = css `
     border: none;
     border-radius: 50%;
     background: transparent;
-    color: var(--eun-text-secondary, #484e61);
+    color: var(--eun-text-secondary, #666e8a);
     cursor: pointer;
     outline: 2px solid transparent;
     outline-offset: 2px;

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

@@ -14,7 +14,7 @@ export type EunomiaSearchFilter = "contains" | "none";
 declare const EunomiaSearch_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/anchor-position.mixin.js").AnchorPositionMixinInterface> & typeof EunomiaInput;
 /**
  * An input field specialized for search: the native type is locked to
- * search, icon and clearable default to a search glyph and true, and two
+ * search, icon defaults to a search glyph, and two
  * opt-in behaviors modeled on documentation-site search bars are layered
  * on top.
  *
@@ -76,12 +76,6 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
      * @default search
      */
     icon: EunomiaIconName;
-    /**
-     * Whether a clear button is displayed when the field has a value.
-     * Defaults to `true` instead of `EunomiaInput`'s `false`.
-     * @default true
-     */
-    clearable: boolean;
     /**
      * Enables the Ctrl+K / Cmd+K global shortcut (focuses the field inline, or
      * opens the panel when `panel` is set), along with a visual key-hint badge

package/dist/components/form/search/search.js

@@ -18,14 +18,13 @@ import { listboxStyles, listboxAnchorPositioningStyles, } from "../shared-styles
 import { parseListboxOptions, renderHighlightedLabel, renderListboxRows, } from "../../../utils/listbox-options.utils.js";
 import { isWebKit } from "../../../utils/browser.utils.js";
 import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
-import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the search component.
  */
 export const EunomiaSearchTagName = "eun-search";
 /**
  * An input field specialized for search: the native type is locked to
- * search, icon and clearable default to a search glyph and true, and two
+ * search, icon defaults to a search glyph, and two
  * opt-in behaviors modeled on documentation-site search bars are layered
  * on top.
  *
@@ -82,12 +81,6 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
          * @default search
          */
         this.icon = "search";
-        /**
-         * Whether a clear button is displayed when the field has a value.
-         * Defaults to `true` instead of `EunomiaInput`'s `false`.
-         * @default true
-         */
-        this.clearable = true;
         /**
          * Enables the Ctrl+K / Cmd+K global shortcut (focuses the field inline, or
          * opens the panel when `panel` is set), along with a visual key-hint badge
@@ -883,7 +876,7 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
           id="panel"
           kind="search"
           hide-actions
-          .closeable=${false}
+          close-on-backdrop
           aria-label=${this.label ||
             (this.panelLabel ?? this.dictionary.search.panel)}
         >
@@ -923,9 +916,6 @@ __decorate([
 __decorate([
     property()
 ], EunomiaSearch.prototype, "icon", void 0);
-__decorate([
-    property({ converter: defaultTrueConverter })
-], EunomiaSearch.prototype, "clearable", void 0);
 __decorate([
     property({ type: Boolean })
 ], EunomiaSearch.prototype, "shortcut", void 0);

package/dist/components/form/shared-styles/field.styles.js

@@ -34,12 +34,12 @@ const base = css `
       --field-placeholder-color,
       var(--eun-placeholder-color, var(--eun-color-grey-400, #c1c9d6))
     );
-    --_iconColor: var(--field-icon-color, var(--eun-text-secondary, #484e61));
+    --_iconColor: var(--field-icon-color, var(--eun-text-secondary, #666e8a));
     --_errorColor: var(
       --field-error-color,
       var(--eun-color-critical-100, #aa0014)
     );
-    --_hintColor: var(--field-hint-color, var(--eun-text-secondary, #484e61));
+    --_hintColor: var(--field-hint-color, var(--eun-text-secondary, #666e8a));
     --_focusIndicator: var(
       --field-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)

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

@@ -56,7 +56,7 @@ const base = css `
       --slider-error-color,
       var(--eun-color-critical-100, #aa0014)
     );
-    --_hintColor: var(--slider-hint-color, var(--eun-text-secondary, #484e61));
+    --_hintColor: var(--slider-hint-color, var(--eun-text-secondary, #666e8a));
     --_focusIndicator: var(
       --slider-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)

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

@@ -31,7 +31,7 @@ const base = css `
       --switch-error-color,
       var(--eun-color-critical-100, #aa0014)
     );
-    --_hintColor: var(--switch-hint-color, var(--eun-text-secondary, #484e61));
+    --_hintColor: var(--switch-hint-color, var(--eun-text-secondary, #666e8a));
     --_color: var(--eun-text-color, #071621);
     --_focusIndicator: var(
       --switch-focus-outline-color,

package/dist/components/form/textarea/textarea.js

@@ -641,11 +641,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
             if (this.formatting) {
                 return this.checkEditableValidators();
             }
-            return pickValidity(this.fieldEl, [
-                "valueMissing",
-                "tooShort",
-                "tooLong",
-            ]);
+            return pickValidity(this.fieldEl, ["valueMissing", "tooShort", "tooLong"], this.validationDictionary.validation);
         };
         /**
          * @see handleInput ; reads the contenteditable surface's live content back

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

@@ -92,7 +92,7 @@ const textarea = css `
       );
     border-radius: var(--eun-border-radius-m, 8px);
     background: none;
-    color: var(--_iconColor, var(--eun-text-secondary, #484e61));
+    color: var(--_iconColor, var(--eun-text-secondary, #666e8a));
     cursor: pointer;
   }
   .color-picker-trigger:hover:not(:disabled) {
@@ -163,7 +163,7 @@ const textarea = css `
     margin-inline-start: auto;
     white-space: nowrap;
     font-size: var(--eun-font-size-xs, 12px);
-    color: var(--_hintColor, var(--eun-text-secondary, #484e61));
+    color: var(--_hintColor, var(--eun-text-secondary, #666e8a));
   }
   #char-count[data-exceeded] {
     color: var(--_errorColor);

package/dist/components/form/time-picker/time-picker-columns.d.ts

@@ -1,5 +1,5 @@
 import { TemplateResult } from "lit";
-import { HourFormat, Period } from "../../../utils/clock.utils.js";
+import { HourFormat, Period, TimeOfDay } from "../../../utils/clock.utils.js";
 import { Dictionary } from "../../../i18n/index.js";
 /**
  * The pixel height every `.tp-wheel-item` renders at (see
@@ -30,6 +30,9 @@ export interface TimePickerColumnsProps {
     period: Period;
     /** The minute column's increment step, and which minute values the wheel enumerates (e.g. `15` renders only `:00`/`:15`/`:30`/`:45`). */
     stepMinute: number;
+    /** The `min-time`/`max-time` bounds : values outside them are greyed out in the wheel, and skipped by the arrows and keyboard steps. */
+    minTime?: TimeOfDay | null;
+    maxTime?: TimeOfDay | null;
     disabled?: boolean;
     noAnimation?: boolean;
     /** The host's locale-resolved `timePicker` strings, naming the group, each column and its step buttons. */

package/dist/components/form/time-picker/time-picker-columns.js

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ref } from "lit/directives/ref.js";
-import { formatHourLabel, formatMinuteLabel, incrementHour, incrementMinute, to12Hour, to24Hour, togglePeriod, } from "../../../utils/clock.utils.js";
+import { checkTimeOfDayBounds, formatHourLabel, formatMinuteLabel, incrementHour, incrementMinute, to12Hour, to24Hour, togglePeriod, } from "../../../utils/clock.utils.js";
 import { debounce } from "../../../utils/time.utils.js";
 /**
  * The pixel height every `.tp-wheel-item` renders at (see
@@ -29,37 +29,65 @@ export const WHEEL_ITEM_HEIGHT_PX = 40;
  * @returns the rendered column trio.
  */
 export function renderTimePickerColumns(props) {
-    const { visual, format, hour, minute, period, stepMinute, disabled = false, noAnimation = false, } = props;
+    const { visual, format, hour, minute, period, stepMinute, minTime, maxTime, disabled = false, noAnimation = false, } = props;
     const display = format === 12 ? to12Hour(hour) : { hour, period };
     const hourMin = format === 12 ? 1 : 0;
     const hourMax = format === 12 ? 12 : 23;
+    const step = Math.max(1, stepMinute);
+    const minuteValues = [];
+    for (let value = 0; value < 60; value += step) {
+        minuteValues.push(value);
+    }
+    const isMinuteOutOfRange = (hour24, value) => !checkTimeOfDayBounds({ hour: hour24, minute: value }, minTime, maxTime)
+        .valid;
+    const isHourOutOfRange = (hour24) => minuteValues.every((value) => isMinuteOutOfRange(hour24, value));
     const hourItems = [];
     for (let value = hourMin; value <= hourMax; value += 1) {
         hourItems.push({
             value,
             text: formatHourLabel(value),
             selected: value === display.hour,
+            outOfRange: isHourOutOfRange(format === 12 ? to24Hour(value, display.period) : value),
         });
     }
-    const minuteItems = [];
-    for (let value = 0; value < 60; value += Math.max(1, stepMinute)) {
-        minuteItems.push({
-            value,
-            text: formatMinuteLabel(value),
-            selected: value === minute,
-        });
-    }
+    const minuteItems = minuteValues.map((value) => ({
+        value,
+        text: formatMinuteLabel(value),
+        selected: value === minute,
+        outOfRange: isMinuteOutOfRange(hour, value),
+    }));
+    const isPeriodOutOfRange = (value) => {
+        const offset = value === "AM" ? 0 : 12;
+        for (let h = 0; h < 12; h += 1) {
+            if (!isHourOutOfRange(h + offset)) {
+                return false;
+            }
+        }
+        return true;
+    };
     // Always steps the 24-hour internal value, regardless of display format —
     // `incrementHour` already wraps correctly there (see its own doc comment)
     // ; stepping the *displayed* 12-hour digit directly instead would need to
     // separately decide when a step also flips the period (crossing 11 <-> 12
     // crosses noon/midnight), which `incrementHour` + `to12Hour` already give
     // for free by construction.
+    // Out-of-range values are skipped, unless every value is out of range
+    // (contradictory bounds), where the plain step still applies.
     const handleHourStep = (delta) => {
-        props.onHourChange(incrementHour(hour, delta));
+        let next = incrementHour(hour, delta);
+        for (let i = 0; i < 24 && isHourOutOfRange(next); i += 1) {
+            next = incrementHour(next, delta);
+        }
+        props.onHourChange(isHourOutOfRange(next) ? incrementHour(hour, delta) : next);
     };
     const handleMinuteStep = (delta) => {
-        props.onMinuteChange(incrementMinute(minute, delta * Math.max(1, stepMinute)));
+        let next = incrementMinute(minute, delta * step);
+        for (let i = 0; i < 60 && isMinuteOutOfRange(hour, next); i += 1) {
+            next = incrementMinute(next, delta * step);
+        }
+        props.onMinuteChange(isMinuteOutOfRange(hour, next)
+            ? incrementMinute(minute, delta * step)
+            : next);
     };
     return html `
     <div class="tp-columns" role="group" aria-label=${props.labels.time}>
@@ -109,10 +137,24 @@ export function renderTimePickerColumns(props) {
             current: period === "AM" ? 0 : 1,
             valueText: period,
             items: [
-                { value: 0, text: "AM", selected: period === "AM" },
-                { value: 1, text: "PM", selected: period === "PM" },
+                {
+                    value: 0,
+                    text: "AM",
+                    selected: period === "AM",
+                    outOfRange: isPeriodOutOfRange("AM"),
+                },
+                {
+                    value: 1,
+                    text: "PM",
+                    selected: period === "PM",
+                    outOfRange: isPeriodOutOfRange("PM"),
+                },
             ],
-            onStep: () => props.onPeriodChange(togglePeriod(period)),
+            onStep: () => {
+                if (!isPeriodOutOfRange(togglePeriod(period))) {
+                    props.onPeriodChange(togglePeriod(period));
+                }
+            },
             onPick: (value) => props.onPeriodChange(value === 0 ? "AM" : "PM"),
         })
         : null}
@@ -259,6 +301,12 @@ function renderWheel(config) {
             return;
         }
         const item = config.items[Math.min(Math.max(index, 0), config.items.length - 1)];
+        if (item?.outOfRange) {
+            // Settled on a greyed-out value : scroll back to the current one.
+            const selectedIndex = config.items.findIndex((entry) => entry.selected);
+            syncWheelScrollPosition(container, selectedIndex, noAnimation);
+            return;
+        }
         if (item && item.value !== current) {
             config.onPick(item.value);
         }
@@ -292,6 +340,7 @@ function renderWheel(config) {
     })}
             tabindex="-1"
             aria-hidden="true"
+            ?disabled=${item.outOfRange}
             @click=${() => config.onPick(item.value)}
           >
             ${item.text}

package/dist/components/form/time-picker/time-picker-columns.styles.js

@@ -34,7 +34,7 @@ const timePickerColumns = css `
     border-radius: var(--eun-border-radius-s, 5px);
     background: none;
     padding: var(--eun-space-xxs, 1.6px);
-    color: var(--_iconColor, var(--eun-text-secondary, #484e61));
+    color: var(--_iconColor, var(--eun-text-secondary, #666e8a));
     cursor: pointer;
     transition: background-color var(--eun-duration-s, 150ms)
       var(--eun-easing-default, ease);
@@ -117,6 +117,10 @@ const timePickerColumns = css `
     color: var(--_textColor, var(--eun-text-color, #071621));
     font-weight: var(--eun-font-weight-l, 700);
   }
+  .tp-wheel-item:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
   @media (prefers-reduced-motion: reduce) {
     .tp-wheel {
       scroll-behavior: auto;

package/dist/components/form/time-picker/time-picker-list.d.ts

@@ -1,5 +1,5 @@
 import { TemplateResult } from "lit";
-import { HourFormat } from "../../../utils/clock.utils.js";
+import { HourFormat, TimeOfDay } from "../../../utils/clock.utils.js";
 /**
  * Props consumed by {@link renderTimePickerList} — a single flat listbox of
  * every time of day at a `stepMinutes` gap, `panel-mode="list"`'s
@@ -15,6 +15,9 @@ export interface TimePickerListProps {
     minute: number;
     locale?: string;
     stepMinutes: number;
+    /** The `min-time`/`max-time` bounds : entries outside them are disabled. */
+    minTime?: TimeOfDay | null;
+    maxTime?: TimeOfDay | null;
     disabled?: boolean;
     ariaLabel: string;
     onPick: (hour24: number, minute: number) => void;

package/dist/components/form/time-picker/time-picker-list.js

@@ -1,5 +1,6 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { checkTimeOfDayBounds, } from "../../../utils/clock.utils.js";
 /**
  * Minutes in a full day — the range {@link renderTimePickerList} enumerates
  * its entries over.
@@ -24,7 +25,7 @@ const MINUTES_PER_DAY = 24 * 60;
  * @returns the rendered listbox.
  */
 export function renderTimePickerList(props) {
-    const { format, hour, minute, locale, disabled = false, onPick } = props;
+    const { format, hour, minute, locale, minTime, maxTime, disabled = false, onPick, } = props;
     const stepMinutes = Math.max(1, Math.round(props.stepMinutes));
     const formatter = new Intl.DateTimeFormat(locale, {
         hour: "numeric",
@@ -40,20 +41,25 @@ export function renderTimePickerList(props) {
             minute: itemMinute,
             text: formatter.format(new Date(2000, 0, 1, hour24, itemMinute)),
             selected: hour24 === hour && itemMinute === minute,
+            outOfRange: !checkTimeOfDayBounds({ hour: hour24, minute: itemMinute }, minTime, maxTime).valid,
         });
     }
-    const selectedIndex = items.findIndex((item) => item.selected);
-    const focusableIndex = selectedIndex === -1 ? 0 : selectedIndex;
+    const selectedIndex = items.findIndex((item) => item.selected && !item.outOfRange);
+    const firstInRangeIndex = items.findIndex((item) => !item.outOfRange);
+    const focusableIndex = selectedIndex === -1 ? Math.max(firstInRangeIndex, 0) : selectedIndex;
+    const enabledOptions = (container) => Array.from(container.querySelectorAll('[role="option"]:not(:disabled)'));
     const focusOptionAt = (container, index) => {
-        const options = container.querySelectorAll('[role="option"]');
+        const options = enabledOptions(container);
         const clamped = Math.min(Math.max(index, 0), options.length - 1);
         options[clamped]?.focus();
     };
     const handleKeydown = (event) => {
         const container = event.currentTarget;
-        const options = Array.from(container.querySelectorAll('[role="option"]'));
+        const options = enabledOptions(container);
         const activeIndex = options.indexOf(document.activeElement);
-        const current = activeIndex === -1 ? focusableIndex : activeIndex;
+        const current = activeIndex === -1
+            ? Math.max(options.findIndex((option) => option.tabIndex === 0), 0)
+            : activeIndex;
         switch (event.key) {
             case "ArrowDown":
                 event.preventDefault();
@@ -82,7 +88,7 @@ export function renderTimePickerList(props) {
             case "Enter":
             case " ": {
                 event.preventDefault();
-                const item = items[current];
+                const item = items[Number(options[current]?.dataset.index)];
                 if (item) {
                     onPick(item.hour24, item.minute);
                 }
@@ -108,9 +114,10 @@ export function renderTimePickerList(props) {
         "tp-list-item": true,
         selected: item.selected,
     })}
+            data-index=${index}
             tabindex=${disabled ? "-1" : index === focusableIndex ? "0" : "-1"}
             aria-selected=${item.selected ? "true" : "false"}
-            ?disabled=${disabled}
+            ?disabled=${disabled || item.outOfRange}
             @click=${() => onPick(item.hour24, item.minute)}
           >
             ${item.text}

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

@@ -51,11 +51,11 @@ declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
  * @attr {12 | 24} [hour-format] - Overrides the hour format. Auto-detected from locale when unset
  * @prop {number} [stepMinute=1] - The minute column's increment step, and which minute values the mobile wheel enumerates
  * @attr {number} [step-minute=1] - The minute column's increment step, and which minute values the mobile wheel enumerates
- * @prop {string} [minTime] - The earliest selectable time of day, as an HH:mm string. 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. 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
- * @prop {string} [locale] - The locale used for the hour format auto-detection, segment order, and the modal's time preview. Defaults to the runtime's own
+ * @prop {string} [locale] - The locale used for the hour format auto-detection, segment order, and the modal's time preview. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {'wheel' | 'modal'} [mobileMode='wheel'] - Which content the mobile modal fallback shows: the same arrow-button columns as desktop, or a scroll-snap wheel per column. Only relevant when panelMode is columns
  * @attr {'wheel' | 'modal'} [mobile-mode='wheel'] - Which content the mobile modal fallback shows
  * @prop {'columns' | 'list'} [panelMode='columns'] - Which panel the trailing clock trigger opens: the hour, minute, and period spin button columns, or a single scrollable listbox of every time of day at a listStepMinutes gap. Picking an entry from the list both commits it and closes the panel immediately. The list renders identically on every viewport, and never switches to the mobile modal fallback that columns uses on a small viewport
@@ -547,6 +547,12 @@ export declare class EunomiaTimePicker extends EunomiaTimePickerMixinBase {
      * @private
      */
     private focusSegment;
+    /**
+     * 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 hour/minute segment's typed value, auto-advancing to
      * the next segment once it's fully typed, and committing the group once
@@ -642,5 +648,8 @@ declare global {
     interface HTMLElementTagNameMap {
         [EunomiaTimePickerTagName]: EunomiaTimePicker;
     }
+    interface EunomiaStringAttributeMap {
+        [EunomiaTimePickerTagName]: "default-value";
+    }
 }
 export {};

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

@@ -68,11 +68,11 @@ const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(RoundedM
  * @attr {12 | 24} [hour-format] - Overrides the hour format. Auto-detected from locale when unset
  * @prop {number} [stepMinute=1] - The minute column's increment step, and which minute values the mobile wheel enumerates
  * @attr {number} [step-minute=1] - The minute column's increment step, and which minute values the mobile wheel enumerates
- * @prop {string} [minTime] - The earliest selectable time of day, as an HH:mm string. 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. 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
- * @prop {string} [locale] - The locale used for the hour format auto-detection, segment order, and the modal's time preview. Defaults to the runtime's own
+ * @prop {string} [locale] - The locale used for the hour format auto-detection, segment order, and the modal's time preview. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {'wheel' | 'modal'} [mobileMode='wheel'] - Which content the mobile modal fallback shows: the same arrow-button columns as desktop, or a scroll-snap wheel per column. Only relevant when panelMode is columns
  * @attr {'wheel' | 'modal'} [mobile-mode='wheel'] - Which content the mobile modal fallback shows
  * @prop {'columns' | 'list'} [panelMode='columns'] - Which panel the trailing clock trigger opens: the hour, minute, and period spin button columns, or a single scrollable listbox of every time of day at a listStepMinutes gap. Picking an entry from the list both commits it and closes the panel immediately. The list renders identically on every viewport, and never switches to the mobile modal fallback that columns uses on a small viewport
@@ -383,6 +383,14 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
             this.commitAdjustment(hour24, minute);
             this.closePopover();
         };
+        /**
+         * 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
          */
@@ -524,7 +532,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
      * @private
      */
     resolvedHourFormat() {
-        return resolveHourFormat(this.locale, this.hourFormat);
+        return resolveHourFormat(this.resolvedLocale, this.hourFormat);
     }
     /**
      * The instant the popover/modal panel's columns, and any segment
@@ -729,7 +737,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
      */
     visibleSegmentOrder() {
         const kinds = clockSegmentKinds(this.resolvedHourFormat());
-        return getClockSegmentOrder(this.locale).filter((kind) => kinds.includes(kind));
+        return getClockSegmentOrder(this.resolvedLocale).filter((kind) => kinds.includes(kind));
     }
     /**
      * @private
@@ -901,6 +909,8 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
         .value=${this.segments[kind]}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
+        @focus=${this.selectSegmentText}
+        @click=${this.selectSegmentText}
         @input=${(event) => this.handleSegmentInput(event, kind)}
         @keydown=${(event) => this.handleSegmentKeydown(event, kind)}
       />
@@ -962,7 +972,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
             return nothing;
         }
         const label = getTimeZoneOffsetLabel(this.value ?? new Date(), this.timezone, {
-            locale: this.locale,
+            locale: this.resolvedLocale,
         });
         return html `<p id="timezone-label">${label}</p>`;
     }
@@ -984,6 +994,8 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
             minute: parts.minute,
             period,
             stepMinute: this.stepMinute,
+            minTime: parseTimeOfDay(this.minTime),
+            maxTime: parseTimeOfDay(this.maxTime),
             disabled: this.disabled,
             noAnimation: this.noAnimation,
             labels: this.dictionary.timePicker,
@@ -1003,8 +1015,10 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
             format,
             hour: parts.hour,
             minute: parts.minute,
-            locale: this.locale,
+            locale: this.resolvedLocale,
             stepMinutes: this.listStepMinutes,
+            minTime: parseTimeOfDay(this.minTime),
+            maxTime: parseTimeOfDay(this.maxTime),
             disabled: this.disabled,
             ariaLabel: this.label ?? this.dictionary.timePicker.time,
             onPick: this.handleListPick,
@@ -1019,7 +1033,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
             return this.dictionary.timePicker.selectATime;
         }
         const format = this.resolvedHourFormat();
-        return new Intl.DateTimeFormat(this.locale, {
+        return new Intl.DateTimeFormat(this.resolvedLocale, {
             hour: "numeric",
             minute: "2-digit",
             hourCycle: format === 12 ? "h12" : "h23",
@@ -1043,7 +1057,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
       </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.dictionary.timePicker.selectATime}