@aurodesignsystem/auro-formkit 2.0.0-beta.2 → 2.0.0-beta.3

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

@@ -35,9 +35,10 @@ import inputVersion from './formkit/auro-inputVersion.js';
 /**
  * @prop {String} value - Value selected for the date picker.
  * @prop {String} valueEnd - Value selected for the second date picker when using date range.
- * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+ * @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} setCustomValidityRangeUnderflow - Custom help text message to display when validity = `rangeUnderflow`.
  * @attr {String} setCustomValidityRangeOverflow - Custom help text message to display when validity = `rangeOverflow`.
  * @attr {String} setCustomValidityValueMissing - Help text message to display when validity = `valueMissing`.
@@ -167,19 +168,18 @@ export class AuroDatePicker extends LitElement {
       },
       setCustomValidity: {
         type: String,
-        reflect: true
+      },
+      setCustomValidityCustomError: {
+        type: String,
       },
       setCustomValidityRangeUnderflow: {
         type: String,
-        reflect: true
       },
       setCustomValidityRangeOverflow: {
         type: String,
-        reflect: true
       },
       setCustomValidityValueMissing: {
         type: String,
-        reflect: true
       },
       validity: {
         type: String,
@@ -374,30 +374,6 @@ export class AuroDatePicker extends LitElement {
     return dateStr;
   }
 
-  /**
-   * Return appropriate error message.
-   * @param {Object} evt - Event passed in from auro-input when the event triggered this function.
-   * @private
-   */
-  getErrorMessage(evt) {
-    if (evt) {
-      const inputClass = evt.target.getAttribute('class');
-      if (inputClass === 'dateFrom') {
-        if (this.inputList[0].validity && this.inputList[0].validity !== 'valid') {
-          this.errorMessage = evt.target.errorMessage;
-        } else {
-          this.errorMessage = undefined;
-        }
-      }
-
-      if (inputClass === 'dateTo') {
-        if (!this.errorMessage && this.inputList[1].validity && this.inputList[1].validity !== 'valid') {
-          this.errorMessage = evt.target.errorMessage;
-        }
-      }
-    }
-  }
-
   /**
    * Changes the calendar's visibility to reflect the value of the central date attribute.
    * @private
@@ -506,13 +482,13 @@ export class AuroDatePicker extends LitElement {
       input.addEventListener('auroFormElement-validated', (evt) => {
         if (evt.detail.validity === 'customError') {
           this.validity = evt.detail.validity;
-          this.setCustomValidity = evt.detail.message;
+          this.errorMessage = evt.detail.message;
         } else if (evt.target === this.inputList[0]) {
           this.validity = evt.detail.validity;
-          this.setCustomValidity = evt.detail.message;
+          this.errorMessage = evt.detail.message;
         } else if (this.inputList.length > 1 && evt.target === this.inputList[1] && (this.inputList[0].validity === 'valid' || this.inputList[0].validity === undefined)) {
           this.validity = evt.detail.validity;
-          this.setCustomValidity = evt.detail.message;
+          this.errorMessage = evt.detail.message;
         }
       });
     });
@@ -802,7 +778,7 @@ export class AuroDatePicker extends LitElement {
       // This is done to prevent error icon from displaying on both inputs in range support
       const lastInput = this.inputList[this.inputList.length - 1];
 
-      if (this.error) {
+      if (this.hasAttribute('error')) {
         // Set the error attribute on the last input
         lastInput.setAttribute('error', this.getAttribute('error'));
       } else {
@@ -920,6 +896,8 @@ export class AuroDatePicker extends LitElement {
               noValidate
               .max="${this.maxDate}"
               .min="${this.minDate}"
+              setCustomValidity="${this.setCustomValidity}"
+              setCustomValidityCustomError="${this.setCustomValidityCustomError}"
               setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
               setCustomValidityRangeOverflow="${this.setCustomValidityRangeOverflow}"
               setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
@@ -937,6 +915,8 @@ export class AuroDatePicker extends LitElement {
                 noValidate
                 .max="${this.maxDate}"
                 .min="${this.minDate}"
+                setCustomValidity="${this.setCustomValidity}"
+                setCustomValidityCustomError="${this.setCustomValidityCustomError}"
                 setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
                 setCustomValidityRangeOverflow="${this.setCustomValidityRangeOverflow}"
                 setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
@@ -967,8 +947,8 @@ export class AuroDatePicker extends LitElement {
               ? html`
                 <slot name="helpText"></slot>
               ` : html`
-                <p class="datepickerElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
-                  ${this.setCustomValidity}
+                <p class="datepickerElement-helpText" role="alert" aria-live="assertive" part="helpText">
+                  ${this.errorMessage}
                 </p>`
             }
           </span>

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

@@ -90,13 +90,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.2s
+created dist in 1.3s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 830ms
+created ./demo/ in 850ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 943ms
+created ./demo/ in 1s
 
 > @auro-formkit/auro-dropdown@3.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component dropdown

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

@@ -7,7 +7,7 @@
 created dist in 1.3s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 955ms
+created ./demo/ in 776ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 634ms
+created ./demo/ in 628ms

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

@@ -69,13 +69,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 688ms
+created dist in 284ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 330ms
+created ./demo/ in 209ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 189ms
+created ./demo/ in 224ms
 
 > @auro-formkit/auro-form@1.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component form

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

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 694ms
+created dist in 477ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 351ms
+created ./demo/ in 273ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 231ms
+created ./demo/ in 309ms

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

@@ -24,6 +24,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: 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 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/borders.scss 6:9  root stylesheet
+
+DEPRECATION WARNING: 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
 
   ╷
@@ -45,6 +55,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: 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 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/color.scss 8:9  root stylesheet
+
+DEPRECATION WARNING: 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
 
   ╷
@@ -65,6 +85,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: 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 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/input.scss 6:9  root stylesheet
+
+DEPRECATION WARNING: 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
 
   ╷
@@ -75,6 +105,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: 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
+
+  ╷
+3 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/label.scss 3:9  root stylesheet
+
+DEPRECATION WARNING: 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
 
   ╷
@@ -85,6 +125,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: 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
+
+  ╷
+2 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/notificationIcons.scss 2:9  root stylesheet
+
+DEPRECATION WARNING: 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
 
    ╷
@@ -133,7 +183,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.scss 31:9  root stylesheet
 
-WARNING: 14 repetitive deprecation warnings omitted.
+WARNING: 18 repetitive deprecation warnings omitted.
 Run in verbose mode to see all warnings.
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

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

@@ -38,6 +38,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: 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 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/borders.scss 6:9  root stylesheet
+
+DEPRECATION WARNING: 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
 
   ╷
@@ -59,6 +69,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: 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 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/color.scss 8:9  root stylesheet
+
+DEPRECATION WARNING: 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
 
   ╷
@@ -79,6 +99,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: 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 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/input.scss 6:9  root stylesheet
+
+DEPRECATION WARNING: 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
 
   ╷
@@ -89,6 +119,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: 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
+
+  ╷
+3 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/label.scss 3:9  root stylesheet
+
+DEPRECATION WARNING: 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
 
   ╷
@@ -99,6 +139,16 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 DEPRECATION WARNING: 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
+
+  ╷
+2 │ @import 'mixins';
+  │         ^^^^^^^^
+  ╵
+    src/styles/notificationIcons.scss 2:9  root stylesheet
+
+DEPRECATION WARNING: 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
 
    ╷
@@ -147,7 +197,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.scss 31:9  root stylesheet
 
-WARNING: 14 repetitive deprecation warnings omitted.
+WARNING: 18 repetitive deprecation warnings omitted.
 Run in verbose mode to see all warnings.
 
 DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
@@ -166,13 +216,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.2s
+created dist in 1.1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1s
+created ./demo/ in 1.3s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 927ms
+created ./demo/ in 982ms
 
 > @auro-formkit/auro-input@4.2.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component input
@@ -228,9 +278,9 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/input/
   ⁕ FILE:src=../apiExamples/value.html 
   ⁕ FILE:src=../apiExamples/maxDate.html 
   ⁕ FILE:src=../apiExamples/maxNumber.html 
-  ⁕ FILE:src=../apiExamples/maxLength.html 
   ⁕ FILE:src=../apiExamples/minDate.html 
   ⁕ FILE:src=../apiExamples/minNumber.html 
+  ⁕ FILE:src=../apiExamples/maxLength.html 
   ⁕ FILE:src=../apiExamples/minLength.html 
   ⁕ FILE:src=../apiExamples/pattern.html 
   ⁕ FILE:src=../apiExamples/borderless.html 
@@ -263,9 +313,9 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/input/
   ⁕ CODE:src=../apiExamples/value.js 
   ⁕ CODE:src=../apiExamples/maxDate.html 
   ⁕ CODE:src=../apiExamples/maxNumber.html 
-  ⁕ CODE:src=../apiExamples/maxLength.html 
   ⁕ CODE:src=../apiExamples/minDate.html 
   ⁕ CODE:src=../apiExamples/minNumber.html 
+  ⁕ CODE:src=../apiExamples/maxLength.html 
   ⁕ CODE:src=../apiExamples/minLength.html 
   ⁕ CODE:src=../apiExamples/pattern.html 
   ⁕ CODE:src=../apiExamples/borderless.html 

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

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 1.3s
+created dist in 1.6s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 794ms
+created ./demo/ in 999ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 737ms
+created ./demo/ in 690ms

package/components/input/.turbo/turbo-sass$colon$render.log

@@ -7,6 +7,7 @@ Rendering src/styles/color.css...
 Rendering src/styles/helpText.css...
 Rendering src/styles/input.css...
 Rendering src/styles/label.css...
+Rendering src/styles/mixins.css...
 Rendering src/styles/notificationIcons.css...
 Rendering src/styles/style.css...
 Rendering src/styles/tokens.css...
@@ -42,6 +43,11 @@ DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart
 
 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.
+
+More info: https://sass-lang.com/d/legacy-js-api
+
+Complete!
 Complete!
 Complete!
 Complete!