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

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

@@ -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,
@@ -384,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();
     });
   }
 
@@ -464,7 +469,7 @@ export class AuroCombobox extends LitElement {
     });
 
     this.input.addEventListener('auroFormElement-validated', (evt) => {
-      this.auroInputHelpText = evt.detail.message;
+      this.errorMessage = evt.detail.message;
     });
   }
 
@@ -608,9 +613,6 @@ export class AuroCombobox extends LitElement {
    * @returns {void}
    */
   reset() {
-    // Resets the help text of the combobox
-    this.auroInputHelpText = undefined;
-
     this.input.reset();
     this.validation.reset(this);
   }
@@ -643,10 +645,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);
-    }
   }
 
   /**
@@ -700,19 +698,23 @@ export class AuroCombobox extends LitElement {
             ?noValidate="${this.noValidate}"
             ?disabled="${this.disabled}"
             ?icon="${this.triggerIcon}"
+            setCustomValidity="${this.setCustomValidity}"
+            setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
+            setCustomValidityCustomError="${this.setCustomValidityCustomError}"
             .type="${this.type}">
             <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/counter/.turbo/turbo-build.log

@@ -74,13 +74,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 474ms
+created dist in 662ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 192ms
+created ./demo/ in 219ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 256ms
+created ./demo/ in 265ms
 
 > @auro-formkit/auro-counter@1.0.0 types
 > tsc --project tsconfig.json

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

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 817ms
+created dist in 479ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 266ms
+created ./demo/ in 319ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 282ms
+created ./demo/ in 397ms

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

@@ -376,10 +376,10 @@ More info and automated migrator: https://sass-lang.com/d/import
 created dist in 7.5s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 3.5s
+created ./demo/ in 3.7s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 3.3s
+created ./demo/ in 3.5s
 
 > @auro-formkit/auro-datepicker@3.2.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component datepicker
@@ -421,17 +421,17 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/datepi
  Transforms run
   ⁕ FILE:src=./../docs/api.md 
   ⁕ FILE:src=./../apiExamples/basic.html 
-  ⁕ FILE:src=./../apiExamples/calendarStartAndEndDate.html 
-  ⁕ FILE:src=./../apiExamples/calendarFocusDate.html 
+  ⁕ FILE:src=./../apiExamples/basicRange.html 
   ⁕ FILE:src=./../apiExamples/disabled.html 
   ⁕ FILE:src=./../apiExamples/error.html 
+  ⁕ FILE:src=./../apiExamples/calendarStartAndEndDate.html 
+  ⁕ FILE:src=./../apiExamples/calendarFocusDate.html 
   ⁕ FILE:src=./../apiExamples/maxDate.html 
   ⁕ FILE:src=./../apiExamples/updateMaxDate.html 
   ⁕ FILE:src=./../apiExamples/minDate.html 
   ⁕ FILE:src=./../apiExamples/updateMinDate.html 
   ⁕ FILE:src=./../apiExamples/monthNames.html 
   ⁕ FILE:src=./../apiExamples/noValidate.html 
-  ⁕ FILE:src=./../apiExamples/basicRange.html 
   ⁕ FILE:src=./../apiExamples/required.html 
   ⁕ FILE:src=./../apiExamples/validity.html 
   ⁕ FILE:src=./../apiExamples/value.html 
@@ -448,10 +448,12 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/datepi
   ⁕ FILE:src=./../apiExamples/alertValue.html 
   ⁕ FILE:src=./../apiExamples/inDialog.html 
   ⁕ CODE:src=./../apiExamples/basic.html 
-  ⁕ CODE:src=./../apiExamples/calendarStartAndEndDate.html 
-  ⁕ CODE:src=./../apiExamples/calendarFocusDate.html 
+  ⁕ CODE:src=./../apiExamples/basicRange.html 
   ⁕ CODE:src=./../apiExamples/disabled.html 
   ⁕ CODE:src=./../apiExamples/error.html 
+  ⁕ CODE:src=./../apiExamples/error.js 
+  ⁕ CODE:src=./../apiExamples/calendarStartAndEndDate.html 
+  ⁕ CODE:src=./../apiExamples/calendarFocusDate.html 
   ⁕ CODE:src=./../apiExamples/maxDate.html 
   ⁕ CODE:src=./../apiExamples/updateMaxDate.html 
   ⁕ CODE:src=./../apiExamples/updateMaxDate.js 
@@ -461,7 +463,6 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/datepi
   ⁕ CODE:src=./../apiExamples/monthNames.html 
   ⁕ CODE:src=./../apiExamples/monthNames.js 
   ⁕ CODE:src=./../apiExamples/noValidate.html 
-  ⁕ CODE:src=./../apiExamples/basicRange.html 
   ⁕ CODE:src=./../apiExamples/required.html 
   ⁕ CODE:src=./../apiExamples/validity.html 
   ⁕ CODE:src=./../apiExamples/validity.js 

package/components/datepicker/demo/api.md

@@ -12,7 +12,7 @@
 | [calendarStartDate](#calendarStartDate)               | `calendarStartDate`               | `String`  | "undefined"                                      | The first date that may be displayed in the calendar. |
 | [centralDate](#centralDate)                     | `centralDate`                     | `String`  |                                                  | The date that determines the currently visible month. |
 | [disabled](#disabled)                        | `disabled`                        | `Boolean` | false                                            | If set, disables the datepicker.                 |
-| [error](#error)                           | `error`                           | `String`  |                                                  | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
+| [error](#error)                           | `error`                           | `String`  |                                                  | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
 | [maxDate](#maxDate)                         | `maxDate`                         | `String`  |                                                  | Maximum date. All dates after will be disabled.  |
 | [minDate](#minDate)                         | `minDate`                         | `String`  |                                                  | Minimum date. All dates before will be disabled. |
 | [monthNames](#monthNames)                      | `monthNames`                      | `array`   | ["January","February","March","April","May","June","July","August","September","October","November","December"] |                                                  |
@@ -20,6 +20,7 @@
 | [range](#range)                           | `range`                           | `Boolean` | false                                            | If set, turns on date range functionality in auro-calendar. |
 | [required](#required)                        | `required`                        | `Boolean` | false                                            | Populates the `required` attribute on the input. Used for client-side validation. |
 | [setCustomValidity](#setCustomValidity)               | `setCustomValidity`               | `String`  |                                                  | Sets a custom help text message to display for all validityStates. |
+| [setCustomValidityCustomError](#setCustomValidityCustomError)    | `setCustomValidityCustomError`    | `String`  |                                                  | Custom help text message to display when validity = `customError`. |
 | [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow)  | `setCustomValidityRangeOverflow`  | `String`  |                                                  | Custom help text message to display when validity = `rangeOverflow`. |
 | [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` | `String`  |                                                  | Custom help text message to display when validity = `rangeUnderflow`. |
 | [setCustomValidityValueMissing](#setCustomValidityValueMissing)   | `setCustomValidityValueMissing`   | `String`  |                                                  | Help text message to display when validity = `valueMissing`. |
@@ -95,8 +96,110 @@
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### Basic Range
+
+When used, the datepicker will display two inputs and the component will support selection of dates for a start and end date.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
+  <auro-datepicker range>
+    <span slot="fromLabel">Departure</span>
+    <span slot="toLabel">Return</span>
+    <span slot="mobileDateLabel">Roundtrip</span>
+  </auro-datepicker>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicRange.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basicRange.html -->
+
+```html
+<auro-datepicker range>
+  <span slot="fromLabel">Departure</span>
+  <span slot="toLabel">Return</span>
+  <span slot="mobileDateLabel">Roundtrip</span>
+</auro-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Property Examples
 
+#### disabled
+
+If set, disables the datepicker.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
+  <auro-datepicker disabled>
+    <span slot="label">Choose a date</span>
+  </auro-datepicker>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
+
+```html
+<auro-datepicker disabled>
+  <span slot="label">Choose a date</span>
+</auro-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+#### error
+
+Use the `error` attribute to apply a persistent custom error that supersedes the HTML5 validation logic.
+
+A custom error message can be set using the `error` attribute, or it can be used in conjuction with the `setCustomValidityCustomError` attribute.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/error.html -->
+  <auro-datepicker error="Custom error message" id="errorExample">
+    <span slot="label">Choose a date</span>
+  </auro-datepicker>
+  <auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
+  <auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
+
+```html
+<auro-datepicker error="Custom error message" id="errorExample">
+  <span slot="label">Choose a date</span>
+</auro-datepicker>
+<auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
+<auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/error.js -->
+
+```js
+export function errorExample() {
+  const errorExample = document.querySelector('#errorExample');
+
+  document.querySelector('#undefinedValueExampleBtnAddError').addEventListener('click', () => {
+    errorExample.error = 'Custom New Error';
+  })
+
+  document.querySelector('#undefinedValueExampleBtnRemoveError').addEventListener('click', () => {
+    errorExample.removeAttribute('error');
+  })
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### calendarStartDate & calendarEndDate
 
 The `calendarStartDate` and `calendarEndDate` properties may be used to explicitly control which calendar months _may_ be rendered in the calendar.
@@ -163,62 +266,6 @@ In <strong>mobile</strong> layout, upon first opening the bib, the vertical list
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### disabled
-
-If set, disables the datepicker.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
-  <auro-datepicker disabled>
-    <span slot="label">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
-
-```html
-<auro-datepicker disabled>
-  <span slot="label">Choose a date</span>
-</auro-datepicker>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-#### error
-
-Sets a persistent error state (e.g. an error state returned from the server). This error state will override all default validation until the error attribute is removed from the datepicker.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/error.html -->
-  <auro-datepicker error="Custom error message" id="errorExample">
-    <span slot="label">Choose a date</span>
-  </auro-datepicker>
-  <br/><br/>
-  <auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
-  <auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
-
-```html
-<auro-datepicker error="Custom error message" id="errorExample">
-  <span slot="label">Choose a date</span>
-</auro-datepicker>
-<br/><br/>
-<auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
-<auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
 #### maxDate
 
 To give a higher limit you can bind a date to the `maxDate` property. It is recommended to use the `setCustomValidityRangeOverflow` attribute to define an error message to display when validation fails the maximum date restriction.
@@ -468,7 +515,7 @@ When set, the datepicker will not validate when navigating away from the compone
     <span slot="fromLabel">Choose a date</span>
   </auro-datepicker>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noValidate.html) -->
@@ -482,39 +529,12 @@ When set, the datepicker will not validate when navigating away from the compone
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### range
-
-When used, the datepicker will display two inputs and the component will support selection of dates for a start and end date.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
-  <auro-datepicker range>
-    <span slot="fromLabel">Departure</span>
-    <span slot="toLabel">Return</span>
-    <span slot="mobileDateLabel">Roundtrip</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicRange.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basicRange.html -->
-
-```html
-<auro-datepicker range>
-  <span slot="fromLabel">Departure</span>
-  <span slot="toLabel">Return</span>
-  <span slot="mobileDateLabel">Roundtrip</span>
-</auro-datepicker>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
 #### required
 
 Populates the `required` attribute on the input. Used for client-side validation.
 
+When the validity check fails the validityState, equals `valueMissing`. The error message for the `valueMissing` validityState can be set to a custom string using the `setCustomValidityValueMissing`. There is no default error message defined.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
   <!-- The below content is automatically added from ./../apiExamples/required.html -->