@aurodesignsystem/auro-formkit 1.6.0-beta.9 → 2.0.0-beta.10

package/components/combobox/src/auro-combobox.js

@@ -13,10 +13,10 @@ import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts
 import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 import AuroFormValidation from '@auro-formkit/form-validation';
 
-import { AuroDropdown } from '@auro-formkit/auro-dropdown';
+import { AuroDropdown } from '@aurodesignsystem/auro-dropdown';
 import dropdownVersion from './formkit/auro-dropdownVersion.js';
 
-import { AuroInput } from '@auro-formkit/auro-input';
+import { AuroInput } from '@aurodesignsystem/auro-input';
 import inputVersion from './formkit/auro-inputVersion.js';
 
 // Import touch detection lib
@@ -27,9 +27,11 @@ import styleCss from "./styles/style-css.js";
  * @prop {Object} optionSelected - Specifies the current selected option.
  * @prop {String} value - Value selected for the dropdown menu.
  * @prop {Boolean} checkmark - When attribute is present auro-menu will apply checkmarks to selected options.
- * @attr {Boolean} error - Sets a persistent error state (e.g. an error state returned from the server).
+ * @attr {String} error - When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
  * @attr {String} validity - Specifies the `validityState` this element is in.
  * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
+ * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
+ * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
  * @attr {Boolean} disabled - If set, disables the combobox.
  * @attr {Boolean} noFilter - If set, combobox will not filter menuoptions based in input.
  * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
@@ -95,12 +97,17 @@ export class AuroCombobox extends LitElement {
     return {
       // ...super.properties,
       error: {
-        type: Boolean,
+        type: String,
         reflect: true
       },
       setCustomValidity: {
-        type: String,
-        reflect: true
+        type: String
+      },
+      setCustomValidityCustomError: {
+        type: String
+      },
+      setCustomValidityValueMissing: {
+        type: String
       },
       validity: {
         type: String,
@@ -129,8 +136,7 @@ export class AuroCombobox extends LitElement {
         reflect: true
       },
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
       checkmark: {
         type: Boolean,
@@ -339,9 +345,6 @@ export class AuroCombobox extends LitElement {
 
     // handle the menu event for an option selection
     this.menu.addEventListener('auroMenu-selectedOption', () => {
-      // dropdown bib should hide when making a selection
-      this.hideBib();
-
       if (this.menu.optionSelected) {
         if (this.optionSelected !== this.menu.optionSelected) {
           this.optionSelected = this.menu.optionSelected;
@@ -370,6 +373,9 @@ export class AuroCombobox extends LitElement {
           composed: true,
         }));
       }
+
+      // dropdown bib should hide when making a selection
+      this.hideBib();
     });
 
     this.menu.addEventListener('auroMenu-customEventFired', () => {
@@ -385,9 +391,7 @@ export class AuroCombobox extends LitElement {
     });
 
     this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      this.optionSelected = undefined;
-      this.value = undefined;
-      this.validation.validate(this);
+      this.reset();
     });
   }
 
@@ -416,56 +420,8 @@ export class AuroCombobox extends LitElement {
       }
     });
 
-    this.input.addEventListener('input', () => {
-      this.menu.matchWord = this.input.value;
-      this.optionActive = null;
-
-      if (this.value !== this.input.value) {
-        this.value = this.input.value;
-      }
-
-      if (this.value !== this.menu.value) {
-        this.menu.value = this.value;
-      }
-
-      if (this.optionSelected && this.input.value !== this.optionSelected.textContent) {
-        this.optionSelected = undefined;
-      }
-
-      this.menu.resetOptionsStates();
-
-      this.handleMenuOptions();
-
-      this.handleInputValueChange();
-      // validate only if the value was set programmatically
-      if (document.activeElement !== this) {
-        this.validation.validate(this);
-      }
-
-      // hide the menu if the value is empty otherwise show if there are available suggestions
-      if (this.input.value.length === 0) {
-        this.hideBib();
-        this.classList.remove('combobox-filled');
-      } else if (!this.dropdown.isPopoverVisible && this.availableOptions) {
-        const hasFocus = this.contains(document.activeElement);
-
-        // if the focus is within the combobox, then show the bib
-        // this will prevent the bib from being shown while loading & presetting the value
-        if (hasFocus) {
-          this.showBib();
-        }
-
-        this.classList.add('combobox-filled');
-      }
-
-      // force the dropdown bib to hide if the input value has no matching suggestions
-      if (!this.availableOptions || this.availableOptions.length === 0) {
-        this.hideBib();
-      }
-    });
-
     this.input.addEventListener('auroFormElement-validated', (evt) => {
-      this.auroInputHelpText = evt.detail.message;
+      this.errorMessage = evt.detail.message;
     });
   }
 
