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

package/dist/index.d.ts

@@ -18,6 +18,8 @@ export { EunomiaLink, EunomiaLinkTagName, } from "./components/action/link/link.
 export { EunomiaIcon, EunomiaIconTagName, setIconBaseUrl, } from "./components/content/icon/icon.js";
 export type { EunomiaIconName, EunomiaIconType, } from "./components/content/icon/icon.type.js";
 export { EunomiaTag, EunomiaTagTagName } from "./components/content/tag/tag.js";
+export { EunomiaDescriptionList, EunomiaDescriptionListTagName, } from "./components/content/description-list/description-list.js";
+export type { EunomiaDescriptionListAlign, EunomiaDescriptionListLayout, } from "./components/content/description-list/description-list.js";
 export { EunomiaChip, EunomiaChipTagName, } from "./components/content/chip/chip.js";
 export type { EunomiaChipColor, EunomiaChipAppearance, EunomiaChipSeverity, EunomiaChipSize, EunomiaChipAvatarShape, } from "./components/content/chip/chip.js";
 export { EunomiaBadge, EunomiaBadgeTagName, } from "./components/content/badge/badge.js";
@@ -41,8 +43,6 @@ export { EunomiaTabPanel, EunomiaTabPanelTagName, } from "./components/navigatio
 export { EunomiaCarousel, EunomiaCarouselTagName, } from "./components/navigation/carousel/carousel.js";
 export type { EunomiaCarouselLayout } from "./components/navigation/carousel/carousel.js";
 export { EunomiaBreadcrumb, EunomiaBreadcrumbTagName, } from "./components/navigation/breadcrumb/breadcrumb.js";
-export type { EunomiaBreadcrumbItemData } from "./components/navigation/breadcrumb/breadcrumb.js";
-export { EunomiaBreadcrumbItem, EunomiaBreadcrumbItemTagName, } from "./components/navigation/breadcrumb/breadcrumb-item.js";
 export { EunomiaPagination, EunomiaPaginationTagName, } from "./components/navigation/pagination/pagination.js";
 export { EunomiaStepper, EunomiaStepperTagName, } from "./components/navigation/stepper/stepper.js";
 export type { EunomiaStepperItemState, EunomiaStepperOrientation, EunomiaStepperStepData, EunomiaStepperSubstepData, EunomiaStepperVariant, } from "./components/navigation/stepper/stepper.js";
@@ -94,17 +94,11 @@ export type { EunomiaSchedulerEventAppearance } from "./features/scheduler/sched
 export { EunomiaSchedulerEventEditor, EunomiaSchedulerEventEditorTagName, } from "./features/scheduler/scheduler-event-editor/scheduler-event-editor.js";
 export type { EunomiaSchedulerEvent, EunomiaSchedulerEventColor, EunomiaSchedulerEventPriority, EunomiaSchedulerGuest, EunomiaSchedulerGuestStatus, EunomiaSchedulerView, } from "./features/scheduler/shared/scheduler.types.js";
 export { EunomiaTable, EunomiaTableTagName, } from "./features/table/table/table.js";
-export { EunomiaTableHeader, EunomiaTableHeaderTagName, } from "./features/table/table-header/table-header.js";
-export { EunomiaTableColumn, EunomiaTableColumnTagName, } from "./features/table/table-column/table-column.js";
-export type { EunomiaTableColumnSort } from "./features/table/table-column/table-column.js";
-export { EunomiaTableItem, EunomiaTableItemTagName, } from "./features/table/table-item/table-item.js";
-export { EunomiaTableCell, EunomiaTableCellTagName, } from "./features/table/table-cell/table-cell.js";
 export { EunomiaTableActionBar, EunomiaTableActionBarTagName, } from "./features/table/table-action-bar/table-action-bar.js";
