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

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

@@ -17,6 +17,8 @@ import { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { counterStyles } from "./counter.styles.js";
 import { pickValidity } from "../../../utils/validity.utils.js";
+import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
+import { isImplicitSubmissionKey, submitImplicitly, } from "../../../utils/implicit-submission.utils.js";
 /**
  * Tag name of the counter component.
  */
@@ -26,7 +28,7 @@ export const EunomiaCounterTagName = "eun-counter";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaCounterMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))));
+const EunomiaCounterMixinBase = LocalizableMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base)))));
 /**
  * A numeric field with increment and decrement buttons, built on a native
  * number input.
@@ -45,13 +47,14 @@ const EunomiaCounterMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixi
  * @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
@@ -70,50 +73,6 @@ const EunomiaCounterMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixi
  * @element eun-counter
  */
 let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
-    constructor() {
-        super(...arguments);
-        /**
-         * The amount the value changes on every increment/decrement.
-         * @default 1
-         */
-        this.step = 1;
-        /**
-         * Accessible label of the increment button.
-         * @default Increase value
-         */
-        this.ariaLabelIncrement = "Increase value";
-        /**
-         * Accessible label of the decrement button.
-         * @default Decrease value
-         */
-        this.ariaLabelDecrement = "Decrease value";
-        /**
-         * 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.
-         * @private
-         */
-        this.handleHostFocus = () => {
-            this.fieldEl?.focus();
-        };
-        /**
-         * Reads native HTML constraint validation from the underlying field
-         * element (`required`, `min`, `max`, `step`, `badInput`).
-         *
-         * @returns validity state and optional message.
-         */
-        this.checkLocalValidators = () => {
-            return pickValidity(this.fieldEl, [
-                "valueMissing",
-                "rangeUnderflow",
-                "rangeOverflow",
-                "stepMismatch",
-                "badInput",
-            ]);
-        };
-    }
     /**
      * The current numeric value, `undefined` while empty (e.g. after the
      * field is cleared by the user). Overrides the `value` accessor
@@ -151,13 +110,52 @@ let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
         // @ts-expect-error — see comment above ; FormMixin's real setter exists.
         super.defaultValue = value;
     }
-    connectedCallback() {
-        super.connectedCallback?.();
-        this.addEventListener("focus", this.handleHostFocus);
+    constructor() {
+        super();
+        /**
+         * The amount the value changes on every increment/decrement.
+         * @default 1
+         */
+        this.step = 1;
+        /**
+         * 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
+         */
+        this.handleImplicitSubmission = (event) => {
+            const form = this.internals.form;
+            if (!form ||
+                event.composedPath()[0] !== this.fieldEl ||
+                !isImplicitSubmissionKey(event)) {
+                return;
+            }
+            event.preventDefault();
+            submitImplicitly(form);
+        };
+        /**
+         * Reads native HTML constraint validation from the underlying field
+         * element (`required`, `min`, `max`, `step`, `badInput`).
+         *
+         * @returns validity state and optional message.
+         */
+        this.checkLocalValidators = () => {
+            return pickValidity(this.fieldEl, [
+                "valueMissing",
+                "rangeUnderflow",
+                "rangeOverflow",
+                "stepMismatch",
+                "badInput",
+            ]);
+        };
+        this.addEventListener("keydown", this.handleImplicitSubmission);
     }
