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

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

@@ -83,6 +83,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.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";
@@ -171,7 +172,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/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/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;

package/dist/mixins/form.mixin.js

@@ -21,6 +21,7 @@ import { ChangeEvent } from "../events/change.event.js";
 export const ERROR_DISPLAY_PROPERTIES = [
     "valid",
     "hideError",
+    "invalid",
     "disabled",
     "touched",
     "dirty",
@@ -46,6 +47,13 @@ export const FormMixin = (superClass) => {
              * @default false
              */
             this.hideError = false;
+            /**
+             * When true, the field is shown as invalid (error styling and
+             * `aria-invalid`) without any message, for an error whose message is
+             * displayed elsewhere. Does not change the field's validity.
+             * @default false
+             */
+            this.invalid = false;
             /**
              * Whether this field behaves like a checkbox/radio (checkable).
              * @default false
@@ -99,6 +107,25 @@ export const FormMixin = (superClass) => {
              * @default false
              */
             this.controlled = false;
+            /**
+             * Whether the hint or error is exposed through the host's own
+             * `aria-description`, for a component whose host is the control itself
+             * (a checkbox, a radio, a switch). The rendered message is then hidden
+             * from assistive technology, so it isn't read again as part of the
+             * control's name, which is computed from the host's content.
+             * @default false
+             * @internal
+             */
+            this.descriptionOnHost = false;
+            /**
+             * Whether a change alone reveals the error, without waiting for focus
+             * to leave the field, for a field whose every change is a complete
+             * choice (a checkbox, a radio, a select) rather than an entry still
+             * being typed.
+             * @default false
+             * @internal
+             */
+            this.errorOnChange = false;
             /**
              * Marks the field dirty on its own `eunchange` — dispatched only from a
              * genuine user-interaction handler, never from the `value`/`checked`
@@ -130,16 +157,29 @@ export const FormMixin = (superClass) => {
             }
         }
         /**
-         * 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.
+         * Whether the field currently shows its error state (styling and
+         * `aria-invalid`): not disabled, and either forced by {@link invalid} or
+         * showing its error messages.
          */
         get showError() {
+            return (this.invalid && !this.disabled) || this.showErrorMessages;
+        }
+        /**
+         * Whether the field currently shows its error messages : invalid, not
+         * disabled, not `hideError`, and either left once (`touched`), changed
+         * while {@link errorOnChange} is set (`dirty`), checked by its form, or
+         * given an external `error`. Typing alone never reveals an error, so an
+         * unfinished entry isn't reported as invalid; once shown, the error
+         * follows the value live.
+         */
+        get showErrorMessages() {
             return (!this.valid &&
                 !this.hideError &&
                 !this.disabled &&
-                (this.touched || this.dirty || this.validationRequested || !!this.error));
+                (this.touched ||
+                    (this.dirty && this.errorOnChange) ||
+                    this.validationRequested ||
+                    !!this.error));
         }
         /**
          * Whether the value hasn't changed since the field connected (or since
@@ -198,13 +238,13 @@ export const FormMixin = (superClass) => {
             this.setFormValue(value);
         }
         /**
-         * Gets the validation errors while {@link showError} is true, the hint
-         * otherwise.
+         * Gets the validation errors while {@link showErrorMessages} is true, the
+         * hint otherwise.
          *
          * @returns Error message string, array of messages, or the hint.
          */
         get description() {
-            if (!this.showError) {
+            if (!this.showErrorMessages) {
                 return this.hint;
             }
             if (this.errorMessages.length) {
@@ -282,6 +322,29 @@ export const FormMixin = (superClass) => {
             }
             super.willUpdate(changedProperties);
         }
+        /**
+         * LitElement lifecycle method called after update. Mirrors the hint or
+         * error onto the host's `aria-description` while
+         * {@link descriptionOnHost} is set.
+         *
+         * @param changedProperties - Map of changed properties and their old values.
+         */
+        updated(changedProperties) {
+            super.updated(changedProperties);
+            if (!this.descriptionOnHost) {
+                return;
+            }
+            const { description } = this;
+            const text = Array.isArray(description)
+                ? description.join(" ")
+                : description;
+            if (text) {
+                this.setAttribute("aria-description", text);
+            }
+            else {
+                this.removeAttribute("aria-description");
+            }
+        }
         /**
          * Syncs the field value with the form submission internals.
          * If disabled or unchecked (for checkable), sets empty form data.
@@ -351,8 +414,8 @@ export const FormMixin = (superClass) => {
             return this.renderError();
         }
         /**
-         * Renders the error messages while {@link showError} is true, the hint
-         * otherwise.
+         * Renders the error messages while {@link showErrorMessages} is true, the
+         * hint otherwise.
          *
          * @returns Template result with error messages, hint or nothing.
          */
@@ -361,15 +424,23 @@ export const FormMixin = (superClass) => {
             if (!description?.length) {
                 return nothing;
             }
-            if (!this.showError) {
+            if (!this.showErrorMessages) {
                 return html `
-          <p id="description" class="hint-messages">
+          <p
+            id="description"
+            class="hint-messages"
+            aria-hidden=${this.descriptionOnHost ? "true" : nothing}
+          >
             <span>${description}</span>
           </p>
         `;
             }
             return html `
-        <p id="description" class="error-messages">
+        <p
+          id="description"
+          class="error-messages"
+          aria-hidden=${this.descriptionOnHost ? "true" : nothing}
+        >
           ${when(Array.isArray(description), () => description.map((msg) => html `<span>${msg}</span>`), () => html `<span>${description}</span>`)}
         </p>
       `;
@@ -386,6 +457,9 @@ export const FormMixin = (superClass) => {
     __decorate([
         property({ type: Boolean, attribute: "hide-error" })
     ], FormMixinClass.prototype, "hideError", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], FormMixinClass.prototype, "invalid", void 0);
     __decorate([
         state()
     ], FormMixinClass.prototype, "valueState", void 0);

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

@@ -14,7 +14,7 @@ export declare class LocalizableMixinInterface {
  * it: user-facing strings with no dedicated override property at all
  * (navigation button labels, ARIA group names, and the like), and
  * strings that *do* have their own override property (e.g. `eun-chip`'s
- * `ariaLabelRemove`) but fall back to `this.dictionary` — instead of a
+ * `removeLabel`) but fall back to `this.dictionary` — instead of a
  * hardcoded English literal — when that property is left unset, so the
  * default follows `locale` while an explicit override still wins.
  *

package/dist/mixins/localizable.mixin.js

@@ -12,7 +12,7 @@ import { dictionaries, getDefaultLocale } from "../i18n/index.js";
  * it: user-facing strings with no dedicated override property at all
  * (navigation button labels, ARIA group names, and the like), and
  * strings that *do* have their own override property (e.g. `eun-chip`'s
- * `ariaLabelRemove`) but fall back to `this.dictionary` — instead of a
+ * `removeLabel`) but fall back to `this.dictionary` — instead of a
  * hardcoded English literal — when that property is left unset, so the
  * default follows `locale` while an explicit override still wins.
  *

package/dist/mixins/radio.mixin.js

@@ -37,6 +37,17 @@ export const RadioMixin = (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 radio's `value`
@@ -124,7 +135,6 @@ export const RadioMixin = (superClass) => {
          * - Prevents propagation.
          * - Ignores action if `disabled` or `readonly`.
          * - Sets `checked` to `true` ; never unchecks (see the class doc).
-         * - Updates ARIA attributes (`aria-description`).
          * - Dispatches a custom `ChangeEvent`.
          *
          * @param event The triggered mouse or keyboard event
@@ -141,15 +151,6 @@ export const RadioMixin = (superClass) => {
             this.checked = true;
             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/readonly.mixin.d.ts

@@ -10,7 +10,8 @@ export declare class ReadonlyMixinInterface {
  * A mixin that adds a `readonly` property to a LitElement component.
  *
  * When the `readonly` state changes, it automatically updates the `aria-readonly` attribute
- * for accessibility compliance.
+ * for accessibility compliance. The attribute is only present while readonly, so an SSR
+ * framework hydrating a non-readonly field doesn't see an attribute it never rendered.
  *
  * @param superClass - The base LitElement class to extend.
  * @returns A class extending the base class with `readonly` functionality.

package/dist/mixins/readonly.mixin.js

@@ -9,7 +9,8 @@ import { property } from "lit/decorators.js";
  * A mixin that adds a `readonly` property to a LitElement component.
  *
  * When the `readonly` state changes, it automatically updates the `aria-readonly` attribute
- * for accessibility compliance.
+ * for accessibility compliance. The attribute is only present while readonly, so an SSR
+ * framework hydrating a non-readonly field doesn't see an attribute it never rendered.
  *
  * @param superClass - The base LitElement class to extend.
  * @returns A class extending the base class with `readonly` functionality.
@@ -28,12 +29,18 @@ export const ReadonlyMixin = (superClass) => {
          * LitElement lifecycle method.
          * Called when reactive properties are updated.
          *
-         * Updates `aria-readonly` whenever `readonly` changes.
+         * Updates `aria-readonly` whenever `readonly` changes. Removed rather
+         * than set to "false", which means the same.
          */
         updated(_changedProperties) {
             super.updated(_changedProperties);
             if (_changedProperties.has("readonly")) {
-                this.setAttribute("aria-readonly", String(this.readonly));
+                if (this.readonly) {
+                    this.setAttribute("aria-readonly", "true");
+                }
+                else {
+                    this.removeAttribute("aria-readonly");
+                }
             }
         }
     }