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

package/dist/components/form/radio/radio-card.js

@@ -33,8 +33,10 @@ export const EunomiaRadioCardTagName = "eun-radio-card";
  * @attr {boolean} [default-checked] - The checked state applied when the card connects, and restored on form reset
  * @prop {boolean} [disabled=false] - Whether the card is disabled
  * @prop {boolean} [readonly=false] - Whether the card is read only
- * @prop {boolean} [hideError=false] - Whether the error message is hidden
- * @attr {boolean} [hide-error=false] - Whether the error message is hidden
+ * @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. The hint stays visible
  * @prop {boolean} [required=false] - Whether a selection is required
  * @prop {string} name - The name of the field
  * @prop {string} value - The value submitted with the card
@@ -55,6 +57,8 @@ export const EunomiaRadioCardTagName = "eun-radio-card";
  * @cssprop [--radio-card-border-width] - Sets the width of the border
  * @cssprop [--radio-card-border-radius] - Sets the corner radius of the card
  * @cssprop [--radio-card-padding] - Sets the padding inside the card
+ * @cssprop [--radio-card-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --radio-card-padding is set
+ * @cssprop [--radio-card-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --radio-card-padding is set
  * @cssprop [--radio-card-min-width] - Sets the minimum width of the card
  * @cssprop [--radio-card-icon-color] - Sets the color of the leading icon while not checked
  * @cssprop [--radio-card-icon-color-checked] - Sets the color of the leading icon while checked

package/dist/components/form/radio/radio-card.styles.js

@@ -14,6 +14,8 @@ import { css } from "lit";
  * [--radio-card-border-width] - Set a custom border width
  * [--radio-card-border-radius] - Set a custom border radius to the card
  * [--radio-card-padding] - Set a custom padding inside the card
+ * [--radio-card-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --radio-card-padding is set
+ * [--radio-card-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --radio-card-padding is set
  * [--radio-card-min-width] - Set a custom minimum width for the card
  * [--radio-card-icon-color] - Set a custom color to the leading icon when not checked
  * [--radio-card-icon-color-checked] - Set a custom color to the leading icon when checked
@@ -28,7 +30,10 @@ const base = css `
       --radio-card-border-color,
       var(--eun-border-color, #dee0e7)
     );
-    --_background: var(--radio-card-background, var(--eun-surface-color, #ffffff));
+    --_background: var(
+      --radio-card-background,
+      var(--eun-surface-color, #ffffff)
+    );
     --_errorColor: var(
       --radio-card-error-color,
       var(--eun-color-critical-100, #aa0014)
@@ -47,7 +52,11 @@ const base = css `
       var(--eun-color-primary-500, #3d6fff)
     );
     --_minWidth: var(--radio-card-min-width, 180px);
-    --_padding: var(--radio-card-padding, var(--eun-space-m, 16px));
+    --_padding: var(
+      --radio-card-padding,
+      var(--radio-card-padding-block, var(--eun-space-m, 16px))
+        var(--radio-card-padding-inline, var(--eun-space-m, 16px))
+    );
     --_borderRadius: var(
       --radio-card-border-radius,
       var(--eun-border-radius-m, 10px)
@@ -64,7 +73,7 @@ const base = css `
     );
     --_background: var(
       --radio-card-background-checked,
-      var(--eun-color-primary-bg-hover, rgba(18, 123, 185, 0.08))
+      var(--eun-color-primary-alpha-10, rgba(18, 123, 185, 0.08))
     );
     --_iconColor: var(
       --radio-card-icon-color-checked,
@@ -132,7 +141,7 @@ const base = css `
     box-sizing: border-box;
     border: 1px solid var(--_indicatorBorder);
     border-radius: 50%;
-    transition: all 0.2s ease;
+    transition: all var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
 
   #indicator::before {
@@ -141,7 +150,7 @@ const base = css `
     inset: var(--_indicatorGap);
     border-radius: 50%;
     background: var(--_indicatorDot);
-    transition: all 0.2s ease;
+    transition: all var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
 `;
 export const radioCardStyles = base;

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

@@ -32,13 +32,17 @@ declare const EunomiaRadioList_base: import("../../../utils/constructor.type.js"
  * @prop {boolean} [inline=false] - Whether the list's elements are displayed in a row
  * @prop {string} [defaultValue] - The value reselected when the list connects, and restored on form reset
  * @attr {string} [default-value] - The value reselected when the list connects, and restored on form reset
- * @prop {boolean} [hideError=false] - Whether the errors are hidden
- * @attr {boolean} [hide-error=false] - Whether the errors are hidden
+ * @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. The hint stays visible
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<string | undefined>>} validators - A list of validation rules applied to the group's selected value
  * @fires {ChangeEvent} eunchange - Fired whenever the group's selection changes
  * @cssprop [--radio-list-gap] - Sets the gap between the labels and the list
  * @cssprop [--radio-list-options-gap] - Sets the gap between the radios in the list
  * @cssprop [--radio-list-error-color] - Sets the color of the list's error state
+ * @cssprop [--field-label-font-size] - Sets the font size of the label
+ * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-radio-list
  */
 export declare class EunomiaRadioList extends EunomiaRadioList_base {
@@ -50,6 +54,11 @@ export declare class EunomiaRadioList extends EunomiaRadioList_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
@@ -107,8 +116,7 @@ export declare class EunomiaRadioList extends EunomiaRadioList_base {
      * Assigns `name`/`id` to every child, applies a `default-value` selection
      * once the slotted children actually exist (see `handleSlotChange` for
      * why this can't rely on `FormMixin`'s own `defaultValue` setter alone),
-     * restores `aria-activedescendant` for a child checked directly in
-     * markup, and sets up the initial roving `tabindex`.
+     * and sets up the initial roving `tabindex`.
      *
      * The roving `tabindex` is applied only once every child's own first
      * update has settled — each `eun-radio` is itself a `DisabledMixin` user,
@@ -127,6 +135,17 @@ export declare class EunomiaRadioList extends EunomiaRadioList_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
@@ -152,8 +171,8 @@ export declare class EunomiaRadioList extends EunomiaRadioList_base {
      */
     private handleKeydown;
     /**
-     * Applies the roving `tabindex` : the checked child (or the first one, if
-     * none is checked yet) is the group's single tab stop, matching a native
+     * Applies the roving `tabindex` : the checked child (or the first enabled
+     * one, if none is checked yet) is the group's single tab stop, matching a native
      * `radiogroup`'s "one tab stop, arrows move focus" behavior.
      * @private
      */
@@ -167,7 +186,7 @@ export declare class EunomiaRadioList extends EunomiaRadioList_base {
     private readonly handleChangeEvent;
     /**
      * Checks the given child, unchecking every other one, updates the roving
-     * `tabindex`/`aria-activedescendant`, and re-validates the group.
+     * `tabindex`, and re-validates the group.
      *
      * @param item the child to activate
      * @param focus whether to also move DOM focus onto it (arrow-key navigation)
@@ -187,8 +206,8 @@ export declare class EunomiaRadioList extends EunomiaRadioList_base {
     private sendChangeEvent;
     /**
      * Handler called when slot content changes.
-     * Propagates the group `name` and assigns a stable `id` (needed for
-     * `aria-activedescendant`) to every child radio.
+     * Propagates the group `name` and assigns a stable `id` to every child
+     * radio.
      *
      * @private
      */

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

@@ -5,10 +5,11 @@ 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 } from "../../../mixins/form.mixin.js";
+import { FormMixin, hasErrorDisplayChange, } from "../../../mixins/form.mixin.js";
 import { DisabledMixin } from "../../../mixins/disabled.mixin.js";
 import { ValidatorsMixin } from "../../../mixins/validators.mixin.js";
 import { ReadonlyMixin } from "../../../mixins/readonly.mixin.js";
@@ -80,18 +81,27 @@ const Base = DisabledMixin(ValidatorsMixin(LitElement));
  * @prop {boolean} [inline=false] - Whether the list's elements are displayed in a row
  * @prop {string} [defaultValue] - The value reselected when the list connects, and restored on form reset
  * @attr {string} [default-value] - The value reselected when the list connects, and restored on form reset
- * @prop {boolean} [hideError=false] - Whether the errors are hidden
- * @attr {boolean} [hide-error=false] - Whether the errors are hidden
+ * @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. The hint stays visible
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<string | undefined>>} validators - A list of validation rules applied to the group's selected value
  * @fires {ChangeEvent} eunchange - Fired whenever the group's selection changes
  * @cssprop [--radio-list-gap] - Sets the gap between the labels and the list
  * @cssprop [--radio-list-options-gap] - Sets the gap between the radios in the list
  * @cssprop [--radio-list-error-color] - Sets the color of the list's error state
+ * @cssprop [--field-label-font-size] - Sets the font size of the label
+ * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-radio-list
  */
 let EunomiaRadioList = class EunomiaRadioList 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
@@ -137,7 +147,7 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
      * Setter allowing to check the child whose value matches, unchecking every other.
      */
     set value(value) {
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             this.fields.forEach((field) => {
                 field.checked = field.value === value;
             });
@@ -166,8 +176,7 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
      * Assigns `name`/`id` to every child, applies a `default-value` selection
      * once the slotted children actually exist (see `handleSlotChange` for
      * why this can't rely on `FormMixin`'s own `defaultValue` setter alone),
-     * restores `aria-activedescendant` for a child checked directly in
-     * markup, and sets up the initial roving `tabindex`.
+     * and sets up the initial roving `tabindex`.
      *
      * The roving `tabindex` is applied only once every child's own first
      * update has settled — each `eun-radio` is itself a `DisabledMixin` user,
@@ -188,10 +197,7 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
             this.value = this.defaultValue;
             this.sendChangeEvent();
         }
-        Promise.all(this.fields.map((field) => field.updateComplete)).then(() => {
-            if (this.active && this.optionsList) {
-                this.optionsList.setAttribute("aria-activedescendant", this.active.id);
-            }
+        void Promise.all(this.fields.map((field) => field.updateComplete)).then(() => {
             this.setFocus();
             this.checkValidity(this.value);
         });
@@ -215,33 +221,44 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
         this.removeEventListener("keydown", this.handleKeydown);
         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;
             });
             this.setFocus();
         }
-        if (_changedProperties.has("readonly")) {
+        if (this.isGroupChange(_changedProperties, "readonly")) {
             this.fields.forEach((field) => {
                 field.readonly = this.readonly;
             });
             this.setFocus();
         }
-        if (_changedProperties.has("valid") ||
-            _changedProperties.has("hideError")) {
+        if (hasErrorDisplayChange(_changedProperties)) {
+            const { showError } = this;
             this.fields.forEach((field) => {
-                field.valid = this.valid && !this.hideError;
+                field.valid = !showError;
+                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;
@@ -309,8 +326,8 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
         this.setActive(enabled[activeIndex], true);
     }
     /**
-     * Applies the roving `tabindex` : the checked child (or the first one, if
-     * none is checked yet) is the group's single tab stop, matching a native
+     * Applies the roving `tabindex` : the checked child (or the first enabled
+     * one, if none is checked yet) is the group's single tab stop, matching a native
      * `radiogroup`'s "one tab stop, arrows move focus" behavior.
      * @private
      */
@@ -324,14 +341,15 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
         if (this.readonly || this.disabled) {
             return;
         }
-        const toFocus = this.active ?? this.fields[0];
+        const toFocus = this.active ??
+            this.fields.find((field) => !field.disabled && !field.readonly);
         if (toFocus && !toFocus.disabled && !toFocus.readonly) {
             toFocus.setAttribute("tabindex", "0");
         }
     }
     /**
      * Checks the given child, unchecking every other one, updates the roving
-     * `tabindex`/`aria-activedescendant`, and re-validates the group.
+     * `tabindex`, and re-validates the group.
      *
      * @param item the child to activate
      * @param focus whether to also move DOM focus onto it (arrow-key navigation)
@@ -341,7 +359,6 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
         if (this.disabled || this.readonly || !item || !this.optionsList) {
             return;
         }
-        this.optionsList.setAttribute("aria-activedescendant", item.id);
         if (focus) {
             item.focus();
         }
@@ -359,7 +376,7 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
      */
     formResetCallback() {
         super.formResetCallback?.();
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             this.setFocus();
             this.sendChangeEvent();
         });
@@ -374,8 +391,8 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
     }
     /**
      * Handler called when slot content changes.
-     * Propagates the group `name` and assigns a stable `id` (needed for
-     * `aria-activedescendant`) to every child radio.
+     * Propagates the group `name` and assigns a stable `id` to every child
+     * radio.
      *
      * @private
      */
@@ -390,25 +407,37 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
      * @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="radiogroup"
           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"}
           aria-readonly=${this.readonly ? "true" : "false"}
           aria-required=${this.required ? "true" : "false"}
-          aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+          aria-invalid=${this.showError}
         >
           <slot @slotchange=${this.handleSlotChange}></slot>
         </div>
-        ${this.renderDescription()}
+        ${description}
       </fieldset>
     `;
     }

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

@@ -33,8 +33,10 @@ declare const EunomiaRadioMixinBase: Constructor<EunomiaRadioBase>;
  * @attr {boolean} [default-checked] - The checked state applied when the radio connects, and restored on form reset
  * @prop {boolean} [disabled=false] - Whether the radio is disabled
  * @prop {boolean} [readonly=false] - Whether the radio is read only
- * @prop {boolean} [hideError=false] - Whether the error message is hidden
- * @attr {boolean} [hide-error=false] - Whether the error message is hidden
+ * @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. The hint stays visible
  * @prop {boolean} [required=false] - Whether a selection is required
  * @prop {string} name - The name of the radio field
  * @prop {string} value - The value submitted with the radio
@@ -55,6 +57,8 @@ declare const EunomiaRadioMixinBase: Constructor<EunomiaRadioBase>;
  * @cssprop [--radio-error-color] - Sets the color of the error message
  * @cssprop [--radio-hint-color] - Sets the color of the hint message
  * @cssprop [--radio-size] - Sets the size of the radio
+ * @cssprop [--field-label-font-size] - Sets the font size of the label
+ * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @fires {ChangeEvent} eunchange - Fired when the radio's checked state changes
  * @element eun-radio
  */

package/dist/components/form/radio/radio.js

@@ -36,8 +36,10 @@ const EunomiaRadioMixinBase = RadioMixin(ReadonlyMixin(FormMixin(DisabledMixin(V
  * @attr {boolean} [default-checked] - The checked state applied when the radio connects, and restored on form reset
  * @prop {boolean} [disabled=false] - Whether the radio is disabled
  * @prop {boolean} [readonly=false] - Whether the radio is read only
- * @prop {boolean} [hideError=false] - Whether the error message is hidden
- * @attr {boolean} [hide-error=false] - Whether the error message is hidden
+ * @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. The hint stays visible
  * @prop {boolean} [required=false] - Whether a selection is required
  * @prop {string} name - The name of the radio field
  * @prop {string} value - The value submitted with the radio
@@ -58,6 +60,8 @@ const EunomiaRadioMixinBase = RadioMixin(ReadonlyMixin(FormMixin(DisabledMixin(V
  * @cssprop [--radio-error-color] - Sets the color of the error message
  * @cssprop [--radio-hint-color] - Sets the color of the hint message
  * @cssprop [--radio-size] - Sets the size of the radio
+ * @cssprop [--field-label-font-size] - Sets the font size of the label
+ * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @fires {ChangeEvent} eunchange - Fired when the radio's checked state changes
  * @element eun-radio
  */

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

@@ -35,14 +35,14 @@ const base = css `
     --_roundGap: 2px;
     --_cursor: pointer;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--field-label-font-size, var(--eun-font-size-s, 14px));
     display: inline-flex;
     align-items: center;
     outline: none;
   }
 
   :host #radio {
-    transition: all 0.2s ease-out;
+    transition: all var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
 
   :host(:focus-visible) #radio {
@@ -148,7 +148,7 @@ const base = css `
     border-radius: 50%;
     display: inline-block;
     box-sizing: border-box;
-    transition: all 0.2s ease;
+    transition: all var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
     outline: 2px solid transparent;
   }
 
@@ -158,7 +158,7 @@ const base = css `
     inset: 0;
     border-radius: 50%;
     background: var(--_background);
-    transition: all ease 0.2s;
+    transition: all var(--eun-easing-default, ease) var(--eun-duration-m, 200ms);
     top: var(--_roundGap);
     bottom: var(--_roundGap);
     left: var(--_roundGap);