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

package/dist/i18n/en.js

@@ -6,7 +6,15 @@
  * silent runtime fallback.
  */
 export const en = {
+    common: {
+        close: "Close",
+        cancel: "Cancel",
+        confirm: "Confirm",
+        noValue: "No value set",
+        save: "Save",
+    },
     datePicker: {
+        openCalendar: "Open calendar",
         previousMonth: "Previous month",
         chooseMonthYear: "Choose month and year",
         nextMonth: "Next month",
@@ -19,6 +27,11 @@ export const en = {
         amPm: "AM/PM",
         hour: "Hour",
         minute: "Minute",
+        day: "Day",
+        month: "Month",
+        year: "Year",
+        startDate: "Start date",
+        endDate: "End date",
         heading: {
             day: { single: "Select a date", range: "Select a date range" },
             month: { single: "Select a month", range: "Select a month range" },
@@ -31,6 +44,7 @@ export const en = {
         },
     },
     timePicker: {
+        openClock: "Open clock",
         amPm: "AM/PM",
         hour: "Hour",
         minute: "Minute",
@@ -40,6 +54,8 @@ export const en = {
         mustBeAtOrBefore: (time) => `Time must be at or before ${time}`,
     },
     scheduler: {
+        previous: "Previous period",
+        next: "Next period",
         calendarView: "Calendar view",
     },
     carousel: {
@@ -64,6 +80,11 @@ export const en = {
     chip: {
         remove: "Remove",
     },
+    passwordStrength: {
+        label: "Password strength",
+        levels: ["Weak", "Fair", "Good", "Strong"],
+        caption: (label) => `${label}:`,
+    },
     infiniteList: {
         loadingMore: "Loading more items…",
         itemsLoaded: (count) => `${count} more item${count > 1 ? "s" : ""} loaded`,
@@ -84,6 +105,53 @@ export const en = {
     link: {
         opensInNewTab: "opens in a new tab",
     },
+    input: {
+        clear: "Clear field",
+        showPassword: "Show password",
+        hidePassword: "Hide password",
+    },
+    search: {
+        panel: "Search",
+    },
+    counter: {
+        increment: "Increase value",
+        decrement: "Decrease value",
+    },
+    inputFile: {
+        remove: "Remove file",
+        select: "Select file",
+        open: "Open in a new tab",
+    },
+    inputPhone: {
+        selectCountry: "Select a country",
+    },
+    colorPicker: {
+        noColor: "No color selected",
+    },
+    pagination: {
+        previous: "Previous page",
+        next: "Next page",
+        first: "First page",
+        last: "Last page",
+        page: "Page",
+    },
+    sidebar: {
+        expand: "Expand sidebar",
+        collapse: "Collapse sidebar",
+        resize: "Resize sidebar",
+    },
+    toolbar: {
+        menuOpen: "Open menu",
+        menuClose: "Close menu",
+        menu: "Menu",
+    },
+    rating: {
+        label: "Rating",
+        valueText: (value, max) => `${value} out of ${max}`,
+        summary: (label, valueText) => `${label}: ${valueText}`,
+        noValue: "Not rated",
+        clear: "Clear rating",
+    },
     validation: {
         valueMissing: "This field is required",
         tooShort: (min, length) => `Please lengthen this text to ${min} characters or more (you are currently using ${length} characters).`,

package/dist/i18n/fr.js

@@ -4,7 +4,15 @@
  * error here, not a silent fallback to English at runtime.
  */
 export const fr = {
+    common: {
+        close: "Fermer",
+        cancel: "Annuler",
+        confirm: "Confirmer",
+        save: "Enregistrer",
+        noValue: "Aucune valeur",
+    },
     datePicker: {
+        openCalendar: "Ouvrir le calendrier",
         previousMonth: "Mois précédent",
         chooseMonthYear: "Choisir le mois et l'année",
         nextMonth: "Mois suivant",
@@ -17,6 +25,11 @@ export const fr = {
         amPm: "AM/PM",
         hour: "Heure",
         minute: "Minute",
+        day: "Jour",
+        month: "Mois",
+        year: "Année",
+        startDate: "Date de début",
+        endDate: "Date de fin",
         heading: {
             day: {
                 single: "Sélectionner une date",
@@ -31,8 +44,6 @@ export const fr = {
                 range: "Sélectionner une plage d'années",
             },
         },
-        // French keeps the article in both contexts, unlike English's shorter
-        // "Select date" — same phrasing as `heading` above.
         modalPreview: {
             day: {
                 single: "Sélectionner une date",
@@ -49,6 +60,7 @@ export const fr = {
         },
     },
     timePicker: {
+        openClock: "Ouvrir l'horloge",
         amPm: "AM/PM",
         hour: "Heure",
         minute: "Minute",
@@ -58,6 +70,8 @@ export const fr = {
         mustBeAtOrBefore: (time) => `L'heure doit être à ${time} ou avant`,
     },
     scheduler: {
+        previous: "Période précédente",
+        next: "Période suivante",
         calendarView: "Vue du calendrier",
     },
     carousel: {
@@ -82,6 +96,11 @@ export const fr = {
     chip: {
         remove: "Retirer",
     },
+    passwordStrength: {
+        label: "Robustesse du mot de passe",
+        levels: ["Faible", "Moyen", "Bon", "Fort"],
+        caption: (label) => `${label}\u00A0:`,
+    },
     infiniteList: {
         loadingMore: "Chargement d'autres éléments…",
         itemsLoaded: (count) => count > 1
@@ -106,6 +125,53 @@ export const fr = {
     link: {
         opensInNewTab: "ouvre dans un nouvel onglet",
     },
+    input: {
+        clear: "Effacer le champ",
+        showPassword: "Afficher le mot de passe",
+        hidePassword: "Masquer le mot de passe",
+    },
+    search: {
+        panel: "Rechercher",
+    },
+    counter: {
+        increment: "Augmenter la valeur",
+        decrement: "Diminuer la valeur",
+    },
+    inputFile: {
+        remove: "Retirer le fichier",
+        select: "Sélectionner un fichier",
+        open: "Ouvrir dans un nouvel onglet",
+    },
+    inputPhone: {
+        selectCountry: "Sélectionner un pays",
+    },
+    colorPicker: {
+        noColor: "Aucune couleur sélectionnée",
+    },
+    pagination: {
+        previous: "Page précédente",
+        next: "Page suivante",
+        first: "Première page",
+        last: "Dernière page",
+        page: "Page",
+    },
+    sidebar: {
+        expand: "Déplier la barre latérale",
+        collapse: "Replier la barre latérale",
+        resize: "Redimensionner la barre latérale",
+    },
+    toolbar: {
+        menuOpen: "Ouvrir le menu",
+        menuClose: "Fermer le menu",
+        menu: "Menu",
+    },
+    rating: {
+        label: "Note",
+        valueText: (value, max) => `${value} sur ${max}`,
+        summary: (label, valueText) => `${label}\u00A0: ${valueText}`,
+        noValue: "Non noté",
+        clear: "Effacer la note",
+    },
     validation: {
         valueMissing: "Ce champ est obligatoire",
         tooShort: (min, length) => `Saisissez au moins ${min} caractères (actuellement ${length}).`,

package/dist/index.d.ts

@@ -55,6 +55,7 @@ export type { EunomiaSidebarPosition, EunomiaSidebarCollapseMode, } from "./comp
 export { EunomiaModal, EunomiaModalTagName, } from "./components/alert/modal/modal.js";
 export { EunomiaDrawer, EunomiaDrawerTagName, } from "./components/alert/drawer/drawer.js";
 export type { EunomiaDrawerPosition } from "./components/alert/drawer/drawer.js";
+export type { EunomiaDialogInitialFocus } from "./mixins/dialog-surface.mixin.js";
 export { EunomiaAlert, EunomiaAlertTagName, } from "./components/alert/alert/alert.js";
 export { EunomiaToast, EunomiaToastTagName, } from "./components/alert/toast/toast.js";
 export type { EunomiaToastSeverity, EunomiaToastAppearance, EunomiaToastPosition, EunomiaToastSlide, } from "./components/alert/toast/toast.js";
@@ -83,6 +84,8 @@ export { EunomiaColorPicker, EunomiaColorPickerTagName, } from "./components/for
 export { EunomiaInputFile, EunomiaInputFileTagName, } from "./components/form/input-file/input-file.js";
 export type { EunomiaInputFileKind } from "./components/form/input-file/input-file.js";
 export { EunomiaSlider, EunomiaSliderTagName, } from "./components/form/slider/slider.js";
+export { EunomiaRating, EunomiaRatingTagName, } from "./components/form/rating/rating.js";
+export type { EunomiaRatingStep } from "./components/form/rating/rating.js";
 export { EunomiaLoader, EunomiaLoaderTagName, } from "./components/loader/loader/loader.js";
 export type { EunomiaLoaderVariant } from "./components/loader/loader/loader.js";
 export { EunomiaSkeleton, EunomiaSkeletonTagName, } from "./components/loader/skeleton/skeleton.js";

package/dist/index.js

@@ -90,6 +90,7 @@ export { EunomiaSelect, EunomiaSelectTagName, } from "./components/form/select/s
 export { EunomiaColorPicker, EunomiaColorPickerTagName, } from "./components/form/color-picker/color-picker.js";
 export { EunomiaInputFile, EunomiaInputFileTagName, } from "./components/form/input-file/input-file.js";
 export { EunomiaSlider, EunomiaSliderTagName, } from "./components/form/slider/slider.js";
+export { EunomiaRating, EunomiaRatingTagName, } from "./components/form/rating/rating.js";
 export { EunomiaLoader, EunomiaLoaderTagName, } from "./components/loader/loader/loader.js";
 export { EunomiaSkeleton, EunomiaSkeletonTagName, } from "./components/loader/skeleton/skeleton.js";
 export { EunomiaScheduler, EunomiaSchedulerTagName, } from "./features/scheduler/scheduler/scheduler.js";

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

@@ -34,7 +34,7 @@ export type ButtonSize = EunomiaSize;
  * (a floating action button has no `stroke`/`raised`/`flat`/`ghost` look of
  * its own).
  */
-export type EunomiaButtonAppearance = Extract<EunomiaAppearance, "default" | "fill" | "outline" | "flat" | "raised" | "ghost">;
+export type EunomiaButtonAppearance = Extract<EunomiaAppearance, "soft" | "fill" | "outline" | "flat" | "raised" | "ghost">;
 /**
  * Interface for the ButtonMixin.
  * Extend this in components if needed.

package/dist/mixins/button.mixin.js

@@ -36,7 +36,8 @@ export const ButtonMixin = (superClass) => {
              */
             this.fixedColor = false;
             /**
-             * The button size.
+             * The button size. The default isn't reflected, so an SSR framework
+             * doesn't see an attribute it never rendered.
              * @default "m"
              */
             this.size = "m";
@@ -109,7 +110,11 @@ export const ButtonMixin = (superClass) => {
         }
         /**
          * Handles keyboard interaction.
-         * Supports "Enter" and "Space" to simulate native button behavior.
+         * Supports "Enter" and "Space" to simulate native button behavior : a
+         * real `click()`, bubbling, composed and cancelable like a native
+         * button's, so delegated listeners (React's `onClick`, a parent slot)
+         * see it too. {@link handleClick} then applies the form, command or
+         * popover behavior, exactly as for a mouse click.
          *
          * @param event the received Keyboard event.
          * @private
@@ -121,9 +126,7 @@ export const ButtonMixin = (superClass) => {
                 return;
             }
             event.preventDefault();
-            if (!this.handleFormBehavior()) {
-                this.dispatchEvent(new Event("click"));
-            }
+            this.click();
         }
         /**
          * Handles native form behavior if the button is inside a <form>.
@@ -171,7 +174,7 @@ export const ButtonMixin = (superClass) => {
         property({ type: Boolean, reflect: true, attribute: "fixed-color" })
     ], ButtonMixinClass.prototype, "fixedColor", void 0);
     __decorate([
-        property({ reflect: true })
+        property({ reflect: true, useDefault: true })
     ], ButtonMixinClass.prototype, "size", void 0);
     __decorate([
         property({ type: Boolean, reflect: true })

package/dist/mixins/check.mixin.js

@@ -30,6 +30,17 @@ export const CheckMixin = (superClass) => {
              * @default true
              */
             this.checkable = true;
+            /**
+             * The host is the control, so its hint or error goes on its own
+             * `aria-description`.
+             * @internal
+             */
+            this.descriptionOnHost = true;
+            /**
+             * Every change is a complete choice, so its error shows right away.
+             * @internal
+             */
+            this.errorOnChange = true;
             /**
              * Overrides `ValidatorsMixin`'s own `required` check, which validates
              * emptiness of `this.value` — meaningless here, since a checkable
@@ -120,7 +131,6 @@ export const CheckMixin = (superClass) => {
          * - Prevents propagation.
          * - Ignores action if `disabled` or `readonly`.
          * - Toggles the `checked` state.
-         * - Updates ARIA attributes (`aria-description`).
          * - Dispatches a custom `ChangeEvent`.
          *
          * @param event The triggered mouse or keyboard event
@@ -134,15 +144,6 @@ export const CheckMixin = (superClass) => {
             this.checked = !this.checked;
             this.updateInternals();
             this.checkValidity(this.checked);
-            if (this.description) {
-                const attribute = this.description instanceof Array
-                    ? this.description.join(",")
-                    : this.description;
-                this.setAttribute("aria-description", attribute);
-            }
-            else {
-                this.removeAttribute("aria-description");
-            }
             this.dispatchEvent(new ChangeEvent(this.checked));
         }
         /**

package/dist/mixins/dialog-surface.mixin.d.ts

@@ -16,6 +16,14 @@ export declare class DialogSurfaceMixinInterface {
     protected closeDialogSurface(fallbackFocusEl?: HTMLElement): void;
     protected teardownDialogSurface(open: boolean): void;
 }
+/**
+ * Where focus lands when a dialog surface opens. `auto` keeps each
+ * component's own default target. `first-field` moves it to the first
+ * focusable element of the body when the surface was opened from the
+ * keyboard, and behaves like `auto` otherwise, so a touch opening doesn't
+ * bring up the virtual keyboard. A slotted `[autofocus]` element always wins.
+ */
+export type EunomiaDialogInitialFocus = "auto" | "first-field";
 /**
  * Shared machinery behind every `manual`-mode popover "dialog surface" in
  * this library (`eun-drawer`, `eun-modal`, `eun-toolbar`'s mobile panel):

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

@@ -13,6 +13,11 @@ export declare class DisabledMixinInterface {
  * - `tabindex` (to prevent focus when disabled),
  * - `aria-disabled` for accessibility, only present while disabled.
  *
+ * A component whose host is the control itself (a checkbox, a button) gets
+ * `tabindex="0"` while enabled. One rendering its own focusable controls
+ * inside its shadow root overrides {@link hostTabStop} to `false`, so the
+ * host never becomes an extra, empty stop in front of them.
+ *
  * @param superClass - The base class to extend.
  * @returns A new class extending the base with `disabled` behavior.
  */

package/dist/mixins/disabled.mixin.js

@@ -12,6 +12,11 @@ import { property } from "lit/decorators.js";
  * - `tabindex` (to prevent focus when disabled),
  * - `aria-disabled` for accessibility, only present while disabled.
  *
+ * A component whose host is the control itself (a checkbox, a button) gets
+ * `tabindex="0"` while enabled. One rendering its own focusable controls
+ * inside its shadow root overrides {@link hostTabStop} to `false`, so the
+ * host never becomes an extra, empty stop in front of them.
+ *
  * @param superClass - The base class to extend.
  * @returns A new class extending the base with `disabled` behavior.
  */
@@ -26,6 +31,13 @@ export const DisabledMixin = (superClass) => {
              */
             this.disabled = false;
         }
+        /**
+         * Whether the host itself is a tab stop while enabled. `false` for a
+         * component whose focusable controls live inside its shadow root.
+         */
+        get hostTabStop() {
+            return true;
+        }
         /**
          * LitElement lifecycle method.
          * Called when reactive properties are updated.
@@ -35,7 +47,15 @@ export const DisabledMixin = (superClass) => {
         updated(_changedProperties) {
             super.updated(_changedProperties);
             if (_changedProperties.has("disabled")) {
-                this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+                if (this.disabled) {
+                    this.setAttribute("tabindex", "-1");
+                }
+                else if (this.hostTabStop) {
+                    this.setAttribute("tabindex", "0");
+                }
+                else {
+                    this.removeAttribute("tabindex");
+                }
                 if (this.disabled) {
                     this.setAttribute("aria-disabled", "true");
                 }

package/dist/mixins/editable.mixin.js

@@ -4,6 +4,11 @@ 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;
 };
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
 import { property } from "lit/decorators.js";
 import { CommitEvent } from "../events/commit.event.js";
 /**
@@ -22,9 +27,11 @@ import { CommitEvent } from "../events/commit.event.js";
  * @returns A class extending the provided superclass with editable behavior.
  */
 export const EditableMixin = (superClass) => {
+    var _EditableMixinClass_instances, _EditableMixinClass_leaveEdit, _EditableMixinClass_ownsFocus;
     class EditableMixinClass extends superClass {
         constructor() {
             super(...arguments);
+            _EditableMixinClass_instances.add(this);
             /**
              * Whether the field can switch between a static read display and an
              * editable one. When false, the field always renders as fully editable.
@@ -50,15 +57,19 @@ export const EditableMixin = (superClass) => {
         }
         /**
          * Confirms the current edit. Runs validation first; if it fails, the
-         * field stays in edit mode and the error is shown instead of committing.
-         * On success, dispatches a {@link CommitEvent} so consumers can persist
-         * the new value.
+         * field stays in edit mode, shows its error and gets the focus back
+         * instead of committing. On success, dispatches a {@link CommitEvent}
+         * so consumers can persist the new value.
          */
         confirmEdit() {
             if (!this.checkValidity(this.value)) {
+                this.validationRequested = true;
+                if (__classPrivateFieldGet(this, _EditableMixinClass_instances, "m", _EditableMixinClass_ownsFocus).call(this)) {
+                    this.focus();
+                }
                 return;
             }
-            this.editing = false;
+            __classPrivateFieldGet(this, _EditableMixinClass_instances, "m", _EditableMixinClass_leaveEdit).call(this);
             this.dispatchEvent(new CommitEvent());
         }
         /**
@@ -67,9 +78,21 @@ export const EditableMixin = (superClass) => {
          */
         cancelEdit() {
             this.value = this.valueOnEditStart;
-            this.editing = false;
+            __classPrivateFieldGet(this, _EditableMixinClass_instances, "m", _EditableMixinClass_leaveEdit).call(this);
         }
     }
+    _EditableMixinClass_instances = new WeakSet(), _EditableMixinClass_leaveEdit = function _EditableMixinClass_leaveEdit() {
+        const restoreFocus = __classPrivateFieldGet(this, _EditableMixinClass_instances, "m", _EditableMixinClass_ownsFocus).call(this);
+        this.editing = false;
+        if (restoreFocus) {
+            void this.updateComplete.then(() => this.shadowRoot
+                ?.querySelector("#readonly-display")
+                ?.focus());
+        }
+    }, _EditableMixinClass_ownsFocus = function _EditableMixinClass_ownsFocus() {
+        const active = document.activeElement;
+        return (!active || active === document.body || this.matches(":focus-within"));
+    };
     __decorate([
         property({
             type: Boolean,

package/dist/mixins/field-appearance.mixin.js

@@ -20,13 +20,14 @@ export const FieldAppearanceMixin = (superClass) => {
             super(...arguments);
             /**
              * How the field's surface is drawn.
-             * By default, set to "outline".
+             * By default, set to "outline". The default isn't reflected, so an SSR
+             * framework doesn't see an attribute it never rendered.
              */
             this.appearance = "outline";
         }
     }
     __decorate([
-        property({ reflect: true })
+        property({ reflect: true, useDefault: true })
     ], FieldAppearanceMixinClass.prototype, "appearance", void 0);
     return FieldAppearanceMixinClass;
 };

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

@@ -0,0 +1,19 @@
+import { LitElement } from "lit";
+import { Constructor } from "../utils/constructor.type.js";
+import { EunomiaSize } from "../types/variant.type.js";
+/**
+ * Interface defining the contract for components using FieldSizeMixin.
+ */
+export declare class FieldSizeMixinInterface {
+    size?: EunomiaSize;
+}
+/**
+ * A mixin that adds a `size` property to a text-like form field component,
+ * with the same values as `eun-button`'s own. A field and a button of the
+ * same size share their font size, vertical padding and line height, so
+ * they line up at the same height side by side (see `field.styles.ts`).
+ *
+ * @param superClass - The base class to extend.
+ * @returns A new class extending the base with `size` behavior.
+ */
+export declare const FieldSizeMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<FieldSizeMixinInterface> & T;

package/dist/mixins/field-size.mixin.js

@@ -0,0 +1,33 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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";
+/**
+ * A mixin that adds a `size` property to a text-like form field component,
+ * with the same values as `eun-button`'s own. A field and a button of the
+ * same size share their font size, vertical padding and line height, so
+ * they line up at the same height side by side (see `field.styles.ts`).
+ *
+ * @param superClass - The base class to extend.
+ * @returns A new class extending the base with `size` behavior.
+ */
+export const FieldSizeMixin = (superClass) => {
+    class FieldSizeMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * The field size, matching the button size of the same name.
+             * By default, set to "m". The default isn't reflected, so an SSR
+             * framework doesn't see an attribute it never rendered.
+             */
+            this.size = "m";
+        }
+    }
+    __decorate([
+        property({ reflect: true, useDefault: true })
+    ], FieldSizeMixinClass.prototype, "size", void 0);
+    return FieldSizeMixinClass;
+};

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

@@ -17,12 +17,16 @@ export declare class FormMixinInterface<T> {
     description?: string | string[] | undefined;
     valueState?: T;
     hideError?: boolean;
+    invalid: boolean;
     form: HTMLFormElement | null;
     dirty: boolean;
     touched: boolean;
     validationRequested: boolean;
     controlled: boolean;
+    descriptionOnHost: boolean;
+    errorOnChange: boolean;
     get showError(): boolean;
+    get showErrorMessages(): boolean;
     get pristine(): boolean;
     get untouched(): boolean;
     get value(): T;