-export { EunomiaTableSkeletonRow, EunomiaTableSkeletonRowTagName, } from "./features/table/table-skeleton-row/table-skeleton-row.js";
-export type { EunomiaTableAction, EunomiaTableColumnDef, EunomiaTableRowButtonActionDef, EunomiaTableRowDropdownActionDef, EunomiaTableRowActionDef, } from "./features/table/table/table.types.js";
+export type { EunomiaTableAction, EunomiaTableColumnDef, EunomiaTableColumnSort, EunomiaTableRowButtonActionDef, EunomiaTableRowDropdownActionDef, EunomiaTableRowActionDef, } from "./features/table/table/table.types.js";
 export { debounce, throttle } from "./utils/time.utils.js";
 export { createDragReorder } from "./utils/drag-drop.utils.js";
-export { EUNOMIA_BREAKPOINTS } from "./breakpoints.js";
+export { EUNOMIA_BREAKPOINTS, mediaBelow, mediaFrom } from "./breakpoints.js";
 export type { EunomiaBreakpoint } from "./breakpoints.js";
 export { setDefaultLocale, getDefaultLocale } from "./i18n/index.js";
 export type { Dictionary } from "./i18n/index.js";

package/dist/index.js

@@ -28,9 +28,10 @@
 // `buildThemeCss` is its pure counterpart, returning the same tokens as a
 // stylesheet so an SSR app can ship the brand in the HTML itself instead
 // of flashing the base theme until `initializeTheme` runs after hydration.
-// `EUNOMIA_BREAKPOINTS` is exported so a consumer's own responsive layout
-// code can switch at the exact same pixel widths the components already
-// react to internally, instead of guessing or duplicating those numbers.
+// `EUNOMIA_BREAKPOINTS`, `mediaBelow` and `mediaFrom` are exported so a
+// consumer's own responsive code switches at the exact same widths the
+// components react to internally. They're also published on their own as
+// the `./breakpoints.js` subpath, which registers no component.
 export { EunomiaAnimate, EunomiaAnimateTagName, } from "./components/layout/animate/animate.js";
 export { EunomiaInfiniteList, EunomiaInfiniteListTagName, } from "./components/layout/infinite-list/infinite-list.js";
 export { EunomiaDivider, EunomiaDividerTagName, } from "./components/layout/divider/divider.js";
@@ -44,6 +45,7 @@ export { EunomiaToggleGroup, EunomiaToggleGroupTagName, } from "./components/act
 export { EunomiaLink, EunomiaLinkTagName, } from "./components/action/link/link.js";
 export { EunomiaIcon, EunomiaIconTagName, setIconBaseUrl, } from "./components/content/icon/icon.js";
 export { EunomiaTag, EunomiaTagTagName } from "./components/content/tag/tag.js";
+export { EunomiaDescriptionList, EunomiaDescriptionListTagName, } from "./components/content/description-list/description-list.js";
 export { EunomiaChip, EunomiaChipTagName, } from "./components/content/chip/chip.js";
 export { EunomiaBadge, EunomiaBadgeTagName, } from "./components/content/badge/badge.js";
 export { EunomiaCollapse, EunomiaCollapseTagName, } from "./components/content/collapse/collapse.js";
@@ -60,7 +62,6 @@ export { EunomiaTab, EunomiaTabTagName, } from "./components/navigation/tabs/tab
 export { EunomiaTabPanel, EunomiaTabPanelTagName, } from "./components/navigation/tabs/tab-panel/tab-panel.js";
 export { EunomiaCarousel, EunomiaCarouselTagName, } from "./components/navigation/carousel/carousel.js";
 export { EunomiaBreadcrumb, EunomiaBreadcrumbTagName, } from "./components/navigation/breadcrumb/breadcrumb.js";
-export { EunomiaBreadcrumbItem, EunomiaBreadcrumbItemTagName, } from "./components/navigation/breadcrumb/breadcrumb-item.js";
 export { EunomiaPagination, EunomiaPaginationTagName, } from "./components/navigation/pagination/pagination.js";
 export { EunomiaStepper, EunomiaStepperTagName, } from "./components/navigation/stepper/stepper.js";
 export { EunomiaStep, EunomiaStepTagName, } from "./components/navigation/stepper/step.js";
