@m3e/checkbox 1.0.0-rc.2 → 1.0.0-rc.4

package/README.md

@@ -27,7 +27,7 @@ Alternately, you can explicitly reference the `html-custom-data.json` and `css-c
 }
 ```
 
-## 🚀 Browser Usage
+## 🚀 Native Module Support
 
 This package uses [JavaScript Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#module_specifiers). To use it directly in a browser without a bundler, use a module script similar to the following.
 

package/dist/custom-elements.json

@@ -253,20 +253,6 @@
                 "module": "../core/src/shared/mixins/FormAssociated.ts"
               }
             },
-            {
-              "kind": "method",
-              "name": "[_updateLabels]",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "Labelled",
-                "module": "../core/src/shared/mixins/Labelled.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "dirty",
@@ -1790,25 +1776,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",
@@ -2106,6 +2073,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",
@@ -2642,6 +2620,11 @@
       "kind": "javascript-module",
       "path": "../core/src/shared/mixins/Labelled.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "updateLabels",
+          "description": "A symbol through which to update labels to reflect a control's current state."
+        },
         {
           "kind": "function",
           "name": "isLabelledMixin",
@@ -2691,16 +2674,6 @@
               },
               "description": "The label elements that the element is associated with.",
               "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "[_updateLabels]",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
             }
           ],
           "parameters": [
@@ -2715,6 +2688,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "updateLabels",
+          "declaration": {
+            "name": "updateLabels",
+            "module": "../core/src/shared/mixins/Labelled.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "isLabelledMixin",

package/dist/src/CheckboxElement.d.ts

@@ -0,0 +1,100 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { formValue } from "@m3e/core";
+declare const M3eCheckboxElement_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").CheckedIndeterminateMixin> & 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("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 checkbox that allows a user to select one or more options from a limited number of choices.
+ *
+ * @description
+ * The `m3e-checkbox` component enables users to select one or more options from a set. It supports selected,
+ * unselected, and indeterminate states, and communicates selection through visual cues and accessible semantics.
+ * This component reflects user intent, form participation, and validation feedback, adapting to disabled and
+ * required contexts. It emits `input` and `change` events to signal state transitions and integrates with form
+ * submission via `name` and `value`.
+ *
+ * @example
+ * The following example illustrates wrapping a `m3e-checkbox` within a `label`.
+ * ```html
+ * <label>
+ *  <m3e-checkbox></m3e-checkbox>
+ *  Checkbox label
+ * </label>
+ * ```
+ * @example
+ * The next example illustrates use of the `for` attribute to label a checkbox.
+ * ```html
+ * <m3e-checkbox id="chk"></m3e-checkbox>
+ * <label for="chk">Checkbox label </label>
+ * ```
+ *
+ * @tag m3e-checkbox
+ *
+ * @attr checked - Whether the element is checked.
+ * @attr disabled - Whether the element is disabled.
+ * @attr indeterminate - Whether the element's checked state is indeterminate.
+ * @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 checkbox.
+ *
+ * @fires input - Emitted when the checked state changes.
+ * @fires invalid - Emitted when a form is submitted and the element fails constraint validation.
+ * @fires change - Emitted when the checked state changes.
+ * @fires click - Emitted when the element is clicked.
+ *
+ * @cssprop --m3e-checkbox-icon-size - Size of the checkbox icon inside the container.
+ * @cssprop --m3e-checkbox-container-size - Base size of the checkbox container.
+ * @cssprop --m3e-checkbox-container-shape - Border radius of the icon container.
+ * @cssprop --m3e-checkbox-unselected-outline-thickness - Border thickness for unselected state.
+ * @cssprop --m3e-checkbox-unselected-outline-color - Border color for unselected state.
+ * @cssprop --m3e-checkbox-unselected-hover-outline-color - Border color on hover when unselected.
+ * @cssprop --m3e-checkbox-unselected-disabled-outline-color - Base color for disabled unselected outline.
+ * @cssprop --m3e-checkbox-unselected-disabled-outline-opacity - Opacity for disabled unselected outline.
+ * @cssprop --m3e-checkbox-unselected-error-outline-color - Border color for invalid unselected state.
+ * @cssprop --m3e-checkbox-selected-container-color - Background color for selected container.
+ * @cssprop --m3e-checkbox-selected-icon-color - Icon color for selected state.
+ * @cssprop --m3e-checkbox-selected-disabled-container-color - Base color for disabled selected container.
+ * @cssprop --m3e-checkbox-selected-disabled-container-opacity - Opacity for disabled selected container.
+ * @cssprop --m3e-checkbox-selected-disabled-icon-color - Base color for disabled selected icon.
+ * @cssprop --m3e-checkbox-selected-disabled-icon-opacity - Opacity for disabled selected icon.
+ * @cssprop --m3e-checkbox-unselected-hover-color - Ripple hover color for unselected state.
+ * @cssprop --m3e-checkbox-unselected-focus-color - Ripple focus color for unselected state.
+ * @cssprop --m3e-checkbox-unselected-ripple-color - Ripple base color for unselected state.
+ * @cssprop --m3e-checkbox-selected-hover-color - Ripple hover color for selected state.
+ * @cssprop --m3e-checkbox-selected-focus-color - Ripple focus color for selected state.
+ * @cssprop --m3e-checkbox-selected-ripple-color - Ripple base color for selected state.
+ * @cssprop --m3e-checkbox-unselected-error-hover-color - Ripple hover color for invalid unselected state.
+ * @cssprop --m3e-checkbox-unselected-error-focus-color - Ripple focus color for invalid unselected state.
+ * @cssprop --m3e-checkbox-unselected-error-ripple-color - Ripple base color for invalid unselected state.
+ * @cssprop --m3e-checkbox-selected-error-hover-color - Ripple hover color for invalid selected state.
+ * @cssprop --m3e-checkbox-selected-error-focus-color - Ripple focus color for invalid selected state.
+ * @cssprop --m3e-checkbox-selected-error-ripple-color - Ripple base color for invalid selected state.
+ */
+export declare class M3eCheckboxElement extends M3eCheckboxElement_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 checkbox.
+     * @default "on"
+     */
+    value: string;
+    /** @inheritdoc @private */
+    get [formValue](): string | File | FormData | null;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-checkbox": M3eCheckboxElement;
+    }
+}
+export {};
+//# sourceMappingURL=CheckboxElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxElement.d.ts","sourceRoot":"","sources":["../../src/CheckboxElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrF,OAAO,EAQL,SAAS,EAaV,MAAM,WAAW,CAAC;;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,qBACa,kBAAmB,SAAQ,uBAcvC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAwIpC;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,2BAA2B;IAC3B,IAAa,CAAC,SAAS,CAAC,IAAI,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,CAE1D;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAUlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAUrC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK/E,kBAAkB;cACC,MAAM,IAAI,OAAO;CAuCrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./CheckboxElement";
+//# 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,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/checkbox",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.4",
   "description": "Checkbox for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "clean": "rimraf dist"
   },
   "peerDependencies": {
-    "@m3e/core": "1.0.0-rc.2",
+    "@m3e/core": "1.0.0-rc.4",
     "lit": "^3.3.0"
   },
   "devDependencies": {