@m3e/radio-group 1.0.0-rc.3 → 1.0.0

package/dist/html-custom-data.json

@@ -4,7 +4,7 @@
   "tags": [
     {
       "name": "m3e-radio",
-      "description": "A radio button that allows a user to select one option from a set of options.\n---\n\n\n### **Events:**\n - **input** - Emitted when the checked state changes.\n- **change** - Emitted when the checked state changes.\n- **click** - Emitted when the element is clicked.\n\n### **Methods:**\n - **markAsPristine(): _void_** - Marks the element as pristine.\n- **markAsDirty(): _void_** - Marks the element as dirty.\n- **markAsTouched(): _void_** - Marks the element as touched.\n- **markAsUntouched(): _void_** - Marks the element as untouched.\n\n### **CSS Properties:**\n - **--m3e-radio-container-size** - Base size of the radio button container. _(default: undefined)_\n- **--m3e-radio-icon-size** - Size of the radio icon inside the wrapper. _(default: undefined)_\n- **--m3e-radio-unselected-hover-color** - Hover state layer color when radio is not selected. _(default: undefined)_\n- **--m3e-radio-unselected-focus-color** - Focus state layer color when radio is not selected. _(default: undefined)_\n- **--m3e-radio-unselected-ripple-color** - Ripple color when radio is not selected. _(default: undefined)_\n- **--m3e-radio-unselected-icon-color** - Icon color when radio is not selected. _(default: undefined)_\n- **--m3e-radio-selected-hover-color** - Hover state layer color when radio is selected. _(default: undefined)_\n- **--m3e-radio-selected-focus-color** - Focus state layer color when radio is selected. _(default: undefined)_\n- **--m3e-radio-selected-ripple-color** - Ripple color when radio is selected. _(default: undefined)_\n- **--m3e-radio-selected-icon-color** - Icon color when radio is selected. _(default: undefined)_\n- **--m3e-radio-disabled-icon-color** - Icon color when radio is disabled. _(default: undefined)_",
+      "description": "A radio button that allows a user to select one option from a set of options.\n---\n\n\n### **Events:**\n - **input** - Emitted when the checked state changes.\n- **change** - Emitted when the checked state changes.\n- **click** - Emitted when the element is clicked.\n\n### **Methods:**\n - **markAsPristine(): _void_** - Marks the element as pristine.\n- **markAsDirty(): _void_** - Marks the element as dirty.\n- **markAsTouched(): _void_** - Marks the element as touched.\n- **markAsUntouched(): _void_** - Marks the element as untouched.\n- **formDisabledCallback(disabled: _boolean_): _void_** - Called when the element is disabled or enabled via its form association.\n- **formResetCallback(): _void_** - Called when the associated form is reset.\n\n### **CSS Properties:**\n - **--m3e-radio-container-size** - Base size of the radio button container. _(default: undefined)_\n- **--m3e-radio-icon-size** - Size of the radio icon inside the wrapper. _(default: undefined)_\n- **--m3e-radio-unselected-hover-color** - Hover state layer color when radio is not selected. _(default: undefined)_\n- **--m3e-radio-unselected-focus-color** - Focus state layer color when radio is not selected. _(default: undefined)_\n- **--m3e-radio-unselected-ripple-color** - Ripple color when radio is not selected. _(default: undefined)_\n- **--m3e-radio-unselected-icon-color** - Icon color when radio is not selected. _(default: undefined)_\n- **--m3e-radio-selected-hover-color** - Hover state layer color when radio is selected. _(default: undefined)_\n- **--m3e-radio-selected-focus-color** - Focus state layer color when radio is selected. _(default: undefined)_\n- **--m3e-radio-selected-ripple-color** - Ripple color when radio is selected. _(default: undefined)_\n- **--m3e-radio-selected-icon-color** - Icon color when radio is selected. _(default: undefined)_\n- **--m3e-radio-disabled-icon-color** - Icon color when radio is disabled. _(default: undefined)_\n- **--m3e-radio-error-hover-color** - Fallback hover color used when the radio is invalid and touched. _(default: undefined)_\n- **--m3e-radio-error-focus-color** - Fallback focus color used when the radio is invalid and touched. _(default: undefined)_\n- **--m3e-radio-error-ripple-color** - Fallback ripple color used when the radio is invalid and touched. _(default: undefined)_\n- **--m3e-radio-error-icon-color** - Fallback icon color used when the radio is invalid and touched. _(default: undefined)_",
       "attributes": [
         {
           "name": "checked",
@@ -16,6 +16,16 @@
           "description": "Whether the element is disabled.",
           "values": []
         },
+        {
+          "name": "name",
+          "description": "The name that identifies the element when submitting the associated form.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Whether the element is required.",
+          "values": []
+        },
         {
           "name": "value",
           "description": "A string representing the value of the radio.",
@@ -26,8 +36,9 @@
     },
     {
       "name": "m3e-radio-group",
-      "description": "A container for a set of radio buttons that enforces single selection.\n---\n\n\n### **Events:**\n - **change** - Emitted when the checked state of a radio button changes.\n\n### **Methods:**\n - **markAsPristine(): _void_** - Marks the element as pristine.\n- **markAsDirty(): _void_** - Marks the element as dirty.\n- **markAsTouched(): _void_** - Marks the element as touched.\n- **markAsUntouched(): _void_** - Marks the element as untouched.\n- **reportValidity(): _boolean_** - Returns `true` if the element has no validity problems; otherwise, returns `false`, fires\r\nan invalid event, and (if the event isn't canceled) reports the problem to the user.\n- **checkValidity(): _boolean_** - Returns `true` if the element has no validity problems; otherwise,\r\nreturns `false`, fires an invalid event.\n- **setCustomValidity(error: _string_): _void_** - Sets a custom validity message for the element.\n- **formDisabledCallback(disabled: _boolean_): _void_** - Called when the element is disabled or enabled via its form association.\n- **formResetCallback(): _void_** - Called when the associated form is reset.\n\n### **Slots:**\n - _default_ - Renders the radio buttons of the group.\n\n### **CSS Properties:**\n - **--m3e-radio-error-hover-color** - Fallback hover color used when the radio is invalid and touched. _(default: undefined)_\n- **--m3e-radio-error-focus-color** - Fallback focus color used when the radio is invalid and touched. _(default: undefined)_\n- **--m3e-radio-error-ripple-color** - Fallback ripple color used when the radio is invalid and touched. _(default: undefined)_\n- **--m3e-radio-error-icon-color** - Fallback icon color used when the radio is invalid and touched. _(default: undefined)_",
+      "description": "A container for a set of radio buttons.\n---\n\n\n### **Events:**\n - **change** - Emitted when the checked state of a radio button changes.\n\n### **Methods:**\n - **markAsTouched(): _void_** - Marks the element as touched.\n- **markAsUntouched(): _void_** - Marks the element as untouched.\n- **markAsDirty(): _void_** - Marks the element as dirty.\n- **markAsPristine(): _void_** - Marks the element as pristine.\n- **reportValidity(): _boolean_** - Returns `true` if the element has no validity problems; otherwise, returns `false`, fires\r\nan invalid event, and (if the event isn't canceled) reports the problem to the user.\n- **checkValidity(): _boolean_** - Returns `true` if the element has no validity problems; otherwise,\r\nreturns `false`, fires an invalid event.\n- **setCustomValidity(error: _string_): _void_** - Sets a custom validity message for the element.\n- **formDisabledCallback(disabled: _boolean_): _void_** - Called when the element is disabled or enabled via its form association.\n- **formResetCallback(): _void_** - Called when the associated form is reset.\n\n### **Slots:**\n - _default_ - Renders the radio buttons of the group.",
       "attributes": [
+        { "name": "aria-invalid", "values": [] },
         {
           "name": "disabled",
           "description": "Whether the element is disabled.",

package/dist/index.js

@@ -4,7 +4,7 @@
  * See LICENSE file in the project root for full license text.
  */
 import { LitElement, html, css } from 'lit';
-import { Dirty, Touched, Checked, Labelled, KeyboardClick, Focusable, Disabled, AttachInternals, Role, HoverController, PressedController, DesignToken, RequiredConstraintValidation, Required, ConstraintValidation, FormAssociated, formValue } from '@m3e/core';
+import { Labelled, Dirty, Touched, Checked, KeyboardClick, Focusable, FormAssociated, Disabled, AttachInternals, Role, HoverController, PressedController, formValue, DesignToken, RequiredConstraintValidation, Required, ConstraintValidation, updateLabels } from '@m3e/core';
 import { selectionManager, SelectionManager } from '@m3e/core/a11y';
 
 /******************************************************************************
@@ -81,7 +81,7 @@ const e$1=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"obj
  * SPDX-License-Identifier: BSD-3-Clause
  */function e(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$1(n,s,{get(){return o(this)}})}}
 
-var _M3eRadioElement_instances, _M3eRadioElement_clickHandler, _M3eRadioElement_hoverController, _M3eRadioElement_pressedController, _M3eRadioElement_renderIcon, _M3eRadioElement_handleClick;
+var _M3eRadioElement_instances, _M3eRadioElement_clickHandler, _M3eRadioElement_hoverController, _M3eRadioElement_pressedController, _M3eRadioElement_renderIcon, _M3eRadioElement_handleClick, _M3eRadioElement_notifySelectionChange;
 /**
  * A radio button that allows a user to select one option from a set of options.
  *
@@ -111,6 +111,8 @@ var _M3eRadioElement_instances, _M3eRadioElement_clickHandler, _M3eRadioElement_
  *
  * @attr checked - Whether the element is checked.
  * @attr disabled - Whether the element is disabled.
+ * @attr name - The name that identifies the element when submitting the associated form.
+ * @attr required - Whether the element is required.
  * @attr value - A string representing the value of the radio.
  *
  * @fires input - Emitted when the checked state changes.
@@ -128,8 +130,12 @@ var _M3eRadioElement_instances, _M3eRadioElement_clickHandler, _M3eRadioElement_
  * @cssprop --m3e-radio-selected-ripple-color - Ripple color when radio is selected.
  * @cssprop --m3e-radio-selected-icon-color - Icon color when radio is selected.
  * @cssprop --m3e-radio-disabled-icon-color - Icon color when radio is disabled.
+ * @cssprop --m3e-radio-error-hover-color - Fallback hover color used when the radio is invalid and touched.
+ * @cssprop --m3e-radio-error-focus-color - Fallback focus color used when the radio is invalid and touched.
+ * @cssprop --m3e-radio-error-ripple-color - Fallback ripple color used when the radio is invalid and touched.
+ * @cssprop --m3e-radio-error-icon-color - Fallback icon color used when the radio is invalid and touched.
  */
-let M3eRadioElement = class M3eRadioElement extends Dirty(Touched(Checked(Labelled(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, "radio"), true)))))))) {
+let M3eRadioElement = class M3eRadioElement extends Labelled(Dirty(Touched(Checked(KeyboardClick(Focusable(FormAssociated(Disabled(AttachInternals(Role(LitElement, "radio"), true))))))))) {
     constructor() {
         super(...arguments);
         _M3eRadioElement_instances.add(this);
@@ -167,6 +173,10 @@ let M3eRadioElement = class M3eRadioElement extends Dirty(Touched(Checked(Labell
          */
         this.value = "on";
     }
+    /** @inheritdoc @internal */
+    get [(_M3eRadioElement_clickHandler = new WeakMap(), _M3eRadioElement_hoverController = new WeakMap(), _M3eRadioElement_pressedController = new WeakMap(), _M3eRadioElement_instances = new WeakSet(), formValue)]() {
+        return this.checked ? this.value : null;
+    }
     /** @inheritdoc */
     connectedCallback() {
         super.connectedCallback();
@@ -189,7 +199,7 @@ let M3eRadioElement = class M3eRadioElement extends Dirty(Touched(Checked(Labell
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has("checked")) {
-            this.closest("m3e-radio-group")?.[selectionManager].notifySelectionChange(this);
+            __classPrivateFieldGet(this, _M3eRadioElement_instances, "m", _M3eRadioElement_notifySelectionChange).call(this);
         }
     }
     /** @inheritdoc */
@@ -208,10 +218,6 @@ let M3eRadioElement = class M3eRadioElement extends Dirty(Touched(Checked(Labell
     </div>`;
     }
 };
-_M3eRadioElement_clickHandler = new WeakMap();
-_M3eRadioElement_hoverController = new WeakMap();
-_M3eRadioElement_pressedController = new WeakMap();
-_M3eRadioElement_instances = new WeakSet();
 _M3eRadioElement_renderIcon = function _M3eRadioElement_renderIcon() {
     return html `<svg viewBox="0 0 20 20">
       <mask id="cutout2">
@@ -223,17 +229,32 @@ _M3eRadioElement_renderIcon = function _M3eRadioElement_renderIcon() {
     </svg>`;
 };
 _M3eRadioElement_handleClick = function _M3eRadioElement_handleClick(e) {
-    if (e.defaultPrevented || this.checked)
+    if (e.defaultPrevented || this.checked || this.disabled)
         return;
     this.checked = true;
     if (this.dispatchEvent(new Event("input", { bubbles: true, composed: true, cancelable: true }))) {
-        this.closest("m3e-radio-group")?.[selectionManager].notifySelectionChange(this);
+        __classPrivateFieldGet(this, _M3eRadioElement_instances, "m", _M3eRadioElement_notifySelectionChange).call(this);
         this.dispatchEvent(new Event("change", { bubbles: true }));
     }
     else {
         this.checked = false;
     }
 };
+_M3eRadioElement_notifySelectionChange = function _M3eRadioElement_notifySelectionChange() {
+    const group = this.closest("m3e-radio-group");
+    if (group) {
+        group[selectionManager].notifySelectionChange(this);
+    }
+    else if (this.name && this.checked) {
+        // Uncheck any sibling radios of the same name which are also checked.
+        [
+            ...(this.getRootNode()?.querySelectorAll(`m3e-radio[name="${this.name}"]`) ??
+                []),
+        ]
+            .filter((x) => x !== this && x.checked)
+            .forEach((x) => (x.checked = false));
+    }
+};
 /** The styles of the element. */
 M3eRadioElement.styles = css `
     :host {
@@ -243,7 +264,7 @@ M3eRadioElement.styles = css `
       height: fit-content;
       vertical-align: middle;
     }
-    :host(:not(:disabled)) {
+    :host(:not([aria-disabled="true"])) {
       cursor: pointer;
     }
     .base {
@@ -287,9 +308,15 @@ M3eRadioElement.styles = css `
       --m3e-ripple-color: var(--m3e-radio-selected-ripple-color, ${DesignToken.color.primary});
       color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary});
     }
-    :host(:disabled) .base {
+    :host([aria-disabled="true"]) .base {
       color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent);
     }
+    :host(.-touched.-invalid) .base {
+      --m3e-state-layer-hover-color: var(--m3e-radio-error-hover-color, ${DesignToken.color.error});
+      --m3e-state-layer-focus-color: var(--m3e-radio-error-focus-color, ${DesignToken.color.error});
+      --m3e-ripple-color: var(--m3e-radio-error-ripple-color, ${DesignToken.color.error});
+      color: var(--m3e-radio-error-icon-color, ${DesignToken.color.error});
+    }
     @media (forced-colors: active) {
       :host(:not([checked])) .base,
       :host([checked]) .base {
@@ -298,9 +325,13 @@ M3eRadioElement.styles = css `
         --m3e-ripple-color: var(--_radio-forced-color, CanvasText);
         color: var(--_radio-forced-color, CanvasText);
       }
-      :host(:disabled) .base {
+      :host([aria-disabled="true"]) .base {
         color: GrayText;
       }
+      :host(.-touched.-invalid) .base {
+        --_radio-forced-color: Highlight;
+        color: Highlight;
+      }
     }
   `;
 __decorate([
@@ -321,12 +352,14 @@ M3eRadioElement = __decorate([
 
 var _M3eRadioGroupElement_instances, _M3eRadioGroupElement_focusOutHandler, _M3eRadioGroupElement_handleSlotChange, _M3eRadioGroupElement_handleKeyDown, _M3eRadioGroupElement_handleChange, _a;
 /**
- * A container for a set of radio buttons that enforces single selection.
+ * A container for a set of radio buttons.
  *
  * @description
- * The `m3e-radio-group` component orchestrates a collection of `m3e-radio` components, ensuring that
- * only one option is selected at a time. It manages selection state, propagates value changes, and
- * supports form integration through `name` and `value` attributes.
+ * The `m3e-radio-group` component is a semantic container that orchestrates a set of `m3e-radio` elements.
+ * It provides accessible grouping, keyboard navigation, and validation logic for mutually exclusive selection.
+ * When marked as `required`, the group enforces selection constraints and reflects validation state, while
+ * delegating form submission to the checked radio. The group does not submit a value itself—it coordinates
+ * behavior, focus, and feedback across its radios.
  *
  * @example
  * The following example illustrates using `m3e-radio-group` and `m3e-radio` to present a group of options.
@@ -350,23 +383,22 @@ var _M3eRadioGroupElement_instances, _M3eRadioGroupElement_focusOutHandler, _M3e
  * @attr required - Whether the element is required.
  *
  * @fires change - Emitted when the checked state of a radio button changes.
- *
- * @cssprop --m3e-radio-error-hover-color - Fallback hover color used when the radio is invalid and touched.
- * @cssprop --m3e-radio-error-focus-color - Fallback focus color used when the radio is invalid and touched.
- * @cssprop --m3e-radio-error-ripple-color - Fallback ripple color used when the radio is invalid and touched.
- * @cssprop --m3e-radio-error-icon-color - Fallback icon color used when the radio is invalid and touched.
  */
 let M3eRadioGroupElement = class M3eRadioGroupElement extends Labelled(RequiredConstraintValidation(Dirty(Touched(Required(ConstraintValidation(FormAssociated(Disabled(AttachInternals(Role(LitElement, "radiogroup")))))))))) {
     constructor() {
         super(...arguments);
         _M3eRadioGroupElement_instances.add(this);
-        /** @private */ _M3eRadioGroupElement_focusOutHandler.set(this, () => this.checkValidity());
+        /** @private */ _M3eRadioGroupElement_focusOutHandler.set(this, () => __classPrivateFieldGet(this, _M3eRadioGroupElement_instances, "m", _M3eRadioGroupElement_handleChange).call(this));
         /** @internal */
         this[_a] = new SelectionManager().withWrap().onActiveItemChange(() => {
             this[selectionManager].activeItem?.click();
         });
     }
-    /** The radio buttons in the group. */
+    /** The list of attributes corresponding to the registered properties. */
+    static get observedAttributes() {
+        return [...super.observedAttributes, "aria-invalid"];
+    }
+    /** The radios in the group. */
     get radios() {
         return this[selectionManager]?.items ?? [];
     }
@@ -378,23 +410,57 @@ let M3eRadioGroupElement = class M3eRadioGroupElement extends Labelled(RequiredC
     get value() {
         return this.selected?.value ?? null;
     }
-    /** @inheritdoc @internal */
-    get [(_M3eRadioGroupElement_focusOutHandler = new WeakMap(), _M3eRadioGroupElement_instances = new WeakSet(), _a = selectionManager, formValue)]() {
-        return this.value;
+    /** @inheritdoc */
+    markAsTouched() {
+        super.markAsTouched();
+        this.radios.forEach((x) => x.markAsTouched());
+    }
+    /** @inheritdoc */
+    markAsUntouched() {
+        super.markAsUntouched();
+        this.radios.forEach((x) => x.markAsUntouched());
+    }
+    /** @inheritdoc */
+    markAsDirty() {
+        super.markAsDirty();
+        this.radios.forEach((x) => x.markAsDirty());
+    }
+    /** @inheritdoc */
+    markAsPristine() {
+        super.markAsPristine();
+        this.radios.forEach((x) => x.markAsPristine());
+    }
+    /** Synchronizes property values when attributes change. */
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        switch (name) {
+            case "name":
+                this.radios.forEach((x) => (x.name = this.name));
+                break;
+            case "aria-invalid":
+                this.radios.forEach((x) => {
+                    x.classList.toggle("-invalid", newValue === "true");
+                    x[updateLabels]?.();
+                });
+                break;
+        }
     }
     /** @inheritdoc */
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener("focusout", __classPrivateFieldGet(this, _M3eRadioGroupElement_focusOutHandler, "f"), { capture: true });
+        this.addEventListener("focusout", __classPrivateFieldGet(this, _M3eRadioGroupElement_focusOutHandler, "f"));
     }
     /** @inheritdoc */
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.removeEventListener("focusout", __classPrivateFieldGet(this, _M3eRadioGroupElement_focusOutHandler, "f"), { capture: true });
+        this.removeEventListener("focusout", __classPrivateFieldGet(this, _M3eRadioGroupElement_focusOutHandler, "f"));
     }
     /** @inheritdoc */
     update(changedProperties) {
         super.update(changedProperties);
+        if (changedProperties.has("disabled")) {
+            this.ariaDisabled = null;
+        }
         if (changedProperties.has("disabled") && (changedProperties.get("disabled") !== undefined || this.disabled)) {
             this[selectionManager].disabled = this.disabled;
         }
@@ -408,37 +474,24 @@ let M3eRadioGroupElement = class M3eRadioGroupElement extends Labelled(RequiredC
     ></slot>`;
     }
 };
+_M3eRadioGroupElement_focusOutHandler = new WeakMap();
+_M3eRadioGroupElement_instances = new WeakSet();
+_a = selectionManager;
 _M3eRadioGroupElement_handleSlotChange = function _M3eRadioGroupElement_handleSlotChange() {
-    this[selectionManager].setItems([...this.querySelectorAll("m3e-radio")]);
+    const { added } = this[selectionManager].setItems([...this.querySelectorAll("m3e-radio")]);
+    added.forEach((x) => (x.name = x.name || this.name));
 };
 _M3eRadioGroupElement_handleKeyDown = function _M3eRadioGroupElement_handleKeyDown(e) {
     this[selectionManager].onKeyDown(e);
 };
-_M3eRadioGroupElement_handleChange = function _M3eRadioGroupElement_handleChange(e) {
-    e.stopPropagation();
-    if (this.ariaInvalid === "true") {
-        this.checkValidity();
-    }
-    this.dispatchEvent(new Event("change", { bubbles: true }));
+_M3eRadioGroupElement_handleChange = function _M3eRadioGroupElement_handleChange() {
+    this.checkValidity();
 };
 /** The styles of the element. */
 M3eRadioGroupElement.styles = css `
     :host {
       display: inline;
     }
-    :host(.-touched:invalid) {
-      --m3e-radio-unselected-hover-color: var(--m3e-radio-error-hover-color, ${DesignToken.color.error});
-      --m3e-radio-unselected-focus-color: var(--m3e-radio-error-focus-color, ${DesignToken.color.error});
-      --m3e-radio-unselected-ripple-color: var(--m3e-radio-error-ripple-color, ${DesignToken.color.error});
-      --m3e-radio-unselected-icon-color: var(--m3e-radio-error-icon-color, ${DesignToken.color.error});
-      color: var(--m3e-radio-error-icon-color, ${DesignToken.color.error});
-    }
-    @media (forced-colors: active) {
-      :host(.-touched:invalid) {
-        --_radio-forced-color: Highlight;
-        color: Highlight;
-      }
-    }
   `;
 M3eRadioGroupElement = __decorate([
     t$1("m3e-radio-group")