@@ -96,15 +97,10 @@ export { EunomiaCalendar, EunomiaCalendarTagName, } from "./features/scheduler/c
 export { EunomiaSchedulerEventCard, EunomiaSchedulerEventCardTagName, } from "./features/scheduler/scheduler-event/scheduler-event.js";
 export { EunomiaSchedulerEventEditor, EunomiaSchedulerEventEditorTagName, } from "./features/scheduler/scheduler-event-editor/scheduler-event-editor.js";
 export { EunomiaTable, EunomiaTableTagName, } from "./features/table/table/table.js";
-export { EunomiaTableHeader, EunomiaTableHeaderTagName, } from "./features/table/table-header/table-header.js";
-export { EunomiaTableColumn, EunomiaTableColumnTagName, } from "./features/table/table-column/table-column.js";
-export { EunomiaTableItem, EunomiaTableItemTagName, } from "./features/table/table-item/table-item.js";
-export { EunomiaTableCell, EunomiaTableCellTagName, } from "./features/table/table-cell/table-cell.js";
 export { EunomiaTableActionBar, EunomiaTableActionBarTagName, } from "./features/table/table-action-bar/table-action-bar.js";
-export { EunomiaTableSkeletonRow, EunomiaTableSkeletonRowTagName, } from "./features/table/table-skeleton-row/table-skeleton-row.js";
 export { debounce, throttle } from "./utils/time.utils.js";
 export { createDragReorder } from "./utils/drag-drop.utils.js";
-export { EUNOMIA_BREAKPOINTS } from "./breakpoints.js";
+export { EUNOMIA_BREAKPOINTS, mediaBelow, mediaFrom } from "./breakpoints.js";
 export { setDefaultLocale, getDefaultLocale } from "./i18n/index.js";
 export { buildPalette, buildTints, buildThemeCss, initializeTheme, } from "./utils/theme-generator.utils.js";
 export { findRichTextColor, formatRichText, getPlainTextLength, joinAlign, parseInlineNodes, RICH_TEXT_COLORS, splitAlign, toHtml, toPlainText, } from "./utils/rich-text.utils.js";

