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

package/dist/components/content/tag/tag.styles.js

@@ -15,6 +15,10 @@ import { toneSurfaceStyles } from "../shared-styles/tone-surface.styles.js";
  * [--tag-border-width] - Set a custom border width, for every appearance. Defaults to 1px, only drawn (in a color) by outline, or when --tag-border-color is set
  * [--tag-border-radius] - Set a custom border radius to the tag, also over rounded
  * [--tag-gap] - Set a custom gap between the tag icon and the label
+ * [--tag-padding-block] - Set a custom vertical padding, for every size. The border is taken out of it
+ * [--tag-padding-inline] - Set a custom horizontal padding, for every size. The border is taken out of it
+ * [--tag-font-size] - Set a custom font size, for every size
+ * [--tag-font-weight] - Set a custom font weight
  */
 const base = css `
   :host {
@@ -90,11 +94,17 @@ const base = css `
     color: var(--tag-color, var(--_fg));
     border: var(--_borderWidth) solid var(--tag-border-color, var(--_bd));
     border-radius: var(--tag-border-radius, var(--_radius));
-    padding: max(0px, calc(var(--_padV) - var(--_borderWidth)))
-      max(0px, calc(var(--_padH) - var(--_borderWidth)));
-    font-size: var(--_fontSize);
+    padding: max(
+        0px,
+        calc(var(--tag-padding-block, var(--_padV)) - var(--_borderWidth))
+      )
+      max(
+        0px,
+        calc(var(--tag-padding-inline, var(--_padH)) - var(--_borderWidth))
+      );
+    font-size: var(--tag-font-size, var(--_fontSize));
     gap: var(--tag-gap, var(--_gap));
-    font-weight: var(--eun-font-weight-m, 500);
+    font-weight: var(--tag-font-weight, var(--eun-font-weight-m, 500));
     --icon-color: var(--tag-color, var(--_fg));
   }
 

package/dist/components/content/tooltip/tooltip.d.ts

@@ -93,6 +93,8 @@ declare const EunomiaTooltipMixinBase: Constructor<EunomiaTooltipBase>;
  * @cssprop [--tooltip-font-weight] - Sets the font weight of the description content, not the heading, and not richText, which stays at its own normal weight
  * @cssprop [--tooltip-border-radius] - Sets the corner radius of the panel
  * @cssprop [--tooltip-padding] - Sets the padding of the panel