@@ -498,8 +454,14 @@ export class AuroCombobox extends LitElement {
    * @returns {void}
    */
   handleInputValueChange() {
+    this.menu.matchWord = this.input.value;
+    this.optionActive = null;
+
+    let hasChange = false;
+
     if (this.value !== this.input.value) {
       this.value = this.input.value;
+      hasChange = true;
 
       this.dispatchEvent(new CustomEvent('auroCombobox-valueSet', {
         bubbles: true,
@@ -508,10 +470,48 @@ export class AuroCombobox extends LitElement {
       }));
     }
 
-    // This check prevents the component showing an error when a required datepicker is first rendered
-    if (this.input.value) {
+    if (this.value !== this.menu.value) {
+      this.menu.value = this.value;
+      hasChange = true;
+    }
+
+    if (this.optionSelected && this.input.value !== this.optionSelected.textContent) {
+      this.optionSelected = undefined;
+      hasChange = true;
+    }
+
+    if (!hasChange) {
+      return;
+    }
+
+    this.menu.resetOptionsStates();
+    this.handleMenuOptions();
+
+    // validate if the value was set programmatically
+    if (document.activeElement !== this) {
       this.validation.validate(this);
     }
+
+    // hide the menu if the value is empty otherwise show if there are available suggestions
+    if (this.input.value && this.input.value.length === 0) {
+      this.hideBib();
+      this.classList.remove('combobox-filled');
+    } else if (!this.dropdown.isPopoverVisible && this.availableOptions) {
+      const hasFocus = this.contains(document.activeElement);
+
+      // if the focus is within the combobox, then show the bib
+      // this will prevent the bib from being shown while loading & presetting the value
+      if (hasFocus) {
+        this.showBib();
+      }
+
+      this.classList.add('combobox-filled');
+    }
+
+    // force the dropdown bib to hide if the input value has no matching suggestions
+    if (!this.availableOptions || this.availableOptions.length === 0) {
+      this.hideBib();
+    }
   }
 
   /**
@@ -604,6 +604,15 @@ export class AuroCombobox extends LitElement {
     this.input.focus();
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.input.reset();
+    this.validation.reset(this);
+  }
+
   updated(changedProperties) {
     // After the component is ready, send direct value changes to auro-menu.
     if (changedProperties.has('value')) {
@@ -632,10 +641,6 @@ export class AuroCombobox extends LitElement {
       this.input.setAttribute('error', this.getAttribute('error'));
       this.validation.validate(this);
     }
-
-    if (changedProperties.has('setCustomValidity')) {
-      this.input.setAttribute('setCustomValidity', this.setCustomValidity);
-    }
   }
 
   /**
@@ -689,19 +694,24 @@ export class AuroCombobox extends LitElement {
             ?noValidate="${this.noValidate}"
             ?disabled="${this.disabled}"
             ?icon="${this.triggerIcon}"
-            .type="${this.type}">
+            setCustomValidity="${this.setCustomValidity}"
+            setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
+            setCustomValidityCustomError="${this.setCustomValidityCustomError}"
+            .type="${this.type}"
+            @input="${this.handleInputValueChange}">
             <slot name="label" slot="label"></slot>
           </${this.inputTag}>
           <div class="menuWrapper">
           </div>
           <span slot="helpText">
-            ${this.auroInputHelpText
+          <!-- Help text and error message template -->
+            ${!this.validity || this.validity === undefined || this.validity === 'valid'
               ? html`
-                ${this.auroInputHelpText}
-              `
-              : html`
                 <slot name="helpText"></slot>
-              `
+              ` : html`
+                <p role="alert" aria-live="assertive" part="helpText">
+                  ${this.errorMessage}
+                </p>`
             }
           </span>
         </${this.dropdownTag}>

package/components/combobox/src/dropdownVersion.js

@@ -0,0 +1 @@
+export default '3.0.0';

package/components/combobox/src/inputVersion.js

@@ -0,0 +1 @@
+export default '4.2.0';

package/components/counter/.turbo/turbo-build$colon$sass.log

@@ -1,8 +1,149 @@
 
-> @auro-formkit/auro-counter@1.0.0 build:sass
+> @aurodesignsystem/auro-counter@1.0.0 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 │ @import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   ╵
+    src/styles/color.scss 12:9  root stylesheet
+
+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
+
+   ╷
+13 │ @import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   ╵
+    src/styles/color.scss 13:9  root stylesheet
+
+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
+
+  ╷
+6 │ @import './libSupport/deprecated';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    @aurodesignsystem/webcorestylesheets/src/_breakpoints.scss 6:9  @import
+    src/styles/color.scss 13:9                                      root stylesheet
+
+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
+
+  ╷
+8 │ @import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    src/styles/counter-button-color.scss 8:9  root stylesheet
+
+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
+
+  ╷
+1 │ @import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    src/styles/counter-button-tokens.scss 1:9  root stylesheet
+
+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
+
+  ╷
+4 │ @import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    src/styles/counter-button.scss 4:9  root stylesheet
+
+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
+
+  ╷
+7 │ @import "@aurodesignsystem/webcorestylesheets/src/breakpoints";
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    src/styles/counter-button.scss 7:9  root stylesheet
+
+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
+
+  ╷
+8 │ @import "@aurodesignsystem/webcorestylesheets/src/core";
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    src/styles/counter-button.scss 8:9  root stylesheet
+
+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
+
+  ╷
+9 │ @import "@aurodesignsystem/webcorestylesheets/src/animation";
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    src/styles/counter-button.scss 9:9  root stylesheet
+
+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
+
+   ╷
+11 │ @import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariableMap";
+   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   ╵
+    src/styles/counter-button.scss 11:9  root stylesheet
+
+WARNING: Deprecated: Inset utility selectors and mixin. Please see https://alaskaairlines.github.io/WebCoreStyleSheets/ for more information.
+    ../../node_modules/@aurodesignsystem/webcorestylesheets/src/libSupport/_deprecated.scss 15:3  deprecated()
+    ../../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/_inset.scss 13:1   @import
+    @aurodesignsystem/webcorestylesheets/src/utilityMixins/_insetUtility.scss 9:9                 @import
+    src/styles/counter-button.scss 16:9                                                           root stylesheet
+
+WARNING: 8 repetitive deprecation warnings omitted.
+Run in verbose mode to see all warnings.
+
+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
+
+   ╷
+10 │ @import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   ╵
+    src/styles/counter-group-color.scss 10:9  root stylesheet
+
+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
+
+   ╷
+11 │ @import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   ╵
+    src/styles/counter-group-color.scss 11:9  root stylesheet
+
+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
+
+  ╷
+6 │ @import './libSupport/deprecated';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    @aurodesignsystem/webcorestylesheets/src/_breakpoints.scss 6:9  @import
+    src/styles/counter-group-color.scss 11:9                        root stylesheet
+
+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 +153,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/counter-group.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
 
@@ -22,7 +163,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/counter-group.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
 
@@ -33,7 +174,7 @@ More info and automated migrator: https://sass-lang.com/d/import
     @aurodesignsystem/webcorestylesheets/src/_breakpoints.scss 6:9  @import
     src/styles/counter-group.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
 
@@ -43,7 +184,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.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 +194,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.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,3 +205,34 @@ More info and automated migrator: https://sass-lang.com/d/import
     @aurodesignsystem/webcorestylesheets/src/_breakpoints.scss 6:9  @import
     src/styles/style.scss 11:9                                      root stylesheet
 
+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
+
+   ╷
+10 │ @import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   ╵
+    src/styles/tokens.scss 10:9  root stylesheet
+
+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
+
+   ╷
+11 │ @import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   ╵
+    src/styles/tokens.scss 11:9  root stylesheet
+
+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
+
+  ╷
+6 │ @import './libSupport/deprecated';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    @aurodesignsystem/webcorestylesheets/src/_breakpoints.scss 6:9  @import
+    src/styles/tokens.scss 11:9                                     root stylesheet
+

package/components/counter/.turbo/turbo-build$colon$version.log

@@ -0,0 +1,10 @@
+
+> @aurodesignsystem/auro-counter@1.0.0 build:version
+> node ./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
+Found package.json at: /home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-dropdown/package.json
+Writing version file to: ./src/dropdownVersion.js
+Successfully wrote version file for @aurodesignsystem/auro-dropdown