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

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

@@ -21,7 +21,9 @@ 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 { parseListboxOptions, renderHighlightedLabel, renderListboxRows, } from "../../../utils/listbox-options.utils.js";
+import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
+import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the select component.
  */
@@ -31,7 +33,7 @@ export const EunomiaSelectTagName = "eun-select";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
+const EunomiaSelectMixinBase = LocalizableMixin(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
@@ -67,7 +69,9 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabe
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether a selection is required
- * @prop {boolean} [hideError=false] - Whether the errors are hidden
+ * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
+ * @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
@@ -77,10 +81,10 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabe
  * @attr {string} [select-placeholder='Select…'] - The fallback for placeholder when searchable isn't set
  * @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
- * @prop {string} [emptyValueLabel='No value set'] - Text displayed in place of the value when readonly and empty
+ * @prop {string} [emptyValueLabel] - Text displayed in place of the value when readonly and empty. Defaults to the localized string for the current locale (English: "No value set")
  * @prop {string} [noResultsLabel='No results'] - Text displayed in the dropdown when no option matches the search
- * @prop {string} [confirmLabel='Confirm'] - The label of the confirm button, shown while editing in readonlyAvailable mode or while multiple and the dropdown is open. Set to an empty string to hide the button entirely
- * @attr {string} [confirm-label='Confirm'] - The label of the confirm button, shown while editing in readonlyAvailable mode or while multiple and the dropdown is open. Set to an empty string to hide the button entirely
+ * @prop {string} [confirmLabel] - The label of the confirm button, shown while editing in readonlyAvailable mode or while multiple and the dropdown is open. Set to an empty string to hide the button entirely. Defaults to the localized string for the current locale (English: "Confirm")
+ * @attr {string} [confirm-label] - The label of the confirm button, shown while editing in readonlyAvailable mode or while multiple and the dropdown is open. Set to an empty string to hide the button entirely. Defaults to the localized string for the current locale (English: "Confirm")
  * @prop {boolean} [noAnimation=false] - Disables the dropdown panel's open and close height transition, on top of the automatic reduced motion handling
  * @prop {boolean} [loading=false] - Whether options are currently being fetched. Shows a spinning loading indicator in place of the dropdown arrow, and a single disabled loading row instead of the option list. Has no effect while native, beyond the arrow swap
  * @prop {string} [loadingLabel='Loading…'] - The accessible label announced by the loading indicator while loading is set
@@ -93,9 +97,12 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabe
  * @cssprop [--field-border-color-focus] - Sets the border color on focus
  * @cssprop [--field-border-radius] - Sets the corner radius of the field
  * @cssprop [--field-padding] - Sets the padding of the field
+ * @cssprop [--field-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --field-padding is set
+ * @cssprop [--field-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --field-padding is set
  * @cssprop [--field-text-color] - Sets the text color of the field
  * @cssprop [--field-placeholder-color] - Sets the color of the placeholder
  * @cssprop [--field-icon-color] - Sets the color of the leading icon and the dropdown arrow
+ * @cssprop [--field-loader-color] - Sets the color of the spinner shown while loading, the icon color by default. Shared with the search component
  * @cssprop [--field-error-color] - Sets the color of the error message
  * @cssprop [--field-hint-color] - Sets the color of the hint message
  * @cssprop [--field-focus-outline-color] - Sets the color of the focus outline
@@ -109,11 +116,19 @@ const EunomiaSelectMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabe
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the dropdown panel's open and close height transition, disabled entirely by the no-animation attribute or reduced motion settings
  * @cssprop [--eun-viewport-inset-top] - Reserves space, such as a page's sticky header height, that the dropdown panel keeps clear of at the top of the viewport. Set on the root or an ancestor rather than on the field itself
  * @cssprop [--eun-viewport-inset-bottom] - The same as eun-viewport-inset-top, reserved at the bottom of the viewport, such as for a sticky footer
+ * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-label-font-size] - Sets the font size of the label
+ * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-select
  */
 let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectMixinBase {
     constructor() {
         super(...arguments);
+        /**
+         * Every change is a complete choice, so its error shows right away.
+         * @internal
+         */
+        this.errorOnChange = true;
         /**
          * Indicates whether the field filters its options as the user types.
          * When false, the field is read-only and driven by Arrow keys, `Enter`,
@@ -157,27 +172,11 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
          * @default Select…
          */
         this.selectPlaceholder = "Select…";
-        /**
-         * Text displayed in place of the value when readonly and empty.
-         * @default No value set
-         */
-        this.emptyValueLabel = "No value set";
         /**
          * Text displayed in the dropdown when no option matches the search.
          * @default No results
          */
         this.noResultsLabel = "No results";
-        /**
-         * Label of the confirm button — shown while editing in `readonlyAvailable`
-         * mode, or while `multiple` and the dropdown is open (see the class doc).
-         * Slot content into `confirm` instead for anything richer than plain text
-         * (an icon, for instance) ; slotted content, when present, overrides this.
-         * Set to an empty string to hide the button entirely — e.g. for a
-         * `readonlyAvailable` field where picking an option is already confirmation
-         * enough on its own, and the extra button would just be clutter.
-         * @default Confirm
-         */
-        this.confirmLabel = "Confirm";
         /**
          * Indicates whether options are currently being fetched (e.g. a
          * server-filtered `searchable` field). Shows a spinning `eun-loader` in
@@ -507,7 +506,8 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
      * @internal
      */
     get hasConfirmContent() {
-        return this.hasConfirmSlot || !!this.confirmLabel;
+        return (this.hasConfirmSlot ||
+            !!(this.confirmLabel ?? this.dictionary.common.confirm));
     }
     /**
      * The normalised search query driving both filtering and highlighting.
@@ -600,9 +600,22 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
         }
         if (_changedProperties.has("readonly") ||
             _changedProperties.has("disabled")) {
-            this.setAttribute("tabindex", this.disabled || this.readonly ? "-1" : "0");
+            if (this.disabled || this.readonly) {
+                this.setAttribute("tabindex", "-1");
+            }
+            else {
+                this.removeAttribute("tabindex");
+            }
         }
     }
+    /**
+     * The host is never a tab stop of its own : sequential navigation goes
+     * straight to the controls inside, in both directions, and
+     * {@link focus} covers a direct call on the host.
+     */
+    get hostTabStop() {
+        return false;
+    }
     /**
      * Returns the field element to focus/anchor on validation errors.
      *
@@ -656,7 +669,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 +679,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 +697,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 +740,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(() => {
@@ -932,6 +934,27 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
                 }
                 break;
             }
+            case " ": {
+                // Space opens the list, then picks the highlighted option, as in
+                // a select-only combobox, unless it continues a type-ahead search
+                // or is typed into the search text.
+                if (this.searchable || this.typeaheadBuffer) {
+                    if (!this.searchable) {
+                        this.handleTypeahead(event);
+                    }
+                    break;
+                }
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.openListbox();
+                    break;
+                }
+                const option = this.filteredOptions[this.highlightedIndex];
+                if (option) {
+                    this.handleSelect(option);
+                }
+                break;
+            }
             default:
                 if (!this.searchable) {
                     this.handleTypeahead(event);
@@ -991,27 +1014,17 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
         return renderHighlightedLabel(label, this.effectiveQuery);
     }
     /**
-     * Renders the dropdown's option rows, inserting a non-interactive group
-     * heading whenever an option's `group` differs from the previous row's.
+     * Renders the dropdown's option rows, grouped under their `optgroup`
+     * label (see {@link renderListboxRows}).
      *
      * @param options the options to render, already filtered.
      * @returns the rendered rows.
      * @private
      */
     renderOptionRows(options) {
-        const rows = [];
-        let lastGroup;
-        options.forEach((option, index) => {
-            if (option.group !== lastGroup) {
-                lastGroup = option.group;
-                if (option.group) {
-                    rows.push(html `<li class="group-label" role="presentation">
-              ${option.group}
-            </li>`);
-                }
-            }
+        return renderListboxRows(options, (option, index) => {
             const selected = this.isSelected(option);
-            rows.push(html `
+            return html `
         <li
           id="listbox-option-${index}"
           role="option"
@@ -1037,9 +1050,8 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
                 ? this.renderHighlighted(option.label)
                 : option.label}
         </li>
-      `);
+      `;
         });
-        return rows;
     }
     /**
      * Whether the confirm trigger should render at all right now — while
@@ -1092,7 +1104,9 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
         }
         return html `
       <button type="button" id="confirm-link" @click=${this.handleConfirmClick}>
-        <slot name="confirm">${this.confirmLabel}</slot>
+        <slot name="confirm"
+          >${this.confirmLabel ?? this.dictionary.common.confirm}</slot
+        >
       </button>
     `;
     }
@@ -1115,7 +1129,8 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
       >
         <slot name="readonly-content">
           <span class=${classMap({ empty: !label })}
-            >${label || this.emptyValueLabel}</span
+            >${label ||
+            (this.emptyValueLabel ?? this.dictionary.common.noValue)}</span
           >
         </slot>
       </div>
@@ -1176,7 +1191,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 +1240,7 @@ let EunomiaSelect = EunomiaSelect_1 = class EunomiaSelect extends EunomiaSelectM
           ?disabled=${this.disabled}
           ?readonly=${this.readonly || !this.searchable}
           aria-required=${this.required ? "true" : "false"}
-          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+          aria-invalid=${this.showError}
           @pointerdown=${this.handleFieldPointerDown}
           @focus=${this.handleFieldActivate}
           @click=${this.handleFieldActivate}

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

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

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

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

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

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

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

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

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

@@ -89,7 +89,17 @@ const listbox = css `
     text-align: center;
     color: var(--_placeholderColor);
   }
+  #listbox li.option-group {
+    padding: 0;
+    cursor: default;
+  }
+  #listbox .group-options {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
   #listbox .group-label {
+    padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
     cursor: default;
     padding-block-end: var(--eun-space-xxs, 1.6px);
     font-size: var(--eun-font-size-xs, 12px);

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

@@ -45,7 +45,9 @@ 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 {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
+ * @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 +73,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 {
@@ -175,14 +179,6 @@ export declare class EunomiaSlider extends EunomiaSliderMixinBase {
     private hasFocus;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /**
-     * Redirects focus to the native field whenever the host itself receives
-     * it — the same pattern `eun-counter`/`eun-input` use, so the host stays
-     * in the tab order (`DisabledMixin`) rather than excluded via
-     * `tabindex="-1"`, which would break Tab from reaching the field at all.
-     * @private
-     */
-    private readonly handleHostFocus;
     /**
      * The value a native `<input type="range">` with no `value` attribute
      * resolves to on its own.
@@ -240,6 +236,12 @@ export declare class EunomiaSlider extends EunomiaSliderMixinBase {
      * @private
      */
     private get tickValues();
+    /**
+     * The host is never a tab stop of its own : sequential navigation goes
+     * straight to the controls inside, in both directions, and
+     * {@link focus} covers a direct call on the host.
+     */
+    protected get hostTabStop(): boolean;
     /**
      * Returns the field element to focus/anchor on validation errors.
      *

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

@@ -57,7 +57,9 @@ 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 {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
+ * @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 +85,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 {
@@ -130,16 +134,6 @@ let EunomiaSlider = class EunomiaSlider extends EunomiaSliderMixinBase {
          * @internal
          */
         this.hasFocus = false;
-        /**
-         * Redirects focus to the native field whenever the host itself receives
-         * it — the same pattern `eun-counter`/`eun-input` use, so the host stays
-         * in the tab order (`DisabledMixin`) rather than excluded via
-         * `tabindex="-1"`, which would break Tab from reaching the field at all.
-         * @private
-         */
-        this.handleHostFocus = () => {
-            this.fieldEl?.focus();
-        };
         /**
          * Updates the value from dragging or a keyboard-driven native step, and
          * notifies consumers — fires on every native `input` event, so live and
@@ -253,10 +247,8 @@ let EunomiaSlider = class EunomiaSlider extends EunomiaSliderMixinBase {
     connectedCallback() {
         super.connectedCallback?.();
         this.value ??= this.clamp(this.defaultRangeValue);
-        this.addEventListener("focus", this.handleHostFocus);
     }
     disconnectedCallback() {
-        this.removeEventListener("focus", this.handleHostFocus);
         window.removeEventListener("pointerup", this.handlePointerUp);
         window.removeEventListener("pointercancel", this.handlePointerUp);
         super.disconnectedCallback?.();
@@ -358,6 +350,14 @@ let EunomiaSlider = class EunomiaSlider extends EunomiaSliderMixinBase {
         values.push(this.max);
         return values;
     }
+    /**
+     * The host is never a tab stop of its own : sequential navigation goes
+     * straight to the controls inside, in both directions, and
+     * {@link focus} covers a direct call on the host.
+     */
+    get hostTabStop() {
+        return false;
+    }
     /**
      * Returns the field element to focus/anchor on validation errors.
      *
@@ -431,7 +431,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,9 @@ 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 {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
+ * @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 +64,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,9 @@ 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 {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
+ * @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 +69,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(