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

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

@@ -35,8 +35,8 @@ export interface TimePickerColumnsProps {
     ariaLabelHour?: string;
     ariaLabelMinute?: string;
     ariaLabelPeriod?: string;
-    ariaLabelIncrement?: string;
-    ariaLabelDecrement?: string;
+    incrementLabel?: string;
+    decrementLabel?: string;
     onHourChange: (hour24: number) => void;
     onMinuteChange: (minute: number) => void;
     onPeriodChange: (period: Period) => void;

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

@@ -73,8 +73,8 @@ export function renderTimePickerColumns(props) {
         disabled,
         noAnimation,
         label: props.ariaLabelHour ?? "Hour",
-        ariaLabelIncrement: props.ariaLabelIncrement ?? "Increase hour",
-        ariaLabelDecrement: props.ariaLabelDecrement ?? "Decrease hour",
+        incrementLabel: props.incrementLabel ?? "Increase hour",
+        decrementLabel: props.decrementLabel ?? "Decrease hour",
         min: hourMin,
         max: hourMax,
         current: display.hour,
@@ -89,8 +89,8 @@ export function renderTimePickerColumns(props) {
         disabled,
         noAnimation,
         label: props.ariaLabelMinute ?? "Minute",
-        ariaLabelIncrement: props.ariaLabelIncrement ?? "Increase minute",
-        ariaLabelDecrement: props.ariaLabelDecrement ?? "Decrease minute",
+        incrementLabel: props.incrementLabel ?? "Increase minute",
+        decrementLabel: props.decrementLabel ?? "Decrease minute",
         min: 0,
         max: 59,
         current: minute,
@@ -106,8 +106,8 @@ export function renderTimePickerColumns(props) {
             disabled,
             noAnimation,
             label: props.ariaLabelPeriod ?? "AM/PM",
-            ariaLabelIncrement: props.ariaLabelIncrement ?? "Toggle AM/PM",
-            ariaLabelDecrement: props.ariaLabelDecrement ?? "Toggle AM/PM",
+            incrementLabel: props.incrementLabel ?? "Toggle AM/PM",
+            decrementLabel: props.decrementLabel ?? "Toggle AM/PM",
             min: 0,
             max: 1,
             current: period === "AM" ? 0 : 1,
@@ -164,7 +164,7 @@ function renderColumn(config) {
         type="button"
         class="tp-arrow tp-arrow-up"
         tabindex="-1"
-        aria-label=${config.ariaLabelIncrement}
+        aria-label=${config.incrementLabel}
         ?disabled=${disabled}
         @click=${() => onStep(1)}
       >
@@ -194,7 +194,7 @@ function renderColumn(config) {
         type="button"
         class="tp-arrow tp-arrow-down"
         tabindex="-1"
-        aria-label=${config.ariaLabelDecrement}
+        aria-label=${config.decrementLabel}
         ?disabled=${disabled}
         @click=${() => onStep(-1)}
       >

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

@@ -36,7 +36,8 @@ const timePickerColumns = css `
     padding: var(--eun-space-xxs, 1.6px);
     color: var(--_iconColor, var(--eun-text-secondary, #484e61));
     cursor: pointer;
-    transition: background-color 0.15s ease;
+    transition: background-color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   .tp-arrow:hover:not(:disabled) {
     background-color: var(
@@ -109,7 +110,8 @@ const timePickerColumns = css `
     color: var(--_placeholderColor, var(--eun-color-grey-400, #c1c9d6));
     font: inherit;
     cursor: pointer;
-    transition: color 0.15s ease;
+    transition: color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   .tp-wheel-item.selected {
     color: var(--_textColor, var(--eun-text-color, #071621));

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

@@ -27,7 +27,8 @@ const timePickerList = css `
     font-variant-numeric: tabular-nums;
     text-align: start;
     cursor: pointer;
-    transition: background-color 0.15s ease;
+    transition: background-color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   .tp-list-item:hover:not(:disabled) {
     background-color: var(

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

@@ -64,14 +64,16 @@ declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
  * @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} [applyLabel='Apply'] - The label of the mobile modal's confirm button
  * @attr {string} [apply-label='Apply'] - The label of the mobile modal's confirm button
- * @prop {string} [cancelLabel='Cancel'] - The label of the mobile modal's cancel button
- * @attr {string} [cancel-label='Cancel'] - The label of the mobile modal's cancel button
- * @prop {string} [ariaLabelClock='Open clock'] - The accessible label of the trailing clock button
- * @attr {string} [aria-label-clock='Open clock'] - The accessible label of the trailing clock button
+ * @prop {string} [cancelLabel] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @attr {string} [cancel-label] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [clockLabel] - The accessible label of the trailing clock button. Defaults to the localized string for the current locale (English: "Open clock")
+ * @attr {string} [clock-label] - The accessible label of the trailing clock button. Defaults to the localized string for the current locale (English: "Open clock")
  * @prop {string} [hourPlaceholder='hh'] - The placeholder shown in the empty hour segment
  * @attr {string} [hour-placeholder='hh'] - The placeholder shown in the empty hour segment
  * @prop {string} [minutePlaceholder='mm'] - The placeholder shown in the empty minute segment
@@ -96,6 +98,9 @@ declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
  * @cssprop [--time-picker-selected-color] - Sets the text color of the selected item in the list panel mode
  * @cssprop [--time-picker-panel-background] - Sets the background color of the popover panel
  * @cssprop [--time-picker-panel-transition-duration=200ms] - Sets the duration of the popover panel's open and close transition
+ * @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-time-picker
  */
 export declare class EunomiaTimePicker extends EunomiaTimePickerMixinBase {
@@ -182,14 +187,14 @@ export declare class EunomiaTimePicker extends EunomiaTimePickerMixinBase {
     applyLabel: string;
     /**
      * Label of the mobile modal's cancel button.
-     * @default Cancel
+     * Falls back to the localized string for the current locale when unset.
      */
-    cancelLabel: string;
+    cancelLabel?: string;
     /**
      * Accessible label of the trailing clock button.
-     * @default Open clock
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelClock: string;
+    clockLabel?: string;
     /**
      * Placeholder shown in the empty hour segment.
      * @default hh
@@ -223,6 +228,15 @@ export declare class EunomiaTimePicker extends EunomiaTimePickerMixinBase {
      * @internal
      */
     private isOpen;
+    constructor();
+    /**
+     * Submits the owning form on Enter in one of the field's segments, as a
+     * native time 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
+     */
+    private readonly handleImplicitSubmission;
     /**
      * Whether the mobile modal is open.
      * @internal
@@ -323,6 +337,12 @@ export declare class EunomiaTimePicker extends EunomiaTimePickerMixinBase {
      * @returns validity state and optional message.
      */
     checkLocalValidators: () => Validity;
+    /**
+     * 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.
+     */
+    protected get hostTabStop(): boolean;
     /**
      * Returns the first segment element to focus/anchor on validation errors.
      *
@@ -429,7 +449,7 @@ export declare class EunomiaTimePicker extends EunomiaTimePickerMixinBase {
      * The popover's open/close animation duration, in ms : `0` if
      * `noAnimation` is set or the browser reports `prefers-reduced-motion:
      * reduce`, otherwise `--time-picker-panel-transition-duration` (default
-     * `200ms`).
+     * `--eun-duration-m`).
      *
      * @param el the popover to read `--time-picker-panel-transition-duration` off.
      * @private

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

@@ -9,7 +9,7 @@ import { html, LitElement, nothing } from "lit";
 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";
@@ -24,6 +24,9 @@ import { timePickerColumnsStyles } from "./time-picker-columns.styles.js";
 import { renderTimePickerColumns } from "./time-picker-columns.js";
 import { timePickerListStyles } from "./time-picker-list.styles.js";
 import { renderTimePickerList } from "./time-picker-list.js";
+import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
+import { mediaBelow } from "../../../breakpoints.js";
+import { isImplicitSubmissionKey, submitImplicitly, } from "../../../utils/implicit-submission.utils.js";
 /**
  * Tag name of the time-picker component.
  */
@@ -78,14 +81,16 @@ const EunomiaTimePickerMixinBase = 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} [applyLabel='Apply'] - The label of the mobile modal's confirm button
  * @attr {string} [apply-label='Apply'] - The label of the mobile modal's confirm button
- * @prop {string} [cancelLabel='Cancel'] - The label of the mobile modal's cancel button
- * @attr {string} [cancel-label='Cancel'] - The label of the mobile modal's cancel button
- * @prop {string} [ariaLabelClock='Open clock'] - The accessible label of the trailing clock button
- * @attr {string} [aria-label-clock='Open clock'] - The accessible label of the trailing clock button
+ * @prop {string} [cancelLabel] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @attr {string} [cancel-label] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [clockLabel] - The accessible label of the trailing clock button. Defaults to the localized string for the current locale (English: "Open clock")
+ * @attr {string} [clock-label] - The accessible label of the trailing clock button. Defaults to the localized string for the current locale (English: "Open clock")
  * @prop {string} [hourPlaceholder='hh'] - The placeholder shown in the empty hour segment
  * @attr {string} [hour-placeholder='hh'] - The placeholder shown in the empty hour segment
  * @prop {string} [minutePlaceholder='mm'] - The placeholder shown in the empty minute segment
@@ -110,11 +115,31 @@ const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * @cssprop [--time-picker-selected-color] - Sets the text color of the selected item in the list panel mode
  * @cssprop [--time-picker-panel-background] - Sets the background color of the popover panel
  * @cssprop [--time-picker-panel-transition-duration=200ms] - Sets the duration of the popover panel's open and close transition
+ * @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-time-picker
  */
 let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBase {
+    /**
+     * The default value applied on connection and form reset. Overrides the
+     * `defaultValue` accessor inherited from `FormMixin` only to swap its
+     * attribute converter — the mixin's generic one always splits
+     * `default-value` on commas, which would silently produce the wrong thing
+     * for a `Date` ; matches `eun-date-picker`'s identical override. The
+     * actual get/set logic (applying the default when the field resets)
+     * still comes from `FormMixin` itself, via `super`.
+     * @default-value-format an ISO 8601 date-time string
+     */
+    get defaultValue() {
+        return super.defaultValue;
+    }
+    set defaultValue(value) {
+        // @ts-expect-error — see comment above ; FormMixin's real setter exists.
+        super.defaultValue = value;
+    }
     constructor() {
-        super(...arguments);
+        super();
         /**
          * The minute column's increment step, and which minute values the mobile
          * wheel enumerates (e.g. `15` only ever shows/lands on `:00`/`:15`/`:30`/
@@ -162,16 +187,6 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
          * @default Apply
          */
         this.applyLabel = "Apply";
-        /**
-         * Label of the mobile modal's cancel button.
-         * @default Cancel
-         */
-        this.cancelLabel = "Cancel";
-        /**
-         * Accessible label of the trailing clock button.
-         * @default Open clock
-         */
-        this.ariaLabelClock = "Open clock";
         /**
          * Placeholder shown in the empty hour segment.
          * @default hh
@@ -193,6 +208,25 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
          * @internal
          */
         this.isOpen = false;
+        /**
+         * Submits the owning form on Enter in one of the field's segments, as a
+         * native time 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);
+        };
         /**
          * Whether the mobile modal is open.
          * @internal
@@ -227,7 +261,10 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
             const format = this.resolvedHourFormat();
             if (isPartiallyFilled(this.segments) &&
                 !clockSegmentsToTime(this.segments, format)) {
-                return { validity: { badInput: true }, message: "Enter a valid time" };
+                return {
+                    validity: { badInput: true },
+                    message: this.dictionary.validation.invalidTime,
+                };
             }
             if (this.value) {
                 const { hour, minute } = getZonedParts(this.value, this.timezone);
@@ -285,7 +322,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
                 this.isModalOpen = true;
                 return;
             }
-            this.updateComplete.then(() => {
+            void this.updateComplete.then(() => {
                 const popover = this.popoverEl;
                 if (!popover) {
                     return;
@@ -318,7 +355,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
                     });
                 }
                 this.observeAnchorVisibility(this.fieldWrapperEl, () => this.closePopover());
-                this.updateComplete.then(() => this.panelMode === "list"
+                void this.updateComplete.then(() => this.panelMode === "list"
                     ? this.focusListSelection()
                     : this.focusFirstSpinbutton());
                 return;
@@ -402,23 +439,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
                     break;
             }
         };
-    }
-    /**
-     * The default value applied on connection and form reset. Overrides the
-     * `defaultValue` accessor inherited from `FormMixin` only to swap its
-     * attribute converter — the mixin's generic one always splits
-     * `default-value` on commas, which would silently produce the wrong thing
-     * for a `Date` ; matches `eun-date-picker`'s identical override. The
-     * actual get/set logic (applying the default when the field resets)
-     * still comes from `FormMixin` itself, via `super`.
-     * @default-value-format an ISO 8601 date-time string
-     */
-    get defaultValue() {
-        return super.defaultValue;
-    }
-    set defaultValue(value) {
-        // @ts-expect-error — see comment above ; FormMixin's real setter exists.
-        super.defaultValue = value;
+        this.addEventListener("keydown", this.handleImplicitSubmission);
     }
     /**
      * Lifecycle hook called before an update, ahead of render. Keeps the
@@ -469,12 +490,18 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
      */
     updated(changed) {
         super.updated(changed);
-        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 element to focus/anchor on validation errors.
      *
@@ -498,7 +525,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
      * @private
      */
     isMobileViewport() {
-        return window.matchMedia("(max-width: 767px)").matches;
+        return window.matchMedia(mediaBelow("tablet")).matches;
     }
     /**
      * The hour format actually in effect, resolving `hourFormat`/`locale`
@@ -599,7 +626,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
      * The popover's open/close animation duration, in ms : `0` if
      * `noAnimation` is set or the browser reports `prefers-reduced-motion:
      * reduce`, otherwise `--time-picker-panel-transition-duration` (default
-     * `200ms`).
+     * `--eun-duration-m`).
      *
      * @param el the popover to read `--time-picker-panel-transition-duration` off.
      * @private
@@ -609,18 +636,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
             window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
             return 0;
         }
-        const raw = getComputedStyle(el)
-            .getPropertyValue("--time-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, "--time-picker-panel-transition-duration", "m", 200);
     }
     /**
      * Plays the fade/scaleY-in, replacing any {@link popoverAnimation}
@@ -638,7 +654,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
         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
@@ -676,7 +692,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
         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(() => {
@@ -909,7 +925,8 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
         <div
           class="segment-group"
           role="group"
-          aria-label=${this.label ?? "Time"}
+          aria-label=${this.label ?? this.dictionary.timePicker.time}
+          aria-describedby=${this.description?.length ? "description" : nothing}
         >
           ${order.map((kind, index) => {
             const previous = order[index - 1];
@@ -928,7 +945,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
         <button
           type="button"
           id="clock-trigger"
-          aria-label=${this.ariaLabelClock}
+          aria-label=${this.clockLabel ?? this.dictionary.timePicker.openClock}
           aria-haspopup=${this.panelMode === "list" ? "listbox" : "dialog"}
           aria-expanded=${this.isOpen || this.isModalOpen ? "true" : "false"}
           ?disabled=${this.disabled}
@@ -949,7 +966,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
     renderTimezoneLabel() {
         if (this.hideTimezoneLabel ||
             !this.timezone ||
-            isSameTimeZone(this.timezone, undefined)) {
+            isSameTimeZone(this.timezone)) {
             return nothing;
         }
         const label = getTimeZoneOffsetLabel(this.value ?? new Date(), this.timezone, {
@@ -1039,7 +1056,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
         ?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.dictionary.timePicker.selectATime}
         @eunconfirm=${this.handleModalConfirm}
         @euncancel=${this.handleModalCancel}
@@ -1057,7 +1074,7 @@ let EunomiaTimePicker = class EunomiaTimePicker extends EunomiaTimePickerMixinBa
             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}
@@ -1117,8 +1134,8 @@ __decorate([
     property({ attribute: "cancel-label" })
 ], EunomiaTimePicker.prototype, "cancelLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-clock" })
-], EunomiaTimePicker.prototype, "ariaLabelClock", void 0);
+    property({ attribute: "clock-label" })
+], EunomiaTimePicker.prototype, "clockLabel", void 0);
 __decorate([
     property({ attribute: "hour-placeholder" })
 ], EunomiaTimePicker.prototype, "hourPlaceholder", void 0);

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

@@ -28,8 +28,8 @@ const timePicker = 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)) {
@@ -120,7 +120,8 @@ const timePicker = 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);
   }
   #clock-trigger:hover:not(:disabled) {
     color: var(--_textColor);

package/dist/components/layout/animate/animate.d.ts

@@ -20,14 +20,19 @@ export type EunomiaAnimateAnimation = "none" | "fade" | "scroll-right" | "scroll
  *
  * @slot [default] - The content to animate on scroll. Always present in the DOM and readable by assistive technology, regardless of viewport intersection
  * @prop {EunomiaAnimateAnimation} [animation='fade'] - Which transition to apply. None renders the content immediately, with no transition
- * @prop {number} [duration=600] - The transition duration, in milliseconds
+ * @prop {number} [duration=1000] - The transition duration, in milliseconds. Left unset, it follows --animate-duration
  * @prop {number} [delay=0] - The transition delay, in milliseconds
+ * @prop {number} [tabletDelay] - Overrides `delay` below the tablet breakpoint (width < 768px)
+ * @attr {number} [tablet-delay] - Overrides `delay` below the tablet breakpoint (width < 768px)
+ * @prop {number} [mobileDelay] - Overrides `delay` (and `tabletDelay`, if also set) below the mobile breakpoint (width < 600px)
+ * @attr {number} [mobile-delay] - Overrides `delay` (and `tabletDelay`, if also set) below the mobile breakpoint (width < 600px)
  * @prop {boolean} [once=true] - Whether the animation plays only the first time it enters the viewport, or replays every time it re-enters
  * @prop {number} [threshold=0.1] - The ratio of the element, from 0 to 1, that must be visible before the animation triggers
  * @prop {string} [rootMargin='0px'] - The margin applied around the viewport before threshold is evaluated, accepting CSS-like values such as -50px 0px
- * @prop {EunomiaAnimateAnimation} [tabletAnimation] - Overrides `animation` at tablet-width viewports and narrower (max-width: 768px). Left unset, the viewport keeps using `animation`
- * @prop {EunomiaAnimateAnimation} [mobileAnimation] - Overrides `animation` (and `tabletAnimation`, if also set) at mobile-width viewports and narrower (max-width: 600px)
+ * @prop {EunomiaAnimateAnimation} [tabletAnimation] - Overrides `animation` below the tablet breakpoint (width < 768px). Left unset, the viewport keeps using `animation`
+ * @prop {EunomiaAnimateAnimation} [mobileAnimation] - Overrides `animation` (and `tabletAnimation`, if also set) below the mobile breakpoint (width < 600px)
  * @cssprop [--animate-distance] - Sets the travel distance for the scroll and faded-scroll animations
+ * @cssprop [--animate-duration=1000ms] - Sets the transition duration of every animate that has no duration of its own, for example once for the whole site
  * @element eun-animate
  */
 export declare class EunomiaAnimate extends LitElement {
@@ -47,15 +52,30 @@ export declare class EunomiaAnimate extends LitElement {
      */
     animation: EunomiaAnimateAnimation;
     /**
-     * Transition duration, in milliseconds.
-     * @default 600
+     * Transition duration, in milliseconds. Left `undefined`, the stylesheet
+     * applies `--animate-duration`, `1000ms` by default.
+     * @default undefined
      */
-    duration: number;
+    duration?: number;
     /**
      * Transition delay, in milliseconds.
      * @default 0
      */
     delay: number;
+    /**
+     * Overrides `delay` at tablet-width viewports and narrower, with the same
+     * `@media` switch as {@link tabletAnimation}. A stagger between cards in
+     * a desktop grid, for example, makes no sense once they're stacked.
+     * @default undefined
+     */
+    tabletDelay?: number;
+    /**
+     * Overrides `delay` (and `tabletDelay`, if also set) at mobile-width
+     * viewports and narrower, with the same `@media` switch as
+     * {@link mobileAnimation}.
+     * @default undefined
+     */
+    mobileDelay?: number;
     /**
      * Whether the animation plays only the first time it enters the
      * viewport (unobserved right after), or replays every time it re-enters.
@@ -75,8 +95,8 @@ export declare class EunomiaAnimate extends LitElement {
      */
     rootMargin: string;
     /**
-     * Overrides `animation` at tablet-width viewports and narrower
-     * (`max-width: 768px`, matching `EUNOMIA_BREAKPOINTS.tablet`). Purely a
+     * Overrides `animation` below the tablet breakpoint
+     * (`mediaBelow("tablet")`, `width < 768px`). Purely a
      * CSS `@media` switch (`animate.styles.ts`, mirrored in
      * `animate-ssr.css` for the pre-hydration state) — never read from JS,
      * so there's no `matchMedia` listener to keep in sync with the actual
@@ -87,9 +107,9 @@ export declare class EunomiaAnimate extends LitElement {
      */
     tabletAnimation?: EunomiaAnimateAnimation;
     /**
-     * Overrides `animation` (and `tabletAnimation`, if also set) at
-     * mobile-width viewports and narrower (`max-width: 600px`, matching
-     * `EUNOMIA_BREAKPOINTS.mobile`). Same pure-CSS mechanism as
+     * Overrides `animation` (and `tabletAnimation`, if also set)
+     * below the mobile breakpoint (`mediaBelow("mobile")`,
+     * `width < 600px`). Same pure-CSS mechanism as
      * {@link tabletAnimation}.
      * @default undefined
      */
@@ -130,10 +150,12 @@ export declare class EunomiaAnimate extends LitElement {
      */
     private teardownObserver;
     /**
-     * Forwards `duration`/`delay` to the host's transition through a
-     * shadow-internal `<style>`, only when they differ from the stylesheet's
-     * own defaults : an inline style on the host would be a hydration
-     * mismatch for an SSR framework, since the server never renders it.
+     * Forwards `duration`, `delay` and the per-breakpoint delays to the
+     * host's transition through a shadow-internal `<style>`, only when they
+     * differ from the stylesheet's own defaults : an inline style on the host
+     * would be a hydration mismatch for an SSR framework, since the server
+     * never renders it. The breakpoints match {@link tabletAnimation} and
+     * {@link mobileAnimation}.
      * @private
      */
     private renderTiming;