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

package/components/input/src/base-input.js

@@ -33,12 +33,11 @@ import AuroFormValidation from '@auro-formkit/form-validation';
  * @attr {String}  helpText - Deprecated, see `slot`.
  * @attr {Boolean} icon - If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
  * @attr {String}  id - Sets the unique ID of the element.
- * @attr {String}  isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer.
  * @attr {String}  label - Deprecated, see `slot`.
  * @attr {String}  lang - defines the language of an element.
- * @attr {String}  max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats.
+ * @attr {String}  max - The maximum value allowed. This only applies for inputs with a type of `number` and all date formats.
  * @attr {Number}  maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
- * @attr {String}  min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats.
+ * @attr {String}  min - The minimum value allowed. This only applies for inputs with a type of `number` and all date formats.
  * @attr {Number}  minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`.
  * @attr {String}  name - Populates the `name` attribute on the input.
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
@@ -78,8 +77,6 @@ export default class BaseInput extends LitElement {
   constructor() {
     super();
 
-    this.isValid = false;
-
     this.icon = false;
     this.disabled = false;
     this.required = false;
@@ -108,6 +105,7 @@ export default class BaseInput extends LitElement {
 
     this.allowedInputTypes = [
       "text",
+      "number",
       "email",
       "password",
       "credit-card",
@@ -200,10 +198,6 @@ export default class BaseInput extends LitElement {
         reflect: true
       },
       errorMessage:            { type: String },
-      isValid: {
-        type: String,
-        reflect: true
-      },
       validity:                {
         type: String,
         reflect: true
@@ -608,7 +602,7 @@ export default class BaseInput extends LitElement {
    * @return {void}
    */
   handleInput() {
-    // Prevent non-numeric characters from being entered on credit card fields.
+    // Prevent non-number characters from being entered on credit card fields.
     if (this.type === 'credit-card') {
       this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, '');
     }
@@ -694,6 +688,13 @@ export default class BaseInput extends LitElement {
     this.validation.validate(this);
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.validation.reset(this);
+  }
 
   /**
    * Sets configuration data used elsewhere based on the `type` attribute.

package/components/input/src/styles/input-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`input{position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input:disabled{background:none;pointer-events:none}`;
+export default css`input{position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}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;appearance:textfield}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/input/src/styles/input.css

@@ -1,3 +1,4 @@
+/* stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type */
 input {
   position: relative;
   overflow: hidden;
@@ -16,7 +17,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/input/src/styles/input.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type */
+
 // Support for fallback values
 @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
 
@@ -22,8 +24,27 @@ input {
     display: none;
   }
 
+  // Hides the number input arrows in Chrome, Safari, Edge, and Opera
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  // Hides the number input arrows in Firefox
+  &[type='number'] {
+    -moz-appearance: textfield; /* For older versions of Firefox */
+    appearance: textfield; /* Standard property */
+  }
+
   &:disabled {
     background: none;
     pointer-events: none;
   }
 }
+
+:host([bordered]) {
+  input {
+    padding: var(--ds-size-400, $ds-size-400) 0 var(--ds-size-100, $ds-size-100);
+  }
+}

package/components/input/src/styles/label-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`label{position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}`;
+export default css`label{position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{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-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}`;

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

@@ -28,18 +28,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;
 }

package/components/input/src/styles/label.scss

@@ -43,9 +43,8 @@ label {
   }
 }
 
-// active label for non-bordered inputs
 @mixin active-label {
-  top: var(--ds-size-25, $ds-size-25);
+  top: var(--ds-size-100, $ds-size-100);
   font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
   transform: unset;
 }

package/components/input/src/styles/notificationIcons-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.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))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}`;
+export default css`.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.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{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}`;

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

@@ -35,6 +35,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 {

package/components/input/src/styles/notificationIcons.scss

@@ -45,6 +45,20 @@
 .clearBtn {
   width: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25)); 
   height: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25));
+  opacity: 0;
+  pointer-events: none;
+}
+
+:host {
+  .wrapper {
+    &:hover,
+    &:focus-within {
+      .clearBtn {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+  }
 }
 
 .passwordBtn {

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.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))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{--size-lgsm: 1.875rem;--size-xlsm: 2.75rem;--size-mdxxs: 1.2rem;position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input:disabled{background:none;pointer-events:none}`;
+export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.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{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{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-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{--size-lgsm: 1.875rem;--size-xlsm: 2.75rem;--size-mdxxs: 1.2rem;position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}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;appearance:textfield}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/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 775ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 615ms
+created ./demo/ in 622ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 420ms
+created ./demo/ in 503ms
 
 > @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 810ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 439ms
+created ./demo/ in 520ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 372ms
+created ./demo/ in 556ms

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 604ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 521ms
+created ./demo/ in 435ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 530ms
+created ./demo/ in 324ms
 
 > @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 495ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 512ms
+created ./demo/ in 435ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 614ms
+created ./demo/ in 561ms

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.