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

package/dist/components/content/image-carousel/image-carousel.js

@@ -58,14 +58,14 @@ export const EunomiaImageCarouselTagName = "eun-image-carousel";
  * @prop {number} [autoplayInterval=4000] - Milliseconds between each autoplay advance
  * @attr {number} [autoplay-interval=4000] - Milliseconds between each autoplay advance
  * @attr {string} aria-label - The accessible name for the main stage. Defaults to the localized string for the current locale (English: "Image gallery")
- * @prop {string} [ariaLabelPrevious] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
- * @attr {string} [aria-label-previous] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
- * @prop {string} [ariaLabelNext] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
- * @attr {string} [aria-label-next] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
- * @prop {string} [ariaLabelExpand] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
- * @attr {string} [aria-label-expand] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
- * @prop {string} [ariaLabelLightbox] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
- * @attr {string} [aria-label-lightbox] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
+ * @prop {string} [previousLabel] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
+ * @attr {string} [previous-label] - The accessible label of the previous controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Previous image")
+ * @prop {string} [nextLabel] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
+ * @attr {string} [next-label] - The accessible label of the next controls, on both the main stage and the lightbox. Defaults to the localized string for the current locale (English: "Next image")
+ * @prop {string} [expandLabel] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
+ * @attr {string} [expand-label] - The accessible label of the main stage's expand control. Defaults to the localized string for the current locale (English: "View full-size image")
+ * @prop {string} [lightboxLabel] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
+ * @attr {string} [lightbox-label] - The accessible name of the lightbox dialog. Defaults to the localized string for the current locale (English: "Image viewer")
  * @fires {ImageChangeEvent} eunimagechange - Fired whenever the active image changes, from either the main stage or the lightbox
  * @cssprop [--image-carousel-aspect-ratio] - Sets the aspect ratio of the main stage
  * @cssprop [--image-carousel-object-fit] - Sets how the main image fits its box
@@ -968,7 +968,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
         type="button"
         id="expand-trigger"
         aria-haspopup="dialog"
-        aria-label="${this.ariaLabelExpand ??
+        aria-label="${this.expandLabel ??
             this.dictionary.imageCarousel.expand} (${this.activeIndex +
             1}/${count})"
         @click=${this.handleExpandClick}
@@ -990,7 +990,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
         type="button"
         class="stage-nav"
         id="prev"
