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

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);

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

@@ -5,8 +5,11 @@ import { ValidatorsMixinInterface } from "../../../mixins/validators.mixin.js";
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixinInterface } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixinInterface } from "../../../mixins/field-size.mixin.js";
 import { 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 +19,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 & RoundedMixinInterface & FieldSizeMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
 /**
  * A phone number field rendered in two adjacent parts: a compact country
@@ -39,6 +42,8 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  *
  * @slot [default] - An optional list of option elements restricting which countries appear in the dropdown, such as an option with value FR for France. When omitted, every built-in country is available
  * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
+ * @prop {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} name - The field name
@@ -55,6 +60,7 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * @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 {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
@@ -62,8 +68,8 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * @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
@@ -80,10 +86,12 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * @cssprop [--field-hint-color] - Sets the color of the hint message
  * @cssprop [--field-focus-outline-color] - Sets the color of the focus outline
  * @cssprop [--field-listbox-max-height=260px] - Sets the maximum height of the country dropdown panel, past which it scrolls
+ * @cssprop [--field-listbox-border-radius] - Sets the corner radius of the country dropdown panel, independent of the field's own radius
  * @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-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-input-phone
@@ -139,9 +147,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
@@ -211,6 +219,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.
@@ -268,6 +285,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.
      *

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

@@ -8,12 +8,15 @@ 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";
 import { FormMixin } from "../../../mixins/form.mixin.js";
 import { FormLabelMixin, } from "../../../mixins/form-label.mixin.js";
 import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
+import { RoundedMixin, } from "../../../mixins/rounded.mixin.js";
+import { FieldSizeMixin, } from "../../../mixins/field-size.mixin.js";
 import { AnchorPositionMixin, } from "../../../mixins/anchor-position.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
@@ -21,6 +24,8 @@ 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.
  */
@@ -63,7 +68,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(RoundedMixin(FieldSizeMixin(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
@@ -85,6 +90,8 @@ const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldAppearanceMixin(Form
  *
  * @slot [default] - An optional list of option elements restricting which countries appear in the dropdown, such as an option with value FR for France. When omitted, every built-in country is available
  * @prop {'outline' | 'flat' | 'underline'} [appearance='outline'] - How the field's surface is drawn: a bordered box, a muted background with no border, or a bottom border only
+ * @prop {boolean} [rounded=false] - Whether the field is fully rounded, as a pill. A custom border radius still wins over it
+ * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The field size. A field and a button of the same size share the same height
  * @prop {string} label - The title label of the field, rendered through the label component
  * @prop {string} instructions - Instructions displayed below the label
  * @prop {string} name - The field name
@@ -101,6 +108,7 @@ const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldAppearanceMixin(Form
  * @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 {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
@@ -108,8 +116,8 @@ const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldAppearanceMixin(Form
  * @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
@@ -126,17 +134,19 @@ const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldAppearanceMixin(Form
  * @cssprop [--field-hint-color] - Sets the color of the hint message
  * @cssprop [--field-focus-outline-color] - Sets the color of the focus outline
  * @cssprop [--field-listbox-max-height=260px] - Sets the maximum height of the country dropdown panel, past which it scrolls
+ * @cssprop [--field-listbox-border-radius] - Sets the corner radius of the country dropdown panel, independent of the field's own radius
  * @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-line-height] - Sets the line height of the field's value and placeholder
  * @cssprop [--field-label-font-size] - Sets the font size of the label
  * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-input-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.
@@ -158,11 +168,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
@@ -189,6 +194,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
@@ -267,6 +289,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
             this.unanchorFloatingElement();
             this.unobserveAnchorVisibility();
         };
+        this.addEventListener("keydown", this.handleImplicitSubmission);
     }
     connectedCallback() {
         super.connectedCallback?.();
@@ -341,6 +364,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.
      *
@@ -635,7 +666,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}
@@ -662,7 +694,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}
       >
@@ -739,6 +772,7 @@ 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.showError}
               @input=${this.handlePhoneInput}
@@ -793,8 +827,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

@@ -41,7 +41,7 @@ const inputPhone = css `
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
+    padding: 0 var(--_defaultPaddingInline);
     background-color: var(--_background);
     border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
     border-inline-end: none;
@@ -64,7 +64,7 @@ const inputPhone = css `
     outline-offset: 0;
   }
   .flag {
-    font-size: var(--eun-font-size-m, 16px);
+    font-size: min(var(--eun-font-size-m, 16px), var(--_lineHeight));
     line-height: 1;
   }
   #field-wrapper {
@@ -178,7 +178,10 @@ const inputPhone = css `
     background: none;
     border: none;
     outline: none;
-    padding: var(--eun-space-s, 8px);
+    box-sizing: content-box;
+    height: var(--_lineHeight);
+    line-height: var(--_lineHeight);
+    padding: var(--_paddingBlock) var(--_defaultPaddingInline);
   }
   #phone-field::placeholder {
     color: var(--_placeholderColor);

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

@@ -23,6 +23,7 @@ export declare const EunomiaRadioCardTagName = "eun-radio-card";
  * @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 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

package/dist/components/form/radio/radio-card.js

@@ -34,6 +34,7 @@ export const EunomiaRadioCardTagName = "eun-radio-card";
  * @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 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

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

@@ -33,6 +33,7 @@ declare const EunomiaRadioList_base: import("../../../utils/constructor.type.js"
  * @prop {string} [defaultValue] - The value reselected when the list connects, and restored on form reset
  * @attr {string} [default-value] - The value reselected when the list connects, and restored on form reset
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @attr {boolean} [hide-error=false] - Whether the errors are hidden. The hint stays visible
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<string | undefined>>} validators - A list of validation rules applied to the group's selected value
@@ -53,6 +54,11 @@ export declare class EunomiaRadioList extends EunomiaRadioList_base {
      * @readonly
      */
     static readonly styles: import("lit").CSSResult[];
+    /**
+     * Every change is a complete choice, so its error shows right away.
+     * @internal
+     */
+    errorOnChange: boolean;
     /**
      * Configuration options for the component Shadow DOM
      * @internal
@@ -110,8 +116,7 @@ export declare class EunomiaRadioList extends EunomiaRadioList_base {
      * Assigns `name`/`id` to every child, applies a `default-value` selection
      * once the slotted children actually exist (see `handleSlotChange` for
      * why this can't rely on `FormMixin`'s own `defaultValue` setter alone),
-     * restores `aria-activedescendant` for a child checked directly in
-     * markup, and sets up the initial roving `tabindex`.
+     * and sets up the initial roving `tabindex`.
      *
      * The roving `tabindex` is applied only once every child's own first
      * update has settled — each `eun-radio` is itself a `DisabledMixin` user,
@@ -130,6 +135,17 @@ export declare class EunomiaRadioList extends EunomiaRadioList_base {
      * Cleans up event listeners.
      */
     disconnectedCallback(): void;
+    /**
+     * Whether the group's own `disabled`/`readonly` changed in a way to pass
+     * on to every child : always once set, but not for the initial `false`,
+     * which would otherwise re-enable a child disabled on its own.
+     *
+     * @param changed - The changed properties of the update.
+     * @param name - The property to check.
+     * @returns true when the children should take the group's value.
+     * @private
+     */
+    private isGroupChange;
     /**
      * Lifecycle hook called whenever reactive properties change.
      * @param _changedProperties - Map of changed properties
@@ -155,8 +171,8 @@ export declare class EunomiaRadioList extends EunomiaRadioList_base {
      */
     private handleKeydown;
     /**
-     * Applies the roving `tabindex` : the checked child (or the first one, if
-     * none is checked yet) is the group's single tab stop, matching a native
+     * Applies the roving `tabindex` : the checked child (or the first enabled
+     * one, if none is checked yet) is the group's single tab stop, matching a native
      * `radiogroup`'s "one tab stop, arrows move focus" behavior.
      * @private
      */
@@ -170,7 +186,7 @@ export declare class EunomiaRadioList extends EunomiaRadioList_base {
     private readonly handleChangeEvent;
     /**
      * Checks the given child, unchecking every other one, updates the roving
-     * `tabindex`/`aria-activedescendant`, and re-validates the group.
+     * `tabindex`, and re-validates the group.
      *
      * @param item the child to activate
      * @param focus whether to also move DOM focus onto it (arrow-key navigation)
@@ -190,8 +206,8 @@ export declare class EunomiaRadioList extends EunomiaRadioList_base {
     private sendChangeEvent;
     /**
      * Handler called when slot content changes.
-     * Propagates the group `name` and assigns a stable `id` (needed for
-     * `aria-activedescendant`) to every child radio.
+     * Propagates the group `name` and assigns a stable `id` to every child
+     * radio.
      *
      * @private
      */