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

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

@@ -20,6 +20,8 @@ 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,7 +31,7 @@ export const EunomiaInputTagName = "eun-input";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaInputMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))));
+const EunomiaInputMixinBase = LocalizableMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
 /**
  * A single-line text field, supporting several native input types.
  *
@@ -46,6 +48,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 +62,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
@@ -89,8 +92,40 @@ const EunomiaInputMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(
  * @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 +141,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 +155,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 +193,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 +214,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 +278,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 +373,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 +385,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"}
@@ -432,7 +408,7 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
               rounded
               type="button"
               @click=${this.confirmEdit}
-              >${this.confirmLabel}</eun-button
+              >${this.confirmLabel ?? this.dictionary.common.save}</eun-button
             >
             <eun-button
               class="cancel"
@@ -441,7 +417,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 +459,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 +504,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.
      *

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

@@ -17,6 +17,7 @@ import { ChangeEvent } from "../../../events/change.event.js";
 import { FileRejectEvent, } from "../../../events/file-reject.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { inputFileStyles } from "./input-file.styles.js";
+import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the input-file component.
  */
@@ -26,7 +27,7 @@ export const EunomiaInputFileTagName = "eun-input-file";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaInputFileMixinBase = FormLabelMixin(ReadonlyMixin(FormMixin(Base)));
+const EunomiaInputFileMixinBase = LocalizableMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))));
 /**
  * A file upload field with a dropzone, showing image thumbnails or generic
  * file rows for the selected files.
@@ -45,24 +46,25 @@ const EunomiaInputFileMixinBase = FormLabelMixin(ReadonlyMixin(FormMixin(Base)))
  * @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
@@ -87,6 +89,11 @@ const EunomiaInputFileMixinBase = FormLabelMixin(ReadonlyMixin(FormMixin(Base)))
 let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase {
     constructor() {
         super(...arguments);
+        /**
+         * Every change is a complete choice, so its error shows right away.
+         * @internal
+         */
+        this.errorOnChange = true;
         /**
          * Accepted content kind: image thumbnails vs. generic file rows.
          * @default image
@@ -113,18 +120,6 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
          * @default browse files
          */
         this.browseLabel = "browse files";
-        /**
-         * Accessible label prefix of each item's remove button (suffixed with the
-         * file name).
-         * @default Remove file
-         */
-        this.ariaLabelRemove = "Remove file";
-        /**
-         * Accessible label prefix of each item's checkbox (suffixed with the file
-         * name), when `selectable`.
-         * @default Select file
-         */
-        this.ariaLabelSelect = "Select file";
         /**
          * Label of the always-available bulk clear action, shown once at least one
          * file is present.
@@ -142,12 +137,6 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
          * @default Delete selected
          */
         this.deleteSelectedLabel = "Delete selected";
-        /**
-         * Appended to each item's accessible name (its primary action is opening
-         * the file in a new tab).
-         * @default Open in a new tab
-         */
-        this.ariaLabelOpen = "Open in a new tab";
         /**
          * Whether a drag carrying files is currently over the host — reflected so
          * `:host([dragging])` can drive the dropzone's highlight.
@@ -293,6 +282,14 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
             }
         }
     }
+    /**
+     * 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 element to focus/anchor on validation errors.
      *
@@ -622,7 +619,8 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
         class="item"
         role="button"
         tabindex=${this.disabled ? "-1" : "0"}
-        aria-label="${file.name} — ${this.ariaLabelOpen}"
+        aria-label="${file.name} — ${this.openLabel ??
+            this.dictionary.inputFile.open}"
         @click=${() => !this.disabled && this.openFile(file)}
         @keydown=${(event) => this.handleItemKeydown(event, file)}
       >
@@ -630,7 +628,8 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
             <input
               type="checkbox"
               class="item-checkbox"
-              aria-label="${this.ariaLabelSelect} ${file.name}"
+              aria-label="${this.selectLabel ??
+            this.dictionary.inputFile.select} ${file.name}"
               .checked=${isSelected}
               ?disabled=${this.disabled || this.readonly}
               @click=${(event) => event.stopPropagation()}
@@ -653,7 +652,8 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
         <button
           type="button"
           class="item-remove"
-          aria-label="${this.ariaLabelRemove} ${file.name}"
+          aria-label="${this.removeLabel ??
+            this.dictionary.inputFile.remove} ${file.name}"
           ?disabled=${this.disabled || this.readonly}
           @click=${(event) => {
             event.stopPropagation();
@@ -742,7 +742,7 @@ EunomiaInputFile.styles = [
     formLabelsStyles.hintMessages,
 ];
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaInputFile.prototype, "kind", void 0);
 __decorate([
     property()
@@ -766,11 +766,11 @@ __decorate([
     property({ attribute: "browse-label" })
 ], EunomiaInputFile.prototype, "browseLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-remove" })
-], EunomiaInputFile.prototype, "ariaLabelRemove", void 0);
+    property({ attribute: "remove-label" })
+], EunomiaInputFile.prototype, "removeLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-select" })
-], EunomiaInputFile.prototype, "ariaLabelSelect", void 0);
+    property({ attribute: "select-label" })
+], EunomiaInputFile.prototype, "selectLabel", void 0);
 __decorate([
     property({ attribute: "remove-all-label" })
 ], EunomiaInputFile.prototype, "removeAllLabel", void 0);
@@ -781,8 +781,8 @@ __decorate([
     property({ attribute: "delete-selected-label" })
 ], EunomiaInputFile.prototype, "deleteSelectedLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-open" })
-], EunomiaInputFile.prototype, "ariaLabelOpen", void 0);
+    property({ attribute: "open-label" })
+], EunomiaInputFile.prototype, "openLabel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaInputFile.prototype, "dragging", void 0);

package/dist/components/form/input-file/input-file.styles.js

@@ -196,7 +196,7 @@ const base = css `
     display: grid;
     gap: var(--_gap);
   }
-  :host([kind="image"]) #items {
+  :host(:is([kind="image"], :not([kind]))) #items {
     grid-template-columns: repeat(
       auto-fill,
       minmax(var(--_thumbnailSize), 1fr)
@@ -219,7 +219,7 @@ const base = css `
   .item:focus-visible {
     outline: 1px solid var(--_focusIndicator);
   }
-  :host([kind="image"]) .item {
+  :host(:is([kind="image"], :not([kind]))) .item {
     aspect-ratio: 1 / 1;
     overflow: hidden;
     align-items: stretch;
@@ -258,7 +258,7 @@ const base = css `
   .item-checkbox {
     flex: none;
   }
-  :host([kind="image"]) .item-checkbox {
+  :host(:is([kind="image"], :not([kind]))) .item-checkbox {
     position: absolute;
     top: var(--eun-space-xs, 4px);
     left: var(--eun-space-xs, 4px);
@@ -284,7 +284,7 @@ const base = css `
   :host([kind="file"]) .item-remove:hover {
     color: var(--_textColor);
   }
-  :host([kind="image"]) .item-remove {
+  :host(:is([kind="image"], :not([kind]))) .item-remove {
     position: absolute;
     top: var(--eun-space-xs, 4px);
     right: var(--eun-space-xs, 4px);