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

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.
@@ -44,24 +45,26 @@ const EunomiaInputFileMixinBase = FormLabelMixin(ReadonlyMixin(FormMixin(Base)))
  * @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
@@ -79,11 +82,18 @@ const EunomiaInputFileMixinBase = FormLabelMixin(ReadonlyMixin(FormMixin(Base)))
  * @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
  */
 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
@@ -110,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.
@@ -139,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.
@@ -290,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.
      *
@@ -446,7 +446,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
         const next = current.filter((candidate) => candidate !== file);
         this.value = next;
         this.dispatchEvent(new ChangeEvent(this.value));
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             if (!next.length) {
                 this.firstFocusable()?.focus();
                 return;
@@ -463,7 +463,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
         this.selected = new Set();
         this.value = [];
         this.dispatchEvent(new ChangeEvent(this.value));
-        this.updateComplete.then(() => this.firstFocusable()?.focus());
+        void this.updateComplete.then(() => this.firstFocusable()?.focus());
     }
     /**
      * Removes every currently-selected file.
@@ -475,7 +475,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
         this.selected = new Set();
         this.value = next;
         this.dispatchEvent(new ChangeEvent(this.value));
-        this.updateComplete.then(() => this.firstFocusable()?.focus());
+        void this.updateComplete.then(() => this.firstFocusable()?.focus());
     }
     toggleSelected(file, checked) {
         const next = new Set(this.selected);
@@ -594,7 +594,7 @@ let EunomiaInputFile = class EunomiaInputFile extends EunomiaInputFileMixinBase
           ?multiple=${this.multiple}
           ?disabled=${disabled}
           aria-label=${ifDefined(this.label)}
-          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+          aria-invalid=${this.showError}
           aria-describedby=${hasDescription ? "description" : nothing}
           @change=${this.handleNativeChange}
         />
@@ -619,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)}
       >
@@ -627,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()}
@@ -650,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();
@@ -739,7 +742,7 @@ EunomiaInputFile.styles = [
     formLabelsStyles.hintMessages,
 ];
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaInputFile.prototype, "kind", void 0);
 __decorate([
     property()
@@ -763,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);
@@ -778,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

@@ -99,8 +99,9 @@ const base = css `
     cursor: pointer;
     box-sizing: border-box;
     transition:
-      border-color 0.15s ease,
-      background-color 0.15s ease;
+      border-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease),
+      background-color var(--eun-duration-s, 150ms)
+        var(--eun-easing-default, ease);
   }
   #dropzone #drop-icon {
     --icon-color: var(--_iconColor);
@@ -195,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)
@@ -218,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;
@@ -257,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);
@@ -283,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);

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

@@ -7,6 +7,7 @@ import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { AnchorPositionMixinInterface } from "../../../mixins/anchor-position.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
+import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the phone input component.
  */
@@ -16,7 +17,7 @@ export declare const EunomiaInputPhoneTagName = "eun-input-phone";
  * interface element.
  * @internal
  */
