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

package/dist/custom-elements.json

@@ -2064,25 +2064,6 @@
           "kind": "mixin",
           "description": "Mixin that adds support for custom event attributes.",
           "name": "EventAttribute",
-          "members": [
-            {
-              "kind": "method",
-              "name": "dispatchEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
           "parameters": [
             {
               "name": "base",
@@ -2380,6 +2361,17 @@
           "description": "Mixin to augment an element with behavior used to submit a form.",
           "name": "FormSubmitter",
           "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "true",
+              "description": "Indicates that this custom element participates in form submission, validation, and form state restoration."
+            },
             {
               "kind": "field",
               "name": "name",

package/dist/src/RadioElement.d.ts

@@ -0,0 +1,79 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+declare const M3eRadioElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DirtyMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").TouchedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").CheckedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").LabelledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & typeof LitElement;
+/**
+ * A radio button that allows a user to select one option from a set of options.
+ *
+ * @description
+ * The `m3e-radio` component represents a radio button that enables users to select an options from a set.
+ * It supports selection from mutually exclusive options, emitting `input` and `change` events when its state updates.
+ * The component reflects its state through customizable CSS properties for hover, focus, ripple, and icon styling—
+ * adapting dynamically based on whether it is selected, unselected, or disabled.
+ *
+ * Attributes like `checked`, `disabled`, and `value` control its behavior and accessibility, while its visual
+ * presentation can be tuned via design tokens such as `--m3e-radio-container-size` and `--m3e-radio-icon-size`.
+ *
+ * @example
+ * The following example illustrates using `m3e-radio-group` and `m3e-radio` to present a group of options.
+ * ```html
+ * <label for="rdg1">Radio group</label>
+ * <br />
+ * <m3e-radio-group id="rdg1">
+ *  <label><m3e-radio value="1"></m3e-radio> Value 1</label>
+ *  <label><m3e-radio value="2"></m3e-radio> Value 2</label>
+ *  <label><m3e-radio value="3"></m3e-radio> Value 3</label>
+ *  <label><m3e-radio value="4"></m3e-radio> Value 4</label>
+ * </m3e-radio-group>
+ * ```
+ *
+ * @tag m3e-radio
+ *
+ * @attr checked - Whether the element is checked.
+ * @attr disabled - Whether the element is disabled.
+ * @attr value - A string representing the value of the radio.
+ *
+ * @fires input - Emitted when the checked state changes.
+ * @fires change - Emitted when the checked state changes.
+ * @fires click - Emitted when the element is clicked.
+ *
+ * @cssprop --m3e-radio-container-size - Base size of the radio button container.
+ * @cssprop --m3e-radio-icon-size - Size of the radio icon inside the wrapper.
+ * @cssprop --m3e-radio-unselected-hover-color - Hover state layer color when radio is not selected.
+ * @cssprop --m3e-radio-unselected-focus-color - Focus state layer color when radio is not selected.
+ * @cssprop --m3e-radio-unselected-ripple-color - Ripple color when radio is not selected.
+ * @cssprop --m3e-radio-unselected-icon-color - Icon color when radio is not selected.
+ * @cssprop --m3e-radio-selected-hover-color - Hover state layer color when radio is selected.
+ * @cssprop --m3e-radio-selected-focus-color - Focus state layer color when radio is selected.
+ * @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.
+ */
+export declare class M3eRadioElement extends M3eRadioElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private readonly _focusRing?;
+    /** @private */ private readonly _stateLayer?;
+    /** @private */ private readonly _ripple?;
+    /**
+     * A string representing the value of the radio.
+     * @default "on"
+     */
+    value: string;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-radio": M3eRadioElement;
+    }
+}
+export {};
+//# sourceMappingURL=RadioElement.d.ts.map

package/dist/src/RadioElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioElement.d.ts","sourceRoot":"","sources":["../../src/RadioElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;;AAuB5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,qBACa,eAAgB,SAAQ,oBAEpC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAmEpC;IAEF,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACxF,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;IAC3F,eAAe,CAAmB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAmB;IA4B9E;;;OAGG;IACS,KAAK,SAAQ;IAEzB,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAUlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAUrC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQxE,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK/E,kBAAkB;cACC,MAAM,IAAI,OAAO;CAiCrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/dist/src/RadioGroupElement.d.ts

@@ -0,0 +1,71 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { formValue } from "@m3e/core";
+import { SelectionManager, selectionManager } from "@m3e/core/a11y";
+import { M3eRadioElement } from "./RadioElement";
+declare const M3eRadioGroupElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").LabelledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").RequiredConstraintValidationMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DirtyMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").TouchedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").RequiredMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").ConstraintValidationMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").FormAssociatedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * A container for a set of radio buttons that enforces single selection.
+ *
+ * @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.
+ *
+ * @example
+ * The following example illustrates using `m3e-radio-group` and `m3e-radio` to present a group of options.
+ * ```html
+ * <label for="rdg1">Radio group</label>
+ * <br />
+ * <m3e-radio-group id="rdg1">
+ *  <label><m3e-radio value="1"></m3e-radio> Value 1</label>
+ *  <label><m3e-radio value="2"></m3e-radio> Value 2</label>
+ *  <label><m3e-radio value="3"></m3e-radio> Value 3</label>
+ *  <label><m3e-radio value="4"></m3e-radio> Value 4</label>
+ * </m3e-radio-group>
+ * ```
+ *
+ * @tag m3e-radio-group
+ *
+ * @slot - Renders the radio buttons of the group.
+ *
+ * @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.
+ *
+ * @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.
+ */
+export declare class M3eRadioGroupElement extends M3eRadioGroupElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @internal */
+    readonly [selectionManager]: SelectionManager<M3eRadioElement>;
+    /** The radio buttons in the group. */
+    get radios(): readonly M3eRadioElement[];
+    /** The selected radio. */
+    get selected(): M3eRadioElement | null;
+    /** The selected value of the radio group. */
+    get value(): string | null;
+    /** @inheritdoc @internal */
+    get [formValue](): string | File | FormData | null;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-radio-group": M3eRadioGroupElement;
+    }
+}
+export {};
+//# sourceMappingURL=RadioGroupElement.d.ts.map

package/dist/src/RadioGroupElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupElement.d.ts","sourceRoot":"","sources":["../../src/RadioGroupElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5E,OAAO,EAQL,SAAS,EAKV,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,qBACa,oBAAqB,SAAQ,yBAMzC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAiBpC;IAIF,gBAAgB;IAChB,QAAQ,CAAC,CAAC,gBAAgB,CAAC,oCAExB;IAEH,sCAAsC;IACtC,IAAI,MAAM,IAAI,SAAS,eAAe,EAAE,CAEvC;IAED,0BAA0B;IAC1B,IAAI,QAAQ,IAAI,eAAe,GAAG,IAAI,CAErC;IAED,6CAA6C;IAC7C,IAAI,KAAK,IAAI,MAAM,GAAG,IAAI,CAEzB;IAED,4BAA4B;IAC5B,IAAa,CAAC,SAAS,CAAC,IAAI,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,CAE1D;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CA2BrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./RadioElement";
+export * from "./RadioGroupElement";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/radio-group",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.3",
   "description": "Radio Group for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "clean": "rimraf dist"
   },
   "peerDependencies": {
-    "@m3e/core": "1.0.0-rc.2",
+    "@m3e/core": "1.0.0-rc.3",
     "lit": "^3.3.0"
   },
   "devDependencies": {