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

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

@@ -17,6 +17,8 @@ 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,7 +28,7 @@ export const EunomiaCounterTagName = "eun-counter";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaCounterMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))));
+const EunomiaCounterMixinBase = LocalizableMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base)))));
 /**
  * A numeric field with increment and decrement buttons, built on a native
  * number input.
@@ -44,13 +46,15 @@ const EunomiaCounterMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixi
  * @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
  * @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
@@ -64,53 +68,11 @@ const EunomiaCounterMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixi
  * @cssprop [--counter-hint-color] - Sets the color of the hint message
  * @cssprop [--counter-focus-outline-color] - Sets the color of the focus outline
  * @cssprop [--counter-field-width] - Sets the width of the numeric value area
+ * @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-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
@@ -148,13 +110,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.
@@ -296,7 +297,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)}
         >
@@ -313,7 +314,7 @@ let EunomiaCounter = class EunomiaCounter extends EunomiaCounterMixinBase {
           max=${ifDefined(this.max)}
           step=${this.step}
           inputmode=${hasDecimalStep ? "decimal" : "numeric"}
-          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+          aria-invalid=${this.showError}
           aria-label=${ifDefined(this.label)}
           aria-describedby=${hasDescription ? "description" : nothing}
           @input=${this.handleInput}
@@ -323,7 +324,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)}
         >
@@ -368,11 +369,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

@@ -67,8 +67,8 @@ const base = css `
     box-sizing: border-box;
     overflow: hidden;
     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(:hover:not([aria-disabled="true"]):not([aria-readonly="true"]))
@@ -118,7 +118,7 @@ const base = css `
     padding: 0;
     color: var(--_buttonColor);
     cursor: pointer;
-    transition: background 1.2s ease-out;
+    transition: background 1.2s var(--eun-easing-out, ease-out);
   }
 
   #decrement {
@@ -126,7 +126,8 @@ const base = css `
   }
 
   #increment {
-    border-inline-start: var(--eun-border-width-s, 1px) solid var(--_borderColor);
+    border-inline-start: var(--eun-border-width-s, 1px) solid
+      var(--_borderColor);
   }
 
   #decrement:hover:not(:disabled),

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

@@ -63,12 +63,14 @@ declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
  * @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<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
@@ -106,6 +108,9 @@ declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
  * @cssprop [--date-picker-range-background] - Sets a background tint for every cell in a picked range, start, end, and in between alike, in range mode, one uniform color across the whole span
  * @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-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
  */
 export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
