@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.91 → 0.0.0-pr624.92

package/components/checkbox/demo/api.md

@@ -66,12 +66,13 @@ Custom element for the purpose of allowing users to select one or more options o
 
 ## Events
 
-| Event                   | Type               |
-|-------------------------|--------------------|
-| `auroCheckbox-focusin`  | `CustomEvent<any>` |
-| `auroCheckbox-focusout` | `CustomEvent<any>` |
-| `auroCheckbox-input`    | `CustomEvent<any>` |
-| [input](#input)                 | `CustomEvent<any>` |
+| Event                   | Type               | Description                                      |
+|-------------------------|--------------------|--------------------------------------------------|
+| `auroCheckbox-focusin`  | `CustomEvent<any>` |                                                  |
+| `auroCheckbox-focusout` | `CustomEvent<any>` |                                                  |
+| `auroCheckbox-input`    | `CustomEvent<any>` |                                                  |
+| [change](#change)                | `CustomEvent<any>` | (Deprecated) Notifies when checked value is changed. |
+| [input](#input)                 | `InputEvent`       | Notifies when when checked value is changed by user's interface. |
 
 ## CSS Shadow Parts
 

package/components/checkbox/demo/api.min.js

@@ -142,6 +142,9 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
+ *
+ * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
  */
 
 // build the component class
@@ -287,12 +290,6 @@ class AuroCheckbox extends i$2 {
   handleInput(event) {
     this.checked = event.target.checked;
 
-    this.dispatchEvent(new CustomEvent('input', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
-
     // Old event we need to deprecate
     this.dispatchEvent(new CustomEvent('auroCheckbox-input', {
       bubbles: true,
@@ -352,7 +349,7 @@ class AuroCheckbox extends i$2 {
       }
 
       if (!this.disabled) {
-        this.checked = !this.checked;
+        this.shadowRoot.querySelector('input').click();
         this.handleFocusin();
       }
     });
@@ -390,7 +387,7 @@ class AuroCheckbox extends i$2 {
             @change="${this.handleChange}"
             @input="${this.handleInput}"
             ?disabled="${this.disabled}"
-            .checked="${this.checked}"
+            ?checked="${this.checked}"
             id="${this.inputId}"
             name="${o$1(this.name)}"
             type="checkbox"

package/components/checkbox/demo/index.min.js

@@ -134,6 +134,9 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
+ *
+ * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
  */
 
 // build the component class
@@ -279,12 +282,6 @@ class AuroCheckbox extends i$2 {
   handleInput(event) {
     this.checked = event.target.checked;
 
-    this.dispatchEvent(new CustomEvent('input', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
-
     // Old event we need to deprecate
     this.dispatchEvent(new CustomEvent('auroCheckbox-input', {
       bubbles: true,
@@ -344,7 +341,7 @@ class AuroCheckbox extends i$2 {
       }
 
       if (!this.disabled) {
-        this.checked = !this.checked;
+        this.shadowRoot.querySelector('input').click();
         this.handleFocusin();
       }
     });
@@ -382,7 +379,7 @@ class AuroCheckbox extends i$2 {
             @change="${this.handleChange}"
             @input="${this.handleInput}"
             ?disabled="${this.disabled}"
-            .checked="${this.checked}"
+            ?checked="${this.checked}"
             id="${this.inputId}"
             name="${o$1(this.name)}"
             type="checkbox"

package/components/checkbox/dist/auro-checkbox.d.ts

@@ -7,6 +7,9 @@
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
+ *
+ * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
  */
 export class AuroCheckbox extends LitElement {
     static get styles(): import("lit").CSSResult[];

package/components/checkbox/dist/index.js

@@ -94,6 +94,9 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
+ *
+ * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
  */
 
 // build the component class
@@ -239,12 +242,6 @@ class AuroCheckbox extends LitElement {
   handleInput(event) {
     this.checked = event.target.checked;
 
-    this.dispatchEvent(new CustomEvent('input', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
-
     // Old event we need to deprecate
     this.dispatchEvent(new CustomEvent('auroCheckbox-input', {
       bubbles: true,
@@ -304,7 +301,7 @@ class AuroCheckbox extends LitElement {
       }
 
       if (!this.disabled) {
-        this.checked = !this.checked;
+        this.shadowRoot.querySelector('input').click();
         this.handleFocusin();
       }
     });
@@ -342,7 +339,7 @@ class AuroCheckbox extends LitElement {
             @change="${this.handleChange}"
             @input="${this.handleInput}"
             ?disabled="${this.disabled}"
-            .checked="${this.checked}"
+            ?checked="${this.checked}"
             id="${this.inputId}"
             name="${ifDefined(this.name)}"
             type="checkbox"

package/components/checkbox/dist/registered.js

@@ -94,6 +94,9 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
+ *
+ * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
  */
 
 // build the component class
@@ -239,12 +242,6 @@ class AuroCheckbox extends LitElement {
   handleInput(event) {
     this.checked = event.target.checked;
 
-    this.dispatchEvent(new CustomEvent('input', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
-
     // Old event we need to deprecate
     this.dispatchEvent(new CustomEvent('auroCheckbox-input', {
       bubbles: true,
@@ -304,7 +301,7 @@ class AuroCheckbox extends LitElement {
       }
 
       if (!this.disabled) {
-        this.checked = !this.checked;
+        this.shadowRoot.querySelector('input').click();
         this.handleFocusin();
       }
     });
@@ -342,7 +339,7 @@ class AuroCheckbox extends LitElement {
             @change="${this.handleChange}"
             @input="${this.handleInput}"
             ?disabled="${this.disabled}"
-            .checked="${this.checked}"
+            ?checked="${this.checked}"
             id="${this.inputId}"
             name="${ifDefined(this.name)}"
             type="checkbox"

package/components/radio/demo/api.md

@@ -76,7 +76,9 @@
 |----------------------|--------------------|--------------------------------------------------|
 | `auroRadio-blur`     | `CustomEvent<any>` | Notifies that the component has lost focus.      |
 | `auroRadio-selected` | `CustomEvent<any>` | Notifies that the component has been marked as checked/selected. |
+| [change](#change)             | `CustomEvent<any>` | (Deprecated) Notifies when checked value is changed. |
 | [focusSelected](#focusSelected)      | `CustomEvent<any>` | Notifies that the component has gained focus.    |
+| [input](#input)              | `InputEvent`       | Notifies when when checked value is changed by user's interface. |
 | [resetRadio](#resetRadio)         | `CustomEvent<any>` | Notifies that the component has reset the checked/selected state. |
 | [toggleSelected](#toggleSelected)     | `CustomEvent<any>` | Notifies that the component has toggled the checked/selected state. |
 

package/components/radio/demo/api.min.js

@@ -162,6 +162,8 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
+ * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
  * @event focusSelected - Notifies that the component has gained focus.
  * @event auroRadio-blur - Notifies that the component has lost focus.
  * @event resetRadio - Notifies that the component has reset the checked/selected state.
@@ -418,7 +420,7 @@ class AuroRadio extends i$2 {
           @input="${this.handleInput}"
           @change="${this.handleChange}"
           ?disabled="${this.disabled}"
-          .checked="${this.checked}"
+          ?checked="${this.checked}"
           id="${this.inputId}"
           name="${o$1(this.name)}"
           type="radio"

package/components/radio/demo/index.min.js

@@ -137,6 +137,8 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
+ * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
  * @event focusSelected - Notifies that the component has gained focus.
  * @event auroRadio-blur - Notifies that the component has lost focus.
  * @event resetRadio - Notifies that the component has reset the checked/selected state.
@@ -393,7 +395,7 @@ class AuroRadio extends i$2 {
           @input="${this.handleInput}"
           @change="${this.handleChange}"
           ?disabled="${this.disabled}"
-          .checked="${this.checked}"
+          ?checked="${this.checked}"
           id="${this.inputId}"
           name="${o$1(this.name)}"
           type="radio"

package/components/radio/dist/auro-radio.d.ts

@@ -9,6 +9,8 @@
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
+ * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
  * @event focusSelected - Notifies that the component has gained focus.
  * @event auroRadio-blur - Notifies that the component has lost focus.
  * @event resetRadio - Notifies that the component has reset the checked/selected state.

package/components/radio/dist/index.js

@@ -97,6 +97,8 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
+ * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
  * @event focusSelected - Notifies that the component has gained focus.
  * @event auroRadio-blur - Notifies that the component has lost focus.
  * @event resetRadio - Notifies that the component has reset the checked/selected state.
@@ -353,7 +355,7 @@ class AuroRadio extends LitElement {
           @input="${this.handleInput}"
           @change="${this.handleChange}"
           ?disabled="${this.disabled}"
-          .checked="${this.checked}"
+          ?checked="${this.checked}"
           id="${this.inputId}"
           name="${ifDefined(this.name)}"
           type="radio"

package/components/radio/dist/registered.js

@@ -97,6 +97,8 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
+ * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
  * @event focusSelected - Notifies that the component has gained focus.
  * @event auroRadio-blur - Notifies that the component has lost focus.
  * @event resetRadio - Notifies that the component has reset the checked/selected state.
@@ -353,7 +355,7 @@ class AuroRadio extends LitElement {
           @input="${this.handleInput}"
           @change="${this.handleChange}"
           ?disabled="${this.disabled}"
-          .checked="${this.checked}"
+          ?checked="${this.checked}"
           id="${this.inputId}"
           name="${ifDefined(this.name)}"
           type="radio"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr624.91",
+  "version": "0.0.0-pr624.92",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {