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

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

@@ -16,6 +16,8 @@ import { FormMixin } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { EditableMixin, } from "../../../mixins/editable.mixin.js";
 import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixin, } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixin, } from "../../../mixins/field-size.mixin.js";
 import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
@@ -24,6 +26,7 @@ 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.
  */
@@ -33,7 +36,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(RoundedMixin(FieldSizeMixin(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
@@ -70,6 +73,8 @@ const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldAppearanceMixin(For
  * @prop {string} defaultValue - The default value applied when the field connects, and restored on form reset
  * @attr {string} [default-value] - The default value
  * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
+ * @prop {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} name - The field name
@@ -77,12 +82,13 @@ const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldAppearanceMixin(For
  * @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. 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
@@ -91,10 +97,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
@@ -122,11 +128,13 @@ const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldAppearanceMixin(For
  * @cssprop [--field-edit-confirm-color] - Sets the color of the confirm button in readonly-available edit mode
  * @cssprop [--field-edit-cancel-color] - Sets the color of the cancel button in readonly-available edit mode
  * @cssprop [--field-listbox-max-height=260px] - Sets the maximum height of the dropdown panel, past which it scrolls
+ * @cssprop [--field-listbox-border-radius] - Sets the corner radius of the dropdown panel, independent of the field's own radius
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the dropdown panel's open and close animation
  * @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-line-height] - Sets the line height 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
@@ -134,11 +142,6 @@ const EunomiaColorPickerMixinBase = AnchorPositionMixin(FieldAppearanceMixin(For
 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
@@ -159,16 +162,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:
@@ -197,7 +190,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
@@ -209,7 +202,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
@@ -234,6 +227,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"`,
@@ -382,7 +382,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.
@@ -413,6 +416,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.
      */
@@ -549,6 +560,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));
@@ -557,13 +569,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
@@ -590,6 +600,7 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
                 return;
         }
         event.preventDefault();
+        this.presetFocusIndex = nextIndex;
         this.presetButtonEls[nextIndex]?.focus();
     }
     /**
@@ -646,11 +657,11 @@ let EunomiaColorPicker = class EunomiaColorPicker extends EunomiaColorPickerMixi
           class="confirm"
           size="s"
           color="primary"
-          appearance="default"
+          appearance="soft"
           rounded
           type="button"
           @click=${this.handleConfirmClick}
-          >${this.confirmLabel}</eun-button
+          >${this.confirmLabel ?? this.dictionary.common.confirm}</eun-button
         >
         <eun-button
           class="cancel"
@@ -659,7 +670,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>
     `;
@@ -687,14 +698,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
@@ -703,43 +716,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)}
@@ -792,7 +809,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}).
@@ -804,7 +821,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}
     `;
@@ -907,7 +924,7 @@ 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}
@@ -927,7 +944,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"
@@ -940,6 +958,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}
@@ -1083,6 +1102,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

@@ -105,7 +105,7 @@ const colorPicker = css `
       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);
   }
@@ -126,6 +126,19 @@ const colorPicker = css `
   #native-swatch .swatch {
     pointer-events: none;
   }
+
+  button#field #trigger-swatch,
+  #field-wrapper > #custom-row .swatch {
+    --_fieldSwatchSize: min(
+      var(--color-picker-swatch-size, 20px),
+      calc(var(--_lineHeight) + 2 * var(--_paddingBlock))
+    );
+    width: var(--_fieldSwatchSize);
+    height: var(--_fieldSwatchSize);
+  }
+  #field-wrapper > #custom-row #native-swatch {
+    display: flex;
+  }
   #native-input {
     position: absolute;
     inset: 0;

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

@@ -5,7 +5,9 @@ import { ValidatorsMixinInterface, Validity } from "../../../mixins/validators.m
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixinInterface } from "../../../mixins/rounded.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
+import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the counter component.
  */
@@ -14,13 +16,14 @@ 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 & RoundedMixinInterface & LocalizableMixinInterface;
 declare const EunomiaCounterMixinBase: Constructor<EunomiaCounterBase>;
 /**
  * A numeric field with increment and decrement buttons, built on a native
  * number input.
  *
  * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
+ * @prop {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} name - The field name
@@ -34,13 +37,14 @@ declare const EunomiaCounterMixinBase: Constructor<EunomiaCounterBase>;
  * @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. 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
@@ -81,14 +85,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
@@ -121,17 +125,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`).
@@ -139,6 +139,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.
      *