@@ -117,6 +122,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
@@ -250,14 +260,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
@@ -439,6 +449,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()`.
@@ -509,6 +528,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.
      *
@@ -645,12 +670,12 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * handing control back to it.
      * @private
      */
-    private handleTriggerClick;
+    private readonly handleTriggerClick;
     /**
      * The popover's open/close animation duration, in ms : `0` if
      * `noAnimation` is set or the browser reports `prefers-reduced-motion:
      * reduce`, otherwise `--date-picker-panel-transition-duration` (default
-     * `200ms`).
+     * `--eun-duration-m`).
      *
      * @param el the popover to read `--date-picker-panel-transition-duration` off.
      * @private
@@ -675,7 +700,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * doc for the split.
      * @private
      */
-    private handlePopoverToggle;
+    private readonly handlePopoverToggle;
     /**
      * Closes the popover, if open — accepting an instant, unanimated close
      * for a native light-dismiss (an outside click, `Escape`) instead of
@@ -700,37 +725,37 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * Commits the staged selection and closes the modal.
      * @private
      */
-    private handleModalConfirm;
+    private readonly handleModalConfirm;
     /**
      * Discards the staged selection and closes the modal.
      * @private
      */
-    private handleModalCancel;
+    private readonly handleModalCancel;
     /**
      * Commits the staged selection and closes the desktop popover — the
      * `withTime` popover footer's counterpart to {@link handleModalConfirm}.
      * @private
      */
-    private handlePopoverApply;
+    private readonly handlePopoverApply;
     /**
      * Discards the staged selection and closes the desktop popover, without
      * committing — the `withTime` popover footer's counterpart to
      * {@link handleModalCancel}.
      * @private
      */
-    private handlePopoverCancel;
+    private readonly handlePopoverCancel;
     /**
      * @private
      */
-    private handleTimeHourChange;
+    private readonly handleTimeHourChange;
     /**
      * @private
      */
-    private handleTimeMinuteChange;
+    private readonly handleTimeMinuteChange;
     /**
      * @private
      */
-    private handleTimePeriodChange;
+    private readonly handleTimePeriodChange;
     /**
      * Focuses the roving-tabindex active cell (`tabindex="0"`) within
      * whichever calendar surface is currently open. `.grid-cell` is the
@@ -797,7 +822,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @param day the day the event originated from.
      * @private
      */
-    private handleDayKeydown;
+    private readonly handleDayKeydown;
     /**
      * Handles keyboard navigation within the month grid : arrow keys move by
      * month/row (3 columns), `Home`/`End` jump to January/December of the
@@ -814,7 +839,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * navigation there too.
      * @private
      */
-    private handleMonthKeydown;
+    private readonly handleMonthKeydown;
     /**
      * Handles keyboard navigation within the year grid : arrow keys move by
      * year/row (3 columns), `Home`/`End` jump to the first/last year of the
@@ -830,7 +855,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * drives navigation there too.
      * @private
      */
-    private handleYearKeydown;
+    private readonly handleYearKeydown;
     /**
      * Selects `cell` : updates the staged value/range, then — once the
      * selection is "complete" for the active mode — commits it. The
@@ -870,11 +895,11 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * {@link navLevel}.
      * @private
      */
-    private enterMonthNav;
+    private readonly enterMonthNav;
     /**
      * @private
      */
-    private enterYearNav;
+    private readonly enterYearNav;
     /**
      * Handles a month cell picked while the month grid is a quick-nav level
      * (`navLevel === "month"` with `granularity === "day"`, drilled up to
@@ -885,7 +910,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @param month the clicked/activated month cell.
      * @private
      */
-    private handleQuickNavMonthClick;
+    private readonly handleQuickNavMonthClick;
     /**
      * Handles a year cell picked while the year grid is a quick-nav level
      * (`navLevel === "year"` with `granularity` `"day"` or `"month"`, drilled
@@ -898,7 +923,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @param year the clicked/activated year cell.
      * @private
      */
-    private handleQuickNavYearClick;
+    private readonly handleQuickNavYearClick;
     /**
      * Tracks the pointer for the range-mode in-progress span preview. Shared
      * by all three grids : the callback signature (a nullable `Date`) is
@@ -907,14 +932,14 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @param cell the hovered cell, or `null` when the pointer leaves the grid.
      * @private
      */
-    private handleHover;
-    private handlePreviousMonth;
-    private handleNextMonth;
-    private handlePreviousYear;
-    private handleNextYear;
-    private handlePreviousYearsPage;
-    private handleNextYearsPage;
-    private handleToday;
+    private readonly handleHover;
+    private readonly handlePreviousMonth;
+    private readonly handleNextMonth;
+    private readonly handlePreviousYear;
+    private readonly handleNextYear;
+    private readonly handlePreviousYearsPage;
+    private readonly handleNextYearsPage;
+    private readonly handleToday;
     /**
      * Steps whichever grid `navLevel` currently shows one unit back/forward —
      * the same thing its own prev/next header buttons do, so a touch swipe
@@ -922,11 +947,11 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * that direction.
      * @private
      */
-    private navigateGridPrevious;
+    private readonly navigateGridPrevious;
     /**
      * @private
      */
-    private navigateGridNext;
+    private readonly navigateGridNext;
     /**
      * The pointer's position at the start of an in-progress touch swipe on
      * the mobile modal's calendar (see {@link handleSwipeStart}), or `null`
@@ -951,7 +976,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @param event the native pointer event.
      * @private
      */
-    private handleSwipeStart;
+    private readonly handleSwipeStart;
     /**
      * Ends a tracked swipe : a mostly-horizontal drag past
      * {@link SWIPE_THRESHOLD_PX} steps the grid backward/forward (see
@@ -962,13 +987,13 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @param event the native pointer event.
      * @private
      */
-    private handleSwipeEnd;
+    private readonly handleSwipeEnd;
     /**
      * Discards a tracked swipe if the gesture is interrupted (e.g. the
      * browser takes over for a system gesture) instead of completing it.
      * @private
      */
-    private handleSwipeCancel;
+    private readonly handleSwipeCancel;
     /**
      * Replays the CSS slide-in animation on {@link swipeAreaEl} once the grid
      * has re-rendered for the newly swiped-to period — `"next"` slides the
@@ -1117,7 +1142,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
     /**
      * @private
      */
-    private handlePeriodSegmentClick;
+    private readonly handlePeriodSegmentClick;
     /**
      * `ArrowUp`/`ArrowDown`/`Enter`/`Space` toggle the period ; `A`/`P` set it
      * directly ; `ArrowLeft`/`ArrowRight` move focus like the other time
@@ -1126,7 +1151,7 @@ export declare class EunomiaDatePicker extends EunomiaDatePickerMixinBase {
      * @param event the native keyboard event.
      * @private
      */
-    private handlePeriodSegmentKeydown;
+    private readonly handlePeriodSegmentKeydown;
     /**
      * The time segment kinds rendered at the active hour format, in locale
      * order — the {@link timeSegments} counterpart to