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

package/dist/components/form/counter/counter.js

@@ -13,10 +13,13 @@ 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 { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { counterStyles } from "./counter.styles.js";
 import { pickValidity } from "../../../utils/validity.utils.js";
+import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
+import { isImplicitSubmissionKey, submitImplicitly, } from "../../../utils/implicit-submission.utils.js";
 /**
  * Tag name of the counter component.
  */
@@ -26,12 +29,13 @@ export const EunomiaCounterTagName = "eun-counter";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaCounterMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))));
+const EunomiaCounterMixinBase = LocalizableMixin(RoundedMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
 /**
  * A numeric field with increment and decrement buttons, built on a native
  * number input.
  *
  * @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 {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
@@ -45,13 +49,14 @@ const EunomiaCounterMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixi
  * @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
  * @attr {boolean} [hide-error=false] - Whether the errors are hidden
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<number>>} validators - The list of validation rules applied to the field value
- * @prop {string} [ariaLabelIncrement='Increase value'] - The accessible label of the increment button
- * @attr {string} [aria-label-increment='Increase value'] - The accessible label of the increment button
- * @prop {string} [ariaLabelDecrement='Decrease value'] - The accessible label of the decrement button
- * @attr {string} [aria-label-decrement='Decrease value'] - The accessible label of the decrement button
+ * @prop {string} [incrementLabel] - The accessible label of the increment button. Defaults to the localized string for the current locale (English: "Increase value")
+ * @attr {string} [increment-label] - The accessible label of the increment button. Defaults to the localized string for the current locale (English: "Increase value")
+ * @prop {string} [decrementLabel] - The accessible label of the decrement button. Defaults to the localized string for the current locale (English: "Decrease value")
+ * @attr {string} [decrement-label] - The accessible label of the decrement button. Defaults to the localized string for the current locale (English: "Decrease value")
  * @fires {ChangeEvent} eunchange - Fired on every value change
  * @cssprop [--counter-background] - Sets the background color of the field
  * @cssprop [--counter-border-color] - Sets the border color of the field
@@ -70,50 +75,6 @@ const EunomiaCounterMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixi
  * @element eun-counter
  */
 let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
-    constructor() {
-        super(...arguments);
-        /**
-         * The amount the value changes on every increment/decrement.
-         * @default 1
-         */
-        this.step = 1;
-        /**
-         * Accessible label of the increment button.
-         * @default Increase value
-         */
-        this.ariaLabelIncrement = "Increase value";
-        /**
-         * Accessible label of the decrement button.
-         * @default Decrease value
-         */
-        this.ariaLabelDecrement = "Decrease value";
-        /**
-         * Redirects focus to the native field whenever the host itself receives
-         * it. See `eun-input`'s identical pattern : the host stays in the tab
-         * order (`DisabledMixin`) rather than being excluded via `tabindex="-1"`,
-         * which broke Tab from reaching the field entirely for this
-         * form-associated component, instead of just skipping the host.
-         * @private
-         */
-        this.handleHostFocus = () => {
-            this.fieldEl?.focus();
-        };
-        /**
-         * Reads native HTML constraint validation from the underlying field
-         * element (`required`, `min`, `max`, `step`, `badInput`).
-         *
-         * @returns validity state and optional message.
-         */
-        this.checkLocalValidators = () => {
-            return pickValidity(this.fieldEl, [
-                "valueMissing",
-                "rangeUnderflow",
-                "rangeOverflow",
-                "stepMismatch",
-                "badInput",
-            ]);
-        };
-    }
     /**
      * The current numeric value, `undefined` while empty (e.g. after the
      * field is cleared by the user). Overrides the `value` accessor
@@ -151,13 +112,52 @@ let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
         // @ts-expect-error — see comment above ; FormMixin's real setter exists.
         super.defaultValue = value;
     }
-    connectedCallback() {
-        super.connectedCallback?.();
-        this.addEventListener("focus", this.handleHostFocus);
+    constructor() {
+        super();
+        /**
+         * The amount the value changes on every increment/decrement.
+         * @default 1
+         */
+        this.step = 1;
+        /**
+         * Submits the owning form on Enter in the field, as a native number
+         * input does, since the browser never does it from a shadow root.
+         * @private
+         */
+        this.handleImplicitSubmission = (event) => {
+            const form = this.internals.form;
+            if (!form ||
+                event.composedPath()[0] !== this.fieldEl ||
+                !isImplicitSubmissionKey(event)) {
+                return;
+            }
+            event.preventDefault();
+            submitImplicitly(form);
+        };
+        /**
+         * Reads native HTML constraint validation from the underlying field
+         * element (`required`, `min`, `max`, `step`, `badInput`).
+         *
+         * @returns validity state and optional message.
+         */
+        this.checkLocalValidators = () => {
+            return pickValidity(this.fieldEl, [
+                "valueMissing",
+                "rangeUnderflow",
+                "rangeOverflow",
+                "stepMismatch",
+                "badInput",
+            ]);
+        };
+        this.addEventListener("keydown", this.handleImplicitSubmission);
     }