package/dist/mixins/check.mixin.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from "lit/decorators.js";
+import { hasErrorDisplayChange } from "./form.mixin.js";
 import { ChangeEvent } from "../events/change.event.js";
 /**
  * Mixin adding "checkable" behavior to a component.
@@ -47,7 +48,7 @@ export const CheckMixin = (superClass) => {
                 if (this.required && !this.checked) {
                     return {
                         validity: { valueMissing: true },
-                        message: "Field value is missing",
+                        message: this.validationDictionary.validation.valueMissing,
                     };
                 }
                 return { validity: {} };
@@ -98,10 +99,8 @@ export const CheckMixin = (superClass) => {
                 this.setAttribute("aria-checked", String(this.checked));
                 this.updateInternals();
             }
-            if (_changedProperties.has("valid") ||
-                _changedProperties.has("hideError") ||
-                _changedProperties.has("disabled")) {
-                this.setAttribute("aria-invalid", String(!this.hideError && !this.disabled && !this.valid));
+            if (hasErrorDisplayChange(_changedProperties)) {
+                this.setAttribute("aria-invalid", String(this.showError));
             }
             if (_changedProperties.has("required")) {
                 this.setAttribute("aria-required", String(this.required));

package/dist/mixins/form.mixin.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, nothing, TemplateResult } from "lit";
+import { LitElement, nothing, PropertyValues, TemplateResult } from "lit";
 import { DisabledMixinInterface } from "./disabled.mixin.js";
 import { ValidatorsMixinInterface } from "./validators.mixin.js";
 import { Constructor } from "../utils/constructor.type.js";
@@ -20,13 +20,29 @@ export declare class FormMixinInterface<T> {
     form: HTMLFormElement | null;
     dirty: boolean;
     touched: boolean;
+    validationRequested: boolean;
     controlled: boolean;
+    get showError(): boolean;
     get pristine(): boolean;
     get untouched(): boolean;
     get value(): T;
     set value(value: T);
     get defaultValue(): T | undefined;
 }
+/**
+ * Every property {@link FormMixinInterface.showError} depends on, for
+ * components mirroring it outside their template (e.g. onto the host's
+ * `aria-invalid`).
+ */
+export declare const ERROR_DISPLAY_PROPERTIES: string[];
+/**
+ * Whether any property {@link FormMixinInterface.showError} depends on
+ * changed in this update.
+ *
+ * @param changed - The changed properties of the update.
+ * @returns true when the error display may have changed.
+ */
+export declare const hasErrorDisplayChange: (changed: PropertyValues) => boolean;
 /**
  * Mixin that adds form-related behavior and value management.
  *

package/dist/mixins/form.mixin.js

@@ -13,14 +13,36 @@ import { html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { ChangeEvent } from "../events/change.event.js";
+/**
+ * Every property {@link FormMixinInterface.showError} depends on, for
+ * components mirroring it outside their template (e.g. onto the host's
+ * `aria-invalid`).
+ */
+export const ERROR_DISPLAY_PROPERTIES = [
+    "valid",
+    "hideError",
+    "disabled",
+    "touched",
+    "dirty",
+    "validationRequested",
+    "error",
+];
+/**
+ * Whether any property {@link FormMixinInterface.showError} depends on
+ * changed in this update.
+ *
+ * @param changed - The changed properties of the update.
+ * @returns true when the error display may have changed.
+ */
+export const hasErrorDisplayChange = (changed) => ERROR_DISPLAY_PROPERTIES.some((name) => changed.has(name));
 export const FormMixin = (superClass) => {
-    var _FormMixinClass_markDirty, _FormMixinClass_markTouched;
+    var _FormMixinClass_markDirty, _FormMixinClass_markTouched, _FormMixinClass_markValidationRequested;
     class FormMixinClass extends superClass {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         constructor(...args) {
             super(...args);
             /**
-             * When true, validation error messages are hidden.
+             * When true, validation error messages are hidden. The hint stays visible.
              * @default false
              */
             this.hideError = false;
@@ -53,6 +75,13 @@ export const FormMixin = (superClass) => {
              * @default false
              */
             this.touched = false;
+            /**
+             * Whether the form asked for this field's validity, on a submit attempt
+             * or a `reportValidity()` call, since it connected (or since the last
+             * reset). Reveals errors on a field the user never reached.
+             * @default false
+             */
+            this.validationRequested = false;
             /**
              * Opts this field out of the native reset algorithm's value wipe: when
              * `true`, `formResetCallback` leaves `value`/`checked` untouched.
@@ -89,10 +118,29 @@ export const FormMixin = (superClass) => {
                     this.touched = true;
                 }
             });
+            /**
+             * Marks validation as requested when the form checks this field, which
+             * fires `invalid` on it.
+             */
+            _FormMixinClass_markValidationRequested.set(this, () => {
+                this.validationRequested = true;
+            });
             if (!this.internals) {
                 this.internals = this.attachInternals();
             }
         }
+        /**
+         * Whether the field currently shows its error : invalid, not disabled,
+         * not `hideError`, and either interacted with (`touched`, `dirty`),
+         * checked by its form, or given an external `error`. A required field
+         * left empty stays quiet until then.
+         */
+        get showError() {
+            return (!this.valid &&
+                !this.hideError &&
+                !this.disabled &&
+                (this.touched || this.dirty || this.validationRequested || !!this.error));
+        }
         /**
          * Whether the value hasn't changed since the field connected (or since
          * the last reset). The inverse of {@link dirty}.
@@ -150,14 +198,14 @@ export const FormMixin = (superClass) => {
             this.setFormValue(value);
         }
         /**
-         * Gets the current description or validation errors.
-         * Returns undefined if errors are hidden.
+         * Gets the validation errors while {@link showError} is true, the hint
+         * otherwise.
          *
-         * @returns Error message string, array of messages, or undefined.
+         * @returns Error message string, array of messages, or the hint.
          */
         get description() {
-            if (this.hideError) {
-                return undefined;
+            if (!this.showError) {
+                return this.hint;
             }
             if (this.errorMessages.length) {
                 return this.errorMessages;
@@ -179,6 +227,15 @@ export const FormMixin = (superClass) => {
         get type() {
             return this.localName;
         }
+        /**
+         * Validates `checked` rather than `value` for a checkable field.
+         *
+         * @returns the value {@link checkValidity} validates by default.
+         */
+        getValueToValidate() {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return (this.checkable ? this.checked : this.value);
+        }
         /**
          * Lifecycle callback called when element is connected to the DOM.
          * Initializes the form value depending on state.
@@ -196,6 +253,7 @@ export const FormMixin = (superClass) => {
             this.checkValidity(this.value);
             this.addEventListener(ChangeEvent.eventName, __classPrivateFieldGet(this, _FormMixinClass_markDirty, "f"));
             this.addEventListener("focusout", __classPrivateFieldGet(this, _FormMixinClass_markTouched, "f"));
+            this.addEventListener("invalid", __classPrivateFieldGet(this, _FormMixinClass_markValidationRequested, "f"));
         }
         /**
          * Lifecycle callback called when element is disconnected from the DOM.
@@ -204,6 +262,7 @@ export const FormMixin = (superClass) => {
         disconnectedCallback() {
             this.removeEventListener(ChangeEvent.eventName, __classPrivateFieldGet(this, _FormMixinClass_markDirty, "f"));
             this.removeEventListener("focusout", __classPrivateFieldGet(this, _FormMixinClass_markTouched, "f"));
+            this.removeEventListener("invalid", __classPrivateFieldGet(this, _FormMixinClass_markValidationRequested, "f"));
             super.disconnectedCallback?.();
         }
         /**
@@ -217,10 +276,9 @@ export const FormMixin = (superClass) => {
                 changedProperties.has("valueState") ||
                 changedProperties.has("checked") ||
                 changedProperties.has("validators") ||
-                changedProperties.has("required")) {
-                const valToCheck = this.checkable ? this.checked : this.value;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                this.checkValidity(valToCheck);
+                changedProperties.has("required") ||
+                changedProperties.has("error")) {
+                this.checkValidity();
             }
             super.willUpdate(changedProperties);
         }
@@ -282,6 +340,7 @@ export const FormMixin = (superClass) => {
             }
             this.dirty = false;
             this.touched = false;
+            this.validationRequested = false;
         }
         /**
          * Renders the description or error messages.
@@ -292,30 +351,23 @@ export const FormMixin = (superClass) => {
             return this.renderError();
         }
         /**
-         * Renders the error messages if the field is invalid and errors are visible.
-         * If no error messages are retrived but an hint has been set, the hint will be returned.
+         * Renders the error messages while {@link showError} is true, the hint
+         * otherwise.
          *
          * @returns Template result with error messages, hint or nothing.
          */
         renderError() {
             const { description } = this;
-            const isHint = description &&
-                description.length &&
-                !(this.errorMessages && this.errorMessages.length) &&
-                !(this.validationMessage || this.validationMessage.length);
-            if (isHint) {
+            if (!description?.length) {
+                return nothing;
+            }
+            if (!this.showError) {
                 return html `
           <p id="description" class="hint-messages">
             <span>${description}</span>
           </p>
         `;
             }
-            if (this.valid ||
-                this.hideError ||
-                this.disabled ||
-                !description?.length) {
-                return nothing;
-            }
             return html `
         <p id="description" class="error-messages">
           ${when(Array.isArray(description), () => description.map((msg) => html `<span>${msg}</span>`), () => html `<span>${description}</span>`)}
@@ -323,7 +375,7 @@ export const FormMixin = (superClass) => {
       `;
         }
     }
-    _FormMixinClass_markDirty = new WeakMap(), _FormMixinClass_markTouched = new WeakMap();
+    _FormMixinClass_markDirty = new WeakMap(), _FormMixinClass_markTouched = new WeakMap(), _FormMixinClass_markValidationRequested = new WeakMap();
     FormMixinClass.formAssociated = true;
     __decorate([
         property({ reflect: true })
@@ -343,6 +395,9 @@ export const FormMixin = (superClass) => {
     __decorate([
         state()
     ], FormMixinClass.prototype, "touched", void 0);
+    __decorate([
+        state()
+    ], FormMixinClass.prototype, "validationRequested", void 0);
     __decorate([
         property({ type: Boolean })
     ], FormMixinClass.prototype, "controlled", void 0);

package/dist/mixins/radio.mixin.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from "lit/decorators.js";
+import { hasErrorDisplayChange } from "./form.mixin.js";
 import { ChangeEvent } from "../events/change.event.js";
 /**
  * Mixin adding "radio selectable" behavior to a component.
@@ -54,7 +55,7 @@ export const RadioMixin = (superClass) => {
                 if (this.required && !this.checked) {
                     return {
                         validity: { valueMissing: true },
-                        message: "Field value is missing",
+                        message: this.validationDictionary.validation.valueMissing,
                     };
                 }
                 return { validity: {} };
@@ -105,10 +106,8 @@ export const RadioMixin = (superClass) => {
                 this.setAttribute("aria-checked", String(this.checked));
                 this.updateInternals();
             }
-            if (_changedProperties.has("valid") ||
-                _changedProperties.has("hideError") ||
-                _changedProperties.has("disabled")) {
-                this.setAttribute("aria-invalid", String(!this.hideError && !this.disabled && !this.valid));
+            if (hasErrorDisplayChange(_changedProperties)) {
+                this.setAttribute("aria-invalid", String(this.showError));
             }
         }
         /**

package/dist/mixins/validators.mixin.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 import { Mutable, Validators } from "../types/form-validators.type.js";
 import { Constructor } from "../utils/constructor.type.js";
+import { Dictionary } from "../i18n/index.js";
 /**
  * Defines a Validity object.
  */
@@ -20,10 +21,15 @@ export interface Validity {
 export declare class ValidatorsMixinInterface<U = unknown> {
     checkLocalValidators: () => Validity;
     buildCommonValidators: () => Validity;
-    checkValidity: (dataToCheck: any) => boolean;
+    checkValidity: (dataToCheck?: any) => boolean;
+    reportValidity: (valToCheck?: any) => boolean;
+    get validity(): ValidityState;
+    get willValidate(): boolean;
     internals: globalThis.ElementInternals;
     valid: boolean;
     required: boolean;
+    error?: string;
+    get validationDictionary(): Dictionary;
     errorMessages: string[];
     validationMessage: string | string[];
     validators?: Validators<U>[];

package/dist/mixins/validators.mixin.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property, state } from "lit/decorators.js";
+import { dictionaries, getDefaultLocale } from "../i18n/index.js";
 /**
  * Mixin that adds validation capabilities to a LitElement.
  *
@@ -13,6 +14,15 @@ import { property, state } from "lit/decorators.js";
  */
 export const ValidatorsMixin = (superClass) => {
     class ValidatorsMixinClass extends superClass {
+        /**
+         * The dictionary built-in validation messages are read from: the field's
+         * own `locale` when it has one, the shared default locale otherwise.
+         */
+        get validationDictionary() {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const locale = this.locale;
+            return dictionaries[locale ?? getDefaultLocale()] ?? dictionaries.en;
+        }
         /**
          * Current validity state of the element.
          */
@@ -79,18 +89,18 @@ export const ValidatorsMixin = (superClass) => {
                 (value instanceof Array && !value.length);
             if (this.required && isEmpty) {
                 validity.valueMissing = true;
-                message = "Field value is missing";
+                message = this.validationDictionary.validation.valueMissing;
             }
             return { validity, message };
         }
         /**
          * Runs all validation rules and updates internal validity.
          *
-         * @param dataToCheck The value to validate.
+         * @param dataToCheck The value to validate, the field's own one when omitted.
          * @returns true if valid, false otherwise.
          * @throws Error if any async validator is passed (only sync supported).
          */
-        checkValidity(dataToCheck) {
+        checkValidity(dataToCheck = this.getValueToValidate()) {
             const localResult = this.checkLocalValidators();
             const commonResult = this.buildCommonValidators();
             const combinedValidity = {
@@ -98,16 +108,12 @@ export const ValidatorsMixin = (superClass) => {
                 ...commonResult.validity,
             };
             let message = commonResult.message || localResult.message;
-            if (this.validators && this.validators?.length) {
-                const errorMessages = this.validators.reduce((messages, validator) => this.collectErrors(messages, validator, dataToCheck), []);
-                this.errorMessages = errorMessages;
-                if (errorMessages.length > 0) {
-                    combinedValidity.customError = true;
-                    message = errorMessages.join(" ; ");
-                }
-            }
-            else {
-                this.errorMessages = [];
+            const errorMessages = this.error ? [this.error] : [];
+            this.validators?.forEach((validator) => this.collectErrors(errorMessages, validator, dataToCheck));
+            this.errorMessages = errorMessages;
+            if (errorMessages.length > 0) {
+                combinedValidity.customError = true;
+                message = errorMessages.join(" ; ");
             }
             this.valid = !Object.values(combinedValidity).some(Boolean);
             const anchor = this.getFocusAnchor?.();
@@ -115,17 +121,17 @@ export const ValidatorsMixin = (superClass) => {
                 this.setValidity(combinedValidity, message, anchor);
             }
             else {
-                this.updateComplete.then(() => this.setValidity(combinedValidity, message, anchor));
+                void this.updateComplete.then(() => this.setValidity(combinedValidity, message, anchor));
             }
-            return this.internals.checkValidity();
+            return this.valid;
         }
         /**
          * Reports validity and shows native validation UI.
          *
-         * @param valToCheck Value to validate and report.
+         * @param valToCheck Value to validate and report, the field's own one when omitted.
          * @returns true if valid, false otherwise.
          */
-        reportValidity(valToCheck) {
+        reportValidity(valToCheck = this.getValueToValidate()) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.checkValidity(valToCheck);
             return this.internals.reportValidity();
@@ -180,6 +186,16 @@ export const ValidatorsMixin = (superClass) => {
                 this.requestUpdate("valid");
             }
         }
+        /**
+         * The value {@link checkValidity} validates when called without one.
+         * `FormMixin` overrides it to return `checked` for a checkable field.
+         *
+         * @returns the field's current value.
+         */
+        getValueToValidate() {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return this.value;
+        }
         /**
          * Provides extra data to validators if needed.
          * Override in subclass.
@@ -194,6 +210,9 @@ export const ValidatorsMixin = (superClass) => {
     __decorate([
         property({ type: Boolean })
     ], ValidatorsMixinClass.prototype, "required", void 0);
+    __decorate([
+        property()
+    ], ValidatorsMixinClass.prototype, "error", void 0);
     __decorate([
         state()
     ], ValidatorsMixinClass.prototype, "valid", void 0);

package/dist/ssr/animate-ssr.css

@@ -3,6 +3,7 @@ eun-animate:not(:defined) {
 }
 
 @media (scripting: enabled) {
+  eun-animate:not([animation]):not(:defined),
   eun-animate[animation="fade"]:not(:defined),
   eun-animate[animation="faded-scroll-right"]:not(:defined),
   eun-animate[animation="faded-scroll-left"]:not(:defined),
@@ -32,7 +33,7 @@ eun-animate:not(:defined) {
   }
 }
 
-@media (scripting: enabled) and (max-width: 768px) {
+@media (scripting: enabled) and (width < 768px) {
   eun-animate[tablet-animation="none"]:not(:defined) {
     opacity: 1;
     transform: none;
@@ -67,7 +68,7 @@ eun-animate:not(:defined) {
   }
 }
 
-@media (scripting: enabled) and (max-width: 600px) {
+@media (scripting: enabled) and (width < 600px) {
   eun-animate[mobile-animation="none"]:not(:defined) {
     opacity: 1;
     transform: none;