-    disconnectedCallback() {
-        this.removeEventListener("focus", this.handleHostFocus);
-        super.disconnectedCallback?.();
+    /**
+     * 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.
@@ -299,7 +297,7 @@ let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
           type="button"
           id="decrement"
           tabindex="-1"
-          aria-label=${this.ariaLabelDecrement}
+          aria-label=${this.decrementLabel ?? this.dictionary.counter.decrement}
           ?disabled=${!canDecrement}
           @click=${() => this.stepBy(-1)}
         >
@@ -326,7 +324,7 @@ let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
           type="button"
           id="increment"
           tabindex="-1"
-          aria-label=${this.ariaLabelIncrement}
+          aria-label=${this.incrementLabel ?? this.dictionary.counter.increment}
           ?disabled=${!canIncrement}
           @click=${() => this.stepBy(1)}
         >
@@ -371,11 +369,11 @@ __decorate([
     property({ type: Number })
 ], EunomiaCounter.prototype, "step", void 0);
 __decorate([
-    property({ attribute: "aria-label-increment" })
-], EunomiaCounter.prototype, "ariaLabelIncrement", void 0);
+    property({ attribute: "increment-label" })
+], EunomiaCounter.prototype, "incrementLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-decrement" })
-], EunomiaCounter.prototype, "ariaLabelDecrement", void 0);
+    property({ attribute: "decrement-label" })
+], EunomiaCounter.prototype, "decrementLabel", void 0);
 __decorate([
     property({ type: Number })
     // @ts-expect-error — see comment above ; real getter returns `U | undefined`.

package/dist/components/form/date-picker/date-picker.d.ts

@@ -64,12 +64,13 @@ declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
  * @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
  * @prop {Array<Validators<Date | null>>} validators - The list of custom validation rules applied to the value
  * @prop {string} [todayLabel='Today'] - The label of the day grid's jump to today shortcut. Only shown with day granularity
  * @prop {string} [applyLabel='Apply'] - The label of the mobile modal's confirm button
- * @prop {string} [cancelLabel='Cancel'] - The label of the mobile modal's cancel button
- * @prop {string} [ariaLabelCalendar='Open calendar'] - The accessible label of the trailing calendar button
+ * @prop {string} [cancelLabel] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [calendarLabel] - The accessible label of the trailing calendar button. Defaults to the localized string for the current locale (English: "Open calendar")
  * @prop {string} [dayPlaceholder='jj'] - The placeholder shown in the empty day segment
  * @prop {string} [monthPlaceholder='mm'] - The placeholder shown in the empty month segment
  * @prop {string} [yearPlaceholder='yyyy'] - The placeholder shown in the empty year segment
@@ -121,6 +122,11 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @readonly
      */
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Every change is a complete choice, so its error shows right away.
+     * @internal
+     */
+    errorOnChange: boolean;
     /**
      * Whether a single value or a start/end range is picked.
      * @default single
@@ -254,14 +260,14 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
     applyLabel: string;
     /**
      * Label of the mobile modal's cancel button.
-     * @default Cancel
+     * Falls back to the localized string for the current locale when unset.
      */
-    cancelLabel: string;
+    cancelLabel?: string;
     /**
      * Accessible label of the trailing calendar button.
-     * @default Open calendar
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelCalendar: string;
+    calendarLabel?: string;
     /**
      * Placeholder shown in the empty day segment.
      * @default jj
@@ -443,6 +449,15 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * {@link defaultRangeValue} to `rangeValue` the same way for
      * `mode="range"`, which `FormMixin` has no knowledge of.
      */
+    constructor();
+    /**
+     * Submits the owning form on Enter in one of the field's segments, as a
+     * native date input does, since the browser never does it from a
+     * shadow root. Left alone while the panel is open, and on keys a
+     * segment already handles, such as Enter toggling the AM/PM segment.
+     * @private
+     */
+    private readonly handleImplicitSubmission;
     connectedCallback(): void;
     /**
      * Resets the field to its default on a native form `reset()`.
@@ -513,6 +528,12 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @returns validity state and optional message.
      */
     buildCommonValidators: () => 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 first segment field to focus/anchor on validation errors.
      *

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

@@ -35,6 +35,7 @@ import { isDisabledDay, renderDatePickerDayGrid, } from "./date-picker-day-grid.
 import { isDisabledMonth, renderDatePickerMonthGrid, } from "./date-picker-month-grid.js";
 import { getYearPageStart, isDisabledYear, renderDatePickerYearGrid, } from "./date-picker-year-grid.js";
 import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
+import { isImplicitSubmissionKey, submitImplicitly, } from "../../../utils/implicit-submission.utils.js";
 /**
  * Tag name of the date-picker component.
  */
@@ -99,12 +100,13 @@ const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * @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
  * @prop {Array<Validators<Date | null>>} validators - The list of custom validation rules applied to the value
  * @prop {string} [todayLabel='Today'] - The label of the day grid's jump to today shortcut. Only shown with day granularity
  * @prop {string} [applyLabel='Apply'] - The label of the mobile modal's confirm button
- * @prop {string} [cancelLabel='Cancel'] - The label of the mobile modal's cancel button
- * @prop {string} [ariaLabelCalendar='Open calendar'] - The accessible label of the trailing calendar button
+ * @prop {string} [cancelLabel] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [calendarLabel] - The accessible label of the trailing calendar button. Defaults to the localized string for the current locale (English: "Open calendar")
  * @prop {string} [dayPlaceholder='jj'] - The placeholder shown in the empty day segment
  * @prop {string} [monthPlaceholder='mm'] - The placeholder shown in the empty month segment
  * @prop {string} [yearPlaceholder='yyyy'] - The placeholder shown in the empty year segment
@@ -148,8 +150,37 @@ const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * @element eun-date-picker
  */
 let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
+    /**
+     * The default value applied on connection and form reset, in `single`
+     * mode. Overrides the `defaultValue` accessor inherited from `FormMixin`
+     * only to swap its attribute converter : the mixin's generic one always
+     * splits `default-value` on commas (appropriate for e.g. a multi-select's
+     * array value), which would silently produce the wrong thing for a
+     * `Date`. The actual get/set logic (applying the default when the field
+     * resets) still comes from `FormMixin` itself, via `super`.
+     * @default-value-format yyyy-mm-dd
+     */
+    get defaultValue() {
+        return super.defaultValue;
+    }
+    set defaultValue(value) {
+        // @ts-expect-error — see comment above ; FormMixin's real setter exists.
+        super.defaultValue = value;
+    }
+    /**
+     * Lifecycle callback triggered when the component is connected to the
+     * DOM. `FormMixin`'s own `connectedCallback` already applies
+     * `defaultValue` to `value` for `mode="single"` ; this applies
+     * {@link defaultRangeValue} to `rangeValue` the same way for
+     * `mode="range"`, which `FormMixin` has no knowledge of.
+     */
     constructor() {
-        super(...arguments);
+        super();
+        /**
+         * Every change is a complete choice, so its error shows right away.
+         * @internal
+         */
+        this.errorOnChange = true;
         /**
          * Whether a single value or a start/end range is picked.
          * @default single
@@ -229,16 +260,6 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
          * @default Apply
          */
         this.applyLabel = "Apply";
-        /**
-         * Label of the mobile modal's cancel button.
-         * @default Cancel
-         */
-        this.cancelLabel = "Cancel";
-        /**
-         * Accessible label of the trailing calendar button.
-         * @default Open calendar
-         */
-        this.ariaLabelCalendar = "Open calendar";
         /**
          * Placeholder shown in the empty day segment.
          * @default jj
@@ -360,6 +381,25 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
             minute: "",
             period: "",
         };
+        /**
+         * Submits the owning form on Enter in one of the field's segments, as a
+         * native date input does, since the browser never does it from a
+         * shadow root. Left alone while the panel is open, and on keys a
+         * segment already handles, such as Enter toggling the AM/PM segment.
+         * @private
+         */
+        this.handleImplicitSubmission = (event) => {
+            const form = this.internals.form;
+            const origin = event.composedPath()[0];
+            if (!form ||
+                this.isOpen ||
+                !(origin instanceof Element && origin.matches(".segment")) ||
+                !isImplicitSubmissionKey(event)) {
+                return;
+            }
+            event.preventDefault();
+            submitImplicitly(form);
+        };
         /**
          * Reads local validation state : a partially/invalidly typed segment
          * group reports as invalid, matching native constraint validation's
@@ -978,31 +1018,8 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
                     break;
             }
         };
+        this.addEventListener("keydown", this.handleImplicitSubmission);
     }
-    /**
-     * The default value applied on connection and form reset, in `single`
-     * mode. Overrides the `defaultValue` accessor inherited from `FormMixin`
-     * only to swap its attribute converter : the mixin's generic one always
-     * splits `default-value` on commas (appropriate for e.g. a multi-select's
-     * array value), which would silently produce the wrong thing for a
-     * `Date`. The actual get/set logic (applying the default when the field
-     * resets) still comes from `FormMixin` itself, via `super`.
-     * @default-value-format yyyy-mm-dd
-     */
-    get defaultValue() {
-        return super.defaultValue;
-    }
-    set defaultValue(value) {
-        // @ts-expect-error — see comment above ; FormMixin's real setter exists.
-        super.defaultValue = value;
-    }
-    /**
-     * Lifecycle callback triggered when the component is connected to the
-     * DOM. `FormMixin`'s own `connectedCallback` already applies
-     * `defaultValue` to `value` for `mode="single"` ; this applies
-     * {@link defaultRangeValue} to `rangeValue` the same way for
-     * `mode="range"`, which `FormMixin` has no knowledge of.
-     */
     connectedCallback() {
         super.connectedCallback?.();
         if (this.mode === "range" && this.defaultRangeValue) {
@@ -1096,6 +1113,14 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
             this.setAttribute("aria-invalid", String(this.showError));
         }
     }
+    /**
+     * 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 first segment field to focus/anchor on validation errors.
      *
@@ -2033,6 +2058,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         data-target=${target}
         role="group"
         aria-label=${groupLabel}
+        aria-describedby=${this.description?.length ? "description" : nothing}
       >
         ${order.map((kind, index) => html `
             ${index > 0
@@ -2073,7 +2099,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         maxlength=${maxLength}
         size=${maxLength}
         placeholder=${this.placeholderFor(kind)}
-        aria-label=${capitalize(kind)}
+        aria-label=${this.dictionary.datePicker[kind]}
         .value=${values[kind]}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -2232,15 +2258,16 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         ${this.mode === "single"
             ? this.renderSegmentGroup("value", this.label ?? this.headingFor())
             : html `
-              ${this.renderSegmentGroup("start", "Start date")}
+              ${this.renderSegmentGroup("start", this.dictionary.datePicker.startDate)}
               <span class="range-separator" aria-hidden="true">–</span>
-              ${this.renderSegmentGroup("end", "End date")}
+              ${this.renderSegmentGroup("end", this.dictionary.datePicker.endDate)}
             `}
         ${this.isWithTimeActive() ? this.renderTimeSegmentGroup() : nothing}
         <button
           type="button"
           id="calendar-trigger"
-          aria-label=${this.ariaLabelCalendar}
+          aria-label=${this.calendarLabel ??
+            this.dictionary.datePicker.openCalendar}
           aria-haspopup="dialog"
           aria-expanded=${this.isOpen || this.isModalOpen ? "true" : "false"}
           ?disabled=${this.disabled}
@@ -2389,7 +2416,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
           id="popover-cancel"
           @click=${this.handlePopoverCancel}
         >
-          ${this.cancelLabel}
+          ${this.cancelLabel ?? this.dictionary.common.cancel}
         </eun-button>
         <eun-button id="popover-apply" @click=${this.handlePopoverApply}>
           ${this.applyLabel}
@@ -2415,7 +2442,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         ?open=${this.isModalOpen}
         .closeable=${false}
         confirm-label=${this.applyLabel}
-        cancel-label=${this.cancelLabel}
+        cancel-label=${this.cancelLabel ?? this.dictionary.common.cancel}
         aria-label=${this.label ?? this.headingFor()}
         @eunconfirm=${this.handleModalConfirm}
         @euncancel=${this.handleModalCancel}
@@ -2441,7 +2468,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
             id="cancel"
             @click=${() => this.modalEl?.cancel()}
           >
-            ${this.cancelLabel}
+            ${this.cancelLabel ?? this.dictionary.common.cancel}
           </eun-button>
           <eun-button id="confirm" @click=${() => this.modalEl?.confirm()}>
             ${this.applyLabel}
@@ -2478,10 +2505,10 @@ EunomiaDatePicker.styles = [
  */
 EunomiaDatePicker.SWIPE_THRESHOLD_PX = 40;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDatePicker.prototype, "mode", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDatePicker.prototype, "granularity", void 0);
 __decorate([
     property({
@@ -2541,8 +2568,8 @@ __decorate([
     property({ attribute: "cancel-label" })
 ], EunomiaDatePicker.prototype, "cancelLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-calendar" })
-], EunomiaDatePicker.prototype, "ariaLabelCalendar", void 0);
+    property({ attribute: "calendar-label" })
+], EunomiaDatePicker.prototype, "calendarLabel", void 0);
 __decorate([
     property({ attribute: "day-placeholder" })
 ], EunomiaDatePicker.prototype, "dayPlaceholder", void 0);
