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

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

@@ -5,7 +5,7 @@ import { ValidatorsMixinInterface } from "../../../mixins/validators.mixin.js";
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { EditableMixinInterface } from "../../../mixins/editable.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 { EunomiaIconName } from "../../content/icon/icon.type.js";
 import { Constructor } from "../../../utils/constructor.type.js";
@@ -22,7 +22,7 @@ type SelectValue = string | string[];
  * Type of the select base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaSelectBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<SelectValue> & FormMixinInterface<SelectValue> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface;
+type EunomiaSelectBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<SelectValue> & FormMixinInterface<SelectValue> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface;
 declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
 /**
  * A field that picks one or more values from a list of option and optgroup
@@ -49,7 +49,7 @@ declare const EunomiaSelectMixinBase: Constructor<EunomiaSelectBase>;
  * @prop {boolean} [searchable=false] - Whether the field filters its options as the user types. When false, the field is read only and driven by arrow keys, Enter, and type-ahead. Ignored while native is set
  * @prop {boolean} [native=false] - Renders the field as a real select, using the browser's own dropdown instead of the listbox panel. Takes priority over searchable and multiple, neither of which a native dropdown can support
  * @prop {boolean} [multiple=false] - Whether more than one option can be picked at once. Each option then renders a checkbox, and picking one toggles it without closing the dropdown, so value becomes an array of every picked option's value. Ignored while native is set
- * @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} name - The field name
@@ -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

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

@@ -15,13 +15,14 @@ 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 { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 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.
  */
@@ -31,7 +32,7 @@ export const EunomiaSelectTagName = "eun-select";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaSelectMixinBase = AnchorPositionMixin(FieldVariantMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
+const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
 /**
  * A field that picks one or more values from a list of option and optgroup
  * children. Set searchable to let the field also filter that list as the
@@ -57,7 +58,7 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldVariantMixin(FormLabelMi
  * @prop {boolean} [searchable=false] - Whether the field filters its options as the user types. When false, the field is read only and driven by arrow keys, Enter, and type-ahead. Ignored while native is set
  * @prop {boolean} [native=false] - Renders the field as a real select, using the browser's own dropdown instead of the listbox panel. Takes priority over searchable and multiple, neither of which a native dropdown can support
  * @prop {boolean} [multiple=false] - Whether more than one option can be picked at once. Each option then renders a checkbox, and picking one toggles it without closing the dropdown, so value becomes an array of every picked option's value. Ignored while native is set
- * @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} name - The field name
@@ -67,7 +68,8 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldVariantMixin(FormLabelMi
  * @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(FieldVariantMixin(FormLabelMi
  * @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(FieldVariantMixin(FormLabelMi
  * @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 {
@@ -117,22 +126,22 @@ const base = css `
   #field[aria-invalid="true"]:focus-visible {
     outline-color: var(--_errorColor);
   }
-  :host([variant="fill"]) {
+  :host([appearance="flat"]) {
     --_background: var(--field-background, var(--eun-content-hover, #edeff0));
   }
-  :host([variant="fill"]) #field:not(:hover) {
+  :host([appearance="flat"]) #field:not(:hover) {
     border-color: transparent;
   }
-  :host([variant="fill"]) #field[aria-invalid="true"] {
+  :host([appearance="flat"]) #field[aria-invalid="true"] {
     box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
-  :host([variant="underline"]) #field {
+  :host([appearance="underline"]) #field {
     border: none;
     outline: none;
     border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: 0;
   }
-  :host([variant="underline"]) #field:focus-visible {
+  :host([appearance="underline"]) #field:focus-visible {
     outline: none;
   }
   slot[name="icon"] {
@@ -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

@@ -5,7 +5,7 @@ import { ValidatorsMixinInterface, Validity } from "../../../mixins/validators.m
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { EditableMixinInterface } from "../../../mixins/editable.mixin.js";
-import { FieldVariantMixinInterface } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
 /**
  * Tag name of the textarea component.
@@ -15,7 +15,7 @@ export declare const EunomiaTextareaTagName = "eun-textarea";
  * Type of the textarea base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaTextareaBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface;
+type EunomiaTextareaBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface;
 declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
 /**
  * A multi-line text field, sharing its label, hint, and error chrome and
@@ -34,7 +34,7 @@ declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
  * 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
@@ -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 {