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

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

@@ -15,7 +15,7 @@ import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
 import { FormMixin } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { EditableMixin, } from "../../../mixins/editable.mixin.js";
-import { FieldVariantMixin, } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { findRichTextColor, formatRichText, getPlainTextLength, populateEditableRoot, RICH_TEXT_COLORS, serializeEditableRoot, splitAlign, } from "../../../utils/rich-text.utils.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
@@ -467,7 +467,7 @@ function getActiveColorName(root, kind) {
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaTextareaMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))));
+const EunomiaTextareaMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))));
 /**
  * A multi-line text field, sharing its label, hint, and error chrome and
  * theming with the input component. It grows and shrinks to fit its
@@ -485,7 +485,7 @@ const EunomiaTextareaMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(
  * typed by hand. See the Accessibility tab for the full keyboard and ARIA
  * details of the toolbar and both readonly behaviors.
  *
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} placeholder - The placeholder shown when the field is empty
@@ -495,7 +495,8 @@ const EunomiaTextareaMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether the field is required
- * @prop {boolean} [hideError=false] - Whether the errors are hidden
+ * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<string>>} validators - The list of validation rules applied to the field value
  * @prop {number} rows - The fixed number of visible rows. When omitted, the field automatically grows and shrinks its height to fit its content
  * @prop {boolean} [readonlyAvailable=false] - Whether the field can switch between a static display and an editable one
@@ -527,6 +528,8 @@ const EunomiaTextareaMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(
  * @cssprop [--field-border-color-focus] - Sets the border color on focus
  * @cssprop [--field-border-radius] - Sets the corner radius of the field
  * @cssprop [--field-padding] - Sets the padding of the field
+ * @cssprop [--field-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --field-padding is set
+ * @cssprop [--field-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --field-padding is set
  * @cssprop [--field-text-color] - Sets the text color of the field
  * @cssprop [--field-placeholder-color] - Sets the color of the placeholder
  * @cssprop [--field-error-color] - Sets the color of the error message
@@ -535,6 +538,9 @@ const EunomiaTextareaMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(
  * @cssprop [--field-edit-confirm-color] - Sets the color of the confirm button in readonly-available edit mode
  * @cssprop [--field-edit-cancel-color] - Sets the color of the cancel button in readonly-available edit mode
  * @cssprop [--field-shadow] - Sets a box shadow on the field, none by default
+ * @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-textarea
  */
 let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
@@ -996,13 +1002,13 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         if (this.minlength !== undefined && length > 0 && length < this.minlength) {
             return {
                 validity: { tooShort: true },
-                message: `Please lengthen this text to ${this.minlength} characters or more (you are currently using ${length} characters).`,
+                message: this.validationDictionary.validation.tooShort(this.minlength, length),
             };
         }
         if (this.maxlength !== undefined && length > this.maxlength) {
             return {
                 validity: { tooLong: true },
-                message: `Please shorten this text to ${this.maxlength} characters or less (you are currently using ${length} characters).`,
+                message: this.validationDictionary.validation.tooLong(this.maxlength, length),
             };
         }
         return { validity: {} };
@@ -1204,7 +1210,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
                 return;
             }
             this.handleEditableInput();