-        aria-label=${this.ariaLabelPrevious ??
+        aria-label=${this.previousLabel ??
             this.dictionary.imageCarousel.previous}
         ?disabled=${disablePrev}
         @click=${() => this.previous()}
@@ -1001,7 +1001,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
         type="button"
         class="stage-nav"
         id="next"
-        aria-label=${this.ariaLabelNext ?? this.dictionary.imageCarousel.next}
+        aria-label=${this.nextLabel ?? this.dictionary.imageCarousel.next}
         ?disabled=${disableNext}
         @click=${() => this.next()}
       >
@@ -1097,7 +1097,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
       <eun-modal
         id="modal"
         hide-actions
-        aria-label=${this.ariaLabelLightbox ??
+        aria-label=${this.lightboxLabel ??
             this.dictionary.imageCarousel.lightbox}
         @euncancel=${() => this.handleTransientResume()}
       >
@@ -1133,7 +1133,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
                     type="button"
                     class="lightbox-nav"
                     id="lightbox-prev"
-                    aria-label=${this.ariaLabelPrevious ??
+                    aria-label=${this.previousLabel ??
                 this.dictionary.imageCarousel.previous}
                     ?disabled=${!this.loop && this.activeIndex <= 0}
                     @click=${() => this.previous()}
@@ -1144,7 +1144,7 @@ let EunomiaImageCarousel = EunomiaImageCarousel_1 = class EunomiaImageCarousel e
                     type="button"
                     class="lightbox-nav"
                     id="lightbox-next"
-                    aria-label=${this.ariaLabelNext ??
+                    aria-label=${this.nextLabel ??
                 this.dictionary.imageCarousel.next}
                     ?disabled=${!this.loop && this.activeIndex >= count - 1}
                     @click=${() => this.next()}
@@ -1248,7 +1248,7 @@ EunomiaImageCarousel.SWIPE_THRESHOLD = 40;
  */
 EunomiaImageCarousel.EDGE_RESISTANCE = 0.3;
 __decorate([
-    property({ type: Array, reflect: true })
+    property({ type: Array, reflect: true, useDefault: true })
 ], EunomiaImageCarousel.prototype, "images", void 0);
 __decorate([
     property({ type: Number, attribute: "active-index" })
@@ -1275,7 +1275,7 @@ __decorate([
     property({ type: Boolean })
 ], EunomiaImageCarousel.prototype, "loop", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaImageCarousel.prototype, "transition", void 0);
 __decorate([
     property({ type: Boolean })
@@ -1284,17 +1284,17 @@ __decorate([
     property({ type: Number, attribute: "autoplay-interval" })
 ], EunomiaImageCarousel.prototype, "autoplayInterval", void 0);
 __decorate([
-    property({ attribute: "aria-label-previous" })
-], EunomiaImageCarousel.prototype, "ariaLabelPrevious", void 0);
+    property({ attribute: "previous-label" })
+], EunomiaImageCarousel.prototype, "previousLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-next" })
-], EunomiaImageCarousel.prototype, "ariaLabelNext", void 0);
+    property({ attribute: "next-label" })
+], EunomiaImageCarousel.prototype, "nextLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-expand" })
-], EunomiaImageCarousel.prototype, "ariaLabelExpand", void 0);
+    property({ attribute: "expand-label" })
+], EunomiaImageCarousel.prototype, "expandLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-lightbox" })
-], EunomiaImageCarousel.prototype, "ariaLabelLightbox", void 0);
+    property({ attribute: "lightbox-label" })
+], EunomiaImageCarousel.prototype, "lightboxLabel", void 0);
 __decorate([
     state()
 ], EunomiaImageCarousel.prototype, "announcement", void 0);

package/dist/components/content/password-strength/password-strength.d.ts

@@ -4,6 +4,7 @@ import { PasswordStrengthLevel, PasswordStrengthRule } from "./password-strength
  * Tag name of the password strength component.
  */
 export declare const EunomiaPasswordStrengthTagName = "eun-password-strength";
+declare const EunomiaPasswordStrength_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A visual and assistive technology indicator of how well a password
  * satisfies a set of configurable requirements, graded into levels,
@@ -21,9 +22,10 @@ export declare const EunomiaPasswordStrengthTagName = "eun-password-strength";
  * escape hatch for a level that needs a specific pattern instead.
  *
  * @prop {string} [value=''] - The password to grade
- * @prop {string} [label='Password strength'] - A static caption shown next to the current level's name, and used to prefix the message announced to screen readers on every level change
+ * @prop {string} [label] - A static caption shown next to the current level's name, and used to prefix the message announced to screen readers on every level change. Defaults to the localized string for the current locale (English: "Password strength")
  * @prop {Array<import('./password-strength.type.js').PasswordStrengthRule>} [rules] - The shared pool of requirements levels are scored against by default. Four by default: eight or more characters, upper and lower case, one number, and one special character
- * @prop {Array<import('./password-strength.type.js').PasswordStrengthLevel>} [levels] - The levels to render, ordered from weakest to strongest. Four by default: Weak, Fair, Good, and Strong
+ * @prop {Array<import('./password-strength.type.js').PasswordStrengthLevel>} [levels] - The levels to render, ordered from weakest to strongest. Four by default: Weak, Fair, Good, and Strong, named in the current locale
+ * @prop {string} [locale] - The locale used to resolve the default caption and level names. Defaults to the shared default locale
  * @prop {boolean} [hideLabel=false] - Hides the always-visible caption and level name. The level name is still announced to screen readers on every change either way
  * @attr {boolean} [hide-label=false] - Hides the always-visible caption and level name
  * @cssprop [--password-strength-gap] - Sets the gap between the segment row and the label
@@ -42,7 +44,7 @@ export declare const EunomiaPasswordStrengthTagName = "eun-password-strength";
  * @cssprop [--password-strength-level-font-weight] - Sets the font weight of the level name
  * @element eun-password-strength
  */
-export declare class EunomiaPasswordStrength extends LitElement {
+export declare class EunomiaPasswordStrength extends EunomiaPasswordStrength_base {
     /**
      * Styles to import to the component.
      *
@@ -59,10 +61,10 @@ export declare class EunomiaPasswordStrength extends LitElement {
     /**
      * Static caption shown next to the current level's name, and used to
      * prefix the message announced to screen readers on every level change
-     * (e.g. "Password strength: Fair").
-     * @default Password strength
+     * (e.g. "Password strength: Fair"). Falls back to the localized string
+     * for the current locale when unset.
      */
-    label: string;
+    label?: string;
     /**
      * The shared pool of regex-based requirements levels are scored against
      * by default (see {@link PasswordStrengthLevel.minScore}). A JS-only
@@ -107,6 +109,18 @@ export declare class EunomiaPasswordStrength extends LitElement {
      * @internal
      */
     private get currentLevelIndex();
+    /**
+     * {@link levels}, with the default levels named in the current locale.
+     * Custom levels are returned as is.
+     * @internal
+     */
+    private get resolvedLevels();
+    /**
+     * {@link label} or its localized fallback, punctuated for the current
+     * locale (e.g. "Password strength:").
+     * @internal
+     */
+    private get caption();
     /**
      * Lifecycle hook called whenever reactive properties change. Speaks the
      * newly-reached level through {@link announcerEl} whenever it actually
@@ -122,3 +136,4 @@ declare global {
         [EunomiaPasswordStrengthTagName]: EunomiaPasswordStrength;
     }
 }
+export {};

package/dist/components/content/password-strength/password-strength.js

@@ -10,6 +10,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { passwordStrengthStyles } from "./password-strength.styles.js";
 import { DEFAULT_PASSWORD_STRENGTH_LEVELS, DEFAULT_PASSWORD_STRENGTH_RULES, getPasswordStrengthLevelIndex, } from "./password-strength.type.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the password strength component.
  */
@@ -31,9 +32,10 @@ export const EunomiaPasswordStrengthTagName = "eun-password-strength";
  * escape hatch for a level that needs a specific pattern instead.
  *
  * @prop {string} [value=''] - The password to grade
- * @prop {string} [label='Password strength'] - A static caption shown next to the current level's name, and used to prefix the message announced to screen readers on every level change
+ * @prop {string} [label] - A static caption shown next to the current level's name, and used to prefix the message announced to screen readers on every level change. Defaults to the localized string for the current locale (English: "Password strength")
  * @prop {Array<import('./password-strength.type.js').PasswordStrengthRule>} [rules] - The shared pool of requirements levels are scored against by default. Four by default: eight or more characters, upper and lower case, one number, and one special character
- * @prop {Array<import('./password-strength.type.js').PasswordStrengthLevel>} [levels] - The levels to render, ordered from weakest to strongest. Four by default: Weak, Fair, Good, and Strong
+ * @prop {Array<import('./password-strength.type.js').PasswordStrengthLevel>} [levels] - The levels to render, ordered from weakest to strongest. Four by default: Weak, Fair, Good, and Strong, named in the current locale
+ * @prop {string} [locale] - The locale used to resolve the default caption and level names. Defaults to the shared default locale
  * @prop {boolean} [hideLabel=false] - Hides the always-visible caption and level name. The level name is still announced to screen readers on every change either way
  * @attr {boolean} [hide-label=false] - Hides the always-visible caption and level name
  * @cssprop [--password-strength-gap] - Sets the gap between the segment row and the label
@@ -52,7 +54,7 @@ export const EunomiaPasswordStrengthTagName = "eun-password-strength";
  * @cssprop [--password-strength-level-font-weight] - Sets the font weight of the level name
  * @element eun-password-strength
  */
-let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LitElement {
+let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LocalizableMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -60,13 +62,6 @@ let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LitElement {
          * @default ''
          */
         this.value = "";
-        /**
-         * Static caption shown next to the current level's name, and used to
-         * prefix the message announced to screen readers on every level change
-         * (e.g. "Password strength: Fair").
-         * @default Password strength
-         */
-        this.label = "Password strength";
         /**
          * The shared pool of regex-based requirements levels are scored against
          * by default (see {@link PasswordStrengthLevel.minScore}). A JS-only
@@ -106,6 +101,30 @@ let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LitElement {
     get currentLevelIndex() {
         return getPasswordStrengthLevelIndex(this.value, this.rules, this.levels);
     }
+    /**
+     * {@link levels}, with the default levels named in the current locale.
+     * Custom levels are returned as is.
+     * @internal
+     */
+    get resolvedLevels() {
+        if (this.levels !== DEFAULT_PASSWORD_STRENGTH_LEVELS) {
+            return this.levels;
+        }
+        const names = this.dictionary.passwordStrength.levels;
+        return this.levels.map((level, index) => ({
+            ...level,
+            label: names[index] ?? level.label,
+        }));
+    }
+    /**
+     * {@link label} or its localized fallback, punctuated for the current
+     * locale (e.g. "Password strength:").
+     * @internal
+     */
+    get caption() {
+        const { passwordStrength } = this.dictionary;
+        return passwordStrength.caption(this.label ?? passwordStrength.label);
+    }
     /**
      * Lifecycle hook called whenever reactive properties change. Speaks the
      * newly-reached level through {@link announcerEl} whenever it actually
@@ -127,12 +146,14 @@ let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LitElement {
         this.previousLevelIndex = index;
         if (this.announcerEl) {
             this.announcerEl.textContent =
-                index === -1 ? "" : `${this.label}: ${this.levels[index].label}`;
+                index === -1
+                    ? ""
+                    : `${this.caption} ${this.resolvedLevels[index].label}`;
         }
     }
     render() {
         const index = this.currentLevelIndex;
-        const level = index === -1 ? undefined : this.levels[index];
+        const level = index === -1 ? undefined : this.resolvedLevels[index];
         return html `
       <div id="wrapper" data-severity=${ifDefined(level?.severity)}>
         <div id="segments" role="presentation" aria-hidden="true">
@@ -145,12 +166,12 @@ let EunomiaPasswordStrength = class EunomiaPasswordStrength extends LitElement {
               ></span>
             `)}
         </div>
-        ${this.hideLabel || !level
+        ${this.hideLabel
             ? nothing
             : html `
-              <span id="label">
-                <span id="caption">${this.label}:</span>
-                <span id="level-name">${level.label}</span>
+              <span id="label" class=${classMap({ empty: !level })}>
+                <span id="caption">${this.caption}</span>
+                <span id="level-name">${level?.label ?? "\u00A0"}</span>
               </span>
             `}
       </div>

package/dist/components/content/password-strength/password-strength.styles.js

@@ -107,6 +107,10 @@ const base = css `
     );
   }
 
+  #label.empty {
+    visibility: hidden;
+  }
+
   #caption {
     color: var(
       --password-strength-caption-color,

package/dist/components/content/tag/tag.js

@@ -167,13 +167,13 @@ let EunomiaTag = class EunomiaTag extends LitElement {
  */
 EunomiaTag.styles = tagStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTag.prototype, "color", void 0);
 __decorate([
     property({ reflect: true })
 ], EunomiaTag.prototype, "severity", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTag.prototype, "appearance", void 0);
 __decorate([
     property()

package/dist/components/content/tooltip/tooltip.js

@@ -1167,16 +1167,16 @@ __decorate([
     property({ reflect: true })
 ], EunomiaTooltip.prototype, "severity", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTooltip.prototype, "color", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTooltip.prototype, "appearance", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: "fixed-color" })
 ], EunomiaTooltip.prototype, "fixedColor", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaTooltip.prototype, "placement", void 0);
 __decorate([
     property()

package/dist/components/form/checkbox/check-card.d.ts

@@ -25,6 +25,7 @@ export declare const EunomiaCheckCardTagName = "eun-check-card";
  * @prop {boolean} [readonly=false] - Whether the card is read only
  * @prop {boolean} [indeterminate=false] - Whether the card value is indeterminate
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @attr {boolean} [hide-error=false] - Whether the error message is hidden
  * @prop {boolean} [required=false] - Whether a selection is required

package/dist/components/form/checkbox/check-card.js

@@ -36,6 +36,7 @@ export const EunomiaCheckCardTagName = "eun-check-card";
  * @prop {boolean} [readonly=false] - Whether the card is read only
  * @prop {boolean} [indeterminate=false] - Whether the card value is indeterminate
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @attr {boolean} [hide-error=false] - Whether the error message is hidden
  * @prop {boolean} [required=false] - Whether a selection is required

package/dist/components/form/checkbox/checkbox-list.d.ts

@@ -30,6 +30,7 @@ declare const EunomiaCheckboxList_base: import("../../../utils/constructor.type.
  * @prop {string[]} [defaultValue] - The default selected values
  * @attr {string} [default-value] - The default selected values, as a comma-separated string
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @attr {boolean} [hide-error=false] - Whether the errors are hidden
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<string[]>>} validators - A list of validation rules applied to the group's selected values
@@ -50,6 +51,11 @@ export declare class EunomiaCheckboxList extends EunomiaCheckboxList_base {
      * @readonly
      */
     static readonly styles: import("lit").CSSResult[];
+    /**
+     * Every change is a complete choice, so its error shows right away.
+     * @internal
+     */
+    errorOnChange: boolean;
     /**
      * Configuration options for the component Shadow DOM
      * @internal
@@ -94,6 +100,17 @@ export declare class EunomiaCheckboxList extends EunomiaCheckboxList_base {
      * Cleans up event listeners.
      */
     disconnectedCallback(): void;
+    /**
+     * Whether the group's own `disabled`/`readonly` changed in a way to pass
+     * on to every child : always once set, but not for the initial `false`,
+     * which would otherwise re-enable a child disabled on its own.
+     *
+     * @param changed - The changed properties of the update.
+     * @param name - The property to check.
+     * @returns true when the children should take the group's value.
+     * @private
+     */
+    private isGroupChange;
     /**
      * Lifecycle hook called whenever reactive properties change.
      * @param _changedProperties - Map of changed properties

package/dist/components/form/checkbox/checkbox-list.js

@@ -5,8 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, property, query } from "lit/decorators.js";
-import { html, LitElement } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { FormLabelMixin } from "../../../mixins/form-label.mixin.js";
 import { FormMixin, hasErrorDisplayChange, } from "../../../mixins/form.mixin.js";
 import { DisabledMixin } from "../../../mixins/disabled.mixin.js";
@@ -79,6 +80,7 @@ const Base = DisabledMixin(ValidatorsMixin(LitElement));
  * @prop {string[]} [defaultValue] - The default selected values
  * @attr {string} [default-value] - The default selected values, as a comma-separated string
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @attr {boolean} [hide-error=false] - Whether the errors are hidden
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<string[]>>} validators - A list of validation rules applied to the group's selected values
@@ -93,6 +95,11 @@ const Base = DisabledMixin(ValidatorsMixin(LitElement));
 let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(ReadonlyMixin(FormMixin(Base))) {
     constructor() {
         super(...arguments);
+        /**
+         * Every change is a complete choice, so its error shows right away.
+         * @internal
+         */
+        this.errorOnChange = true;
         /**
          * Indicates whether the elements into the list should be displayed inline.
          * @default false
@@ -159,18 +166,31 @@ let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(Reado
         this.optionsList?.removeEventListener("eunchange", this.handleChangeEvent);
         super.disconnectedCallback?.();
     }
+    /**
+     * Whether the group's own `disabled`/`readonly` changed in a way to pass
+     * on to every child : always once set, but not for the initial `false`,
+     * which would otherwise re-enable a child disabled on its own.
+     *
+     * @param changed - The changed properties of the update.
+     * @param name - The property to check.
+     * @returns true when the children should take the group's value.
+     * @private
+     */
+    isGroupChange(changed, name) {
+        return changed.has(name) && (this[name] || changed.get(name) !== undefined);
+    }
     /**
      * Lifecycle hook called whenever reactive properties change.
      * @param _changedProperties - Map of changed properties
      */
     updated(_changedProperties) {
         super.updated(_changedProperties);
-        if (_changedProperties.has("disabled")) {
+        if (this.isGroupChange(_changedProperties, "disabled")) {
             this.fields.forEach((field) => {
                 field.disabled = this.disabled;
             });
         }
-        if (_changedProperties.has("readonly")) {
+        if (this.isGroupChange(_changedProperties, "readonly")) {
             this.fields.forEach((field) => {
                 field.readonly = this.readonly;
             });
@@ -182,9 +202,6 @@ let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(Reado
                 field.validationRequested = showError;
             });
         }
-        if (_changedProperties.has("label") && !this.hasAttribute("aria-label")) {
-            this.setAttribute("aria-label", `${this.label}. ${this.instructions ?? ""}`);
-        }
         if (_changedProperties.has("name")) {
             this.fields.forEach((field) => {
                 field.name = this.name;
@@ -241,22 +258,34 @@ let EunomiaCheckboxList = class EunomiaCheckboxList extends FormLabelMixin(Reado
      * @returns The rendered template
      */
     render() {
+        const description = this.renderDescription();
+        const describedBy = [
+            this.instructions ? "group-instructions" : "",
+            description === nothing ? "" : "description",
+        ]
+            .filter(Boolean)
+            .join(" ") || undefined;
         return html `
-      <fieldset id="fieldset">
+      <fieldset id="fieldset" role="presentation">
         <div id="legend">${this.renderFormLabels("options")}</div>
+        ${this.instructions
+            ? html `<span id="group-instructions" hidden
+              >${this.instructions}</span
+            >`
+            : nothing}
         <div
           id="options"
           part="options"
           role="group"
           class=${classMap({ inline: this.inline })}
           ?disabled=${this.disabled}
-          aria-labelledby="legend"
-          aria-describedby="messages"
+          aria-label=${ifDefined(this.label)}
+          aria-describedby=${ifDefined(describedBy)}
           aria-disabled=${this.disabled ? "true" : "false"}
         >
           <slot @slotchange=${this.handleSlotChange}></slot>
         </div>
-        ${this.renderDescription()}
+        ${description}
       </fieldset>
     `;
     }

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

@@ -31,6 +31,7 @@ declare const EunomiaCheckboxMixinBase: Constructor<EunomiaCheckboxBase>;
  * @prop {boolean} [readonly=false] - Whether the checkbox is read only
  * @prop {boolean} [indeterminate=false] - Whether the checkbox value is indeterminate
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @attr {boolean} [hide-error=false] - Whether the error message is hidden
  * @prop {boolean} [required=false] - Whether a selection is required

package/dist/components/form/checkbox/checkbox.js

@@ -34,6 +34,7 @@ const EunomiaCheckboxMixinBase = CheckMixin(ReadonlyMixin(FormMixin(DisabledMixi
  * @prop {boolean} [readonly=false] - Whether the checkbox is read only
  * @prop {boolean} [indeterminate=false] - Whether the checkbox value is indeterminate
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @attr {boolean} [hide-error=false] - Whether the error message is hidden
  * @prop {boolean} [required=false] - Whether a selection is required
@@ -97,7 +98,8 @@ let EunomiaCheckbox = class EunomiaCheckbox extends EunomiaCheckboxMixinBase {
      */
     updated(_changedProperties) {
         super.updated?.(_changedProperties);
-        if (_changedProperties.has("indeterminate")) {
+        if (_changedProperties.has("indeterminate") ||
+            _changedProperties.has("checked")) {
             this.setAttribute("aria-checked", !this.checked && this.indeterminate ? "mixed" : String(this.checked));
         }
         if (_changedProperties.has("label")) {

package/dist/components/form/checkbox/checkbox.styles.js

@@ -111,8 +111,9 @@ const base = css `
     --_focusIndicator: var(--_errorColor);
   }
 
-  :host([aria-disabled="true"][aria-checked="true"]) #checkbox-component {
-    --_icon: transparent;
+  :host([aria-disabled="true"][aria-checked="true"]) #checkbox-component,
+  :host([aria-disabled="true"][aria-checked="mixed"]) #checkbox-component {
+    --_icon: var(--eun-text-disabled-color, #8d93aa);
   }
 
   :host([aria-readonly="true"][aria-checked="true"]) #checkbox-component {