@@ -2668,12 +2695,6 @@ function todaysSegmentPart(kind) {
             return today.getDate();
     }
 }
-/**
- * @private
- */
-function capitalize(value) {
-    return value.charAt(0).toUpperCase() + value.slice(1);
-}
 /**
  * Parses an ISO (`yyyy-mm-dd`) date string, as used by the `default-value`
  * and `default-range-value` attributes. Returns `null` for an empty or

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

@@ -8,6 +8,7 @@ import { EditableMixinInterface } from "../../../mixins/editable.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { EunomiaIconName } from "../../content/icon/icon.type.js";
 import { Constructor } from "../../../utils/constructor.type.js";
+import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the input component.
  */
@@ -20,7 +21,7 @@ export type EunomiaInputType = "text" | "email" | "number" | "tel" | "url" | "se
  * Type of the input base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaInputBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface;
+type EunomiaInputBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & LocalizableMixinInterface;
 declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
 /**
  * A single-line text field, supporting several native input types.
@@ -38,6 +39,7 @@ declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
  * @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
  * @prop {Array<Validators<string>>} validators - The list of validation rules applied to the field value
  * @prop {EunomiaIconName} icon - An optional leading icon
@@ -51,12 +53,12 @@ declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
  * @prop {string} min - The native minimum constraint forwarded to the field
  * @prop {string} max - The native maximum constraint forwarded to the field
  * @prop {string} step - The native step constraint forwarded to the field
- * @prop {string} [emptyValueLabel='No value set'] - Text displayed in place of the value when readonly and empty
- * @prop {string} [confirmLabel='Save'] - The label of the confirm button in edit mode
- * @prop {string} [cancelLabel='Cancel'] - The label of the cancel button in edit mode
- * @prop {string} [ariaLabelClear='Clear field'] - The accessible label of the clear button
- * @prop {string} [ariaLabelShowPassword='Show password'] - The accessible label of the show password button
- * @prop {string} [ariaLabelHidePassword='Hide password'] - The accessible label of the hide password button
+ * @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} [confirmLabel] - The label of the confirm button in edit mode. Defaults to the localized string for the current locale (English: "Save")
+ * @prop {string} [cancelLabel] - The label of the cancel button in edit mode. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [clearLabel] - The accessible label of the clear button. Defaults to the localized string for the current locale (English: "Clear field")
+ * @prop {string} [showPasswordLabel] - The accessible label of the show password button. Defaults to the localized string for the current locale (English: "Show password")
+ * @prop {string} [hidePasswordLabel] - The accessible label of the hide password button. Defaults to the localized string for the current locale (English: "Hide password")
  * @fires {ChangeEvent} eunchange - Fired on every value change
  * @fires {CommitEvent} euncommit - Fired when an edit is confirmed in readonlyAvailable mode
  * @cssprop [--field-background] - Sets the background color of the field
@@ -149,34 +151,34 @@ export declare class EunomiaInput extends EunomiaInputMixinBase {
     step?: string;
     /**
      * Text displayed in place of the value when readonly and empty.
-     * @default No value set
+     * Falls back to the localized string for the current locale when unset.
      */
