@aurodesignsystem/auro-formkit 1.6.0-beta.10 → 1.6.0-beta.11

package/components/input/src/styles/style.css

@@ -99,6 +99,13 @@
 .clearBtn {
   width: calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));
   height: calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));
+  opacity: 0;
+  pointer-events: none;
+}
+
+:host .wrapper:hover .clearBtn, :host .wrapper:focus-within .clearBtn {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .passwordBtn {
@@ -212,18 +219,18 @@ label {
 }
 
 :host .wrapper:focus-within label {
-  top: var(--ds-size-25, 0.125rem);
+  top: var(--ds-size-100, 0.5rem);
   font-size: var(--ds-text-body-size-xs, 0.75rem);
   transform: unset;
 }
 :host label.withValue {
-  top: var(--ds-size-25, 0.125rem);
+  top: var(--ds-size-100, 0.5rem);
   font-size: var(--ds-text-body-size-xs, 0.75rem);
   transform: unset;
 }
 
 :host([activeLabel]) .wrapper label {
-  top: var(--ds-size-25, 0.125rem);
+  top: var(--ds-size-100, 0.5rem);
   font-size: var(--ds-text-body-size-xs, 0.75rem);
   transform: unset;
 }
@@ -248,6 +255,7 @@ label {
   flex: 1;
 }
 
+/* stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type */
 input {
   position: relative;
   overflow: hidden;
@@ -266,7 +274,19 @@ input {
 input::-ms-reveal, input::-ms-clear {
   display: none;
 }
+input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+input[type=number] {
+  -moz-appearance: textfield; /* For older versions of Firefox */
+  appearance: textfield; /* Standard property */
+}
 input:disabled {
   background: none;
   pointer-events: none;
 }
+
+:host([bordered]) input {
+  padding: var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem);
+}

package/components/menu/.turbo/turbo-build.log

@@ -101,13 +101,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 700ms
+created dist in 763ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 615ms
+created ./demo/ in 721ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 420ms
+created ./demo/ in 594ms
 
 > @auro-formkit/auro-menu@4.1.4 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component menu

package/components/menu/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 721ms
+created dist in 763ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 439ms
+created ./demo/ in 537ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 372ms
+created ./demo/ in 509ms

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

@@ -1187,8 +1187,7 @@ class AuroMenuOption extends r {
         reflect: true
       },
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
       tabIndex: {
         type: Number,

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

@@ -1147,8 +1147,7 @@ class AuroMenuOption extends r {
         reflect: true
       },
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
       tabIndex: {
         type: Number,

package/components/menu/dist/auro-menuoption.d.ts

@@ -24,7 +24,6 @@ export class AuroMenuOption extends LitElement {
         };
         value: {
             type: StringConstructor;
-            reflect: boolean;
         };
         tabIndex: {
             type: NumberConstructor;

package/components/menu/dist/auro-menuoption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auro-menuoption.d.ts","sourceRoot":"","sources":["../src/auro-menuoption.js"],"names":[],"mappings":"AAqBA;;;;;;;;;GASG;AACH;IAyBE;;;;;;;;;;;;;;;;;;;;;MAuBC;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA5DC,aAAyE;IAEzE,kBAAqB;IACrB,qBAAwB;IACxB,kBAAqB;IAOrB;;OAEG;IACH,qBAAiD;IAgDnD,qBAeC;IAGD,sCAIC;IAED;;;;;;OAMG;IACH,yBAOC;IAED,4CAKC;CACF;2BA7I0B,KAAK"}
+{"version":3,"file":"auro-menuoption.d.ts","sourceRoot":"","sources":["../src/auro-menuoption.js"],"names":[],"mappings":"AAqBA;;;;;;;;;GASG;AACH;IAyBE;;;;;;;;;;;;;;;;;;;;MAsBC;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA3DC,aAAyE;IAEzE,kBAAqB;IACrB,qBAAwB;IACxB,kBAAqB;IAOrB;;OAEG;IACH,qBAAiD;IA+CnD,qBAeC;IAGD,sCAIC;IAED;;;;;;OAMG;IACH,yBAOC;IAED,4CAKC;CACF;2BA5I0B,KAAK"}

package/components/menu/dist/index.js

@@ -1147,8 +1147,7 @@ class AuroMenuOption extends r {
         reflect: true
       },
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
       tabIndex: {
         type: Number,

package/components/menu/src/auro-menuoption.js

@@ -69,8 +69,7 @@ export class AuroMenuOption extends LitElement {
         reflect: true
       },
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
       tabIndex: {
         type: Number,

package/components/radio/.turbo/turbo-build.log

@@ -138,13 +138,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 546ms
+created dist in 742ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 521ms
+created ./demo/ in 510ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 530ms
+created ./demo/ in 576ms
 
 > @auro-formkit/auro-radio@4.1.1 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component radio
@@ -193,6 +193,7 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/radio/
   ⁕ FILE:src=./../apiExamples/horizontal.html 
   ⁕ FILE:src=./../apiExamples/required.html 
   ⁕ FILE:src=./../apiExamples/optionalLabel.html 
+  ⁕ FILE:src=./../apiExamples/resetState.html 
   ⁕ FILE:src=./../apiExamples/dynamic.html 
   ⁕ CODE:src=./../apiExamples/basic.html 
   ⁕ CODE:src=./../apiExamples/basicGroup.html 
@@ -202,6 +203,8 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/radio/
   ⁕ CODE:src=./../apiExamples/horizontal.html 
   ⁕ CODE:src=./../apiExamples/required.html 
   ⁕ CODE:src=./../apiExamples/optionalLabel.html 
+  ⁕ CODE:src=./../apiExamples/resetState.html 
+  ⁕ CODE:src=./../apiExamples/resetState.js 
   ⁕ CODE:src=./../apiExamples/dynamic.html 
   ⁕ CODE:src=./../apiExamples/dynamic.js 
   ⁕ CODE:src=./../src/styles/tokens.scss 

package/components/radio/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 867ms
+created dist in 989ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 512ms
+created ./demo/ in 496ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 614ms
+created ./demo/ in 389ms

package/components/radio/demo/api.html

@@ -46,5 +46,6 @@
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
   </body>
 </html>

package/components/radio/demo/api.js

@@ -1,4 +1,5 @@
 import { dynamicExample } from "../apiExamples/dynamic";
+import { resetStateExample } from "../apiExamples/resetState";
 import './index.js';
 
 export function initExamples(initCount) {
@@ -6,6 +7,7 @@ export function initExamples(initCount) {
 
   try {
     dynamicExample();
+    resetStateExample();
   } catch (error) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/radio/demo/api.md

@@ -21,9 +21,9 @@
 
 ## Methods
 
-| Method  | Type       | Description                                    |
-|---------|------------|------------------------------------------------|
-| [reset](#reset) | `(): void` | Method for a total reset of the radio element. |
+| Method  | Type       | Description                        |
+|---------|------------|------------------------------------|
+| [reset](#reset) | `(): void` | Resets component to initial state. |
 
 ## Events
 
@@ -61,6 +61,12 @@
 | [tabIndex](#tabIndex) | `tabIndex` | `number`  | -1      |                                                  |
 | [value](#value)    | `value`    | `string`  |         |                                                  |
 
+## Methods
+
+| Method  | Type       | Description                        |
+|---------|------------|------------------------------------|
+| [reset](#reset) | `(): void` | Resets component to initial state. |
+
 ## Events
 
 | Event                | Type               | Description                                      |
@@ -328,6 +334,54 @@ The `<auro-radio-group>` supports an `optionalLabel` slot, where users can can o
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Reset State
+
+Use the `reset()` method to reset the `<auro-radio-group>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
+  <auro-button id="resetStateBtn">Reset</auro-button>
+  <br/><br/>
+  <auro-radio-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="resetGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="resetGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+    <auro-radio id="resetGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.html -->
+
+```html
+<auro-button id="resetStateBtn">Reset</auro-button>
+<br/><br/>
+<auro-radio-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="resetGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="resetGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="resetGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.js -->
+
+```js
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Dynamic Example
 
 This example demonstrates a data drive approach to rendering `<auro-radio>` buttons.

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

@@ -15,6 +15,14 @@ function dynamicExample() {
   }
 }
 
+function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -276,6 +284,15 @@ class AuroRadio extends r {
     }));
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('checked')) {
       this.dispatchEvent(new CustomEvent('resetRadio', {
@@ -384,6 +401,30 @@ class AuroFormValidation {
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
+  /**
+   * Resets the element to its initial state.
+   * @private
+   * @param {object} elem - HTML element to reset.
+   * @returns {void}
+   */
+  reset(elem) {
+    elem.validity = undefined;
+    elem.value = undefined;
+
+    // Resets the second value of the datepicker in range state
+    if (elem.valueEnd) {
+      elem.valueEnd = undefined;
+    }
+
+    // Resets selected option of element
+    if (elem.optionSelected) {
+      elem.optionSelected = undefined;
+    }
+
+    // Runs validation to handle error attribute
+    this.validate(elem);
+  }
+
   /**
    * Determines the validity state of the element based on the common attribute restrictions (pattern).
    * @private
@@ -398,10 +439,15 @@ class AuroFormValidation {
         elem.validity = 'badInput';
         elem.setCustomValidity = elem.setCustomValidityBadInput || '';
       }
-    } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
+    }
+
+    // Length > 0 is required to prevent the error message from showing when the input is empty
+    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
       elem.validity = 'tooShort';
       elem.setCustomValidity = elem.setCustomValidityTooShort || '';
-    } else if (elem.value && elem.value.length > elem.maxLength) {
+    }
+    
+    if (elem.value?.length > elem.maxLength) {
       elem.validity = 'tooLong';
       elem.setCustomValidity = elem.setCustomValidityTooLong || '';
     }
@@ -427,7 +473,7 @@ class AuroFormValidation {
           elem.validity = 'tooShort';
           elem.setCustomValidity = elem.setCustomValidityForType || '';
         }
-      } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
+      } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
           elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
@@ -532,14 +578,10 @@ class AuroFormValidation {
 
     if (validationShouldRun || elem.hasAttribute('error')) {
       if (elem.validity && elem.validity !== 'valid') {
-        elem.isValid = false;
-
         // Use the validity message override if it is declared
         if (elem.ValidityMessageOverride) {
           elem.setCustomValidity = elem.ValidityMessageOverride;
         }
-      } else {
-        elem.isValid = true;
       }
 
       this.getErrorMessage(elem);
@@ -812,20 +854,20 @@ class AuroRadioGroup extends r {
   }
 
   /**
-   * Method for a total reset of the radio element.
+   * Resets component to initial state.
    * @returns {void}
    */
   reset() {
-    this.value = undefined;
+    // Sets first radio button to receive focus during keyboard navigation
     this.index = 0;
-    this.optionSelected = undefined;
+
     const buttons = this.querySelectorAll('auro-radio, [auro-radio]');
 
     buttons.forEach((button) => {
-      button.checked = false;
+      button.reset();
     });
 
-    this.validation.validate(this);
+    this.validation.reset(this);
   }
 
   /**
@@ -1037,6 +1079,7 @@ function initExamples(initCount) {
 
   try {
     dynamicExample();
+    resetStateExample();
   } catch (error) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

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

@@ -259,6 +259,15 @@ class AuroRadio extends r {
     }));
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('checked')) {
       this.dispatchEvent(new CustomEvent('resetRadio', {
@@ -367,6 +376,30 @@ class AuroFormValidation {
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
+  /**
+   * Resets the element to its initial state.
+   * @private
+   * @param {object} elem - HTML element to reset.
+   * @returns {void}
+   */
+  reset(elem) {
+    elem.validity = undefined;
+    elem.value = undefined;
+
+    // Resets the second value of the datepicker in range state
+    if (elem.valueEnd) {
+      elem.valueEnd = undefined;
+    }
+
+    // Resets selected option of element
+    if (elem.optionSelected) {
+      elem.optionSelected = undefined;
+    }
+
+    // Runs validation to handle error attribute
+    this.validate(elem);
+  }
+
   /**
    * Determines the validity state of the element based on the common attribute restrictions (pattern).
    * @private
@@ -381,10 +414,15 @@ class AuroFormValidation {
         elem.validity = 'badInput';
         elem.setCustomValidity = elem.setCustomValidityBadInput || '';
       }
-    } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
+    }
+
+    // Length > 0 is required to prevent the error message from showing when the input is empty
+    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
       elem.validity = 'tooShort';
       elem.setCustomValidity = elem.setCustomValidityTooShort || '';
-    } else if (elem.value && elem.value.length > elem.maxLength) {
+    }
+    
+    if (elem.value?.length > elem.maxLength) {
       elem.validity = 'tooLong';
       elem.setCustomValidity = elem.setCustomValidityTooLong || '';
     }
@@ -410,7 +448,7 @@ class AuroFormValidation {
           elem.validity = 'tooShort';
           elem.setCustomValidity = elem.setCustomValidityForType || '';
         }
-      } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
+      } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
           elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
@@ -515,14 +553,10 @@ class AuroFormValidation {
 
     if (validationShouldRun || elem.hasAttribute('error')) {
       if (elem.validity && elem.validity !== 'valid') {
-        elem.isValid = false;
-
         // Use the validity message override if it is declared
         if (elem.ValidityMessageOverride) {
           elem.setCustomValidity = elem.ValidityMessageOverride;
         }
-      } else {
-        elem.isValid = true;
       }
 
       this.getErrorMessage(elem);
@@ -795,20 +829,20 @@ class AuroRadioGroup extends r {
   }
 
   /**
-   * Method for a total reset of the radio element.
+   * Resets component to initial state.
    * @returns {void}
    */
   reset() {
-    this.value = undefined;
+    // Sets first radio button to receive focus during keyboard navigation
     this.index = 0;
-    this.optionSelected = undefined;
+
     const buttons = this.querySelectorAll('auro-radio, [auro-radio]');
 
     buttons.forEach((button) => {
-      button.checked = false;
+      button.reset();
     });
 
-    this.validation.validate(this);
+    this.validation.reset(this);
   }
 
   /**

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

@@ -107,7 +107,7 @@ export class AuroRadioGroup extends LitElement {
      */
     updated(changedProperties: Map<string, any>): void;
     /**
-     * Method for a total reset of the radio element.
+     * Resets component to initial state.
      * @returns {void}
      */
     reset(): void;

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

@@ -90,6 +90,11 @@ export class AuroRadio extends LitElement {
      * @returns {void}
      */
     private handleBlur;
+    /**
+     * Resets component to initial state.
+     * @returns {void}
+     */
+    reset(): void;
     updated(changedProperties: any): void;
     /**
      * Method for handling content when it is invalid accessibility wise.

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

@@ -1 +1 @@
-{"version":3,"file":"auro-radio.d.ts","sourceRoot":"","sources":["../src/auro-radio.js"],"names":[],"mappings":"AAmBA;;;;;;;;;;GAUG;AAGH;IAeE,+CAMC;IAGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA5DC,iBAAoB;IACpB,kBAAqB;IACrB,kBAAqB;IACrB,eAAkB;IAGlB;;OAEG;IACH,qBAAiD;IAqDnD;;;;;OAKG;IACH,qBAKC;IAED;;;;;OAKG;IACH,oBAOC;IAED;;;;;OAKG;IACH,oBAMC;IAED;;;;;OAKG;IACH,mBAMC;IAED,sCAcC;IAED;;;;;OAKG;IACH,gBAMC;IAED;;;;;OAKG;IACH,mBAMC;IAED,qBAWC;IALC,wBAAmD;IAQrD,+CAkCC;CACF;2BAjPgC,KAAK"}
+{"version":3,"file":"auro-radio.d.ts","sourceRoot":"","sources":["../src/auro-radio.js"],"names":[],"mappings":"AAmBA;;;;;;;;;;GAUG;AAGH;IAeE,+CAMC;IAGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA5DC,iBAAoB;IACpB,kBAAqB;IACrB,kBAAqB;IACrB,eAAkB;IAGlB;;OAEG;IACH,qBAAiD;IAqDnD;;;;;OAKG;IACH,qBAKC;IAED;;;;;OAKG;IACH,oBAOC;IAED;;;;;OAKG;IACH,oBAMC;IAED;;;;;OAKG;IACH,mBAMC;IAED;;;OAGG;IACH,SAFa,IAAI,CAKhB;IAED,sCAcC;IAED;;;;;OAKG;IACH,gBAMC;IAED;;;;;OAKG;IACH,mBAMC;IAED,qBAWC;IALC,wBAAmD;IAQrD,+CAkCC;CACF;2BA1PgC,KAAK"}