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

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

@@ -23,6 +23,8 @@ 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";
+import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the color picker component.
  */
@@ -32,7 +34,7 @@ export const EunomiaColorPickerTagName = "eun-color-picker";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
+const EunomiaColorPickerMixinBase = LocalizableMixin(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
@@ -75,12 +77,14 @@ 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 {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>>} 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
- * @prop {string} [emptyValueLabel='No color selected'] - Text displayed in place of the value when empty
- * @attr {string} [empty-value-label='No color selected'] - Text displayed in place of the value when empty
+ * @prop {string} [emptyValueLabel] - Text displayed in place of the value when empty. Defaults to the localized string for the current locale (English: "No color selected")
+ * @attr {string} [empty-value-label] - Text displayed in place of the value when empty. Defaults to the localized string for the current locale (English: "No color selected")
  * @prop {string} [swatchesLabel='Presets'] - Heading shown above the preset swatches, while any are declared
  * @attr {string} [swatches-label='Presets'] - Heading shown above the preset swatches
  * @prop {string} [customLabel='Custom'] - Heading shown above the custom color row
@@ -89,10 +93,10 @@ const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldAppearanceMixin(For
  * @attr {string} [native-input-label='Pick a custom color'] - Accessible label for the native OS color picker
  * @prop {string} [hexInputLabel='Hex color'] - Accessible label for the hex text input
  * @attr {string} [hex-input-label='Hex color'] - Accessible label for the hex text input
- * @prop {string} [confirmLabel='Confirm'] - The label of the confirm button in edit mode
- * @attr {string} [confirm-label='Confirm'] - The label of the confirm button in edit mode
- * @prop {string} [cancelLabel='Cancel'] - The label of the cancel button in edit mode
- * @attr {string} [cancel-label='Cancel'] - The label of the cancel button in edit mode
+ * @prop {string} [confirmLabel] - The label of the confirm button in edit mode. Defaults to the localized string for the current locale (English: "Confirm")
+ * @attr {string} [confirm-label] - The label of the confirm button in edit mode. Defaults to the localized string for the current locale (English: "Confirm")
+ * @prop {string} [cancelLabel] - The label of the cancel button in edit mode. Defaults to the localized string for the current locale (English: "Cancel")
+ * @attr {string} [cancel-label] - The label of the cancel button in edit mode. Defaults to the localized string for the current locale (English: "Cancel")
  * @prop {boolean} [noAnimation=false] - Disables the dropdown panel's open and close height transition, on top of the automatic reduced motion handling
  * @attr {boolean} [no-animation=false] - Disables the dropdown panel's open and close height transition
  * @prop {boolean} [swatchOnly=false] - Renders as a native input type="color" styled as a plain swatch, with no panel, no presets, and no hex input at all — only the browser/OS's own color picker. Presets declared as option children are ignored while this is set
@@ -109,6 +113,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,16 +128,14 @@ 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 {
     constructor() {
         super(...arguments);
-        /**
-         * Text displayed in place of the value when empty.
-         * @default No color selected
-         */
-        this.emptyValueLabel = "No color selected";
         /**
          * Heading shown above the preset swatches, while any are declared.
          * @default Presets
@@ -152,16 +156,6 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
          * @default Hex color
          */
         this.hexInputLabel = "Hex color";
-        /**
-         * Label of the confirm button in edit mode.
-         * @default Confirm
-         */
-        this.confirmLabel = "Confirm";
-        /**
-         * Label of the cancel button in edit mode.
-         * @default Cancel
-         */
-        this.cancelLabel = "Cancel";
         /**
          * Disables the dropdown panel's open/close height transition, both set
          * explicitly and whenever the browser reports `prefers-reduced-motion:
@@ -190,7 +184,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
          * opposite trade-off from `swatchOnly`. The leading native color swatch
          * that normally sits before the trigger button is gone entirely (the
          * button itself shows a plain decorative swatch instead), and the panel
-         * drops its hex input, leaving only the preset radiogroup : nothing
+         * drops its hex input, leaving only the preset listbox : nothing
          * outside the curated palette is reachable at all, not even by typing a
          * hex value. Has no effect without at least one `option` declared —
          * with none, {@link renderInlineCustomField} already offers nothing but
@@ -202,7 +196,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
         this.presetsOnly = false;
         /**
          * Renders the declared `option` presets directly as the field itself,
-         * the exact swatch radiogroup {@link renderPresets} already renders
+         * the exact swatch listbox {@link renderPresets} already renders
          * inside the panel, just in place of a trigger button and a panel to
          * open. No native color swatch, no hex input, no button, no popover of
          * any kind, since there is nothing left for one to open. Takes priority
@@ -227,6 +221,13 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
          * @internal
          */
         this.hexDraft = "";
+        /**
+         * The preset swatch last moved to with the keyboard, which holds the
+         * swatches' single tab stop ; `-1` until then, leaving it on the selected
+         * swatch (or the first one).
+         * @internal
+         */
+        this.presetFocusIndex = -1;
         /**
          * Reacts to the dropdown panel's native `toggle` event : the single
          * source of truth for open/close state. The panel is `popover="auto"`,
@@ -375,7 +376,10 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
         if (this.ariaLabel) {
             return this.ariaLabel;
         }
-        return this.swatchOnly ? this.value || this.emptyValueLabel : undefined;
+        return this.swatchOnly
+            ? this.value ||
+                (this.emptyValueLabel ?? this.dictionary.colorPicker.noColor)
+            : undefined;
     }
     /**
      * Lifecycle hook called when the element is connected to the DOM.
@@ -406,6 +410,14 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
             this.hexDraft = this.value ?? "";
         }
     }
+    /**
+     * 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.
      */
@@ -449,18 +461,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 +478,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 +510,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(() => {
@@ -553,6 +554,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
      * @private
      */
     handleSelect(value) {
+        this.presetFocusIndex = -1;
         this.value = value;
         this.hexDraft = value;
         this.dispatchEvent(new ChangeEvent(this.value));
@@ -561,13 +563,11 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
     /**
      * Moves focus among preset swatches on Arrow/Home/End, without picking
      * anything : browsing the palette with the keyboard is deliberately
-     * non-destructive, since arrow keys are also how a screen reader user
-     * reviews the options before deciding on one. Picking only ever happens
-     * through an explicit activation instead, a click or an Enter/Space
-     * press, both already wired through the button's own native `click`
-     * handling. Every swatch is its own real Tab stop (see
-     * {@link renderSwatchRadiogroup}), so this is an alternative to Tab/
-     * Shift+Tab for moving between them, not the only way to reach one.
+     * non-destructive, as a listbox whose selection doesn't follow focus.
+     * Picking only ever happens through an explicit activation instead, a
+     * click or an Enter/Space press, both already wired through the button's
+     * own native `click` handling. The swatches share a single Tab stop,
+     * which follows the focus (see {@link renderSwatchListbox}).
      * @param event the native keyboard event.
      * @param index the index of the swatch that received the key press.
      * @private
@@ -594,6 +594,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
                 return;
         }
         event.preventDefault();
+        this.presetFocusIndex = nextIndex;
         this.presetButtonEls[nextIndex]?.focus();
     }
     /**
@@ -654,7 +655,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
           rounded
           type="button"
           @click=${this.handleConfirmClick}
-          >${this.confirmLabel}</eun-button
+          >${this.confirmLabel ?? this.dictionary.common.confirm}</eun-button
         >
         <eun-button
           class="cancel"
@@ -663,7 +664,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
           rounded
           type="button"
           @click=${this.handleCancelClick}
-          >${this.cancelLabel}</eun-button
+          >${this.cancelLabel ?? this.dictionary.common.cancel}</eun-button
         >
       </div>
     `;
@@ -691,14 +692,16 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
             ? nothing
             : html `
               <span class=${classMap({ empty: !this.value })}
-                >${this.value || this.emptyValueLabel}</span
+                >${this.value ||
+                (this.emptyValueLabel ??
+                    this.dictionary.colorPicker.noColor)}</span
               >
             `}
       </div>
     `;
     }
     /**
-     * Renders the preset swatch radiogroup, while any presets are declared.
+     * Renders the preset swatch listbox, while any presets are declared.
      * @param presets the parsed preset options.
      * @returns the rendered template.
      * @private
@@ -707,43 +710,47 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
         return html `
       <div>
         <span id="swatches-label">${this.swatchesLabel}</span>
-        ${this.renderSwatchRadiogroup(presets, this.swatchesLabel, false)}
+        ${this.renderSwatchListbox(presets, this.swatchesLabel, false)}
       </div>
     `;
     }
     /**
-     * Renders the preset swatch radiogroup itself, shared between
+     * Renders the preset swatch listbox itself, shared between
      * {@link renderPresets} (inside the panel, under its own "Presets"
      * heading) and {@link renderInlinePresetsField} (as the whole field,
      * with no heading of its own since the field's own label already names
      * it).
      * @param presets the preset options to render.
-     * @param ariaLabel the radiogroup's accessible name.
+     * @param ariaLabel the listbox's accessible name.
      * @param hasDescription whether a hint/error `#description` is being
      * rendered alongside the field, so it can be wired to `aria-describedby`
-     * directly on the radiogroup ; only relevant when it stands in for the
+     * directly on the listbox ; only relevant when it stands in for the
      * whole field on its own, see {@link renderInlinePresetsField}.
      * @returns the rendered template.
      * @private
      */
-    renderSwatchRadiogroup(presets, ariaLabel, hasDescription) {
+    renderSwatchListbox(presets, ariaLabel, hasDescription) {
+        const selectedIndex = presets.findIndex((preset) => preset.value === this.value);
+        const tabStop = this.presetFocusIndex >= 0 && this.presetFocusIndex < presets.length
+            ? this.presetFocusIndex
+            : Math.max(selectedIndex, 0);
         return html `
       <div
         id="swatches"
-        role="radiogroup"
+        role="listbox"
         aria-label=${ifDefined(ariaLabel)}
         aria-describedby=${hasDescription ? "description" : nothing}
       >
         ${presets.map((preset, index) => {
-            const checked = this.value === preset.value;
+            const selected = index === selectedIndex;
             return html `
             <button
               type="button"
               class="swatch-button"
-              role="radio"
-              aria-checked=${checked ? "true" : "false"}
+              role="option"
+              aria-selected=${selected ? "true" : "false"}
               aria-label=${preset.label}
-              tabindex="0"
+              tabindex=${index === tabStop ? "0" : "-1"}
               style="--_optionColor: ${preset.value}"
               @click=${() => this.handleSelect(preset.value)}
               @keydown=${(event) => this.handlePresetKeydown(event, index)}
@@ -775,9 +782,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)}
@@ -795,7 +803,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
     }
     /**
      * Renders the declared `option` presets directly as the field itself,
-     * the same swatch radiogroup {@link renderPresets} renders inside the
+     * the same swatch listbox {@link renderPresets} renders inside the
      * panel, just in place of a trigger button and a panel to open at all.
      * Used whenever {@link presetsInline} is set and at least one preset is
      * declared (see {@link render}).
@@ -807,7 +815,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
     renderInlinePresetsField(hasDescription) {
         return html `
       <div id="field-wrapper">
-        ${this.renderSwatchRadiogroup(this.presets, this.triggerAccessibleLabel, hasDescription)}
+        ${this.renderSwatchListbox(this.presets, this.triggerAccessibleLabel, hasDescription)}
       </div>
       ${this.readonlyAvailable ? this.renderEditActions() : nothing}
     `;
@@ -851,9 +859,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)}
@@ -909,13 +918,13 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
         <button
           type="button"
           id="field"
-          aria-haspopup="true"
+          aria-haspopup="dialog"
           aria-expanded=${this.isOpen}
           aria-label=${ifDefined(this.triggerAccessibleLabel)}
           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}
         >
@@ -929,7 +938,8 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
               `
             : nothing}
           <span id="value-text" class=${classMap({ empty: !this.value })}>
-            ${this.value || this.emptyValueLabel}
+            ${this.value ||
+            (this.emptyValueLabel ?? this.dictionary.colorPicker.noColor)}
           </span>
           <span
             id="field-arrow"
@@ -942,6 +952,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
       ${this.readonlyAvailable ? this.renderEditActions() : nothing}
       <div
         id="listbox"
+        role="dialog"
         popover="auto"
         aria-label=${ifDefined(this.label)}
         @toggle=${this.handlePopoverToggle}
@@ -988,7 +999,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}
           />
@@ -1085,6 +1096,9 @@ __decorate([
 __decorate([
     state()
 ], EunomiaColorPicker.prototype, "hexDraft", void 0);
+__decorate([
+    state()
+], EunomiaColorPicker.prototype, "presetFocusIndex", void 0);
 __decorate([
     query("#field")
 ], EunomiaColorPicker.prototype, "fieldEl", void 0);

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,10 +102,10 @@ 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 {
+  .swatch-button[aria-selected="true"] .swatch {
     border-color: var(--eun-color-primary-500, #3d6fff);
     border-width: calc(var(--eun-border-width-m, 1.5px) * 2);
   }

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

@@ -6,6 +6,7 @@ import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
+import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the counter component.
  */
@@ -14,7 +15,7 @@ export declare const EunomiaCounterTagName = "eun-counter";
  * Type of the counter base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaCounterBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<number> & FormMixinInterface<number> & FormLabelMixinInterface & FieldAppearanceMixinInterface;
+type EunomiaCounterBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<number> & FormMixinInterface<number> & FormLabelMixinInterface & FieldAppearanceMixinInterface & LocalizableMixinInterface;
 declare const EunomiaCounterMixinBase: Constructor<EunomiaCounterBase>;
 /**
  * A numeric field with increment and decrement buttons, built on a native
@@ -33,13 +34,15 @@ 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 {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 {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
- * @attr {string} [aria-label-increment='Increase value'] - The accessible label of the increment button
- * @prop {string} [ariaLabelDecrement='Decrease value'] - The accessible label of the decrement button
- * @attr {string} [aria-label-decrement='Decrease value'] - The accessible label of the decrement button
+ * @prop {string} [incrementLabel] - The accessible label of the increment button. Defaults to the localized string for the current locale (English: "Increase value")
+ * @attr {string} [increment-label] - The accessible label of the increment button. Defaults to the localized string for the current locale (English: "Increase value")
+ * @prop {string} [decrementLabel] - The accessible label of the decrement button. Defaults to the localized string for the current locale (English: "Decrease value")
+ * @attr {string} [decrement-label] - The accessible label of the decrement button. Defaults to the localized string for the current locale (English: "Decrease value")
  * @fires {ChangeEvent} eunchange - Fired on every value change
  * @cssprop [--counter-background] - Sets the background color of the field
  * @cssprop [--counter-border-color] - Sets the border color of the field
@@ -53,6 +56,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 {
@@ -78,14 +83,14 @@ export declare class EunomiaCounter extends EunomiaCounterMixinBase {
     step: number;
     /**
      * Accessible label of the increment button.
-     * @default Increase value
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelIncrement: string;
+    incrementLabel?: string;
     /**
      * Accessible label of the decrement button.
-     * @default Decrease value
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelDecrement: string;
+    decrementLabel?: string;
     /**
      * The current numeric value, `undefined` while empty (e.g. after the
      * field is cleared by the user). Overrides the `value` accessor
@@ -118,17 +123,13 @@ export declare class EunomiaCounter extends EunomiaCounterMixinBase {
      * @readonly
      */
     private readonly fieldEl?;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /**
-     * Redirects focus to the native field whenever the host itself receives
-     * it. See `eun-input`'s identical pattern : the host stays in the tab
-     * order (`DisabledMixin`) rather than being excluded via `tabindex="-1"`,
-     * which broke Tab from reaching the field entirely for this
-     * form-associated component, instead of just skipping the host.
+    constructor();
+    /**
+     * Submits the owning form on Enter in the field, as a native number
+     * input does, since the browser never does it from a shadow root.
      * @private
      */
-    private handleHostFocus;
+    private readonly handleImplicitSubmission;
     /**
      * Reads native HTML constraint validation from the underlying field
      * element (`required`, `min`, `max`, `step`, `badInput`).
@@ -136,6 +137,12 @@ export declare class EunomiaCounter extends EunomiaCounterMixinBase {
      * @returns validity state and optional message.
      */
     checkLocalValidators: () => Validity;
+    /**
+     * 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.
      *