-type EunomiaInputPhoneBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface;
+type EunomiaInputPhoneBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
 /**
  * A phone number field rendered in two adjacent parts: a compact country
@@ -54,15 +55,17 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * @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 {string} [placeholder] - The placeholder shown when the field is empty. Defaults to a generic formatted digit pattern, not a real per-country example, when unset
  * @prop {string} [countrySearchPlaceholder='Search a country…'] - The placeholder of the search field inside the country dropdown
  * @attr {string} [country-search-placeholder='Search a country…'] - The placeholder of the search field inside the country dropdown
  * @prop {string} [noResultsLabel='No results'] - Text displayed in the dropdown when no country matches the search
  * @attr {string} [no-results-label='No results'] - Text displayed in the dropdown when no country matches the search
- * @prop {string} [ariaLabelCountrySelector='Select a country'] - The accessible label of the leading country selector button
- * @attr {string} [aria-label-country-selector='Select a country'] - The accessible label of the leading country selector button
+ * @prop {string} [countrySelectorLabel] - The accessible label of the leading country selector button. Defaults to the localized string for the current locale (English: "Select a country")
+ * @attr {string} [country-selector-label] - The accessible label of the leading country selector button. Defaults to the localized string for the current locale (English: "Select a country")
  * @fires {ChangeEvent} eunchange - Fired on every value change
  * @cssprop [--field-background] - Sets the background color of the field
  * @cssprop [--field-border-color] - Sets the border color of the field
@@ -70,6 +73,8 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * @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 country selector button
@@ -80,6 +85,9 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the dropdown panel's open and close height transition, disabled entirely under reduced motion settings
  * @cssprop [--eun-viewport-inset-top] - Reserves space, such as a page's sticky header height, that the dropdown panel keeps clear of at the top of the viewport. Set on the root or an ancestor rather than on the field itself
  * @cssprop [--eun-viewport-inset-bottom] - The same as eun-viewport-inset-top, reserved at the bottom of the viewport, such as for a sticky footer
+ * @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-phone
  */
 export declare class EunomiaInputPhone extends EunomiaInputPhoneMixinBase {
@@ -133,9 +141,9 @@ export declare class EunomiaInputPhone extends EunomiaInputPhoneMixinBase {
     noResultsLabel: string;
     /**
      * Accessible label of the leading country-selector button.
-     * @default Select a country
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelCountrySelector: string;
+    countrySelectorLabel?: string;
     /**
      * The raw national digits currently typed (no dial code, no separators) —
      * *including* a leading trunk "0" if the user typed one, kept exactly as
@@ -205,6 +213,15 @@ export declare class EunomiaInputPhone extends EunomiaInputPhoneMixinBase {
      * @internal
      */
     private triggerPointerDownAt?;
+    constructor();
+    /**
+     * Submits the owning form on Enter in the number field, as a native text
+     * input does, since the browser never does it from a shadow root.
+     * Listened to on the host so the country list's own Enter handling is
+     * never mistaken for it.
+     * @private
+     */
+    private readonly handleImplicitSubmission;
     connectedCallback(): void;
     /**
      * Lifecycle hook called when the element is disconnected from the DOM.
@@ -262,6 +279,12 @@ export declare class EunomiaInputPhone extends EunomiaInputPhoneMixinBase {
      * @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 field element to focus/anchor on validation errors.
      *
@@ -290,7 +313,7 @@ export declare class EunomiaInputPhone extends EunomiaInputPhoneMixinBase {
     /**
      * The listbox's open/close animation duration, in ms : `0` under
      * `prefers-reduced-motion: reduce`, otherwise `--field-listbox-
-     * transition-duration` (default `200ms`) — same custom property
+     * transition-duration` (default `--eun-duration-m`) — same custom property
      * `eun-select`/`eun-search` share.
      *
      * @param el the listbox to read `--field-listbox-transition-duration` off.

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

@@ -8,6 +8,7 @@ var EunomiaInputPhone_1;
 import { customElement, property, query, state } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { DisabledMixin, } from "../../../mixins/disabled.mixin.js";
 import { ReadonlyMixin, } from "../../../mixins/readonly.mixin.js";
 import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
@@ -20,6 +21,9 @@ import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { inputPhoneStyles } from "./input-phone.styles.js";
 import { isWebKit } from "../../../utils/browser.utils.js";
 import { COUNTRY_DIAL_CODES, formatNationalNumber, fromE164, getCountryName, getDialCode, getNationalLength, stripTrunkPrefix, getFlagEmoji, toE164, } from "./input-phone.type.js";
+import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
+import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
+import { isImplicitSubmissionKey, submitImplicitly, } from "../../../utils/implicit-submission.utils.js";
 /**
  * Tag name of the phone input component.
  */
@@ -62,7 +66,7 @@ const TRIGGER_POINTER_DOWN_WINDOW_MS = 100;
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base)))));
+const EunomiaInputPhoneMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
 /**
  * A phone number field rendered in two adjacent parts: a compact country
  * selector, showing only the flag, on the leading side, and the phone
@@ -99,15 +103,17 @@ const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldAppearanceMixin(Form
  * @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 {string} [placeholder] - The placeholder shown when the field is empty. Defaults to a generic formatted digit pattern, not a real per-country example, when unset
  * @prop {string} [countrySearchPlaceholder='Search a country…'] - The placeholder of the search field inside the country dropdown
  * @attr {string} [country-search-placeholder='Search a country…'] - The placeholder of the search field inside the country dropdown
  * @prop {string} [noResultsLabel='No results'] - Text displayed in the dropdown when no country matches the search
  * @attr {string} [no-results-label='No results'] - Text displayed in the dropdown when no country matches the search
- * @prop {string} [ariaLabelCountrySelector='Select a country'] - The accessible label of the leading country selector button
- * @attr {string} [aria-label-country-selector='Select a country'] - The accessible label of the leading country selector button
+ * @prop {string} [countrySelectorLabel] - The accessible label of the leading country selector button. Defaults to the localized string for the current locale (English: "Select a country")
+ * @attr {string} [country-selector-label] - The accessible label of the leading country selector button. Defaults to the localized string for the current locale (English: "Select a country")
  * @fires {ChangeEvent} eunchange - Fired on every value change
  * @cssprop [--field-background] - Sets the background color of the field
  * @cssprop [--field-border-color] - Sets the border color of the field
@@ -115,6 +121,8 @@ const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldAppearanceMixin(Form
  * @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 country selector button
@@ -125,11 +133,14 @@ const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldAppearanceMixin(Form
  * @cssprop [--field-listbox-transition-duration=200ms] - Sets the duration of the dropdown panel's open and close height transition, disabled entirely under reduced motion settings
  * @cssprop [--eun-viewport-inset-top] - Reserves space, such as a page's sticky header height, that the dropdown panel keeps clear of at the top of the viewport. Set on the root or an ancestor rather than on the field itself
  * @cssprop [--eun-viewport-inset-bottom] - The same as eun-viewport-inset-top, reserved at the bottom of the viewport, such as for a sticky footer
+ * @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-phone
  */
 let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends EunomiaInputPhoneMixinBase {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * Hides the leading country-selector part entirely. `country` can still
          * be set programmatically, with no picker UI to change it.
@@ -151,11 +162,6 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
          * @default No results
          */
         this.noResultsLabel = "No results";
-        /**
-         * Accessible label of the leading country-selector button.
-         * @default Select a country
-         */
-        this.ariaLabelCountrySelector = "Select a country";
         /**
          * The raw national digits currently typed (no dial code, no separators) —
          * *including* a leading trunk "0" if the user typed one, kept exactly as
@@ -182,6 +188,23 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
          * @internal
          */
         this.highlightedIndex = -1;
+        /**
+         * Submits the owning form on Enter in the number field, as a native text
+         * input does, since the browser never does it from a shadow root.
+         * Listened to on the host so the country list's own Enter handling is
+         * never mistaken for it.
+         * @private
+         */
+        this.handleImplicitSubmission = (event) => {
+            const form = this.internals.form;
+            if (!form ||
+                event.composedPath()[0] !== this.fieldEl ||
+                !isImplicitSubmissionKey(event)) {
+                return;
+            }
+            event.preventDefault();
+            submitImplicitly(form);
+        };
         /**
          * Closes the dropdown when the browser window itself loses focus (e.g.
          * Alt-Tab to another application). The Popover API's own light-dismiss
@@ -260,6 +283,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
             this.unanchorFloatingElement();
             this.unobserveAnchorVisibility();
         };
+        this.addEventListener("keydown", this.handleImplicitSubmission);
     }
     connectedCallback() {
         super.connectedCallback?.();
@@ -334,6 +358,14 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
                 ?.scrollIntoView({ block: "nearest" });
         }
     }
+    /**
+     * The host is never a tab stop of its own : sequential navigation goes
+     * straight to the controls inside, in both directions, and
+     * {@link focus} covers a direct call on the host.
+     */
+    get hostTabStop() {
+        return false;
+    }
     /**
      * Returns the field element to focus/anchor on validation errors.
      *
@@ -382,7 +414,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
     /**
      * The listbox's open/close animation duration, in ms : `0` under
      * `prefers-reduced-motion: reduce`, otherwise `--field-listbox-
-     * transition-duration` (default `200ms`) — same custom property
+     * transition-duration` (default `--eun-duration-m`) — same custom property
      * `eun-select`/`eun-search` share.
      *
      * @param el the listbox to read `--field-listbox-transition-duration` off.
@@ -392,18 +424,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
         if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
             return 0;
         }
-        const raw = getComputedStyle(el)
-            .getPropertyValue("--field-listbox-transition-duration")
-            .trim();
-        if (raw) {
-            const parsed = raw.endsWith("ms")
-                ? Number.parseFloat(raw)
-                : Number.parseFloat(raw) * 1000;
-            if (Number.isFinite(parsed) && parsed >= 0) {
-                return parsed;
-            }
-        }
-        return 200;
+        return resolveDurationMs(el, "--field-listbox-transition-duration", "m", 200);
     }
     /**
      * Plays the fade/scaleY-in, replacing any {@link listboxAnimation}
@@ -421,7 +442,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
         this.listboxAnimation = listbox.animate([
             { opacity: 0, transform: "scaleY(0.01)" },
             { opacity: 1, transform: "scaleY(1)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(listbox), fill: "forwards" });
     }
     /**
      * Closes the dropdown panel, if open. All state cleanup happens in
@@ -458,7 +479,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
         const animation = listbox.animate([
             { opacity: 1, transform: "scaleY(1)" },
             { opacity: 0, transform: "scaleY(0.01)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(listbox), fill: "forwards" });
         this.listboxAnimation = animation;
         animation.finished
             .then(() => {
@@ -639,7 +660,8 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
         aria-haspopup="listbox"
         aria-expanded=${this.isOpen}
         aria-controls="listbox"
-        aria-label=${this.ariaLabelCountrySelector}
+        aria-label=${this.countrySelectorLabel ??
+            this.dictionary.inputPhone.selectCountry}
         ?disabled=${this.disabled || this.readonly}
         @pointerdown=${this.handleTriggerPointerDown}
         @click=${this.handleTriggerClick}
@@ -666,7 +688,8 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
       <ul
         id="listbox"
         role="listbox"
-        aria-label=${this.ariaLabelCountrySelector}
+        aria-label=${this.countrySelectorLabel ??
+            this.dictionary.inputPhone.selectCountry}
         popover="auto"
         @toggle=${this.handlePopoverToggle}
       >
@@ -743,8 +766,9 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
               placeholder=${this.effectivePlaceholder}
               ?disabled=${this.disabled}
               ?readonly=${this.readonly}
+              aria-label=${ifDefined(this.label)}
               aria-describedby=${hasDescription ? "description" : nothing}
-              aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+              aria-invalid=${this.showError}
               @input=${this.handlePhoneInput}
             />
           </div>
@@ -797,8 +821,8 @@ __decorate([
     property({ attribute: "no-results-label" })
 ], EunomiaInputPhone.prototype, "noResultsLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-country-selector" })
-], EunomiaInputPhone.prototype, "ariaLabelCountrySelector", void 0);
+    property({ attribute: "country-selector-label" })
+], EunomiaInputPhone.prototype, "countrySelectorLabel", void 0);
 __decorate([
     state()
 ], EunomiaInputPhone.prototype, "nationalDigits", void 0);

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

@@ -51,8 +51,8 @@ const inputPhone = css `
     color: var(--_iconColor);
     cursor: pointer;
     transition:
-      border-color 0.15s ease,
-      outline-color 0.15s ease;
+      border-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease),
+      outline-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
   }
   :host(:not([aria-readonly="true"])) #country-trigger:focus-visible {
     z-index: 1;
@@ -82,8 +82,8 @@ const inputPhone = css `
     outline: 1px solid transparent;
     box-sizing: border-box;
     transition:
-      border-color 0.15s ease,
-      outline-color 0.15s ease;
+      border-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease),
+      outline-color var(--eun-duration-s, 150ms) var(--eun-easing-default, ease);
   }
   :host([hide-country-selector]) #field-wrapper {
     margin-inline-start: 0;

package/dist/components/form/label/label.styles.js

@@ -13,17 +13,17 @@ const base = css `
   }
   #name {
     color: var(--eun-text-color, #071621);
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--field-label-font-size, var(--eun-font-size-s, 14px));
     font-weight: var(--eun-font-weight-l, 700);
   }
   slot[name="instructions"] {
     display: block;
-    font-size: var(--eun-font-size-xs, 12px);
+    font-size: var(--field-message-font-size, var(--eun-font-size-xs, 12px));
     color: var(--eun-text-secondary, #484e61);
   }
   .required {
     color: var(--eun-color-critical-100, #aa0014);
-    font-size: var(--eun-font-size-s, 10px);
+    font-size: var(--field-label-font-size, var(--eun-font-size-s, 10px));
   }
 `;
 export const labelStyles = base;

package/dist/components/form/radio/radio-card.d.ts

@@ -22,8 +22,10 @@ export declare const EunomiaRadioCardTagName = "eun-radio-card";
  * @attr {boolean} [default-checked] - The checked state applied when the card connects, and restored on form reset
  * @prop {boolean} [disabled=false] - Whether the card is disabled
  * @prop {boolean} [readonly=false] - Whether the card is read only
- * @prop {boolean} [hideError=false] - Whether the error message is hidden
- * @attr {boolean} [hide-error=false] - Whether the error message is 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
+ * @attr {boolean} [hide-error=false] - Whether the error message is hidden. The hint stays visible
  * @prop {boolean} [required=false] - Whether a selection is required
  * @prop {string} name - The name of the field
  * @prop {string} value - The value submitted with the card
@@ -44,6 +46,8 @@ export declare const EunomiaRadioCardTagName = "eun-radio-card";
  * @cssprop [--radio-card-border-width] - Sets the width of the border
  * @cssprop [--radio-card-border-radius] - Sets the corner radius of the card
  * @cssprop [--radio-card-padding] - Sets the padding inside the card
+ * @cssprop [--radio-card-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --radio-card-padding is set
+ * @cssprop [--radio-card-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --radio-card-padding is set
  * @cssprop [--radio-card-min-width] - Sets the minimum width of the card
  * @cssprop [--radio-card-icon-color] - Sets the color of the leading icon while not checked
  * @cssprop [--radio-card-icon-color-checked] - Sets the color of the leading icon while checked