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

package/dist/i18n/fr.js

@@ -63,9 +63,16 @@ export const fr = {
     carousel: {
         ofTotal: (index, total) => `${index} sur ${total}`,
         slideNavigation: "Navigation des diapositives",
+        previous: "Diapositive précédente",
+        next: "Diapositive suivante",
         goToSlide: (index, total) => `Aller à la diapositive ${index} sur ${total}`,
     },
     imageCarousel: {
+        gallery: "Galerie d'images",
+        previous: "Image précédente",
+        next: "Image suivante",
+        expand: "Voir l'image en taille réelle",
+        lightbox: "Visionneuse d'images",
         selectImage: "Sélectionner une image",
         showImage: (index, total) => `Afficher l'image ${index} sur ${total}`,
         imageNavigation: "Navigation des images",
@@ -75,4 +82,35 @@ export const fr = {
     chip: {
         remove: "Retirer",
     },
+    infiniteList: {
+        loadingMore: "Chargement d'autres éléments…",
+        itemsLoaded: (count) => count > 1
+            ? `${count} éléments supplémentaires chargés`
+            : `${count} élément supplémentaire chargé`,
+    },
+    table: {
+        loadingMore: "Chargement d'autres lignes…",
+        selected: "sélectionnée(s)",
+        selectAll: "Tout sélectionner",
+        deselectAll: "Tout désélectionner",
+        selectAllRows: "Sélectionner toutes les lignes",
+        deselectAllRows: "Désélectionner toutes les lignes",
+        selectRow: "Sélectionner la ligne",
+        selectionActions: "Actions de sélection",
+        clearSelection: "Vider la sélection",
+        rowActions: "Actions de la ligne",
+        rowsLoaded: (count) => count > 1
+            ? `${count} lignes supplémentaires chargées`
+            : `${count} ligne supplémentaire chargée`,
+    },
+    link: {
+        opensInNewTab: "ouvre dans un nouvel onglet",
+    },
+    validation: {
+        valueMissing: "Ce champ est obligatoire",
+        tooShort: (min, length) => `Saisissez au moins ${min} caractères (actuellement ${length}).`,
+        tooLong: (max, length) => `Saisissez au plus ${max} caractères (actuellement ${length}).`,
+        invalidDate: "Saisissez une date valide",
+        invalidTime: "Saisissez une heure valide",
+    },
 };

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { EunomiaInfiniteList, EunomiaInfiniteListTagName, } from "./components/l
 export { EunomiaDivider, EunomiaDividerTagName, } from "./components/layout/divider/divider.js";
 export type { EunomiaDividerOrientation } from "./components/layout/divider/divider.js";
 export { EunomiaButton, EunomiaButtonTagName, } from "./components/action/button/button.js";
-export type { EunomiaActionVariant, EunomiaSeverity, EunomiaAppearance, EunomiaTone, EunomiaSize, } from "./types/variant.type.js";
+export type { EunomiaActionColor, EunomiaSeverity, EunomiaAppearance, EunomiaFieldAppearance, EunomiaTone, EunomiaSize, } from "./types/variant.type.js";
 export { EunomiaFab, EunomiaFabTagName } from "./components/action/fab/fab.js";
 export type { EunomiaFabPosition } from "./components/action/fab/fab.js";
 export { EunomiaDropdownButton, EunomiaDropdownButtonTagName, } from "./components/action/dropdown-button/dropdown-button.js";
@@ -18,10 +18,12 @@ 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";
-export type { EunomiaBadgeSize, EunomiaBadgeVariant, } from "./components/content/badge/badge.js";
+export type { EunomiaBadgeSize, EunomiaBadgeColor, } from "./components/content/badge/badge.js";
 export { EunomiaCollapse, EunomiaCollapseTagName, } from "./components/content/collapse/collapse.js";
 export { EunomiaCard, EunomiaCardTagName, } from "./components/content/card/card.js";
 export { EunomiaImageCard, EunomiaImageCardTagName, } from "./components/content/card/image-card.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";
@@ -90,21 +90,15 @@ export type { EunomiaSkeletonVariant } from "./components/loader/skeleton/skelet
 export { EunomiaScheduler, EunomiaSchedulerTagName, } from "./features/scheduler/scheduler/scheduler.js";
 export { EunomiaCalendar, EunomiaCalendarTagName, } from "./features/scheduler/calendar/calendar.js";
 export { EunomiaSchedulerEventCard, EunomiaSchedulerEventCardTagName, } from "./features/scheduler/scheduler-event/scheduler-event.js";
-export type { EunomiaSchedulerEventCardVariant } from "./features/scheduler/scheduler-event/scheduler-event.js";
+export type { EunomiaSchedulerEventAppearance } from "./features/scheduler/scheduler-event/scheduler-event.js";
 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/jsx.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="index.d.ts" />
 /**
- * JSX/TSX support for every `eun-*` tag: `<eun-button variant="primary">`
+ * JSX/TSX support for every `eun-*` tag: `<eun-button color="primary">`
  * type-checks in a `.tsx` file the same way a native `<button>` does, with
  * prop autocomplete and invalid-prop rejection, once this module has been
  * imported anywhere in the program.

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

@@ -3,29 +3,30 @@ import { CommandMixinInterface } from "./command.mixin.js";
 import { DisabledMixinInterface } from "./disabled.mixin.js";
 import { PopoverMixinInterface } from "./popover.mixin.js";
 import { Constructor } from "../utils/constructor.type.js";
-import { EunomiaActionVariant, EunomiaAppearance, EunomiaSize, EunomiaTone } from "../types/variant.type.js";
+import { EunomiaActionColor, EunomiaAppearance, EunomiaSize, EunomiaTone } from "../types/variant.type.js";
 /**
  * The button's native HTML mechanism when clicked inside a form — distinct
- * from every other component's `variant`/`appearance`, and left as `type`
+ * from every other component's `color`/`appearance`, and left as `type`
  * since it mirrors the real `<button type>` attribute.
  */
 export type ButtonType = "submit" | "reset" | "button";
 /**
- * All available variants for the button component: the semantic
- * {@link EunomiaActionVariant} set, plus the neutral, non-semantic grey tones
+ * All available colors for the button component: the semantic
+ * {@link EunomiaActionColor} set, plus the neutral, non-semantic grey tones
  * borrowed from {@link EunomiaTone} (`light`/`medium`/`dark`), the same
  * vocabulary `eun-tag`'s `color` uses. They cover a de-emphasized action,
  * such as a secondary link next to a colored CTA, without resorting to
  * manual `--button-*` cssprop overrides.
  */
-export type ButtonVariant = EunomiaActionVariant | Extract<EunomiaTone, "light" | "medium" | "dark">;
+export type ButtonColor = EunomiaActionColor | Extract<EunomiaTone, "light" | "medium" | "dark">;
 /**
  * All available sizes for the button component.
  */
 export type ButtonSize = EunomiaSize;
 /**
- * All available button surface treatments — the full six-value
- * {@link EunomiaAppearance} set, since a button (unlike a passive display
+ * All available button surface treatments — every {@link EunomiaAppearance}
+ * value except the field-only `underline` and the scheduler-only
+ * `transparent`, since a button (unlike a passive display
  * component) has a hover/focus/active state for `ghost` to reveal itself
  * on, and can be visually elevated (`raised`) the way a static piece of
  * content never is. Not part of {@link ButtonMixinInterface} itself : only
@@ -33,14 +34,14 @@ export type ButtonSize = EunomiaSize;
  * (a floating action button has no `stroke`/`raised`/`flat`/`ghost` look of
  * its own).
  */
-export type EunomiaButtonAppearance = EunomiaAppearance;
+export type EunomiaButtonAppearance = Extract<EunomiaAppearance, "default" | "fill" | "outline" | "flat" | "raised" | "ghost">;
 /**
  * Interface for the ButtonMixin.
  * Extend this in components if needed.
  */
 export declare class ButtonMixinInterface {
     type?: ButtonType;
-    variant?: ButtonVariant;
+    color?: ButtonColor;
     fixedColor?: boolean;
     size?: ButtonSize;
     rounded?: boolean;

package/dist/mixins/button.mixin.js

@@ -22,14 +22,16 @@ export const ButtonMixin = (superClass) => {
             super(...arguments);
             /**
              * The button type: "submit", "reset", or "button".
-             * Determines behavior when clicked inside a form.
+             * Determines behavior when clicked inside a form. Only reflected once it
+             * differs from the default, so an SSR framework doesn't see an
+             * attribute it never rendered.
              * @default "button"
              */
             this.type = "button";
             /**
              * Keeps a `light` or `dark` button white or black in every theme.
              * Without it, they follow the grey scale, which flips with the active
-             * theme. Has no effect on the other variants.
+             * theme. Has no effect on the other colors.
              * @default false
              */
             this.fixedColor = false;
@@ -61,13 +63,14 @@ export const ButtonMixin = (superClass) => {
          * Lifecycle hook: adds keyboard and click listeners, and sets the
          * default role to "button" if not already defined.
          *
-         * Skipped entirely when `href` is set: the internally-rendered `<a>`
+         * Skipped entirely when `href` is set, or when a native `<a>` is slotted
+         * as a direct child : that anchor (internal or the consumer's own)
          * already provides native role, focus and activation semantics, so the
          * host must stay out of the way rather than duplicate them.
          */
         connectedCallback() {
             super.connectedCallback?.();
-            if (this.href) {
+            if (this.href || this.querySelector(":scope > a")) {
                 return;
             }
             if (!this.hasAttribute("role")) {
@@ -154,11 +157,16 @@ export const ButtonMixin = (superClass) => {
         }
     }
     __decorate([
-        property({ reflect: true })
+        property({
+            reflect: true,
+            converter: {
+                toAttribute: (value) => (value === "button" ? null : value),
+            },
+        })
     ], ButtonMixinClass.prototype, "type", void 0);
     __decorate([
         property({ reflect: true })
-    ], ButtonMixinClass.prototype, "variant", void 0);
+    ], ButtonMixinClass.prototype, "color", void 0);
     __decorate([
         property({ type: Boolean, reflect: true, attribute: "fixed-color" })
     ], ButtonMixinClass.prototype, "fixedColor", void 0);

package/dist/mixins/card-link.mixin.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, nothing, TemplateResult } from "lit";
 import { Constructor } from "../utils/constructor.type.js";
+import { LocalizableMixinInterface } from "./localizable.mixin.js";
 /**
  * The native `target` values a card can be given, mirroring
  * `eun-button`/`eun-link`'s own `target` type.
@@ -15,7 +16,7 @@ export declare class CardLinkMixinInterface {
     get isExternal(): boolean;
     get linkAriaLabel(): string | undefined;
     renderNewTabHint(): TemplateResult | typeof nothing;
-    renderExternalLinkBadge(): TemplateResult | typeof nothing;
+    renderExternalLinkBadge(slottedBlank?: boolean): TemplateResult | typeof nothing;
     renderCardLink(id: string, content: TemplateResult, className?: string): TemplateResult;
 }
 /**
@@ -37,4 +38,4 @@ export declare class CardLinkMixinInterface {
  * @param superClass - The base class to extend (must include LitElement).
  * @returns A class extended with the card link behavior.
  */
-export declare const CardLinkMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<CardLinkMixinInterface> & T;
+export declare const CardLinkMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<CardLinkMixinInterface & LocalizableMixinInterface> & T;

package/dist/mixins/card-link.mixin.js

@@ -8,6 +8,7 @@ import { html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { handleLinkNavigation } from "../utils/navigation.utils.js";
+import { LocalizableMixin, } from "./localizable.mixin.js";
 /**
  * CardLinkMixin adds the "link state" shared by every card in this family
  * (`eun-card`, `eun-image-card`, `eun-sliding-card`) : `href`/`target`/
@@ -28,7 +29,7 @@ import { handleLinkNavigation } from "../utils/navigation.utils.js";
  * @returns A class extended with the card link behavior.
  */
 export const CardLinkMixin = (superClass) => {
-    class CardLinkMixinClass extends superClass {
+    class CardLinkMixinClass extends LocalizableMixin(superClass) {
         /**
          * Whether the link, if any, opens in a new tab.
          */
@@ -44,7 +45,9 @@ export const CardLinkMixin = (superClass) => {
          */
         get linkAriaLabel() {
             const label = this.ariaLabel ?? undefined;
-            return this.isExternal && label ? `${label} (opens in a new tab)` : label;
+            return this.isExternal && label
+                ? `${label} (${this.dictionary.link.opensInNewTab})`
+                : label;
         }
         /**
          * Gives an SPA router (Next.js, Angular, React Router, Vue Router, ...)
@@ -71,16 +74,20 @@ export const CardLinkMixin = (superClass) => {
             if (!(this.href && this.isExternal) || this.ariaLabel) {
                 return nothing;
             }
-            return html `<span class="sr-only"> (opens in a new tab)</span>`;
+            const hint = this.dictionary.link.opensInNewTab;
+            return html `<span class="sr-only"> (${hint})</span>`;
         }
         /**
          * The absolute, top-right external-link badge shown when `href` and
          * `target="_blank"` are both set — purely decorative (`aria-hidden`),
          * the accessible "(opens in a new tab)" wording lives on the `<a>`
          * itself (see {@link linkAriaLabel}/{@link renderNewTabHint}).
+         *
+         * @param slottedBlank whether a slotted anchor, rather than `href`,
+         *   opens in a new tab (its wording goes on its own aria-description).
          */
-        renderExternalLinkBadge() {
-            if (!(this.href && this.isExternal)) {
+        renderExternalLinkBadge(slottedBlank = false) {
+            if (!(this.href && this.isExternal) && !slottedBlank) {
                 return nothing;
             }
             return html `

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/disabled.mixin.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-import { Constructor } from '../utils/constructor.type.js';
+import { LitElement } from "lit";
+import { Constructor } from "../utils/constructor.type.js";
 /**
  * Interface defining the contract for components using DisabledMixin.
  */
@@ -11,7 +11,7 @@ export declare class DisabledMixinInterface {
  *
  * When the `disabled` property changes, it automatically updates:
  * - `tabindex` (to prevent focus when disabled),
- * - `aria-disabled` for accessibility.
+ * - `aria-disabled` for accessibility, only present while disabled.
  *
  * @param superClass - The base class to extend.
  * @returns A new class extending the base with `disabled` behavior.

package/dist/mixins/disabled.mixin.js

@@ -4,13 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { property } from 'lit/decorators.js';
+import { property } from "lit/decorators.js";
 /**
  * A mixin that adds a `disabled` property to a LitElement component.
  *
  * When the `disabled` property changes, it automatically updates:
  * - `tabindex` (to prevent focus when disabled),
- * - `aria-disabled` for accessibility.
+ * - `aria-disabled` for accessibility, only present while disabled.
  *
  * @param superClass - The base class to extend.
  * @returns A new class extending the base with `disabled` behavior.
@@ -34,9 +34,14 @@ export const DisabledMixin = (superClass) => {
          */
         updated(_changedProperties) {
             super.updated(_changedProperties);
-            if (_changedProperties.has('disabled')) {
-                this.setAttribute('tabindex', this.disabled ? '-1' : '0');
-                this.setAttribute('aria-disabled', String(this.disabled));
+            if (_changedProperties.has("disabled")) {
+                this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+                if (this.disabled) {
+                    this.setAttribute("aria-disabled", "true");
+                }
+                else {
+                    this.removeAttribute("aria-disabled");
+                }
             }
         }
     }

package/dist/mixins/field-appearance.mixin.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from "lit";
+import { Constructor } from "../utils/constructor.type.js";
+import { EunomiaFieldAppearance } from "../types/variant.type.js";
+/**
+ * Interface defining the contract for components using FieldAppearanceMixin.
+ */
+export declare class FieldAppearanceMixinInterface {
+    appearance?: EunomiaFieldAppearance;
+}
+/**
+ * A mixin that adds an `appearance` property to a text-like form field
+ * component, controlling how its surface is drawn: bordered box
+ * (`outline`, default), muted background with no border (`flat`), or a
+ * bottom-only border (`underline`).
+ *
+ * @param superClass - The base class to extend.
+ * @returns A new class extending the base with `appearance` behavior.
+ */
+export declare const FieldAppearanceMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<FieldAppearanceMixinInterface> & T;

package/dist/mixins/{field-variant.mixin.js → field-appearance.mixin.js}

@@ -6,27 +6,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { property } from "lit/decorators.js";
 /**
- * A mixin that adds a `variant` property to a text-like form field
- * component, controlling its visual style: bordered box (`outline`,
- * default), filled background with no border (`fill`), or a bottom-only
- * border (`underline`).
+ * A mixin that adds an `appearance` property to a text-like form field
+ * component, controlling how its surface is drawn: bordered box
+ * (`outline`, default), muted background with no border (`flat`), or a
+ * bottom-only border (`underline`).
  *
  * @param superClass - The base class to extend.
- * @returns A new class extending the base with `variant` behavior.
+ * @returns A new class extending the base with `appearance` behavior.
  */
-export const FieldVariantMixin = (superClass) => {
-    class FieldVariantMixinClass extends superClass {
+export const FieldAppearanceMixin = (superClass) => {
+    class FieldAppearanceMixinClass extends superClass {
         constructor() {
             super(...arguments);
             /**
-             * The visual variant to apply to the field.
+             * How the field's surface is drawn.
              * By default, set to "outline".
              */
-            this.variant = "outline";
+            this.appearance = "outline";
         }
     }
     __decorate([
         property({ reflect: true })
-    ], FieldVariantMixinClass.prototype, "variant", void 0);
-    return FieldVariantMixinClass;
+    ], FieldAppearanceMixinClass.prototype, "appearance", void 0);
+    return FieldAppearanceMixinClass;
 };

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.
  *