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

package/dist/components/form/color-picker/color-picker.styles.js

@@ -45,7 +45,8 @@ const colorPicker = css `
     flex: 0 0 auto;
     color: var(--_iconColor);
     font-size: var(--eun-font-size-s, 14px);
-    transition: transform 0.15s ease;
+    transition: transform var(--eun-duration-s, 150ms)
+      var(--eun-easing-default, ease);
   }
   #field-arrow.open {
     transform: rotate(180deg);
@@ -60,8 +61,8 @@ const colorPicker = css `
     background-color: var(--_swatchColor, transparent);
     outline: 2px solid transparent;
     transition:
-      outline 0.2s ease-out,
-      border 0.2s ease-out;
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
   .swatch.empty {
     background-image: conic-gradient(
@@ -101,8 +102,8 @@ const colorPicker = css `
     --_swatchColor: var(--_optionColor);
     outline: 2px solid transparent;
     transition:
-      outline 0.2s ease-out,
-      border 0.2s ease-out;
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
   .swatch-button[aria-checked="true"] .swatch {
     border-color: var(--eun-color-primary-500, #3d6fff);

package/dist/components/form/counter/counter.d.ts

@@ -4,7 +4,7 @@ import { ReadonlyMixinInterface } from "../../../mixins/readonly.mixin.js";
 import { ValidatorsMixinInterface, Validity } from "../../../mixins/validators.mixin.js";
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
-import { FieldVariantMixinInterface } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
 /**
  * Tag name of the counter component.
@@ -14,13 +14,13 @@ export declare const EunomiaCounterTagName = "eun-counter";
  * Type of the counter base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaCounterBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<number> & FormMixinInterface<number> & FormLabelMixinInterface & FieldVariantMixinInterface;
+type EunomiaCounterBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<number> & FormMixinInterface<number> & FormLabelMixinInterface & FieldAppearanceMixinInterface;
 declare const EunomiaCounterMixinBase: Constructor<EunomiaCounterBase>;
 /**
  * A numeric field with increment and decrement buttons, built on a native
  * number input.
  *
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @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 {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
@@ -33,7 +33,8 @@ declare const EunomiaCounterMixinBase: Constructor<EunomiaCounterBase>;
  * @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 {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
@@ -53,6 +54,8 @@ declare const EunomiaCounterMixinBase: Constructor<EunomiaCounterBase>;
  * @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
  */
 export declare class EunomiaCounter extends EunomiaCounterMixinBase {

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

@@ -12,7 +12,7 @@ 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 { FieldVariantMixin, } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixin, } from "../../../mixins/field-appearance.mixin.js";
 import { ChangeEvent } from "../../../events/change.event.js";
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { counterStyles } from "./counter.styles.js";
@@ -26,12 +26,12 @@ export const EunomiaCounterTagName = "eun-counter";
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaCounterMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))));
+const EunomiaCounterMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))));
 /**
  * A numeric field with increment and decrement buttons, built on a native
  * number input.
  *
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @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 {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
@@ -44,7 +44,8 @@ const EunomiaCounterMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(F
  * @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 {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
@@ -64,6 +65,8 @@ const EunomiaCounterMixinBase = FieldVariantMixin(FormLabelMixin(ReadonlyMixin(F
  * @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 {
@@ -313,7 +316,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}

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),
@@ -180,22 +181,22 @@ const base = css `
     cursor: default;
   }
 
-  :host([variant="fill"]) {
+  :host([appearance="flat"]) {
     --_background: var(--counter-background, var(--eun-content-hover, #edeff0));
   }
-  :host([variant="fill"]) #field-wrapper:not(:focus-within) {
+  :host([appearance="flat"]) #field-wrapper:not(:focus-within) {
     border-color: transparent;
   }
-  :host([variant="fill"]) #field-wrapper:has(#field[aria-invalid="true"]) {
+  :host([appearance="flat"]) #field-wrapper:has(#field[aria-invalid="true"]) {
     box-shadow: inset 0 0 0 var(--eun-border-width-m, 1.5px) var(--_errorColor);
   }
-  :host([variant="underline"]) #field-wrapper {
+  :host([appearance="underline"]) #field-wrapper {
     border: none;
     outline: none;
     border-radius: 0;
     border-bottom: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
   }
-  :host([variant="underline"]) #field-wrapper:focus-within {
+  :host([appearance="underline"]) #field-wrapper:focus-within {
     outline: none;
   }
 `;

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

@@ -4,7 +4,7 @@ import { ReadonlyMixinInterface } from "../../../mixins/readonly.mixin.js";
 import { ValidatorsMixinInterface, Validity } from "../../../mixins/validators.mixin.js";
 import { FormMixinInterface } from "../../../mixins/form.mixin.js";
 import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
-import { FieldVariantMixinInterface } from "../../../mixins/field-variant.mixin.js";
+import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.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 +21,7 @@ export declare const EunomiaDatePickerTagName = "eun-date-picker";
  * interface element.
  * @internal
  */
-type EunomiaDatePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldVariantMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
+type EunomiaDatePickerBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<Date | null> & FormMixinInterface<Date | null> & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
 /**
  * A date field entered across segmented numeric day, month, and year
@@ -44,7 +44,7 @@ declare const EunomiaDatePickerMixinBase: Constructor<EunomiaDatePickerBase>;
  * normalized to January first of the selected year. The range mode
  * composes with all three.
  *
- * @prop {'outline' | 'fill' | 'underline'} [variant='outline'] - The visual variant to apply to the field
+ * @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 {'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
@@ -63,7 +63,8 @@ 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 {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
@@ -106,6 +107,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 {
@@ -645,12 +649,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 +679,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 +704,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 +801,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 +818,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 +834,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 +874,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 +889,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 +902,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 +911,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 +926,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 +955,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 +966,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 +1121,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 +1130,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