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

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

@@ -61,7 +61,8 @@ declare const EunomiaColorPickerMixinBase: Constructor<EunomiaColorPickerBase>;
  * @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

@@ -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.
  */
@@ -75,7 +76,8 @@ const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldAppearanceMixin(For
  * @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(FieldAppearanceMixin(For
  * @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(FieldAppearanceMixin(For
  * @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(() => {
@@ -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}
           />

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

@@ -45,7 +45,8 @@ const colorPicker = css `
     flex: 0 0 auto;
     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);
   }
   #field-arrow.open {
     transform: rotate(180deg);
@@ -60,8 +61,8 @@ const colorPicker = css `
     background-color: var(--_swatchColor, transparent);
     outline: 2px solid transparent;
     transition:
-      outline 0.2s ease-out,
-      border 0.2s ease-out;
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
   .swatch.empty {
     background-image: conic-gradient(
@@ -101,8 +102,8 @@ const colorPicker = css `
     --_swatchColor: var(--_optionColor);
     outline: 2px solid transparent;
     transition:
-      outline 0.2s ease-out,
-      border 0.2s ease-out;
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
   .swatch-button[aria-checked="true"] .swatch {
     border-color: var(--eun-color-primary-500, #3d6fff);

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

@@ -33,7 +33,8 @@ declare const EunomiaCounterMixinBase: Constructor<EunomiaCounterBase>;
  * @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
  * @attr {boolean} [hide-error=false] - Whether the errors are hidden
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<number>>} validators - The list of validation rules applied to the field value
  * @prop {string} [ariaLabelIncrement='Increase value'] - The accessible label of the increment button
@@ -53,6 +54,8 @@ declare const EunomiaCounterMixinBase: Constructor<EunomiaCounterBase>;
  * @cssprop [--counter-hint-color] - Sets the color of the hint message
  * @cssprop [--counter-focus-outline-color] - Sets the color of the focus outline
  * @cssprop [--counter-field-width] - Sets the width of the numeric value area
+ * @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-counter
  */
 export declare class EunomiaCounter extends EunomiaCounterMixinBase {

package/dist/components/form/counter/counter.js

@@ -44,7 +44,8 @@ const EunomiaCounterMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixi
  * @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
  * @attr {boolean} [hide-error=false] - Whether the errors are hidden
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<number>>} validators - The list of validation rules applied to the field value
  * @prop {string} [ariaLabelIncrement='Increase value'] - The accessible label of the increment button
@@ -64,6 +65,8 @@ const EunomiaCounterMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixi
  * @cssprop [--counter-hint-color] - Sets the color of the hint message
  * @cssprop [--counter-focus-outline-color] - Sets the color of the focus outline
  * @cssprop [--counter-field-width] - Sets the width of the numeric value area
+ * @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-counter
  */
 let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
@@ -313,7 +316,7 @@ let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
           max=${ifDefined(this.max)}
           step=${this.step}
           inputmode=${hasDecimalStep ? "decimal" : "numeric"}
-          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/counter/counter.styles.js

@@ -67,8 +67,8 @@ const base = css `
     box-sizing: border-box;
     overflow: hidden;
     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(:hover:not([aria-disabled="true"]):not([aria-readonly="true"]))
@@ -118,7 +118,7 @@ const base = css `
     padding: 0;
     color: var(--_buttonColor);
     cursor: pointer;
-    transition: background 1.2s ease-out;
+    transition: background 1.2s var(--eun-easing-out, ease-out);
   }
 
   #decrement {
@@ -126,7 +126,8 @@ const base = css `
   }
 
   #increment {
-    border-inline-start: var(--eun-border-width-s, 1px) solid var(--_borderColor);
+    border-inline-start: var(--eun-border-width-s, 1px) solid
+      var(--_borderColor);
   }
 
   #decrement:hover:not(:disabled),