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

package/dist/components/form/select/select.js

@@ -22,6 +22,7 @@ import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { selectStyles } from "./select.styles.js";
 import { isWebKit } from "../../../utils/browser.utils.js";
 import { parseListboxOptions, renderHighlightedLabel, } from "../../../utils/listbox-options.utils.js";
+import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
 /**
  * Tag name of the select component.
  */
@@ -67,7 +68,8 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabe
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether a selection 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<string | string[]>>} validators - The list of validation rules applied to the field value
  * @prop {EunomiaIconName} icon - An optional leading icon
  * @prop {string} [placeholder] - The placeholder shown when the field is empty. Defaults to searchPlaceholder when searchable, and selectPlaceholder otherwise
@@ -93,9 +95,12 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabe
  * @cssprop [--field-border-color-focus] - Sets the border color on focus
  * @cssprop [--field-border-radius] - Sets the corner radius of the field
  * @cssprop [--field-padding] - Sets the padding of the field
+ * @cssprop [--field-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --field-padding is set
+ * @cssprop [--field-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --field-padding is set
  * @cssprop [--field-text-color] - Sets the text color of the field
  * @cssprop [--field-placeholder-color] - Sets the color of the placeholder
  * @cssprop [--field-icon-color] - Sets the color of the leading icon and the dropdown arrow
+ * @cssprop [--field-loader-color] - Sets the color of the spinner shown while loading, the icon color by default. Shared with the search component
  * @cssprop [--field-error-color] - Sets the color of the error message
  * @cssprop [--field-hint-color] - Sets the color of the hint message
  * @cssprop [--field-focus-outline-color] - Sets the color of the focus outline
@@ -109,6 +114,9 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabe
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the dropdown panel's open and close height transition, disabled entirely by the no-animation attribute or reduced motion settings
  * @cssprop [--eun-viewport-inset-top] - Reserves space, such as a page's sticky header height, that the dropdown panel keeps clear of at the top of the viewport. Set on the root or an ancestor rather than on the field itself
  * @cssprop [--eun-viewport-inset-bottom] - The same as eun-viewport-inset-top, reserved at the bottom of the viewport, such as for a sticky footer
+ * @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-select
  */
 let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectMixinBase {
@@ -656,7 +664,7 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
      * The listbox's open/close animation duration, in ms : `0` if `
      * noAnimation` is set or the browser reports `prefers-reduced-motion:
      * reduce`, otherwise `--field-listbox-transition-duration` (default
-     * `200ms`).
+     * `--eun-duration-m`).
      *
      * @param el the listbox to read `--field-listbox-transition-duration` off.
      * @private
@@ -666,18 +674,7 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
             window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
             return 0;
         }
-        const raw = getComputedStyle(el)
-            .getPropertyValue("--field-listbox-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, "--field-listbox-transition-duration", "m", 200);
     }
     /**
      * Plays the fade/scaleY-in, replacing any {@link listboxAnimation}
@@ -695,7 +692,7 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
         this.listboxAnimation = listbox.animate([
             { opacity: 0, transform: "scaleY(0.01)" },
             { opacity: 1, transform: "scaleY(1)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(listbox), fill: "forwards" });
     }
     /**
      * Closes the dropdown panel, if open. All state cleanup happens in
@@ -738,7 +735,7 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
         const animation = listbox.animate([
             { opacity: 1, transform: "scaleY(1)" },
             { opacity: 0, transform: "scaleY(0.01)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(listbox), fill: "forwards" });
         this.listboxAnimation = animation;
         animation.finished
             .then(() => {
@@ -1176,7 +1173,7 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
           aria-describedby=${hasDescription ? "description" : nothing}
           ?disabled=${this.disabled || this.readonly}
           ?required=${this.required}
-          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+          aria-invalid=${this.showError}
           @change=${this.handleNativeChange}
         ></select>
         ${this.showConfirmLink ? this.renderConfirmLink() : nothing}
@@ -1225,7 +1222,7 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
           ?disabled=${this.disabled}
           ?readonly=${this.readonly || !this.searchable}
           aria-required=${this.required ? "true" : "false"}
-          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+          aria-invalid=${this.showError}
           @pointerdown=${this.handleFieldPointerDown}
           @focus=${this.handleFieldActivate}
           @click=${this.handleFieldActivate}

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

@@ -28,7 +28,8 @@ const select = css `
     pointer-events: none;
     color: var(--_iconColor);
     font-size: var(--eun-font-size-s, 14px);
-    transition: transform 0.15s ease;
+    transition: transform var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   #select-arrow.open {
     transform: rotate(180deg);
@@ -37,7 +38,7 @@ const select = css `
     position: absolute;
     right: var(--eun-space-m, 16px);
     pointer-events: none;
-    color: var(--_iconColor);
+    color: var(--field-loader-color, var(--_iconColor));
   }
   .has-icon #field {
     padding-inline-start: calc(

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

@@ -69,9 +69,9 @@ const base = css `
     outline: 2px solid transparent;
     cursor: pointer;
     transition:
-      outline 0.2s ease-out,
-      border-color 0.15s ease,
-      background 0.15s ease;
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease),
+      background var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
     user-select: none;
   }
 
@@ -82,7 +82,8 @@ const base = css `
     display: block;
     color: var(--_iconColor);
     margin-block-end: var(--eun-space-s, 8px);
-    transition: color 0.15s ease;
+    transition: color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
 
   slot {

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

@@ -9,11 +9,16 @@ import { css } from "lit";
  * [--field-border-color-focus] - Set a custom border color on focus state
  * [--field-border-radius] - Set a custom border radius to the field
  * [--field-padding] - Set a custom padding to the field
+ * [--field-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --field-padding is set
+ * [--field-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --field-padding is set
  * [--field-text-color] - Set a custom text color
  * [--field-placeholder-color] - Set a custom placeholder color
  * [--field-icon-color] - Set a custom color to the leading icon and action buttons
  * [--field-error-color] - Set a custom color to the error state content
  * [--field-hint-color] - Set a custom color to the hint message
+ * [--field-font-size] - Set a custom font size for the field's value and placeholder
+ * [--field-label-font-size] - Set a custom font size for the label (see label.styles.ts)
+ * [--field-message-font-size] - Set a custom font size for the hint, error and instructions (see form-labels.styles.ts)
  * [--field-focus-outline-color] - Set a custom color to the focus outline
  * [--field-edit-confirm-color] - Set a custom color for the confirm button in `readonly-available` edit mode
  * [--field-edit-cancel-color] - Set a custom color for the cancel button in `readonly-available` edit mode
@@ -38,14 +43,18 @@ const base = css `
       --field-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
     );