-            this.updateComplete.then(() => {
+            void this.updateComplete.then(() => {
                 root.focus();
                 this.syncToolbarToSelection();
             });
@@ -1260,7 +1266,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         const [align] = event.target.value;
         root.style.textAlign = align === "start" ? "" : align;
         this.handleEditableInput();
-        this.updateComplete.then(() => root.focus());
+        void this.updateComplete.then(() => root.focus());
     }
     /**
      * Opens or closes a color picker popover, wiring up (or tearing down) the
@@ -1321,7 +1327,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
             }
         }
         this.closeColorPicker();
-        this.updateComplete.then(() => this.fieldEl?.focus());
+        void this.updateComplete.then(() => this.fieldEl?.focus());
     }
     /**
      * Renders the formatting toolbar, shown above the field itself (never
@@ -1539,7 +1545,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         ?required=${this.required}
         minlength=${ifDefined(this.minlength)}
         maxlength=${ifDefined(this.maxlength)}
-        aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+        aria-invalid=${this.showError}
         aria-label=${ifDefined(this.label)}
         aria-describedby=${describedBy || nothing}
         @input=${this.handleInput}
@@ -1570,7 +1576,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         role="textbox"
         aria-multiline="true"
         aria-required=${this.required ? "true" : nothing}
-        aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+        aria-invalid=${this.showError}
         aria-label=${ifDefined(this.label)}
         aria-describedby=${describedBy || nothing}
         @beforeinput=${this.handleEditableBeforeInput}
@@ -1625,7 +1631,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
             <eun-button
               class="cancel"
               size="s"
-              variant="critical"
+              color="critical"
               appearance="flat"
               rounded
               type="button"

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

@@ -4,7 +4,7 @@ import { ReadonlyMixinInterface } from "../../../mixins/readonly.mixin.js";
 import { ValidatorsMixinInterface, Validity } from "../../../mixins/validators.mixin.js";
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
-import { FieldVariantMixinInterface } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { AnchorPositionMixinInterface } from "../../../mixins/anchor-position.mixin.js";
 import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
@@ -19,7 +19,7 @@ export declare const EunomiaTimePickerTagName = "eun-time-picker";
  * interface element.
  * @internal
  */
-type EunomiaTimePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
+type EunomiaTimePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
 /**
  * A time field entered across segmented numeric hour and minute inputs,
@@ -39,7 +39,7 @@ declare const EunomiaTimePickerMixinBase: Constructor<EunomiaTimePickerBase>;
  * each hour, minute, and period column is its own spin button, grouped
  * under a labeled group.
  *
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {Date | null} value - The picked instant
  * @prop {Date | null} defaultValue - The default value applied when the field connects, and restored on form reset
  * @prop {string} [timezone] - The time zone the hour and minute are displayed and edited in. Defaults to the runtime's own
@@ -64,7 +64,8 @@ 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 {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
@@ -96,6 +97,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 {
@@ -429,7 +433,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,9 +9,9 @@ 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 { FieldVariantMixin, } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
 import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
@@ -24,6 +24,8 @@ 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";
 /**
  * Tag name of the time-picker component.
  */
@@ -34,7 +36,7 @@ export const EunomiaTimePickerTagName = "eun-time-picker";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldVariantMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
+const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
 /**
  * A time field entered across segmented numeric hour and minute inputs,
  * plus an AM/PM toggle segment at a 12-hour format, with a trailing clock
@@ -53,7 +55,7 @@ const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldVar
  * each hour, minute, and period column is its own spin button, grouped
  * under a labeled group.
  *
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
  * @prop {Date | null} value - The picked instant
  * @prop {Date | null} defaultValue - The default value applied when the field connects, and restored on form reset
  * @prop {string} [timezone] - The time zone the hour and minute are displayed and edited in. Defaults to the runtime's own
@@ -78,7 +80,8 @@ const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldVar
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether the field is required
- * @prop {boolean} [hideError=false] - Whether the errors are hidden
+ * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<Validators<Date | null>>} validators - The list of custom validation rules applied to the value
  * @prop {string} [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
@@ -110,6 +113,9 @@ const EunomiaTimePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldVar
  * @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 {
@@ -227,7 +233,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 +294,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 +327,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;
@@ -469,10 +478,8 @@ 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));
         }
     }
     /**
@@ -498,7 +505,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 +606,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 +616,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 +634,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 +672,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(() => {
@@ -949,7 +945,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, {

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)) {
@@ -55,22 +55,22 @@ const timePicker = css `
   :host([aria-invalid="true"]) #field-wrapper:focus-within {
     outline-color: var(--_errorColor);
   }
-  :host([variant="fill"]) {
+  :host([appearance="flat"]) {
     --_background: var(--field-background, var(--eun-content-hover, #edeff0));
   }
-  :host([variant="fill"]) #field-wrapper {
+  :host([appearance="flat"]) #field-wrapper {
     border-color: transparent;
   }
-  :host([variant="fill"][aria-invalid="true"]) #field-wrapper {
+  :host([appearance="flat"][aria-invalid="true"]) #field-wrapper {
     box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
-  :host([variant="underline"]) #field-wrapper {
+  :host([appearance="underline"]) #field-wrapper {
     border: none;
     outline: none;
     border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
-  :host([variant="underline"]) #field-wrapper:focus-within {
+  :host([appearance="underline"]) #field-wrapper:focus-within {
     outline: none;
   }
   .segment-group {
@@ -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
      */
@@ -129,6 +149,16 @@ export declare class EunomiaAnimate extends LitElement {
      * @private
      */
     private teardownObserver;
+    /**
+     * 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;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/layout/animate/animate.js

@@ -5,8 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, property } from "lit/decorators.js";
-import { html, LitElement } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { animateStyles } from "./animate.styles.js";
+import { mediaBelow } from "../../../breakpoints.js";
 /**
  * Tag name of the animate component.
  */
@@ -31,14 +32,19 @@ const IN_VIEW_ATTR = "in-view";
  *
  * @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
  */
 let EunomiaAnimate = class EunomiaAnimate extends LitElement {
@@ -51,11 +57,6 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
          * @default fade
          */
         this.animation = "fade";
-        /**
-         * Transition duration, in milliseconds.
-         * @default 600
-         */
-        this.duration = 600;
         /**
          * Transition delay, in milliseconds.
          * @default 0
@@ -105,12 +106,6 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has("duration")) {
-            this.style.setProperty("--_duration", `${this.duration}ms`);
-        }
-        if (changed.has("delay")) {
-            this.style.setProperty("--_delay", `${this.delay}ms`);
-        }
         if (this.isConnected &&
             (changed.has("animation") ||
                 changed.has("tabletAnimation") ||
@@ -155,8 +150,39 @@ let EunomiaAnimate = class EunomiaAnimate extends LitElement {
         this.observer?.disconnect();
         this.observer = undefined;
     }
+    /**
+     * 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
+     */
+    renderTiming() {
+        const host = [
+            this.duration !== undefined
+                ? `--_duration: ${Number(this.duration)}ms;`
+                : "",
+            this.delay !== 0 ? `--_delay: ${Number(this.delay)}ms;` : "",
+        ].join("");
+        const rules = [
+            host ? `:host { ${host} }` : "",
+            this.tabletDelay !== undefined
+                ? `@media ${mediaBelow("tablet")} { :host { --_delay: ${Number(this.tabletDelay)}ms; } }`
+                : "",
+            this.mobileDelay !== undefined
+                ? `@media ${mediaBelow("mobile")} { :host { --_delay: ${Number(this.mobileDelay)}ms; } }`
+                : "",
+        ].join("");
+        return rules
+            ? html `<style>
+          ${rules}
+        </style>`
+            : nothing;
+    }
     render() {
-        return html `<slot></slot>`;
+        return html `${this.renderTiming()}<slot></slot>`;
     }
 };
 /**
@@ -176,6 +202,12 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], EunomiaAnimate.prototype, "delay", void 0);
+__decorate([
+    property({ type: Number, attribute: "tablet-delay" })
+], EunomiaAnimate.prototype, "tabletDelay", void 0);
+__decorate([
+    property({ type: Number, attribute: "mobile-delay" })
+], EunomiaAnimate.prototype, "mobileDelay", void 0);
 __decorate([
     property({ type: Boolean })
 ], EunomiaAnimate.prototype, "once", void 0);