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

package/dist/components/form/input-phone/input-phone.d.ts

@@ -54,7 +54,8 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * @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<string>>} validators - The list of validation rules applied to the field value
  * @prop {string} [placeholder] - The placeholder shown when the field is empty. Defaults to a generic formatted digit pattern, not a real per-country example, when unset
  * @prop {string} [countrySearchPlaceholder='Search a country…'] - The placeholder of the search field inside the country dropdown
@@ -70,6 +71,8 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * @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 country selector button
@@ -80,6 +83,9 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the dropdown panel's open and close height transition, disabled entirely under 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-input-phone
  */
 export declare class EunomiaInputPhone extends EunomiaInputPhoneMixinBase {
@@ -290,7 +296,7 @@ export declare class EunomiaInputPhone extends EunomiaInputPhoneMixinBase {
     /**
      * The listbox's open/close animation duration, in ms : `0` under
      * `prefers-reduced-motion: reduce`, otherwise `--field-listbox-
-     * transition-duration` (default `200ms`) — same custom property
+     * transition-duration` (default `--eun-duration-m`) — same custom property
      * `eun-select`/`eun-search` share.
      *
      * @param el the listbox to read `--field-listbox-transition-duration` off.

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

@@ -20,6 +20,7 @@ import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { inputPhoneStyles } from "./input-phone.styles.js";
 import { isWebKit } from "../../../utils/browser.utils.js";
 import { COUNTRY_DIAL_CODES, formatNationalNumber, fromE164, getCountryName, getDialCode, getNationalLength, stripTrunkPrefix, getFlagEmoji, toE164, } from "./input-phone.type.js";
+import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
 /**
  * Tag name of the phone input component.
  */
@@ -99,7 +100,8 @@ const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldAppearanceMixin(Form
  * @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<string>>} validators - The list of validation rules applied to the field value
  * @prop {string} [placeholder] - The placeholder shown when the field is empty. Defaults to a generic formatted digit pattern, not a real per-country example, when unset
  * @prop {string} [countrySearchPlaceholder='Search a country…'] - The placeholder of the search field inside the country dropdown
@@ -115,6 +117,8 @@ const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldAppearanceMixin(Form
  * @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 country selector button
@@ -125,6 +129,9 @@ const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldAppearanceMixin(Form
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the dropdown panel's open and close height transition, disabled entirely under 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-input-phone
  */
 let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends EunomiaInputPhoneMixinBase {
@@ -382,7 +389,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
     /**
      * The listbox's open/close animation duration, in ms : `0` under
      * `prefers-reduced-motion: reduce`, otherwise `--field-listbox-
-     * transition-duration` (default `200ms`) — same custom property
+     * transition-duration` (default `--eun-duration-m`) — same custom property
      * `eun-select`/`eun-search` share.
      *
      * @param el the listbox to read `--field-listbox-transition-duration` off.
@@ -392,18 +399,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
         if (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}
@@ -421,7 +417,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
         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
@@ -458,7 +454,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
         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(() => {
@@ -744,7 +740,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
               ?disabled=${this.disabled}
               ?readonly=${this.readonly}
               aria-describedby=${hasDescription ? "description" : nothing}
-              aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+              aria-invalid=${this.showError}
               @input=${this.handlePhoneInput}
             />
           </div>

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

@@ -51,8 +51,8 @@ const inputPhone = css `
     color: var(--_iconColor);
     cursor: pointer;
     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"])) #country-trigger:focus-visible {
     z-index: 1;
@@ -82,8 +82,8 @@ const inputPhone = 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([hide-country-selector]) #field-wrapper {
     margin-inline-start: 0;

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

@@ -13,17 +13,17 @@ const base = css `
   }
   #name {
     color: var(--eun-text-color, #071621);
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--field-label-font-size, var(--eun-font-size-s, 14px));
     font-weight: var(--eun-font-weight-l, 700);
   }
   slot[name="instructions"] {
     display: block;
-    font-size: var(--eun-font-size-xs, 12px);
+    font-size: var(--field-message-font-size, var(--eun-font-size-xs, 12px));
     color: var(--eun-text-secondary, #484e61);
   }
   .required {
     color: var(--eun-color-critical-100, #aa0014);
-    font-size: var(--eun-font-size-s, 10px);
+    font-size: var(--field-label-font-size, var(--eun-font-size-s, 10px));
   }
 `;
 export const labelStyles = base;

package/dist/components/form/radio/radio-card.d.ts

@@ -22,8 +22,9 @@ export declare const EunomiaRadioCardTagName = "eun-radio-card";
  * @attr {boolean} [default-checked] - The checked state applied when the card connects, and restored on form reset
  * @prop {boolean} [disabled=false] - Whether the card is disabled
  * @prop {boolean} [readonly=false] - Whether the card is read only
- * @prop {boolean} [hideError=false] - Whether the error message is hidden
- * @attr {boolean} [hide-error=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. The hint stays visible
  * @prop {boolean} [required=false] - Whether a selection is required
  * @prop {string} name - The name of the field
  * @prop {string} value - The value submitted with the card
@@ -44,6 +45,8 @@ export declare const EunomiaRadioCardTagName = "eun-radio-card";
  * @cssprop [--radio-card-border-width] - Sets the width of the border
  * @cssprop [--radio-card-border-radius] - Sets the corner radius of the card
  * @cssprop [--radio-card-padding] - Sets the padding inside the card
+ * @cssprop [--radio-card-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --radio-card-padding is set
+ * @cssprop [--radio-card-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --radio-card-padding is set
  * @cssprop [--radio-card-min-width] - Sets the minimum width of the card
  * @cssprop [--radio-card-icon-color] - Sets the color of the leading icon while not checked
  * @cssprop [--radio-card-icon-color-checked] - Sets the color of the leading icon while checked

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

@@ -33,8 +33,9 @@ export const EunomiaRadioCardTagName = "eun-radio-card";
  * @attr {boolean} [default-checked] - The checked state applied when the card connects, and restored on form reset
  * @prop {boolean} [disabled=false] - Whether the card is disabled
  * @prop {boolean} [readonly=false] - Whether the card is read only
- * @prop {boolean} [hideError=false] - Whether the error message is hidden
- * @attr {boolean} [hide-error=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. The hint stays visible
  * @prop {boolean} [required=false] - Whether a selection is required
  * @prop {string} name - The name of the field
  * @prop {string} value - The value submitted with the card
@@ -55,6 +56,8 @@ export const EunomiaRadioCardTagName = "eun-radio-card";
  * @cssprop [--radio-card-border-width] - Sets the width of the border
  * @cssprop [--radio-card-border-radius] - Sets the corner radius of the card
  * @cssprop [--radio-card-padding] - Sets the padding inside the card
+ * @cssprop [--radio-card-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --radio-card-padding is set
+ * @cssprop [--radio-card-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --radio-card-padding is set
  * @cssprop [--radio-card-min-width] - Sets the minimum width of the card
  * @cssprop [--radio-card-icon-color] - Sets the color of the leading icon while not checked
  * @cssprop [--radio-card-icon-color-checked] - Sets the color of the leading icon while checked

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

@@ -14,6 +14,8 @@ import { css } from "lit";
  * [--radio-card-border-width] - Set a custom border width
  * [--radio-card-border-radius] - Set a custom border radius to the card
  * [--radio-card-padding] - Set a custom padding inside the card
+ * [--radio-card-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --radio-card-padding is set
+ * [--radio-card-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --radio-card-padding is set
  * [--radio-card-min-width] - Set a custom minimum width for the card
  * [--radio-card-icon-color] - Set a custom color to the leading icon when not checked
  * [--radio-card-icon-color-checked] - Set a custom color to the leading icon when checked
@@ -28,7 +30,10 @@ const base = css `
       --radio-card-border-color,
       var(--eun-border-color, #dee0e7)
     );
-    --_background: var(--radio-card-background, var(--eun-surface-color, #ffffff));
+    --_background: var(
+      --radio-card-background,
+      var(--eun-surface-color, #ffffff)
+    );
     --_errorColor: var(
       --radio-card-error-color,
       var(--eun-color-critical-100, #aa0014)
@@ -47,7 +52,11 @@ const base = css `
       var(--eun-color-primary-500, #3d6fff)
     );
     --_minWidth: var(--radio-card-min-width, 180px);
-    --_padding: var(--radio-card-padding, var(--eun-space-m, 16px));
+    --_padding: var(
+      --radio-card-padding,
+      var(--radio-card-padding-block, var(--eun-space-m, 16px))
+        var(--radio-card-padding-inline, var(--eun-space-m, 16px))
+    );
     --_borderRadius: var(
       --radio-card-border-radius,
       var(--eun-border-radius-m, 10px)
@@ -64,7 +73,7 @@ const base = css `
     );
     --_background: var(
       --radio-card-background-checked,
-      var(--eun-color-primary-bg-hover, rgba(18, 123, 185, 0.08))
+      var(--eun-color-primary-alpha-10, rgba(18, 123, 185, 0.08))
     );
     --_iconColor: var(
       --radio-card-icon-color-checked,
@@ -132,7 +141,7 @@ const base = css `
     box-sizing: border-box;
     border: 1px solid var(--_indicatorBorder);
     border-radius: 50%;
-    transition: all 0.2s ease;
+    transition: all var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
 
   #indicator::before {
@@ -141,7 +150,7 @@ const base = css `
     inset: var(--_indicatorGap);
     border-radius: 50%;
     background: var(--_indicatorDot);
-    transition: all 0.2s ease;
+    transition: all var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
 `;
 export const radioCardStyles = base;

package/dist/components/form/radio/radio-list.d.ts

@@ -32,13 +32,16 @@ declare const EunomiaRadioList_base: import("../../../utils/constructor.type.js"
  * @prop {boolean} [inline=false] - Whether the list's elements are displayed in a row
  * @prop {string} [defaultValue] - The value reselected when the list connects, and restored on form reset
  * @attr {string} [default-value] - The value reselected when the list connects, and restored on form reset
- * @prop {boolean} [hideError=false] - Whether the errors are hidden
- * @attr {boolean} [hide-error=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. The hint stays visible
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<string | undefined>>} validators - A list of validation rules applied to the group's selected value
  * @fires {ChangeEvent} eunchange - Fired whenever the group's selection changes
  * @cssprop [--radio-list-gap] - Sets the gap between the labels and the list
  * @cssprop [--radio-list-options-gap] - Sets the gap between the radios in the list
  * @cssprop [--radio-list-error-color] - Sets the color of the list's error state
+ * @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-radio-list
  */
 export declare class EunomiaRadioList extends EunomiaRadioList_base {

package/dist/components/form/radio/radio-list.js

@@ -8,7 +8,7 @@ import { customElement, property, query } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { FormLabelMixin } from "../../../mixins/form-label.mixin.js";
-import { FormMixin } from "../../../mixins/form.mixin.js";
+import { FormMixin, hasErrorDisplayChange, } from "../../../mixins/form.mixin.js";
 import { DisabledMixin } from "../../../mixins/disabled.mixin.js";
 import { ValidatorsMixin } from "../../../mixins/validators.mixin.js";
 import { ReadonlyMixin } from "../../../mixins/readonly.mixin.js";
@@ -80,13 +80,16 @@ const Base = DisabledMixin(ValidatorsMixin(LitElement));
  * @prop {boolean} [inline=false] - Whether the list's elements are displayed in a row
  * @prop {string} [defaultValue] - The value reselected when the list connects, and restored on form reset
  * @attr {string} [default-value] - The value reselected when the list connects, and restored on form reset
- * @prop {boolean} [hideError=false] - Whether the errors are hidden
- * @attr {boolean} [hide-error=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. The hint stays visible
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<string | undefined>>} validators - A list of validation rules applied to the group's selected value
  * @fires {ChangeEvent} eunchange - Fired whenever the group's selection changes
  * @cssprop [--radio-list-gap] - Sets the gap between the labels and the list
  * @cssprop [--radio-list-options-gap] - Sets the gap between the radios in the list
  * @cssprop [--radio-list-error-color] - Sets the color of the list's error state
+ * @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-radio-list
  */
 let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMixin(FormMixin(Base))) {
@@ -137,7 +140,7 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
      * Setter allowing to check the child whose value matches, unchecking every other.
      */
     set value(value) {
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             this.fields.forEach((field) => {
                 field.checked = field.value === value;
             });
@@ -188,7 +191,7 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
             this.value = this.defaultValue;
             this.sendChangeEvent();
         }
-        Promise.all(this.fields.map((field) => field.updateComplete)).then(() => {
+        void Promise.all(this.fields.map((field) => field.updateComplete)).then(() => {
             if (this.active && this.optionsList) {
                 this.optionsList.setAttribute("aria-activedescendant", this.active.id);
             }
@@ -233,10 +236,11 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
             });
             this.setFocus();
         }
-        if (_changedProperties.has("valid") ||
-            _changedProperties.has("hideError")) {
+        if (hasErrorDisplayChange(_changedProperties)) {
+            const { showError } = this;
             this.fields.forEach((field) => {
-                field.valid = this.valid && !this.hideError;
+                field.valid = !showError;
+                field.validationRequested = showError;
             });
         }
         if (_changedProperties.has("label") && !this.hasAttribute("aria-label")) {
@@ -359,7 +363,7 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
      */
     formResetCallback() {
         super.formResetCallback?.();
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             this.setFocus();
             this.sendChangeEvent();
         });
@@ -404,7 +408,7 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
           aria-disabled=${this.disabled ? "true" : "false"}
           aria-readonly=${this.readonly ? "true" : "false"}
           aria-required=${this.required ? "true" : "false"}
-          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+          aria-invalid=${this.showError}
         >
           <slot @slotchange=${this.handleSlotChange}></slot>
         </div>

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

@@ -33,8 +33,9 @@ declare const EunomiaRadioMixinBase: Constructor<EunomiaRadioBase>;
  * @attr {boolean} [default-checked] - The checked state applied when the radio connects, and restored on form reset
  * @prop {boolean} [disabled=false] - Whether the radio is disabled
  * @prop {boolean} [readonly=false] - Whether the radio is read only
- * @prop {boolean} [hideError=false] - Whether the error message is hidden
- * @attr {boolean} [hide-error=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. The hint stays visible
  * @prop {boolean} [required=false] - Whether a selection is required
  * @prop {string} name - The name of the radio field
  * @prop {string} value - The value submitted with the radio
@@ -55,6 +56,8 @@ declare const EunomiaRadioMixinBase: Constructor<EunomiaRadioBase>;
  * @cssprop [--radio-error-color] - Sets the color of the error message
  * @cssprop [--radio-hint-color] - Sets the color of the hint message
  * @cssprop [--radio-size] - Sets the size of the radio
+ * @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 {ChangeEvent} eunchange - Fired when the radio's checked state changes
  * @element eun-radio
  */

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

@@ -36,8 +36,9 @@ const EunomiaRadioMixinBase = RadioMixin(ReadonlyMixin(FormMixin(DisabledMixin(V
  * @attr {boolean} [default-checked] - The checked state applied when the radio connects, and restored on form reset
  * @prop {boolean} [disabled=false] - Whether the radio is disabled
  * @prop {boolean} [readonly=false] - Whether the radio is read only
- * @prop {boolean} [hideError=false] - Whether the error message is hidden
- * @attr {boolean} [hide-error=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. The hint stays visible
  * @prop {boolean} [required=false] - Whether a selection is required
  * @prop {string} name - The name of the radio field
  * @prop {string} value - The value submitted with the radio
@@ -58,6 +59,8 @@ const EunomiaRadioMixinBase = RadioMixin(ReadonlyMixin(FormMixin(DisabledMixin(V
  * @cssprop [--radio-error-color] - Sets the color of the error message
  * @cssprop [--radio-hint-color] - Sets the color of the hint message
  * @cssprop [--radio-size] - Sets the size of the radio
+ * @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 {ChangeEvent} eunchange - Fired when the radio's checked state changes
  * @element eun-radio
  */

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

@@ -35,14 +35,14 @@ const base = css `
     --_roundGap: 2px;
     --_cursor: pointer;
     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: inline-flex;
     align-items: center;
     outline: none;
   }
 
   :host #radio {
-    transition: all 0.2s ease-out;
+    transition: all var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
 
   :host(:focus-visible) #radio {
@@ -148,7 +148,7 @@ const base = css `
     border-radius: 50%;
     display: inline-block;
     box-sizing: border-box;
-    transition: all 0.2s ease;
+    transition: all var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
     outline: 2px solid transparent;
   }
 
@@ -158,7 +158,7 @@ const base = css `
     inset: 0;
     border-radius: 50%;
     background: var(--_background);
-    transition: all ease 0.2s;
+    transition: all var(--eun-easing-default, ease) var(--eun-duration-m, 200ms);
     top: var(--_roundGap);
     bottom: var(--_roundGap);
     left: var(--_roundGap);

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

@@ -38,6 +38,7 @@ declare const EunomiaSearch_base: import("../../../utils/constructor.type.js").C
  * @cssprop [--field-match-background] - Sets the background of the matched search substring, none by default. Shared with the select component
  * @cssprop [--field-match-font-weight] - Sets the font weight of the matched search substring. Shared with the select component
  * @cssprop [--field-match-text-decoration] - Sets the text decoration, such as underline, of the matched search substring, none by default. Shared with the select component
+ * @cssprop [--field-loader-color] - Sets the color of the spinner shown while loading, the icon color by default. Shared with the select component
  * @cssprop [--eun-viewport-inset-top] - Reserves space, such as a page's sticky header height, that the suggestions dropdown 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
  * @element eun-search
@@ -270,7 +271,7 @@ export declare class EunomiaSearch extends EunomiaSearch_base {
     /**
      * The listbox's open/close animation duration, in ms : `0` under
      * `prefers-reduced-motion: reduce`, otherwise `--field-listbox-
-     * transition-duration` (default `200ms`).
+     * transition-duration` (default `--eun-duration-m`).
      *
      * @param el the listbox to read `--field-listbox-transition-duration` off.
      * @private

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

@@ -16,6 +16,7 @@ import { ChangeEvent } from "../../../events/change.event.js";
 import { listboxStyles, listboxAnchorPositioningStyles, } from "../shared-styles/listbox.styles.js";
 import { parseListboxOptions, renderHighlightedLabel, } from "../../../utils/listbox-options.utils.js";
 import { isWebKit } from "../../../utils/browser.utils.js";
+import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
 /**
  * Tag name of the search component.
  */
@@ -52,6 +53,7 @@ export const EunomiaSearchTagName = "eun-search";
  * @cssprop [--field-match-background] - Sets the background of the matched search substring, none by default. Shared with the select component
  * @cssprop [--field-match-font-weight] - Sets the font weight of the matched search substring. Shared with the select component
  * @cssprop [--field-match-text-decoration] - Sets the text decoration, such as underline, of the matched search substring, none by default. Shared with the select component
+ * @cssprop [--field-loader-color] - Sets the color of the spinner shown while loading, the icon color by default. Shared with the select component
  * @cssprop [--eun-viewport-inset-top] - Reserves space, such as a page's sticky header height, that the suggestions dropdown 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
  * @element eun-search
@@ -426,7 +428,7 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
     /**
      * The listbox's open/close animation duration, in ms : `0` under
      * `prefers-reduced-motion: reduce`, otherwise `--field-listbox-
-     * transition-duration` (default `200ms`).
+     * transition-duration` (default `--eun-duration-m`).
      *
      * @param el the listbox to read `--field-listbox-transition-duration` off.
      * @private
@@ -435,18 +437,7 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
         if (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}
@@ -464,7 +455,7 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
         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 suggestions dropdown, if open. All state cleanup happens in
@@ -502,7 +493,7 @@ let EunomiaSearch = EunomiaSearch_1 = class EunomiaSearch extends AnchorPosition
         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(() => {

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

@@ -26,15 +26,16 @@ const search = css `
   :host([loading]) #clear {
     display: none;
   }
+  #field-loader {
+    color: var(--field-loader-color, var(--_iconColor));
+  }
   #field-wrapper #field-loader {
     position: absolute;
     right: var(--eun-space-s, 8px);
     pointer-events: none;
-    color: var(--_iconColor);
   }
   #search-trigger #field-loader {
     flex-shrink: 0;
-    color: var(--_iconColor);
   }
   #search-trigger {
     position: relative;
@@ -54,8 +55,8 @@ const search = css `
     appearance: none;
     outline: 1px solid transparent;
     transition:
-      outline 0.15s ease,
-      border-color 0.15s ease;
+      outline var(--eun-duration-s, 150ms) var(--eun-easing-default, ease),
+      border-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
   }
   :host(:not([aria-disabled="true"])) #search-trigger:hover {
     border-color: var(

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

@@ -59,7 +59,8 @@ declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
  * @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
@@ -85,9 +86,12 @@ declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
  * @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
@@ -101,6 +105,9 @@ declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
  * @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
  */
 export declare class EunomiaSelect extends EunomiaSelectMixinBase {
@@ -506,7 +513,7 @@ export declare class EunomiaSelect extends EunomiaSelectMixinBase {
      * 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