npm - @aurodesignsystem/auro-formkit - Versions diffs - 2.0.0-beta.4 → 2.0.0-beta.41 - Mend

@aurodesignsystem/auro-formkit 2.0.0-beta.4 → 2.0.0-beta.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (637) hide show

package/components/input/package.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "name": "@auro-formkit/auro-input",
+  "name": "@aurodesignsystem/auro-input",
   "version": "4.2.0",
   "description": "auro-input HTML custom element",
   "type": "module",
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@aurodesignsystem/auro-button": "^8.2.2",
+    "@aurodesignsystem/auro-helptext": "*",
     "@aurodesignsystem/auro-icon": "^6.1.2",
     "chalk": "^5.3.0",
     "cleave.js": "^1.6.0",
@@ -20,7 +21,7 @@
   },
   "peerDependencies": {
     "@alaskaairux/icons": "^4.43.0",
-    "@aurodesignsystem/design-tokens": "^4.12.1",
+    "@aurodesignsystem/design-tokens": "^4.13.0",
     "@aurodesignsystem/webcorestylesheets": "^5.1.2"
   },
   "devDependencies": {
@@ -29,7 +30,7 @@
     "@auro-formkit/config": "*",
     "@auro-formkit/form-validation": "*",
     "@auro-formkit/typescript": "*",
-    "@aurodesignsystem/design-tokens": "^4.12.1",
+    "@aurodesignsystem/design-tokens": "^4.13.0",
     "@aurodesignsystem/webcorestylesheets": "^5.1.2",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "backstopjs": "^6.3.25",
@@ -65,8 +66,8 @@
     "postCss:component": "node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs",
     "sass:render": "sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js",
     "serve": "web-dev-server",
-    "test": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --coverage",
-    "test:watch": "wtr --watch",
+    "test": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --coverage --port 7703",
+    "test:watch": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --watch --port 7703",
     "types": "tsc --project tsconfig.json",
     "lint": "npm-run-all scssLint esLint",
     "scssLint": "stylelint \"./src/**/*.scss\"",

package/components/input/src/auro-input.js CHANGED Viewed

@@ -20,6 +20,8 @@ import iconVersion from './iconVersion.js';
 import { AuroButton } from '@aurodesignsystem/auro-button/src/auro-button.js';
 import buttonVersion from './buttonVersion.js';
+import '@aurodesignsystem/auro-helptext';
 // build the component class
 export class AuroInput extends BaseInput {
   constructor() {
@@ -226,16 +228,22 @@ export class AuroInput extends BaseInput {
         </div>
       </div>
       <!-- Help text and error message template -->
-      ${!this.validity || this.validity === undefined || this.validity === 'valid'
-      ? html`
-        <p class="inputElement-helpText" id="${this.uniqueId}" part="helpText">
-          <slot name="helptext">${this.getHelpText(this.type)}</slot>
-        </p>`
-      : html`
-        <p class="inputElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
-          ${this.errorMessage}
-        </p>`
-      }
+        ${!this.validity || this.validity === undefined || this.validity === 'valid'
+        ? html`
+        <auro-helptext>
+          <p id="${this.uniqueId}" part="helpText">
+            <slot name="helptext">${this.getHelpText(this.type)}</slot>
+          </p>
+        </auro-helptext>
+        `
+        : html`
+        <auro-helptext error>
+          <p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
+            ${this.errorMessage}
+          </p>
+        </auro-helptext>
+        `
+        }
     `;
   }
 }

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

@@ -651,7 +651,7 @@ export default class BaseInput extends LitElement {
     }
     if (changedProperties.has('error')) {
-      this.validation.validate(this, true);
+      this.validate(true);
     }
     if (changedProperties.has('validity')) {
@@ -843,11 +843,11 @@ export default class BaseInput extends LitElement {
   }
   /**
-   * Public method force validation of input.
-   * @returns {void}
+   * Validates value.
+   * @param {boolean} [force=false] - Whether to force validation.
    */
-  validate() {
-    this.validation.validate(this);
+  validate(force = false) {
+    this.validation.validate(this, force);
   }
   /**

package/components/input/src/styles/color-css.js CHANGED Viewed

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.wrapper{border-color:transparent}.inputElement-helpText{color:var(--ds-auro-input-help-text-color)}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}label{color:var(--ds-auro-input-label-text-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host(:not([borderless])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host(:not([borderless])) .wrapper:focus-within:before{border-bottom-color:transparent}:host([validity]:not([validity=valid])){--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;
+export default css`.wrapper{border-color:transparent}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}label{color:var(--ds-auro-input-label-text-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host(:not([borderless])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host(:not([borderless])) .wrapper:focus-within:before{border-bottom-color:transparent}:host([validity]:not([validity=valid])){--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;

package/components/input/src/styles/color.css CHANGED Viewed

@@ -3,10 +3,6 @@
   border-color: transparent;
 }
-.inputElement-helpText {
-  color: var(--ds-auro-input-help-text-color);
-}
 input {
   background-color: transparent;
   caret-color: var(--ds-auro-input-caret-color);
@@ -48,7 +44,6 @@ label {
 :host([validity]:not([validity=valid])) {
   --ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);
-  --ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816);
 }
 :host([validity]:not([validity=valid])[bordered]) .wrapper {

package/components/input/src/styles/color.scss CHANGED Viewed

@@ -13,10 +13,6 @@
   border-color: transparent;
 }
-.inputElement-helpText {
-  color: var(--ds-auro-input-help-text-color);
-}
 input {
   background-color: transparent;
   caret-color: var(--ds-auro-input-caret-color);
@@ -72,7 +68,6 @@ label {
 :host([validity]:not([validity='valid'])) {
   --ds-auro-input-border-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default});
-  --ds-auro-input-help-text-color: var(--ds-color-text-error-default, #{$ds-color-text-error-default});
 }
 :host([validity]:not([validity='valid'])[bordered]) {

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);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;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)}`;
+export default css`input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem);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;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 CHANGED Viewed

@@ -3,8 +3,8 @@ input {
   transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
   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));
+  min-height: var(--ds-size-700, 3.5rem);
+  max-height: var(--ds-size-700, 3.5rem);
   flex: 1;
   padding: var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);
   margin: 0;

package/components/input/src/styles/input.scss CHANGED Viewed

@@ -10,8 +10,8 @@ input {
   position: relative;
   overflow: hidden;
-  min-height: calc(var(--ds-size-700, $ds-size-700) + var(--ds-size-25, $ds-size-25));
-  max-height: calc(var(--ds-size-700, $ds-size-700) + var(--ds-size-25, $ds-size-25));
+  min-height: var(--ds-size-700, $ds-size-700);
+  max-height: var(--ds-size-700, $ds-size-700);
   flex: 1;
   padding: var(--ds-size-400, $ds-size-400) 0 var(--ds-size-50, $ds-size-50);
   margin: 0;

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

@@ -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))}.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)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .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:1}: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{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;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{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);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;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)}`;
+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))}.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)}.clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .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:1}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}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{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;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{position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem);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;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 CHANGED Viewed

@@ -147,13 +147,6 @@
   visibility: hidden;
 }
-/* stylelint-disable selector-class-pattern */
-.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);
-}
 /* stylelint-disable no-duplicate-selectors, max-nesting-depth, no-descending-specificity */
 input {
   border: unset;
@@ -258,8 +251,8 @@ input {
   transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
   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));
+  min-height: var(--ds-size-700, 3.5rem);
+  max-height: var(--ds-size-700, 3.5rem);
   flex: 1;
   padding: var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);
   margin: 0;

package/components/input/src/styles/style.scss CHANGED Viewed

@@ -28,7 +28,6 @@
 @import '@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement';
 @import './notificationIcons';
-@import './helpText';
 @import './borders';
 @import './label';

package/components/input/src/styles/tokens-css.js CHANGED Viewed

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host{--ds-auro-input-border-color: var(--ds-color-border-secondary-default, #939fad);--ds-auro-input-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #2c67b5);--ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
+export default css`:host{--ds-auro-input-border-color: var(--ds-color-border-secondary-default, #939fad);--ds-auro-input-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #2c67b5);--ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;

package/components/input/src/styles/tokens.css CHANGED Viewed

@@ -2,7 +2,6 @@
   --ds-auro-input-border-color: var(--ds-color-border-secondary-default, #939fad);
   --ds-auro-input-container-color: var(--ds-color-container-primary-default, #ffffff);
   --ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #2c67b5);
-  --ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #6a717c);
   --ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #6a717c);
   --ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #2a2a2a);
   --ds-auro-input-text-color: var(--ds-color-text-primary-default, #2a2a2a);

package/components/input/src/styles/tokens.scss CHANGED Viewed

@@ -4,7 +4,6 @@
   --ds-auro-input-border-color: var(--ds-color-border-secondary-default, #{$ds-color-border-secondary-default});
   --ds-auro-input-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
   --ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #{$ds-color-text-ui-focus-default});
-  --ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #{$ds-color-text-tertiary-default});
   --ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #{$ds-color-text-tertiary-default});
   --ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
   --ds-auro-input-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});

package/components/menu/.turbo/turbo-build$colon$sass.log CHANGED Viewed

@@ -1,8 +1,8 @@
-> @auro-formkit/auro-menu@4.1.4 build:sass
+> @aurodesignsystem/auro-menu@4.1.4 build:sass
 > sass --no-source-map --load-path=../../node_modules "./src/styles/:./src/styles/"
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -12,7 +12,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/color-menuoption.scss 8:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -22,7 +22,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style-menu.scss 9:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -32,7 +32,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style-menu.scss 10:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -42,7 +42,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style-menu.scss 11:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -53,7 +53,7 @@ More info and automated migrator: https://sass-lang.com/d/import
     @aurodesignsystem/webcorestylesheets/src/_core.scss 5:9  @import
     src/styles/style-menu.scss 11:9                          root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -63,7 +63,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style-menuoption.scss 8:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -73,7 +73,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style-menuoption.scss 9:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import

package/components/menu/.turbo/turbo-build$colon$version.log CHANGED Viewed

@@ -1,5 +1,5 @@
-> @auro-formkit/auro-menu@4.1.4 build:version
+> @aurodesignsystem/auro-menu@4.1.4 build:version
 > node ./src/scripts/version.mjs
 Found package.json at: /home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-icon/package.json

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

@@ -1,19 +1,19 @@
-> @auro-formkit/auro-menu@4.1.4 build
+> @aurodesignsystem/auro-menu@4.1.4 build
 > run-s build:version build:sass bundler build:docs types
-> @auro-formkit/auro-menu@4.1.4 build:version
+> @aurodesignsystem/auro-menu@4.1.4 build:version
 > node ./src/scripts/version.mjs
 Found package.json at: /home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-icon/package.json
 Writing version file to: ./src/iconVersion.js
 Successfully wrote version file for @aurodesignsystem/auro-icon
-> @auro-formkit/auro-menu@4.1.4 build:sass
+> @aurodesignsystem/auro-menu@4.1.4 build:sass
 > sass --no-source-map --load-path=../../node_modules "./src/styles/:./src/styles/"
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -23,7 +23,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/color-menuoption.scss 8:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -33,7 +33,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style-menu.scss 9:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -43,7 +43,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style-menu.scss 10:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -53,7 +53,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style-menu.scss 11:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -64,7 +64,7 @@ More info and automated migrator: https://sass-lang.com/d/import
     @aurodesignsystem/webcorestylesheets/src/_core.scss 5:9  @import
     src/styles/style-menu.scss 11:9                          root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -74,7 +74,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style-menuoption.scss 8:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -84,7 +84,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style-menuoption.scss 9:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -96,33 +96,29 @@ More info and automated migrator: https://sass-lang.com/d/import
     src/styles/style-menuoption.scss 9:9                            root stylesheet
-> @auro-formkit/auro-menu@4.1.4 bundler
+> @aurodesignsystem/auro-menu@4.1.4 bundler
 > rollup -c node:@auro-formkit/config/rollup
 [36m
 [1m./src/index.js[22m → [1mdist[22m...[39m
-[32mcreated [1mdist[22m in [1m1.1s[22m[39m
+[32mcreated [1mdist[22m in [1m574ms[22m[39m
 [36m
 [1m./demo/index.js[22m → [1m./demo/[22m...[39m
-[32mcreated [1m./demo/[22m in [1m519ms[22m[39m
+[32mcreated [1m./demo/[22m in [1m416ms[22m[39m
 [36m
 [1m./demo/api.js[22m → [1m./demo/[22m...[39m
-[32mcreated [1m./demo/[22m in [1m375ms[22m[39m
+[32mcreated [1m./demo/[22m in [1m429ms[22m[39m
-> @auro-formkit/auro-menu@4.1.4 build:docs
+> @aurodesignsystem/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
 Web Component Analyzer analyzing 2 files...
-Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/menu/docTemplates/README.md" file...
 ✔ /README.md Updated
  Transforms run
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md
-  ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md
-  ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md
-  ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/localhost.md
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md
@@ -130,6 +126,9 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/menu/d
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/bundles.md
   ⁕ FILE:src=./docs/partials/description.md
   ⁕ FILE:src=./docs/partials/readmeAddlInfo.md
+  ⁕ FILE:src=../../docs/templates/componentInstall.md
+  ⁕ FILE:src=../../docs/templates/componentUsage.md
+  ⁕ FILE:src=../../docs/templates/componentBundleUseModBrowsers.md
   ⁕ FILE:src=./docs/partials/useCases.md
   ⁕ CODE:src=./apiExamples/basic.html
   ⁕ CODE:src=./apiExamples/basic.html
@@ -150,6 +149,7 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/menu/d
   ⁕ FILE:src=./../apiExamples/nocheckmark.html
   ⁕ FILE:src=./../apiExamples/disabledMenu.html
   ⁕ FILE:src=./../apiExamples/matchWord.html
+  ⁕ FILE:src=./../apiExamples/multiSelect.html
   ⁕ FILE:src=./../apiExamples/loading.html
   ⁕ FILE:src=./../apiExamples/scroll.html
   ⁕ FILE:src=./../apiExamples/hr.html
@@ -164,6 +164,7 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/menu/d
   ⁕ CODE:src=./../apiExamples/disabledMenu.html
   ⁕ CODE:src=./../apiExamples/matchWord.js
   ⁕ CODE:src=./../apiExamples/matchWord.html
+  ⁕ CODE:src=./../apiExamples/multiSelect.html
   ⁕ CODE:src=./../apiExamples/loading.js
   ⁕ CODE:src=./../apiExamples/loading.html
   ⁕ CODE:src=./../apiExamples/scroll.html
@@ -179,6 +180,6 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/menu/d
 Docs processed successfully for menu
-> @auro-formkit/auro-menu@4.1.4 types
+> @aurodesignsystem/auro-menu@4.1.4 types
 > tsc --project tsconfig.json

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

@@ -1,13 +1,13 @@
-> @auro-formkit/auro-menu@4.1.4 bundler
+> @aurodesignsystem/auro-menu@4.1.4 bundler
 > rollup -c node:@auro-formkit/config/rollup
 [36m
 [1m./src/index.js[22m → [1mdist[22m...[39m
-[32mcreated [1mdist[22m in [1m923ms[22m[39m
+[32mcreated [1mdist[22m in [1m451ms[22m[39m
 [36m
 [1m./demo/index.js[22m → [1m./demo/[22m...[39m
-[32mcreated [1m./demo/[22m in [1m614ms[22m[39m
+[32mcreated [1m./demo/[22m in [1m284ms[22m[39m
 [36m
 [1m./demo/api.js[22m → [1m./demo/[22m...[39m
-[32mcreated [1m./demo/[22m in [1m531ms[22m[39m
+[32mcreated [1m./demo/[22m in [1m240ms[22m[39m

package/components/menu/.turbo/turbo-postCss$colon$component.log CHANGED Viewed

@@ -1,5 +1,4 @@
-> @auro-formkit/auro-menu@4.1.4 postCss:component
+> @aurodesignsystem/auro-menu@4.1.4 postCss:component
 > node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs
-Unable to scan directory: Error: ENOENT: no such file or directory, scandir '/home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-library/scripts/src'

package/components/menu/.turbo/turbo-sass$colon$render.log CHANGED Viewed

@@ -1,5 +1,5 @@
-> @auro-formkit/auro-menu@4.1.4 sass:render
+> @aurodesignsystem/auro-menu@4.1.4 sass:render
 > sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js
 Rendering src/styles/color-menu.css...
@@ -7,23 +7,23 @@ Rendering src/styles/color-menuoption.css...
 Rendering src/styles/style-menu.css...
 Rendering src/styles/style-menuoption.css...
 Rendering src/styles/tokens.css...
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 More info: https://sass-lang.com/d/legacy-js-api
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 More info: https://sass-lang.com/d/legacy-js-api
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 More info: https://sass-lang.com/d/legacy-js-api
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 More info: https://sass-lang.com/d/legacy-js-api
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 More info: https://sass-lang.com/d/legacy-js-api

package/components/menu/.turbo/turbo-types.log CHANGED Viewed

@@ -1,4 +1,4 @@
-> @auro-formkit/auro-menu@4.1.4 types
+> @aurodesignsystem/auro-menu@4.1.4 types
 > tsc --project tsconfig.json