-    --_borderRadius: var(--field-border-radius, var(--eun-border-radius-m, 8px));
+    --_borderRadius: var(
+      --field-border-radius,
+      var(--eun-border-radius-m, 8px)
+    );
     --_padding: var(
       --field-padding,
-      var(--eun-space-s, 8px) var(--eun-space-s, 8px)
+      var(--field-padding-block, var(--eun-space-s, 8px))
+        var(--field-padding-inline, var(--eun-space-s, 8px))
     );
     --_shadow: var(--field-shadow, none);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--field-font-size, var(--eun-font-size-s, 14px));
     display: block;
     width: 100%;
     outline: none;
@@ -72,8 +81,8 @@ const base = css `
     box-shadow: var(--_shadow);
     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);
     appearance: none;
   }
   #field::placeholder {
@@ -176,7 +185,8 @@ const base = css `
     border-radius: var(--_borderRadius);
     box-sizing: border-box;
     cursor: text;
-    transition: background-color 0.15s ease;
+    transition: background-color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   #readonly-display:hover {
     background-color: var(--eun-content-hover, #edeff0);

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

@@ -4,7 +4,7 @@ const base = css `
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     display: block;
     margin-block-start: var(--eun-space-xs, 4px);
-    font-size: var(--eun-font-size-xs, 12px);
+    font-size: var(--field-message-font-size, var(--eun-font-size-xs, 12px));
     margin-block: 0;
   }
   #description span {

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

@@ -45,7 +45,8 @@ declare const EunomiaSliderMixinBase: Constructor<EunomiaSliderBase>;
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Present for API consistency with every other field, but inert here, since a slider's value can never be empty the way a text field's can
- * @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
  * @attr {boolean} [hide-error=false] - Whether the errors are hidden
  * @prop {boolean} [hideTooltip=false] - Hides the floating value bubble that otherwise appears above the thumb while dragging or focused
  * @attr {boolean} [hide-tooltip=false] - Hides the floating value bubble that otherwise appears above the thumb while dragging or focused
@@ -71,6 +72,8 @@ declare const EunomiaSliderMixinBase: Constructor<EunomiaSliderBase>;
  * @cssprop [--slider-error-color] - Sets the color of the error message
  * @cssprop [--slider-hint-color] - Sets the color of the hint message
  * @cssprop [--slider-focus-outline-color] - Sets the color of the focus outline drawn around the thumb
+ * @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-slider
  */
 export declare class EunomiaSlider extends EunomiaSliderMixinBase {

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

@@ -57,7 +57,8 @@ const EunomiaSliderMixinBase = FormLabelMixin(ReadonlyMixin(FormMixin(Base)));
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Present for API consistency with every other field, but inert here, since a slider's value can never be empty the way a text field's can
- * @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
  * @attr {boolean} [hide-error=false] - Whether the errors are hidden
  * @prop {boolean} [hideTooltip=false] - Hides the floating value bubble that otherwise appears above the thumb while dragging or focused
  * @attr {boolean} [hide-tooltip=false] - Hides the floating value bubble that otherwise appears above the thumb while dragging or focused
@@ -83,6 +84,8 @@ const EunomiaSliderMixinBase = FormLabelMixin(ReadonlyMixin(FormMixin(Base)));
  * @cssprop [--slider-error-color] - Sets the color of the error message
  * @cssprop [--slider-hint-color] - Sets the color of the hint message
  * @cssprop [--slider-focus-outline-color] - Sets the color of the focus outline drawn around the thumb
+ * @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-slider
  */
 let EunomiaSlider = class EunomiaSlider extends EunomiaSliderMixinBase {
@@ -431,7 +434,7 @@ let EunomiaSlider = class EunomiaSlider extends EunomiaSliderMixinBase {
             step=${this.step}
             .value=${String(value)}
             ?disabled=${this.disabled}
-            aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+            aria-invalid=${this.showError}
             aria-label=${ifDefined(this.label)}
             aria-describedby=${hasDescription ? "description" : nothing}
             @input=${this.handleInput}

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

@@ -96,7 +96,8 @@ const base = css `
     border-radius: 50%;
     background: var(--_tickColor);
     transform: translate(-50%, -50%);
-    transition: background-color 0.15s ease;
+    transition: background-color var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
 
   .tick.tick-active {
@@ -173,9 +174,9 @@ const base = css `
     outline: 2px solid transparent;
     cursor: grab;
     transition:
-      transform 0.1s ease,
-      outline 0.2s ease-out,
-      outline-color 0.15s ease;
+      transform var(--eun-duration-xs, 100ms) var(--eun-easing-default, ease),
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      outline-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
   }
 
   #field:active::-webkit-slider-thumb {
@@ -211,9 +212,9 @@ const base = css `
     outline: 2px solid transparent;
     cursor: grab;
     transition:
-      outline 0.2s ease-out,
-      transform 0.1s ease,
-      outline-color 0.15s ease;
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      transform var(--eun-duration-xs, 100ms) var(--eun-easing-default, ease),
+      outline-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
   }
 
   #field:active::-moz-range-thumb {

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

@@ -38,7 +38,8 @@ declare const EunomiaSwitchMixinBase: Constructor<EunomiaSwitchBase>;
  * @prop {boolean} [readonly=false] - Whether the switch is read only
  * @prop {boolean} [hideIcon=false] - Whether the icon inside the thumb is hidden
  * @attr {boolean} [hide-icon=false] - Whether the icon inside the thumb is hidden
- * @prop {boolean} [hideError=false] - Whether the error message is 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
  * @attr {boolean} [hide-error=false] - Whether the error message is hidden
  * @prop {boolean} [required=false] - Whether the switch must be turned on to be valid
  * @prop {string} name - The name of the switch field
@@ -62,6 +63,8 @@ declare const EunomiaSwitchMixinBase: Constructor<EunomiaSwitchBase>;
  * @cssprop [--switch-error-color] - Sets the color of the error message
  * @cssprop [--switch-hint-color] - Sets the color of the hint message
  * @cssprop [--switch-focus-outline-color] - Sets the color of the focus outline
+ * @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
  * @fires click - Fired when the switch is clicked
  * @fires {ChangeEvent} eunchange - Fired when the switch's checked state changes
  * @element eun-switch

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

@@ -43,7 +43,8 @@ const EunomiaSwitchMixinBase = CheckMixin(ReadonlyMixin(FormMixin(DisabledMixin(
  * @prop {boolean} [readonly=false] - Whether the switch is read only
  * @prop {boolean} [hideIcon=false] - Whether the icon inside the thumb is hidden
  * @attr {boolean} [hide-icon=false] - Whether the icon inside the thumb is hidden
- * @prop {boolean} [hideError=false] - Whether the error message is 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
  * @attr {boolean} [hide-error=false] - Whether the error message is hidden
  * @prop {boolean} [required=false] - Whether the switch must be turned on to be valid
  * @prop {string} name - The name of the switch field
@@ -67,6 +68,8 @@ const EunomiaSwitchMixinBase = CheckMixin(ReadonlyMixin(FormMixin(DisabledMixin(
  * @cssprop [--switch-error-color] - Sets the color of the error message
  * @cssprop [--switch-hint-color] - Sets the color of the hint message
  * @cssprop [--switch-focus-outline-color] - Sets the color of the focus outline
+ * @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
  * @fires click - Fired when the switch is clicked
  * @fires {ChangeEvent} eunchange - Fired when the switch's checked state changes
  * @element eun-switch

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

@@ -39,7 +39,7 @@ const base = css `
     );
     --_trackBorderWidth: var(--eun-border-width-s, 1px);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--field-label-font-size, var(--eun-font-size-s, 14px));
     display: flex;
     width: 100%;
     outline: none;
@@ -166,9 +166,10 @@ const base = css `
     box-sizing: border-box;
     outline: 2px solid transparent;
     transition:
-      background-color 0.15s ease,
-      outline 0.3s ease,
-      border-color 0.15s ease;
+      background-color var(--eun-duration-s, 150ms)
+        var(--eun-easing-default, ease),
+      outline var(--eun-duration-xl, 300ms) var(--eun-easing-default, ease),
+      border-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
   }
 
   #thumb {
@@ -183,7 +184,8 @@ const base = css `
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: transform 0.15s ease;
+    transition: transform var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   :host([aria-checked="true"]) #thumb {
     transform: translateX(

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

@@ -44,7 +44,8 @@ declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
  * @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
@@ -76,6 +77,8 @@ declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
  * @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
@@ -84,6 +87,9 @@ declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
  * @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
  */
 export declare class EunomiaTextarea extends EunomiaTextareaMixinBase {

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

@@ -495,7 +495,8 @@ const EunomiaTextareaMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMix
  * @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 = FieldAppearanceMixin(FormLabelMixin(ReadonlyMix
  * @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 = FieldAppearanceMixin(FormLabelMixin(ReadonlyMix
  * @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}

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,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