-    disconnectedCallback() {
-        this.removeEventListener("focus", this.handleHostFocus);
-        super.disconnectedCallback?.();
+    /**
+     * 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.
@@ -299,7 +299,7 @@ let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
           type="button"
           id="decrement"
           tabindex="-1"
-          aria-label=${this.ariaLabelDecrement}
+          aria-label=${this.decrementLabel ?? this.dictionary.counter.decrement}
           ?disabled=${!canDecrement}
           @click=${() => this.stepBy(-1)}
         >
@@ -326,7 +326,7 @@ let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
           type="button"
           id="increment"
           tabindex="-1"
-          aria-label=${this.ariaLabelIncrement}
+          aria-label=${this.incrementLabel ?? this.dictionary.counter.increment}
           ?disabled=${!canIncrement}
           @click=${() => this.stepBy(1)}
         >
@@ -371,11 +371,11 @@ __decorate([
     property({ type: Number })
 ], EunomiaCounter.prototype, "step", void 0);
 __decorate([
-    property({ attribute: "aria-label-increment" })
-], EunomiaCounter.prototype, "ariaLabelIncrement", void 0);
+    property({ attribute: "increment-label" })
+], EunomiaCounter.prototype, "incrementLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-decrement" })
-], EunomiaCounter.prototype, "ariaLabelDecrement", void 0);
+    property({ attribute: "decrement-label" })
+], EunomiaCounter.prototype, "decrementLabel", void 0);
 __decorate([
     property({ type: Number })
     // @ts-expect-error — see comment above ; real getter returns `U | undefined`.

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

@@ -37,10 +37,8 @@ const base = css `
       --counter-focus-outline-color,
       var(--eun-color-primary-500, #3d6fff)
     );
-    --_borderRadius: var(
-      --counter-border-radius,
-      var(--eun-border-radius-m, 8px)
-    );
+    --_defaultBorderRadius: var(--eun-border-radius-m, 8px);
+    --_borderRadius: var(--counter-border-radius, var(--_defaultBorderRadius));
     --_fieldWidth: var(--counter-field-width, 3.5rem);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     font-size: var(--eun-font-size-s, 14px);
@@ -50,6 +48,10 @@ const base = css `
     outline: none;
   }
 
+  :host([rounded]) {
+    --_defaultBorderRadius: var(--eun-border-radius-xl, 999px);
+  }
+
   #wrapper {
     display: flex;
     flex-direction: column;

package/dist/components/form/date-picker/date-picker.d.ts

@@ -5,6 +5,8 @@ import { ValidatorsMixinInterface, Validity } from "../../../mixins/validators.m
 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 { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
@@ -21,7 +23,7 @@ export declare const EunomiaDatePickerTagName = "eun-date-picker";
  * interface element.
  * @internal
  */
-type EunomiaDatePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
+type EunomiaDatePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldAppearanceMixinInterface & RoundedMixinInterface & FieldSizeMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
 /**
  * A date field entered across segmented numeric day, month, and year
@@ -45,6 +47,8 @@ declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
  * composes with all three.
  *
  * @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 {'single' | 'range'} [mode='single'] - Whether a single value or a start and end range is picked
  * @prop {'day' | 'month' | 'year'} [granularity='day'] - How precise the picked value is. Controls both the number of segments rendered and which calendar surface opens
  * @prop {Date | null} value - The picked value, in single mode. Normalized to the first of the month or January first of the year outside day granularity
@@ -64,12 +68,13 @@ declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
  * @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<Date | null>>} validators - The list of custom validation rules applied to the value
  * @prop {string} [todayLabel='Today'] - The label of the day grid's jump to today shortcut. Only shown with day granularity
  * @prop {string} [applyLabel='Apply'] - The label of the mobile modal's confirm button
- * @prop {string} [cancelLabel='Cancel'] - The label of the mobile modal's cancel button
- * @prop {string} [ariaLabelCalendar='Open calendar'] - The accessible label of the trailing calendar button
+ * @prop {string} [cancelLabel] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [calendarLabel] - The accessible label of the trailing calendar button. Defaults to the localized string for the current locale (English: "Open calendar")
  * @prop {string} [dayPlaceholder='jj'] - The placeholder shown in the empty day segment
  * @prop {string} [monthPlaceholder='mm'] - The placeholder shown in the empty month segment
  * @prop {string} [yearPlaceholder='yyyy'] - The placeholder shown in the empty year segment
@@ -108,6 +113,7 @@ declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
  * @cssprop [--date-picker-panel-background] - Sets the background color of the popover panel
  * @cssprop [--date-picker-panel-transition-duration=200ms] - Sets the duration of the popover panel's open and close transition, disabled entirely by the no-animation attribute or reduced motion settings
  * @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-date-picker
@@ -121,6 +127,11 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @readonly
      */
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Every change is a complete choice, so its error shows right away.
+     * @internal
+     */
+    errorOnChange: boolean;
     /**
      * Whether a single value or a start/end range is picked.
      * @default single
@@ -254,14 +265,14 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
     applyLabel: string;
     /**
      * Label of the mobile modal's cancel button.
-     * @default Cancel
+     * Falls back to the localized string for the current locale when unset.
      */
-    cancelLabel: string;
+    cancelLabel?: string;
     /**
      * Accessible label of the trailing calendar button.
-     * @default Open calendar
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelCalendar: string;
+    calendarLabel?: string;
     /**
      * Placeholder shown in the empty day segment.
      * @default jj
@@ -443,6 +454,15 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * {@link defaultRangeValue} to `rangeValue` the same way for
      * `mode="range"`, which `FormMixin` has no knowledge of.
      */
+    constructor();
+    /**
+     * Submits the owning form on Enter in one of the field's segments, as a
+     * native date input does, since the browser never does it from a
+     * shadow root. Left alone while the panel is open, and on keys a
+     * segment already handles, such as Enter toggling the AM/PM segment.
+     * @private
+     */
+    private readonly handleImplicitSubmission;
     connectedCallback(): void;
     /**
      * Resets the field to its default on a native form `reset()`.
@@ -513,6 +533,12 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @returns validity state and optional message.
      */
     buildCommonValidators: () => Validity;
+    /**
+     * 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 first segment field to focus/anchor on validation errors.
      *

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

@@ -14,6 +14,8 @@ import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
 import { FormMixin, hasErrorDisplayChange, } 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 { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
@@ -35,6 +37,7 @@ import { isDisabledDay, renderDatePickerDayGrid, } from "./date-picker-day-grid.
 import { isDisabledMonth, renderDatePickerMonthGrid, } from "./date-picker-month-grid.js";
 import { getYearPageStart, isDisabledYear, renderDatePickerYearGrid, } from "./date-picker-year-grid.js";
 import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
+import { isImplicitSubmissionKey, submitImplicitly, } from "../../../utils/implicit-submission.utils.js";
 /**
  * Tag name of the date-picker component.
  */
@@ -57,7 +60,7 @@ const SEGMENT_SPIN_BOUNDS = {
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
+const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(RoundedMixin(FieldSizeMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))))));
 /**
  * A date field entered across segmented numeric day, month, and year
  * inputs, following the same accessible pattern used by several
@@ -80,6 +83,8 @@ const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * composes with all three.
  *
  * @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 {'single' | 'range'} [mode='single'] - Whether a single value or a start and end range is picked
  * @prop {'day' | 'month' | 'year'} [granularity='day'] - How precise the picked value is. Controls both the number of segments rendered and which calendar surface opens
  * @prop {Date | null} value - The picked value, in single mode. Normalized to the first of the month or January first of the year outside day granularity
@@ -99,12 +104,13 @@ const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * @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<Date | null>>} validators - The list of custom validation rules applied to the value
  * @prop {string} [todayLabel='Today'] - The label of the day grid's jump to today shortcut. Only shown with day granularity
  * @prop {string} [applyLabel='Apply'] - The label of the mobile modal's confirm button
- * @prop {string} [cancelLabel='Cancel'] - The label of the mobile modal's cancel button
- * @prop {string} [ariaLabelCalendar='Open calendar'] - The accessible label of the trailing calendar button
+ * @prop {string} [cancelLabel] - The label of the mobile modal's cancel button. Defaults to the localized string for the current locale (English: "Cancel")
+ * @prop {string} [calendarLabel] - The accessible label of the trailing calendar button. Defaults to the localized string for the current locale (English: "Open calendar")
  * @prop {string} [dayPlaceholder='jj'] - The placeholder shown in the empty day segment
  * @prop {string} [monthPlaceholder='mm'] - The placeholder shown in the empty month segment
  * @prop {string} [yearPlaceholder='yyyy'] - The placeholder shown in the empty year segment
@@ -143,13 +149,43 @@ const EunomiaDatePickerMixinBase = LocalizableMixin(AnchorPositionMixin(FieldApp
  * @cssprop [--date-picker-panel-background] - Sets the background color of the popover panel
  * @cssprop [--date-picker-panel-transition-duration=200ms] - Sets the duration of the popover panel's open and close transition, disabled entirely by the no-animation attribute or reduced motion settings
  * @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-date-picker
  */
 let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