-    emptyValueLabel: string;
+    emptyValueLabel?: string;
     /**
      * Label of the confirm button in edit mode.
-     * @default Save
+     * Falls back to the localized string for the current locale when unset.
      */
-    confirmLabel: string;
+    confirmLabel?: string;
     /**
      * Label of the cancel button in edit mode.
-     * @default Cancel
+     * Falls back to the localized string for the current locale when unset.
      */
-    cancelLabel: string;
+    cancelLabel?: string;
     /**
      * Accessible label of the clear button.
-     * @default Clear field
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelClear: string;
+    clearLabel?: string;
     /**
      * Accessible label of the show-password button.
-     * @default Show password
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelShowPassword: string;
+    showPasswordLabel?: string;
     /**
      * Accessible label of the hide-password button.
-     * @default Hide password
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelHidePassword: string;
+    hidePasswordLabel?: string;
     /**
      * Whether the password's plain value is currently revealed.
      * @internal
@@ -213,28 +215,25 @@ export declare class EunomiaInput extends EunomiaInputMixinBase {
      * @protected
      */
     protected focusTarget(): HTMLElement | undefined;
+    constructor();
+    /**
+     * Submits the owning form on Enter in the field, as a native text input
+     * does, since the browser never does it from a shadow root. Listened to
+     * on the host so a handler inside, such as `eun-search` picking a
+     * suggestion, can claim the key first. Skipped while editing in
+     * `readonlyAvailable` mode, whose own buttons confirm the edit.
+     * @private
+     */
+    private readonly handleImplicitSubmission;
+    /**
+     * The host is never a tab stop of its own : sequential navigation goes
+     * straight to the native field inside, in both directions, and
+     * {@link focus} covers a direct call on the host.
+     */
+    protected get hostTabStop(): boolean;
     /**
      * Lifecycle hook called whenever reactive properties change. Focuses the
-     * field when entering edit mode, and corrects the host's own `tabindex`
-     * after every `disabled` change.
-     *
-     * `DisabledMixin` puts a real `tabindex="0"` on the host so Tab still
-     * reaches it while enabled — appropriate for a component whose host
-     * *is* the sole interactive surface, but this one always has its own
-     * focusable native field nested inside instead, and keeping the host
-     * itself as a *second*, independent tab stop right next to it broke
-     * Shift+Tab : landing back on the host is a genuine stop of its own as
-     * far as the browser's own backward sequential-navigation is concerned,
-     * and redirecting focus straight back into the field from there (this
-     * class's previous approach) fights that navigation mid-flight, leaving
-     * focus stranded on the host with nothing focused inside it. Removing
-     * the attribute instead lets sequential focus navigation descend
-     * straight into the field on its own, correctly in both directions, with
-     * no separate host stop and no redirect involved at all — this class's
-     * own `focus()` method (see below) covers a direct, explicit call on the
-     * host, the one case that genuinely still needs one. The disabled case
-     * still gets an explicit `-1` so a disabled field is skipped entirely
-     * rather than becoming its own (empty) stop.
+     * field when entering edit mode.
      *
      * @param _changedProperties - Map of changed properties
      */