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

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

@@ -31,15 +31,15 @@ const datePicker = css `
     display: flex;
     align-items: center;
     gap: var(--eun-space-xs, 4px);
-    width: 100%;
     color: var(--_textColor);
     background-color: var(--_background);
     border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-radius: var(--_borderRadius);
-    padding: var(--eun-space-xs, 4px) var(--eun-space-xs, 4px)
-      var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
+    padding: var(--_paddingBlock) calc(var(--_defaultPaddingInline) / 2)
+      var(--_paddingBlock) var(--_defaultPaddingInline);
     outline: 1px solid transparent;
-    box-sizing: border-box;
+    box-sizing: content-box;
+    height: var(--_lineHeight);
     transition:
       border-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease),
       outline-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
@@ -94,9 +94,10 @@ const datePicker = css `
     box-sizing: content-box;
     border: none;
     background: none;
-    padding: var(--eun-space-xxs, 1.6px) 1px;
+    padding: 0 1px;
     color: inherit;
     font: inherit;
+    line-height: var(--_lineHeight);
     text-align: center;
     outline: none;
     overflow: visible;
@@ -124,10 +125,11 @@ const datePicker = css `
     box-sizing: content-box;
     border: none;
     background: none;
-    padding: var(--eun-space-xxs, 1.6px) 1px;
+    padding: 0 1px;
     width: 2.5ch;
     color: inherit;
     font: inherit;
+    line-height: var(--_lineHeight);
     text-align: center;
     outline: none;
     cursor: pointer;
@@ -143,6 +145,7 @@ const datePicker = css `
     padding-inline: 2px;
   }
   #calendar-trigger {
+    --icon-size: min(16px, var(--_lineHeight));
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -6,8 +6,11 @@ import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { EditableMixinInterface } from "../../../mixins/editable.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixinInterface } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixinInterface } from "../../../mixins/field-size.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 +23,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 & RoundedMixinInterface & FieldSizeMixinInterface & LocalizableMixinInterface;
 declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
 /**
  * A single-line text field, supporting several native input types.
@@ -28,6 +31,8 @@ declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
  * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty
  * @prop {'text' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'password'} [type='text'] - The native input type to apply
  * @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} placeholder - The placeholder shown when the field is empty
@@ -38,6 +43,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 +57,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
@@ -76,6 +82,7 @@ declare const EunomiaInputMixinBase: Constructor<EunomiaInputBase>;
  * @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-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-input
@@ -149,34 +156,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 +220,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
      */

package/dist/components/form/input/input.js

@@ -16,10 +16,14 @@ 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 { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { inputStyles } from "./input.styles.js";
 import { pickValidity } from "../../../utils/validity.utils.js";
+import { isImplicitSubmissionKey, submitImplicitly, } from "../../../utils/implicit-submission.utils.js";
+import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the input component.
  */
@@ -29,13 +33,15 @@ export const EunomiaInputTagName = "eun-input";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaInputMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))));
+const EunomiaInputMixinBase = LocalizableMixin(RoundedMixin(FieldSizeMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))))));
 /**
  * A single-line text field, supporting several native input types.
  *
  * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty
  * @prop {'text' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'password'} [type='text'] - The native input type to apply
  * @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} placeholder - The placeholder shown when the field is empty
@@ -46,6 +52,7 @@ const EunomiaInputMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(
  * @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
@@ -59,12 +66,12 @@ const EunomiaInputMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(
  * @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
@@ -84,13 +91,46 @@ const EunomiaInputMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(
  * @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-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-input
  */
 let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