+    /**
+     * The default value applied on connection and form reset, in `single`
+     * mode. Overrides the `defaultValue` accessor inherited from `FormMixin`
+     * only to swap its attribute converter : the mixin's generic one always
+     * splits `default-value` on commas (appropriate for e.g. a multi-select's
+     * array value), which would silently produce the wrong thing for a
+     * `Date`. The actual get/set logic (applying the default when the field
+     * resets) still comes from `FormMixin` itself, via `super`.
+     * @default-value-format yyyy-mm-dd
+     */
+    get defaultValue() {
+        return super.defaultValue;
+    }
+    set defaultValue(value) {
+        // @ts-expect-error — see comment above ; FormMixin's real setter exists.
+        super.defaultValue = value;
+    }
+    /**
+     * Lifecycle callback triggered when the component is connected to the
+     * DOM. `FormMixin`'s own `connectedCallback` already applies
+     * `defaultValue` to `value` for `mode="single"` ; this applies
+     * {@link defaultRangeValue} to `rangeValue` the same way for
+     * `mode="range"`, which `FormMixin` has no knowledge of.
+     */
     constructor() {
-        super(...arguments);
+        super();
+        /**
+         * Every change is a complete choice, so its error shows right away.
+         * @internal
+         */
+        this.errorOnChange = true;
         /**
          * Whether a single value or a start/end range is picked.
          * @default single
@@ -229,16 +265,6 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
          * @default Apply
          */
         this.applyLabel = "Apply";
-        /**
-         * Label of the mobile modal's cancel button.
-         * @default Cancel
-         */
-        this.cancelLabel = "Cancel";
-        /**
-         * Accessible label of the trailing calendar button.
-         * @default Open calendar
-         */
-        this.ariaLabelCalendar = "Open calendar";
         /**
          * Placeholder shown in the empty day segment.
          * @default jj
@@ -360,6 +386,25 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
             minute: "",
             period: "",
         };
+        /**
+         * Submits the owning form on Enter in one of the field's segments, as a
+         * native date input does, since the browser never does it from a
+         * shadow root. Left alone while the panel is open, and on keys a
+         * segment already handles, such as Enter toggling the AM/PM segment.
+         * @private
+         */
+        this.handleImplicitSubmission = (event) => {
+            const form = this.internals.form;
+            const origin = event.composedPath()[0];
+            if (!form ||
+                this.isOpen ||
+                !(origin instanceof Element && origin.matches(".segment")) ||
+                !isImplicitSubmissionKey(event)) {
+                return;
+            }
+            event.preventDefault();
+            submitImplicitly(form);
+        };
         /**
          * Reads local validation state : a partially/invalidly typed segment
          * group reports as invalid, matching native constraint validation's
@@ -978,31 +1023,8 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
                     break;
             }
         };
+        this.addEventListener("keydown", this.handleImplicitSubmission);
     }
-    /**
-     * The default value applied on connection and form reset, in `single`
-     * mode. Overrides the `defaultValue` accessor inherited from `FormMixin`
-     * only to swap its attribute converter : the mixin's generic one always
-     * splits `default-value` on commas (appropriate for e.g. a multi-select's
-     * array value), which would silently produce the wrong thing for a
-     * `Date`. The actual get/set logic (applying the default when the field
-     * resets) still comes from `FormMixin` itself, via `super`.
-     * @default-value-format yyyy-mm-dd
-     */
-    get defaultValue() {
-        return super.defaultValue;
-    }
-    set defaultValue(value) {
-        // @ts-expect-error — see comment above ; FormMixin's real setter exists.
-        super.defaultValue = value;
-    }
-    /**
-     * Lifecycle callback triggered when the component is connected to the
-     * DOM. `FormMixin`'s own `connectedCallback` already applies
-     * `defaultValue` to `value` for `mode="single"` ; this applies
-     * {@link defaultRangeValue} to `rangeValue` the same way for
-     * `mode="range"`, which `FormMixin` has no knowledge of.
-     */
     connectedCallback() {
         super.connectedCallback?.();
         if (this.mode === "range" && this.defaultRangeValue) {
@@ -1096,6 +1118,14 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
             this.setAttribute("aria-invalid", String(this.showError));
         }
     }
+    /**
+     * 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 first segment field to focus/anchor on validation errors.
      *
@@ -2033,6 +2063,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         data-target=${target}
         role="group"
         aria-label=${groupLabel}
+        aria-describedby=${this.description?.length ? "description" : nothing}
       >
         ${order.map((kind, index) => html `
             ${index > 0
@@ -2073,7 +2104,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         maxlength=${maxLength}
         size=${maxLength}
         placeholder=${this.placeholderFor(kind)}
-        aria-label=${capitalize(kind)}
+        aria-label=${this.dictionary.datePicker[kind]}
         .value=${values[kind]}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -2232,21 +2263,22 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         ${this.mode === "single"
             ? this.renderSegmentGroup("value", this.label ?? this.headingFor())
             : html `
-              ${this.renderSegmentGroup("start", "Start date")}
+              ${this.renderSegmentGroup("start", this.dictionary.datePicker.startDate)}
               <span class="range-separator" aria-hidden="true">–</span>
-              ${this.renderSegmentGroup("end", "End date")}
+              ${this.renderSegmentGroup("end", this.dictionary.datePicker.endDate)}
             `}
         ${this.isWithTimeActive() ? this.renderTimeSegmentGroup() : nothing}
         <button
           type="button"
           id="calendar-trigger"
-          aria-label=${this.ariaLabelCalendar}
+          aria-label=${this.calendarLabel ??
+            this.dictionary.datePicker.openCalendar}
           aria-haspopup="dialog"
           aria-expanded=${this.isOpen || this.isModalOpen ? "true" : "false"}
           ?disabled=${this.disabled}
           @click=${this.handleTriggerClick}
         >
-          <eun-icon name="calendar_today" size="16"></eun-icon>
+          <eun-icon name="calendar_today"></eun-icon>
         </button>
       </div>
     `;
@@ -2389,7 +2421,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
           id="popover-cancel"
           @click=${this.handlePopoverCancel}
         >
-          ${this.cancelLabel}
+          ${this.cancelLabel ?? this.dictionary.common.cancel}
         </eun-button>
         <eun-button id="popover-apply" @click=${this.handlePopoverApply}>
           ${this.applyLabel}
@@ -2415,7 +2447,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
         ?open=${this.isModalOpen}
         .closeable=${false}
         confirm-label=${this.applyLabel}
-        cancel-label=${this.cancelLabel}
+        cancel-label=${this.cancelLabel ?? this.dictionary.common.cancel}
         aria-label=${this.label ?? this.headingFor()}
         @eunconfirm=${this.handleModalConfirm}
         @euncancel=${this.handleModalCancel}
@@ -2441,7 +2473,7 @@ let EunomiaDatePicker = EunomiaDatePicker_1 = class EunomiaDatePicker extends Eu
             id="cancel"
             @click=${() => this.modalEl?.cancel()}
           >
-            ${this.cancelLabel}
+            ${this.cancelLabel ?? this.dictionary.common.cancel}
           </eun-button>
           <eun-button id="confirm" @click=${() => this.modalEl?.confirm()}>
             ${this.applyLabel}
@@ -2478,10 +2510,10 @@ EunomiaDatePicker.styles = [
  */
 EunomiaDatePicker.SWIPE_THRESHOLD_PX = 40;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDatePicker.prototype, "mode", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDatePicker.prototype, "granularity", void 0);
 __decorate([
     property({
@@ -2541,8 +2573,8 @@ __decorate([
     property({ attribute: "cancel-label" })
 ], EunomiaDatePicker.prototype, "cancelLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-calendar" })
-], EunomiaDatePicker.prototype, "ariaLabelCalendar", void 0);
+    property({ attribute: "calendar-label" })
+], EunomiaDatePicker.prototype, "calendarLabel", void 0);
 __decorate([
     property({ attribute: "day-placeholder" })
 ], EunomiaDatePicker.prototype, "dayPlaceholder", void 0);
@@ -2668,12 +2700,6 @@ function todaysSegmentPart(kind) {
             return today.getDate();
     }
 }
-/**
- * @private
- */
-function capitalize(value) {
-    return value.charAt(0).toUpperCase() + value.slice(1);
-}
 /**
  * Parses an ISO (`yyyy-mm-dd`) date string, as used by the `default-value`
  * and `default-range-value` attributes. Returns `null` for an empty or