+ * @cssprop [--tooltip-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --tooltip-padding is set
+ * @cssprop [--tooltip-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --tooltip-padding is set
  * @cssprop [--tooltip-shadow] - Sets the shadow of the panel
  * @cssprop [--tooltip-transition-duration] - Sets the duration of the open and close transition
  * @element eun-tooltip
@@ -467,8 +469,7 @@ export declare class EunomiaTooltip extends EunomiaTooltipMixinBase {
      * The enter/exit animation's duration, in ms : `0` under
      * `prefers-reduced-motion: reduce`, otherwise `--tooltip-transition-
      * duration` (forwarded onto the panel by {@link forwardCssVariables}) if
-     * set, falling back to the same `150ms` default the old CSS transition
-     * used.
+     * set, falling back to `--eun-duration-s`.
      *
      * @param panel the panel to read `--tooltip-transition-duration` off.
      * @private

package/dist/components/content/tooltip/tooltip.js

@@ -14,6 +14,7 @@ import { clampToViewport } from "../../../utils/dropdown-menu.utils.js";
 import { isWebKit } from "../../../utils/browser.utils.js";
 import { formatRichText } from "../../../utils/rich-text.utils.js";
 import { tooltipHostStyles, tooltipPanelStyles, tooltipAnchorPositioningStyles, } from "./tooltip.styles.js";
+import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
 /**
  * Tag name of the tooltip component.
  */
@@ -58,6 +59,8 @@ const FORWARDED_CSS_VARS = [
     "--tooltip-font-weight",
     "--tooltip-border-radius",
     "--tooltip-padding",
+    "--tooltip-padding-block",
+    "--tooltip-padding-inline",
     "--tooltip-row-gap",
     "--tooltip-shadow",
     "--tooltip-transition-duration",
@@ -121,6 +124,8 @@ const EunomiaTooltipMixinBase = AnchorPositionMixin(LitElement);
  * @cssprop [--tooltip-font-weight] - Sets the font weight of the description content, not the heading, and not richText, which stays at its own normal weight
  * @cssprop [--tooltip-border-radius] - Sets the corner radius of the panel
  * @cssprop [--tooltip-padding] - Sets the padding of the panel
+ * @cssprop [--tooltip-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --tooltip-padding is set
+ * @cssprop [--tooltip-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --tooltip-padding is set
  * @cssprop [--tooltip-shadow] - Sets the shadow of the panel
  * @cssprop [--tooltip-transition-duration] - Sets the duration of the open and close transition
  * @element eun-tooltip
@@ -608,8 +613,7 @@ let EunomiaTooltip = EunomiaTooltip_1 = class EunomiaTooltip extends EunomiaTool
      * The enter/exit animation's duration, in ms : `0` under
      * `prefers-reduced-motion: reduce`, otherwise `--tooltip-transition-
      * duration` (forwarded onto the panel by {@link forwardCssVariables}) if
-     * set, falling back to the same `150ms` default the old CSS transition
-     * used.
+     * set, falling back to `--eun-duration-s`.
      *
      * @param panel the panel to read `--tooltip-transition-duration` off.
      * @private
@@ -618,18 +622,7 @@ let EunomiaTooltip = EunomiaTooltip_1 = class EunomiaTooltip extends EunomiaTool
         if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
             return 0;
         }
-        const raw = getComputedStyle(panel)
-            .getPropertyValue("--tooltip-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 150;
+        return resolveDurationMs(panel, "--tooltip-transition-duration", "s", 150);
     }
     /**
      * Plays the fade/scale-in, replacing any {@link panelAnimation} already
@@ -669,7 +662,7 @@ let EunomiaTooltip = EunomiaTooltip_1 = class EunomiaTooltip extends EunomiaTool
             { opacity: 1, scale: 1 },
         ], {
             duration,
-            easing: "ease",
+            easing: resolveEasing(panel),
             fill: "forwards",
         });
     }
@@ -693,7 +686,7 @@ let EunomiaTooltip = EunomiaTooltip_1 = class EunomiaTooltip extends EunomiaTool
         const animation = panel.animate([
             { opacity: 1, scale: 1 },
             { opacity: 0, scale: 0.96 },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(panel), fill: "forwards" });
         this.panelAnimation = animation;
         animation.finished
             .then(() => {

package/dist/components/content/tooltip/tooltip.styles.js

@@ -25,6 +25,8 @@ export const tooltipHostStyles = css `
  * [--tooltip-font-weight] - Set a custom font weight for the description content (not the heading, and not richText, which stays at its own normal weight)
  * [--tooltip-border-radius] - Set a custom border radius
  * [--tooltip-padding] - Set a custom padding
+ * [--tooltip-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --tooltip-padding is set
+ * [--tooltip-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --tooltip-padding is set
  * [--tooltip-row-gap] - Set a custom gap between the heading and description rows
  * [--tooltip-shadow] - Set a custom shadow
  * [--tooltip-transition-duration] - Set a custom duration for the open/close transition
@@ -89,7 +91,9 @@ const panel = css `
     --_onSolid: var(--eun-color-grey-900, #000000);
     --_opposite: var(--eun-color-grey-800, #071621);
   }
-  .eun-tooltip-panel:not([data-severity])[data-color="light"][data-fixed-color] {
+  .eun-tooltip-panel:not(
+      [data-severity]
+    )[data-color="light"][data-fixed-color] {
     --_solid: #ffffff;
     --_onSolid: #000000;
     --_opposite: #071621;
@@ -137,14 +141,22 @@ const panel = css `
     --_body: var(--_onSolid);
     --_bd: transparent;
   }
-  .eun-tooltip-panel:not([data-severity])[data-color="light"][data-appearance="default"],
-  .eun-tooltip-panel:not([data-severity])[data-color="dark"][data-appearance="default"] {
+  .eun-tooltip-panel:not(
+      [data-severity]
+    )[data-color="light"][data-appearance="default"],
+  .eun-tooltip-panel:not(
+      [data-severity]
+    )[data-color="dark"][data-appearance="default"] {
     --_bg: var(--_solid);
     --_head: var(--_onSolid);
     --_body: var(--_onSolid);
   }
-  .eun-tooltip-panel:not([data-severity])[data-color="light"][data-appearance="outline"],
-  .eun-tooltip-panel:not([data-severity])[data-color="dark"][data-appearance="outline"] {
+  .eun-tooltip-panel:not(
+      [data-severity]
+    )[data-color="light"][data-appearance="outline"],
+  .eun-tooltip-panel:not(
+      [data-severity]
+    )[data-color="dark"][data-appearance="outline"] {
     --_bg: var(--_opposite);
     --_head: var(--_solid);
     --_body: var(--_solid);
@@ -164,8 +176,14 @@ const panel = css `
     max-width: var(--tooltip-max-width, 280px);
     padding: var(
       --tooltip-padding,
-      max(0px, calc(var(--eun-space-s, 8px) - var(--_bw)))
-        max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+      var(
+          --tooltip-padding-block,
+          max(0px, calc(var(--eun-space-s, 8px) - var(--_bw)))
+        )
+        var(
+          --tooltip-padding-inline,
+          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+        )
     );
     border-radius: var(
       --tooltip-border-radius,

package/dist/components/form/checkbox/check-card.d.ts

@@ -24,7 +24,8 @@ export declare const EunomiaCheckCardTagName = "eun-check-card";
  * @prop {boolean} [disabled=false] - Whether the card is disabled
  * @prop {boolean} [readonly=false] - Whether the card is read only
  * @prop {boolean} [indeterminate=false] - Whether the card value is indeterminate
- * @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 a selection is required
  * @prop {string} name - The name of the field
@@ -46,6 +47,8 @@ export declare const EunomiaCheckCardTagName = "eun-check-card";
  * @cssprop [--check-card-border-width] - Sets the width of the border
  * @cssprop [--check-card-border-radius] - Sets the corner radius of the card
  * @cssprop [--check-card-padding] - Sets the padding inside the card
+ * @cssprop [--check-card-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --check-card-padding is set
+ * @cssprop [--check-card-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --check-card-padding is set
  * @cssprop [--check-card-min-width] - Sets the minimum width of the card
  * @cssprop [--check-card-icon-color] - Sets the color of the leading icon while not checked
  * @cssprop [--check-card-icon-color-checked] - Sets the color of the leading icon while checked

package/dist/components/form/checkbox/check-card.js

@@ -35,7 +35,8 @@ export const EunomiaCheckCardTagName = "eun-check-card";
  * @prop {boolean} [disabled=false] - Whether the card is disabled
  * @prop {boolean} [readonly=false] - Whether the card is read only
  * @prop {boolean} [indeterminate=false] - Whether the card value is indeterminate
- * @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 a selection is required
  * @prop {string} name - The name of the field
@@ -57,6 +58,8 @@ export const EunomiaCheckCardTagName = "eun-check-card";
  * @cssprop [--check-card-border-width] - Sets the width of the border
  * @cssprop [--check-card-border-radius] - Sets the corner radius of the card
  * @cssprop [--check-card-padding] - Sets the padding inside the card
+ * @cssprop [--check-card-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --check-card-padding is set
+ * @cssprop [--check-card-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --check-card-padding is set
  * @cssprop [--check-card-min-width] - Sets the minimum width of the card
  * @cssprop [--check-card-icon-color] - Sets the color of the leading icon while not checked
  * @cssprop [--check-card-icon-color-checked] - Sets the color of the leading icon while checked

package/dist/components/form/checkbox/check-card.styles.js

@@ -14,6 +14,8 @@ import { css } from "lit";
  * [--check-card-border-width] - Set a custom border width
  * [--check-card-border-radius] - Set a custom border radius to the card
  * [--check-card-padding] - Set a custom padding inside the card
+ * [--check-card-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --check-card-padding is set
+ * [--check-card-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --check-card-padding is set
  * [--check-card-min-width] - Set a custom minimum width for the card
  * [--check-card-icon-color] - Set a custom color to the leading icon when not checked
  * [--check-card-icon-color-checked] - Set a custom color to the leading icon when checked
@@ -28,7 +30,10 @@ const base = css `
       --check-card-border-color,
       var(--eun-border-color, #dee0e7)
     );
-    --_background: var(--check-card-background, var(--eun-surface-color, #ffffff));
+    --_background: var(
+      --check-card-background,
+      var(--eun-surface-color, #ffffff)
+    );
     --_errorColor: var(
       --check-card-error-color,
       var(--eun-color-critical-100, #aa0014)
@@ -47,7 +52,11 @@ const base = css `
       var(--eun-color-primary-500, #3d6fff)
     );
     --_minWidth: var(--check-card-min-width, 180px);
-    --_padding: var(--check-card-padding, var(--eun-space-m, 16px));
+    --_padding: var(
+      --check-card-padding,
+      var(--check-card-padding-block, var(--eun-space-m, 16px))
+        var(--check-card-padding-inline, var(--eun-space-m, 16px))
+    );
     --_borderRadius: var(
       --check-card-border-radius,
       var(--eun-border-radius-m, 10px)
@@ -64,7 +73,7 @@ const base = css `
     );
     --_background: var(
       --check-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(
       --check-card-icon-color-checked,
@@ -137,7 +146,7 @@ const base = css `
     border-radius: var(--eun-border-radius-s, 5px);
     background: var(--_indicatorBackground);
     color: var(--_indicatorIcon);
-    transition: all 0.15s ease;
+    transition: all var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
   }
 `;
 export const checkCardStyles = base;

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

@@ -29,13 +29,16 @@ declare const EunomiaCheckboxList_base: import("../../../utils/constructor.type.
  * @prop {boolean} [inline=false] - Whether the list's elements are displayed in a row
  * @prop {string[]} [defaultValue] - The default selected values
  * @attr {string} [default-value] - The default selected values, as a comma-separated string
- * @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 {Array<import('../../../types/form-validators.type.js').Validators<string[]>>} validators - A list of validation rules applied to the group's selected values
  * @fires {ChangeEvent} eunchange - Fired whenever the group's selection changes
  * @cssprop [--checkbox-list-gap] - Sets the gap between the labels and the list
  * @cssprop [--checkbox-list-options-gap] - Sets the gap between the checkboxes in the list
  * @cssprop [--checkbox-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-checkbox-list
  */
 export declare class EunomiaCheckboxList extends EunomiaCheckboxList_base {

package/dist/components/form/checkbox/checkbox-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";
@@ -78,13 +78,16 @@ const Base = DisabledMixin(ValidatorsMixin(LitElement));
  * @prop {boolean} [inline=false] - Whether the list's elements are displayed in a row
  * @prop {string[]} [defaultValue] - The default selected values
  * @attr {string} [default-value] - The default selected values, as a comma-separated string
- * @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 {Array<import('../../../types/form-validators.type.js').Validators<string[]>>} validators - A list of validation rules applied to the group's selected values
  * @fires {ChangeEvent} eunchange - Fired whenever the group's selection changes
  * @cssprop [--checkbox-list-gap] - Sets the gap between the labels and the list
  * @cssprop [--checkbox-list-options-gap] - Sets the gap between the checkboxes in the list
  * @cssprop [--checkbox-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-checkbox-list
  */
 let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(ReadonlyMixin(FormMixin(Base))) {
@@ -127,7 +130,7 @@ let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(Reado
      * Setter allowing to check every child whose value is in the given list.
      */
     set value(values) {
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             this.fields.forEach((field) => {
                 field.checked = values.includes(field.value);
             });
@@ -172,10 +175,11 @@ let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(Reado
                 field.readonly = this.readonly;
             });
         }
-        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")) {
@@ -209,7 +213,7 @@ let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(Reado
      */
     formResetCallback() {
         super.formResetCallback?.();
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             this.sendChangeEvent();
         });
     }

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

@@ -30,7 +30,8 @@ declare const EunomiaCheckboxMixinBase: Constructor<EunomiaCheckboxBase>;
  * @prop {boolean} [disabled=false] - Whether the checkbox is disabled
  * @prop {boolean} [readonly=false] - Whether the checkbox is read only
  * @prop {boolean} [indeterminate=false] - Whether the checkbox value is indeterminate
- * @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 a selection is required
  * @prop {string} name - The name of the checkbox field
@@ -52,6 +53,8 @@ declare const EunomiaCheckboxMixinBase: Constructor<EunomiaCheckboxBase>;
  * @cssprop [--checkbox-border-color] - Sets the border color of the checkbox
  * @cssprop [--checkbox-border-radius] - Sets the corner radius of the box
  * @cssprop [--checkbox-focus-outline-color] - Sets the color of the focus outline used for keyboard navigation
+ * @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 checkbox is clicked, including while indeterminate
  * @fires {ChangeEvent} eunchange - Fired when the checkbox's checked state changes
  * @element eun-checkbox

package/dist/components/form/checkbox/checkbox.js

@@ -33,7 +33,8 @@ const EunomiaCheckboxMixinBase = CheckMixin(ReadonlyMixin(FormMixin(DisabledMixi
  * @prop {boolean} [disabled=false] - Whether the checkbox is disabled
  * @prop {boolean} [readonly=false] - Whether the checkbox is read only
  * @prop {boolean} [indeterminate=false] - Whether the checkbox value is indeterminate
- * @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 a selection is required
  * @prop {string} name - The name of the checkbox field
@@ -55,6 +56,8 @@ const EunomiaCheckboxMixinBase = CheckMixin(ReadonlyMixin(FormMixin(DisabledMixi
  * @cssprop [--checkbox-border-color] - Sets the border color of the checkbox
  * @cssprop [--checkbox-border-radius] - Sets the corner radius of the box
  * @cssprop [--checkbox-focus-outline-color] - Sets the color of the focus outline used for keyboard navigation
+ * @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 checkbox is clicked, including while indeterminate
  * @fires {ChangeEvent} eunchange - Fired when the checkbox's checked state changes
  * @element eun-checkbox

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

@@ -42,7 +42,7 @@ const base = css `
     );
     --_icon: transparent;
     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;
@@ -167,7 +167,7 @@ const base = css `
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    transition: all 0.15s ease;
+    transition: all var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
     transform: translateY(calc((var(--_boxSize) + 2px - 1em) / 2));
     outline: 0px solid transparent;
     margin-block: -1px;

package/dist/components/form/color-picker/color-picker.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 { Constructor } from "../../../utils/constructor.type.js";
 /**
@@ -17,7 +17,7 @@ export declare const EunomiaColorPickerTagName = "eun-color-picker";
  * interface elements.
  * @internal
  */
-type EunomiaColorPickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface;
+type EunomiaColorPickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface;
 declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
 /**
  * A field for picking a color, as a `#rrggbb` hex string. Declare preset
@@ -54,14 +54,15 @@ declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
  * @prop {string} value - The current color, as a `#rrggbb` hex string
  * @prop {string} defaultValue - The default value applied when the field connects, and restored on form reset
  * @attr {string} [default-value] - The default value
- * @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
  * @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 color 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 {boolean} [readonlyAvailable=false] - Whether the field can switch between a static display and an editable one
  * @attr {boolean} [readonly-available=false] - Whether the field can switch between a static display and an editable one
@@ -95,6 +96,8 @@ declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
  * @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 empty-value text
  * @cssprop [--field-icon-color] - Sets the color of the dropdown arrow
@@ -108,6 +111,9 @@ declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
  * @cssprop [--color-picker-swatch-size=20px] - Sets the diameter of every swatch
  * @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
  * @cssprop [--eun-viewport-inset-bottom] - The same as eun-viewport-inset-top, reserved at the bottom of the viewport
+ * @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-color-picker
  */
 export declare class EunomiaColorPicker extends EunomiaColorPickerMixinBase {

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

@@ -15,7 +15,7 @@ import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
 import { FormMixin } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { EditableMixin, } from "../../../mixins/editable.mixin.js";
-import { FieldVariantMixin, } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
 import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
@@ -23,6 +23,7 @@ import { colorPickerStyles } from "./color-picker.styles.js";
 import { isWebKit } from "../../../utils/browser.utils.js";
 import { normalizeHexColor } from "../../../utils/color.utils.js";
 import { parseListboxOptions, } from "../../../utils/listbox-options.utils.js";
+import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
 /**
  * Tag name of the color picker component.
  */
@@ -32,7 +33,7 @@ export const EunomiaColorPickerTagName = "eun-color-picker";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldVariantMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
+const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
 /**
  * A field for picking a color, as a `#rrggbb` hex string. Declare preset
  * swatches as light DOM `option` children, exactly like `eun-select` does
@@ -68,14 +69,15 @@ const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldVariantMixin(FormLa
  * @prop {string} value - The current color, as a `#rrggbb` hex string
  * @prop {string} defaultValue - The default value applied when the field connects, and restored on form reset
  * @attr {string} [default-value] - The default value
- * @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
  * @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 color 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 {boolean} [readonlyAvailable=false] - Whether the field can switch between a static display and an editable one
  * @attr {boolean} [readonly-available=false] - Whether the field can switch between a static display and an editable one
@@ -109,6 +111,8 @@ const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldVariantMixin(FormLa
  * @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 empty-value text
  * @cssprop [--field-icon-color] - Sets the color of the dropdown arrow
@@ -122,6 +126,9 @@ const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldVariantMixin(FormLa
  * @cssprop [--color-picker-swatch-size=20px] - Sets the diameter of every swatch
  * @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
  * @cssprop [--eun-viewport-inset-bottom] - The same as eun-viewport-inset-top, reserved at the bottom of the viewport
+ * @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-color-picker
  */
 let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixinBase {
@@ -449,18 +456,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
             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}
@@ -477,7 +473,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
         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
@@ -509,7 +505,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
         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(() => {
@@ -649,7 +645,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
         <eun-button
           class="confirm"
           size="s"
-          variant="primary"
+          color="primary"
           appearance="default"
           rounded
           type="button"
@@ -775,9 +771,10 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
           type="text"
           id="hex-input"
           aria-label=${this.hexInputLabel}
-          aria-invalid=${!this.hideError &&
+          aria-invalid=${(!this.hideError &&
             !this.disabled &&
-            this.hexDraftInvalid}
+            this.hexDraftInvalid) ||
+            this.showError}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           .value=${live(this.hexDraft)}
@@ -851,9 +848,10 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
             aria-label=${this.label || this.hexInputLabel}
             aria-describedby=${hasDescription ? "description" : nothing}
             aria-required=${this.required ? "true" : "false"}
-            aria-invalid=${!this.hideError &&
+            aria-invalid=${(!this.hideError &&
             !this.disabled &&
-            (this.hexDraftInvalid || !this.valid)}
+            this.hexDraftInvalid) ||
+            this.showError}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
             .value=${live(this.hexDraft)}
@@ -915,7 +913,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
           aria-describedby=${hasDescription ? "description" : nothing}
           ?disabled=${this.disabled}
           aria-required=${this.required ? "true" : "false"}
-          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+          aria-invalid=${this.showError}
           @click=${this.handleFieldActivate}
           @keydown=${this.handleFieldKeydown}
         >
@@ -988,7 +986,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
             aria-label=${ifDefined(this.triggerAccessibleLabel)}
             aria-describedby=${hasDescription ? "description" : nothing}
             ?disabled=${this.disabled || this.readonly}
-            aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+            aria-invalid=${this.showError}
             .value=${live(this.value || "#000000")}
             @input=${this.handleNativeInput}
           />