@eunomia/elements 1.0.0-beta.5 → 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.
  *
@@ -45,7 +47,9 @@ const EunomiaInputMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether the field is required
- * @prop {boolean} [hideError=false] - Whether the errors are hidden
+ * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
+ * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<Validators<string>>} validators - The list of validation rules applied to the field value
  * @prop {EunomiaIconName} icon - An optional leading icon
  * @prop {boolean} [clearable=false] - Whether a clear button is shown when the field has a value
@@ -58,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
@@ -72,6 +76,8 @@ const EunomiaInputMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(
  * @cssprop [--field-border-color-focus] - Sets the border color on focus
  * @cssprop [--field-border-radius] - Sets the corner radius of the field
  * @cssprop [--field-padding] - Sets the padding of the field
+ * @cssprop [--field-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --field-padding is set
+ * @cssprop [--field-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --field-padding is set
  * @cssprop [--field-text-color] - Sets the text color of the field
  * @cssprop [--field-placeholder-color] - Sets the color of the placeholder
  * @cssprop [--field-icon-color] - Sets the color of the leading icon and action buttons
@@ -80,11 +86,46 @@ const EunomiaInputMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(
  * @cssprop [--field-focus-outline-color] - Sets the color of the focus outline
  * @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-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
@@ -100,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
@@ -144,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.).
@@ -163,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
      */
@@ -226,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.
@@ -298,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>
     `;
@@ -381,7 +363,7 @@ let EunomiaInput = class EunomiaInput extends EunomiaInputMixinBase {
             : this.type === "email"
                 ? "email"
                 : nothing}
-          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+          aria-invalid=${this.showError}
           aria-label=${ifDefined(this.label)}
           aria-describedby=${hasDescription ? "description" : nothing}
           @input=${this.handleInput}
@@ -391,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>
@@ -403,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"}
@@ -426,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"
@@ -435,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>
         `)}
@@ -477,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" })
@@ -522,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
@@ -37,24 +38,26 @@ declare const EunomiaInputFileMixinBase: Constructor<EunomiaInputFileBase>;
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @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
+ * @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
@@ -72,6 +75,8 @@ declare const EunomiaInputFileMixinBase: Constructor<EunomiaInputFileBase>;
  * @cssprop [--input-file-item-border-color] - Sets the border color of each item
  * @cssprop [--input-file-gap] - Sets the gap between the dropzone, header, and items
  * @cssprop [--input-file-thumbnail-size] - Sets the minimum size of image thumbnails
+ * @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-file
  */
 export declare class EunomiaInputFile extends EunomiaInputFileMixinBase {
@@ -82,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
@@ -125,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.
@@ -154,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.
@@ -220,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.
      *