+    /**
+     * The default value applied on connection and form reset. Overrides the
+     * `defaultValue` accessor inherited from `FormMixin` only to drop its
+     * generic attribute converter, which always splits `default-value` on
+     * commas (appropriate for an array-valued field, not this component's
+     * plain `string` value) — `default-value="foo,bar"` would otherwise be
+     * parsed as `['foo', 'bar']` and silently assigned to a `string`-typed
+     * `value`. The actual get/set logic still comes from `FormMixin` itself,
+     * via `super`.
+     */
+    get defaultValue() {
+        return super.defaultValue;
+    }
+    set defaultValue(value) {
+        // `FormMixinInterface.defaultValue` is declared getter-only (the
+        // mixin's real class has a working setter too — the interface used to
+        // type this component's base just omits it), so TS treats this as
+        // read-only even though it's correct and necessary at runtime.
+        // @ts-expect-error — see comment above ; FormMixin's real setter exists.
+        super.defaultValue = value;
+    }
+    /**
+     * The element a direct `.focus()` call on the host actually focuses.
+     * Defaults to the native field ; overridden by a subclass whose real,
+     * visible focusable proxy is something else — e.g. `eun-search`'s
+     * `panel` mode, whose native field lives inside a closed modal and isn't
+     * a valid focus target until it's open.
+     * @protected
+     */
+    focusTarget() {
+        return this.fieldEl;
+    }
     constructor() {
-        super(...arguments);
+        super();
         /**
          * The native input type to apply.
          * @default text
@@ -106,36 +146,6 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
          * @default off
          */
         this.autocomplete = "off";
-        /**
-         * Text displayed in place of the value when readonly and empty.
-         * @default No value set
-         */
-        this.emptyValueLabel = "No value set";
-        /**
-         * Label of the confirm button in edit mode.
-         * @default Save
-         */
-        this.confirmLabel = "Save";
-        /**
-         * Label of the cancel button in edit mode.
-         * @default Cancel
-         */
-        this.cancelLabel = "Cancel";
-        /**
-         * Accessible label of the clear button.
-         * @default Clear field
-         */
-        this.ariaLabelClear = "Clear field";
-        /**
-         * Accessible label of the show-password button.
-         * @default Show password
-         */
-        this.ariaLabelShowPassword = "Show password";
-        /**
-         * Accessible label of the hide-password button.
-         * @default Hide password
-         */
-        this.ariaLabelHidePassword = "Hide password";
         /**
          * Whether the password's plain value is currently revealed.
          * @internal
@@ -150,6 +160,25 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
         this.handleIconSlotChange = () => {
             this.requestUpdate();
         };
+        /**
+         * 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
+         */
+        this.handleImplicitSubmission = (event) => {
+            const form = this.internals.form;
+            if (!form ||
+                event.composedPath()[0] !== this.fieldEl ||
+                !isImplicitSubmissionKey(event) ||
+                (this.readonlyAvailable && this.editing)) {
+                return;
+            }
+            event.preventDefault();
+            submitImplicitly(form);
+        };
         /**
          * Reads native HTML constraint validation from the underlying field element
          * (`required`, `minlength`, `maxlength`, `pattern`, `min`, `max`, `type="email"`, etc.).
@@ -169,61 +198,19 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
                 "badInput",
             ]);
         };
+        this.addEventListener("keydown", this.handleImplicitSubmission);
     }
     /**
-     * The default value applied on connection and form reset. Overrides the
-     * `defaultValue` accessor inherited from `FormMixin` only to drop its
-     * generic attribute converter, which always splits `default-value` on
-     * commas (appropriate for an array-valued field, not this component's
-     * plain `string` value) — `default-value="foo,bar"` would otherwise be
-     * parsed as `['foo', 'bar']` and silently assigned to a `string`-typed
-     * `value`. The actual get/set logic still comes from `FormMixin` itself,
-     * via `super`.
+     * 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.
      */
-    get defaultValue() {
-        return super.defaultValue;
-    }
-    set defaultValue(value) {
-        // `FormMixinInterface.defaultValue` is declared getter-only (the
-        // mixin's real class has a working setter too — the interface used to
-        // type this component's base just omits it), so TS treats this as
-        // read-only even though it's correct and necessary at runtime.
-        // @ts-expect-error — see comment above ; FormMixin's real setter exists.
-        super.defaultValue = value;
-    }
-    /**
-     * The element a direct `.focus()` call on the host actually focuses.
-     * Defaults to the native field ; overridden by a subclass whose real,
-     * visible focusable proxy is something else — e.g. `eun-search`'s
-     * `panel` mode, whose native field lives inside a closed modal and isn't
-     * a valid focus target until it's open.
-     * @protected
-     */
-    focusTarget() {
-        return this.fieldEl;
+    get hostTabStop() {
+        return false;
     }
     /**
      * 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
      */
@@ -232,14 +219,6 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
         if (_changedProperties.has("editing") && this.editing) {
             this.fieldEl?.focus();
         }
-        if (_changedProperties.has("disabled")) {
-            if (this.disabled) {
-                this.setAttribute("tabindex", "-1");
-            }
-            else {
-                this.removeAttribute("tabindex");
-            }
-        }
     }
     /**
      * Returns the field element to focus/anchor on validation errors.
@@ -304,7 +283,9 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
         @keydown=${(event) => (event.key === "Enter" || event.key === " ") && this.startEdit()}
       >
         <span class=${classMap({ empty: !hasValue })}
-          >${hasValue ? this.value : this.emptyValueLabel}</span
+          >${hasValue
+            ? this.value
+            : (this.emptyValueLabel ?? this.dictionary.common.noValue)}</span
         >
       </div>
     `;
@@ -397,7 +378,7 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
               type="button"
               id="clear"
               @click=${this.handleClear}
-              aria-label=${this.ariaLabelClear}
+              aria-label=${this.clearLabel ?? this.dictionary.input.clear}
               tabindex="-1"
             >
               <eun-icon name="cancel" size="16"></eun-icon>
@@ -409,10 +390,10 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
               id="password-toggle"
               @click=${this.togglePasswordVisibility}
               aria-label=${this.showPassword
-            ? this.ariaLabelHidePassword
-            : this.ariaLabelShowPassword}
+            ? (this.hidePasswordLabel ?? this.dictionary.input.hidePassword)
+            : (this.showPasswordLabel ??
+                this.dictionary.input.showPassword)}
               aria-pressed=${this.showPassword}
-              tabindex="-1"
             >
               <eun-icon
                 name=${this.showPassword ? "visibility_off" : "visibility"}
@@ -428,11 +409,11 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
               class="confirm"
               size="s"
               color="primary"
-              appearance="default"
+              appearance="soft"
               rounded
               type="button"
               @click=${this.confirmEdit}
-              >${this.confirmLabel}</eun-button
+              >${this.confirmLabel ?? this.dictionary.common.save}</eun-button
             >
             <eun-button
               class="cancel"
@@ -441,7 +422,7 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
               rounded
               type="button"
               @click=${this.cancelEdit}
-              >${this.cancelLabel}</eun-button
+              >${this.cancelLabel ?? this.dictionary.common.cancel}</eun-button
             >
           </div>
         `)}
@@ -483,7 +464,7 @@ EunomiaInput.styles = [
     formLabelsStyles.hintMessages,
 ];
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaInput.prototype, "type", void 0);
 __decorate([
     property({ attribute: "default-value" })
@@ -528,14 +509,14 @@ __decorate([
     property({ attribute: "cancel-label" })
 ], EunomiaInput.prototype, "cancelLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-clear" })
-], EunomiaInput.prototype, "ariaLabelClear", void 0);
+    property({ attribute: "clear-label" })
+], EunomiaInput.prototype, "clearLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-show-password" })
-], EunomiaInput.prototype, "ariaLabelShowPassword", void 0);
+    property({ attribute: "show-password-label" })
+], EunomiaInput.prototype, "showPasswordLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-hide-password" })
-], EunomiaInput.prototype, "ariaLabelHidePassword", void 0);
+    property({ attribute: "hide-password-label" })
+], EunomiaInput.prototype, "hidePasswordLabel", void 0);
 __decorate([
     state()
 ], EunomiaInput.prototype, "showPassword", void 0);

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

@@ -5,6 +5,7 @@ import { ValidatorsMixinInterface } from "../../../mixins/validators.mixin.js";
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
+import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the input-file component.
  */
@@ -18,7 +19,7 @@ export type EunomiaInputFileKind = "image" | "file";
  * Type of the input-file base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaInputFileBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<File[]> & FormMixinInterface<File[]> & FormLabelMixinInterface;
+type EunomiaInputFileBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<File[]> & FormMixinInterface<File[]> & FormLabelMixinInterface & LocalizableMixinInterface;
 declare const EunomiaInputFileMixinBase: Constructor<EunomiaInputFileBase>;
 /**
  * A file upload field with a dropzone, showing image thumbnails or generic
@@ -38,24 +39,25 @@ declare const EunomiaInputFileMixinBase: Constructor<EunomiaInputFileBase>;
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether at least one file 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<import('../../../types/form-validators.type.js').Validators<File[]>>} validators - The list of validation rules applied to the field value
  * @prop {string} [dropLabel='Drag and drop files here, or'] - Static text displayed in the dropzone
  * @attr {string} [drop-label='Drag and drop files here, or'] - Static text displayed in the dropzone
  * @prop {string} [browseLabel='browse files'] - The visible text of the dropzone's browse link
  * @attr {string} [browse-label='browse files'] - The visible text of the dropzone's browse link
- * @prop {string} [ariaLabelRemove='Remove file'] - The accessible label of each item's remove button
- * @attr {string} [aria-label-remove='Remove file'] - The accessible label of each item's remove button
- * @prop {string} [ariaLabelSelect='Select file'] - The accessible label prefix of each item's checkbox
- * @attr {string} [aria-label-select='Select file'] - The accessible label prefix of each item's checkbox
+ * @prop {string} [removeLabel] - The accessible label of each item's remove button. Defaults to the localized string for the current locale (English: "Remove file")
+ * @attr {string} [remove-label] - The accessible label of each item's remove button. Defaults to the localized string for the current locale (English: "Remove file")
+ * @prop {string} [selectLabel] - The accessible label prefix of each item's checkbox. Defaults to the localized string for the current locale (English: "Select file")
+ * @attr {string} [select-label] - The accessible label prefix of each item's checkbox. Defaults to the localized string for the current locale (English: "Select file")
  * @prop {string} [removeAllLabel='Remove all'] - The label of the always-available bulk clear action
  * @attr {string} [remove-all-label='Remove all'] - The label of the always-available bulk clear action
  * @prop {string} [selectAllLabel='Select all'] - The label of the selection toolbar's select-all checkbox
  * @attr {string} [select-all-label='Select all'] - The label of the selection toolbar's select-all checkbox
  * @prop {string} [deleteSelectedLabel='Delete selected'] - The label of the selection toolbar's bulk delete button
  * @attr {string} [delete-selected-label='Delete selected'] - The label of the selection toolbar's bulk delete button
- * @prop {string} [ariaLabelOpen='Open in a new tab'] - Appended to each item's accessible name
- * @attr {string} [aria-label-open='Open in a new tab'] - Appended to each item's accessible name
+ * @prop {string} [openLabel] - Appended to each item's accessible name. Defaults to the localized string for the current locale (English: "Open in a new tab")
+ * @attr {string} [open-label] - Appended to each item's accessible name. Defaults to the localized string for the current locale (English: "Open in a new tab")
  * @fires {ChangeEvent} eunchange - Fired whenever the selected files change
  * @fires {FileRejectEvent} eunfilereject - Fired whenever one or more offered files are rejected, for the wrong type or exceeding the size or count limit
  * @cssprop [--input-file-border-color] - Sets the border color of the dropzone
@@ -85,6 +87,11 @@ export declare class EunomiaInputFile extends EunomiaInputFileMixinBase {
      * @internal
      */
     static styles: CSSResultGroup;
+    /**
+     * Every change is a complete choice, so its error shows right away.
+     * @internal
+     */
+    errorOnChange: boolean;
     /**
      * Accepted content kind: image thumbnails vs. generic file rows.
      * @default image
@@ -128,15 +135,15 @@ export declare class EunomiaInputFile extends EunomiaInputFileMixinBase {
     /**
      * Accessible label prefix of each item's remove button (suffixed with the
      * file name).
-     * @default Remove file
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelRemove: string;
+    removeLabel?: string;
     /**
      * Accessible label prefix of each item's checkbox (suffixed with the file
      * name), when `selectable`.
-     * @default Select file
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelSelect: string;
+    selectLabel?: string;
     /**
      * Label of the always-available bulk clear action, shown once at least one
      * file is present.
@@ -157,9 +164,9 @@ export declare class EunomiaInputFile extends EunomiaInputFileMixinBase {
     /**
      * Appended to each item's accessible name (its primary action is opening
      * the file in a new tab).
-     * @default Open in a new tab
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelOpen: string;
+    openLabel?: string;
     /**
      * Whether a drag carrying files is currently over the host — reflected so
      * `:host([dragging])` can drive the dropzone's highlight.
@@ -223,6 +230,12 @@ export declare class EunomiaInputFile extends EunomiaInputFileMixinBase {
      * @param changedProperties - Map of changed properties
      */
     protected updated(changedProperties: PropertyValues): void;
+    /**
+     * 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 element to focus/anchor on validation errors.
      *