@aurodesignsystem/auro-formkit 2.0.0-beta.17 → 2.0.0-beta.19

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

@@ -1,4 +1,4 @@
-/* eslint-disable no-underscore-dangle */
+/* eslint-disable no-underscore-dangle,max-lines */
 
 // Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -37,7 +37,12 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
 export class AuroForm extends LitElement {
   static get properties() {
     return {
-      _formState: { attribute: false },
+      formState: { attribute: false },
+      _validity: { attribute: false },
+      _isInitialState: { attribute: false },
+      _elements: { attribute: false },
+      _submitElements: { attribute: false },
+      _resetElements: { attribute: false },
     };
   }
 
@@ -45,7 +50,24 @@ export class AuroForm extends LitElement {
     super();
 
     /** @type {FormState} */
-    this._formState = {};
+    this.formState = {};
+
+    /** @type {"valid" | "invalid" | null} */
+    this._validity = null;
+    this._isInitialState = true;
+
+    /** @type {(HTMLElement & {reset: () => void})[]} */
+    this._elements = [];
+
+    /** @type {HTMLButtonElement[]} */
+    this._submitelements = [];
+
+    /** @type {HTMLButtonElement[]} */
+    this._resetElements = [];
+
+    // Bind listeners
+    this.reset = this.reset.bind(this);
+    this.submit = this.submit.bind(this);
   }
 
   // Note: button is NOT considered a form element in this context
@@ -79,7 +101,7 @@ export class AuroForm extends LitElement {
     return this._isInElementCollection(AuroForm.formElementTags, element);
   }
 
-  static get submitElementTags() {
+  static get buttonElementTags() {
     return [
       'button',
       'auro-button',
@@ -87,12 +109,12 @@ export class AuroForm extends LitElement {
   }
 
   /**
-   * Check if the tag name is a submit element.
+   * Check if the tag name is a button element.
    * @param {HTMLElement} element - The element to check.
    * @returns {boolean}
    */
-  isSubmitElement(element) {
-    return this._isInElementCollection(AuroForm.submitElementTags, element);
+  isButtonElement(element) {
+    return this._isInElementCollection(AuroForm.buttonElementTags, element);
   }
 
   static get styles() {
@@ -109,45 +131,76 @@ export class AuroForm extends LitElement {
    * @returns {Record<string, string | number | boolean | string[] | null>} The form value.
    */
   get value() {
-    return Object.keys(this._formState).reduce((acc, key) => {
-      acc[key] = this._formState[key].value;
+    return Object.keys(this.formState).reduce((acc, key) => {
+      acc[key] = this.formState[key].value;
       return acc;
     }, {});
   }
 
+  /**
+   * Infer validity status based on current formState.
+   * @private
+   */
+  _calculateValidity() {
+    if (this.isInitialState) {
+      this._validity = null;
+    } else {
+      // go through validity states and return the first invalid state (if any)
+      const invalidKey = Object.keys(this.formState).
+        find((key) => {
+          const formKey = this.formState[key];
+          // these are NOT extra parens
+          // eslint-disable-next-line no-extra-parens
+          return (formKey.validity !== 'valid' && formKey.required) || (formKey.validity !== 'valid' && formKey.value !== null);
+        });
+      this._validity = invalidKey ? 'invalid' : 'valid';
+    }
+  }
+
+  /**
+   * Current validity state of the form, based on form element events.
+   * @returns {"valid" | "invalid"}
+   */
   get validity() {
-    // go through validity states and return the first invalid state (if any)
-    const invalidKey = Object.keys(this._formState).
-      find((key) => {
-        const formKey = this._formState[key];
-
-        // these are NOT extra :(
-        // eslint-disable-next-line no-extra-parens
-        return (formKey.validity !== 'valid' && formKey.required) || (formKey.validity !== 'valid' && formKey.value !== null);
-      });
+    return this._validity;
+  }
+
+  _setInitialState() {
+    const anyTainted = Object.keys(this.formState).some((key) => this.formState[key].validity !== null || this.formState[key].value !== null);
 
-    return invalidKey ? 'invalid' : 'valid';
+    this._isInitialState = !anyTainted;
+
+    this._resetElements.forEach((resetElement) => {
+      if (resetElement.hasAttribute("disabled")) {
+        resetElement.removeAttribute("disabled");
+      }
+    });
   }
 
-  // Below is not implemented yet
+  /**
+   * Mostly internal way to determine if a form is in the initial state.
+   * @returns {boolean}
+   */
   get isInitialState() {
-    const anyTainted = Object.keys(this._formState).some((key) => this._formState[key].validity !== null);
-
-    return !anyTainted;
+    return this._isInitialState;
   }
 
-  getSubmitFunction() {
-    // We return an arrow function here to ensure that the `this` context points at this same AuroForm context.
-    // Otherwise, submission tries to read `this.value` on the button element.
-    return (event) => {
-      event.preventDefault();
+  setDisabledStateOnButtons() {
+    this._resetElements.forEach((element) => {
+      if (this.isInitialState) {
+        element.setAttribute("disabled", "");
+      } else {
+        element.removeAttribute("disabled");
+      }
+    });
 
-      this.dispatchEvent(new CustomEvent('submit', {
-        detail: {
-          value: this.value
-        }
-      }));
-    };
+    this._submitelements.forEach((element) => {
+      if (this.isInitialState || this.validity !== "valid") {
+        element.setAttribute("disabled", "");
+      } else {
+        element.removeAttribute("disabled");
+      }
+    });
   }
 
   /**
@@ -155,16 +208,111 @@ export class AuroForm extends LitElement {
    * @returns {NodeList}
    */
   queryAuroElements() {
-    const formElementQuery = AuroForm.formElementTags.map((tag) => `${tag}[name]`).join(',');
-    const submitterQuery = AuroForm.submitElementTags.map((tag) => `${tag}[type=submit]`).join(',');
+    const queries = [
+      [
+        AuroForm.formElementTags,
+        '[name]'
+      ],
+      [
+        AuroForm.buttonElementTags,
+        '[type=submit]'
+      ],
+      [
+        AuroForm.buttonElementTags,
+        '[type=reset]'
+      ]
+    ];
+
+    return this.querySelectorAll(queries.flatMap(([
+      tags,
+      extraAttributes
+    ]) => tags.map((tag) => `${tag}${extraAttributes}, [${tag}]${extraAttributes}`)).join(', '));
+  }
 
-    // Alternatively, for renamed components...
-    const renamedFormElementQuery = AuroForm.formElementTags.map((tag) => `[${tag}][name]`).join(',');
-    const renamedSubmitterQuery = AuroForm.formElementTags.map((tag) => `[${tag}][type=submit]`).join(',');
+  /**
+   * Initialize (or reinitialize) the form state.
+   */
+  initializeState() {
+    this.formState = {};
+    this._submitelements = [];
+    this._resetElements = [];
+    this._elements = [];
+
+    this.queryAuroElements().forEach((element) => {
+      if (this.isFormElement(element)) {
+        this.formState[element.getAttribute('name')] = {
+          value: element.getAttribute('value'),
+          validity: element.getAttribute('validity'),
+          required: element.hasAttribute('required'),
+          // element
+        };
 
-    const unifiedElementQuery = `${formElementQuery},${submitterQuery},${renamedFormElementQuery},${renamedSubmitterQuery}`;
+        this._elements.push(element);
+      }
 
-    return this.querySelectorAll(unifiedElementQuery);
+      if (this.isButtonElement(element) && element.getAttribute('type') === 'submit') {
+        element.removeEventListener('click', this.submit);
+        element.addEventListener('click', this.submit);
+
+        // Keep record of this element, so we can enable/disable as needed
+        this._submitelements.push(element);
+      }
+
+      if (this.isButtonElement(element) && element.getAttribute('type') === 'reset') {
+        // Keep record of this element, so we can enable/disable as needed
+        element.removeEventListener('click', this.reset);
+        element.addEventListener('click', this.reset);
+
+        this._resetElements.push(element);
+      }
+    });
+
+    // Set enabled/disabled states on buttons
+    this.setDisabledStateOnButtons();
+  }
+
+  reset() {
+    this._elements.forEach((element) => element.reset());
+
+    this.updateComplete.then(() => {
+      this.initializeState();
+      // Initial state must come first - validity can only be null if initial state is true
+      this._setInitialState();
+      this._calculateValidity();
+
+      // Wait for the above changes to run through, then disable submit/reset
+      this.updateComplete.then(() => {
+        this.setDisabledStateOnButtons();
+      });
+    });
+  }
+
+  /**
+   * Submit fires an event called `submit` - just as you would expect from a normal form.
+   *
+   * @example ```
+   * const form = document.querySelector('auro-
+   * ```
+   */
+  submit() {
+    // Steps required to get out of beta:
+    // 1. Submit triggers a forced validation on ALL elements
+    // 2. Wait for validation to complete (this.updateComplete.then or similar)
+    // 3. If still valid, go ahead with submit.
+    this._elements.forEach((element) => {
+      if (element.tagName.toLowerCase() !== "auro-datepicker") {
+        // Next line currently does NOT force
+        element.validate();
+      }
+    });
+
+    this.dispatchEvent(new CustomEvent('submit', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        value: this.value
+      }
+    }));
   }
 
   /**
@@ -186,49 +334,49 @@ export class AuroForm extends LitElement {
 
     // Update the form state when a form element is detected
     slot.addEventListener('input', (event) => {
-
-      /** @type {HTMLInputElement} */
-      const eventTarget = event.target;
-      if (this.isFormElement(eventTarget)) {
-        this._formState[eventTarget.getAttribute("name")].value = eventTarget.value;
+      const targetName = event.target.getAttribute("name");
+      if (!this.isFormElement(event.target) || !targetName) {
+        return;
       }
+
+      this.formState[targetName].value = event.target.value;
+      this.requestUpdate('formState');
     });
 
     slot.addEventListener('auroFormElement-validated', (event) => {
-      const oldValue = this._formState;
+      const targetName = event.target.getAttribute("name");
+      if (!this.isFormElement(event.target) || !targetName) {
+        return;
+      }
 
-      this._formState[event.target.getAttribute("name")].validity = event.detail.validity;
-      this.requestUpdate('formState', oldValue);
+      this.formState[targetName].validity = event.detail.validity;
+      this._calculateValidity();
     });
   }
 
-  onSlotChange() {
-    this._formState = {};
+  updated(_changedProperties) {
+    super.updated(_changedProperties);
 
-    this.queryAuroElements().forEach((element) => {
-      if (this.isFormElement(element)) {
-        this._formState[element.getAttribute('name')] = {
-          value: element.getAttribute('value'),
-          validity: element.getAttribute('validity'),
-          required: element.hasAttribute('required'),
-          element
-        };
-      }
+    if (_changedProperties.has("formState")) {
+      this._setInitialState();
 
-      if (this.isSubmitElement(element) && element.getAttribute('type') === 'submit') {
-        element.removeEventListener('click', this.getSubmitFunction());
-        element.addEventListener('click', this.getSubmitFunction());
-      }
-    });
+      // Automatically infer disabled state now
+      this.setDisabledStateOnButtons();
+    }
+
+    if (_changedProperties.has("_validity")) {
+      this._setInitialState();
+    }
+  }
+
+  onSlotChange() {
+    this.initializeState();
   }
 
   // function that renders the HTML and CSS into the scope of the component
   render() {
     return html`
         <form>
-          <p>Value: ${JSON.stringify(this.value)}</p>
-          <p>Validity: ${this.validity}</p>
-          <h3>Auro form example</h3>
           <slot @slotchange="${this.onSlotChange}"></slot>
         </form>
     `;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.testClass{display:inline-block;padding:var(--auro-text-body-size-default);border:1px solid var(--auro-color-border-error-on-light);color:var(--auro-color-border-error-on-light)}:focus-visible{background-color:var(--auro-color-border-error-on-light);color:var(--auro-color-base-white)}:host form{display:block;width:100%;padding:1rem;border:1px solid #2a2a2a;border-radius:1rem}`;
+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}.testClass{display:inline-block;padding:var(--auro-text-body-size-default);border:1px solid var(--auro-color-border-error-on-light);color:var(--auro-color-border-error-on-light)}:focus-visible{background-color:var(--auro-color-border-error-on-light);color:var(--auro-color-base-white)}`;

package/components/form/src/styles/style.css

@@ -34,11 +34,3 @@
   background-color: var(--auro-color-border-error-on-light);
   color: var(--auro-color-base-white);
 }
-
-:host form {
-  display: block;
-  width: 100%;
-  padding: 1rem;
-  border: 1px solid #2a2a2a;
-  border-radius: 1rem;
-}

package/components/form/src/styles/style.scss

@@ -35,13 +35,3 @@
   background-color: var(--auro-color-border-error-on-light);
   color: var(--auro-color-base-white);
 }
-
-:host {
-  form {
-    display: block;
-    width: 100%;
-    padding: 1rem;
-    border: 1px solid #2a2a2a;
-    border-radius: 1rem;
-  }
-}

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

@@ -216,13 +216,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1s
+created dist in 1.3s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1.1s
+created ./demo/ in 972ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 1s
+created ./demo/ in 912ms
 
 > @aurodesignsystem/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

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

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 1.5s
+created dist in 1.3s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1s
+created ./demo/ in 843ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 967ms
+created ./demo/ in 732ms

package/components/input/README.md

@@ -89,7 +89,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.16/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.18/dist/auro-input__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-input use cases

package/components/input/demo/api.md

@@ -54,11 +54,11 @@ Generate unique names for dependency components.
 
 ## Methods
 
-| Method       | Type          | Description                              |
-|--------------|---------------|------------------------------------------|
-| [isDateType](#isDateType) | `(): boolean` |                                          |
-| [reset](#reset)      | `(): void`    | Resets component to initial state.       |
-| [validate](#validate)   | `(): void`    | Public method force validation of input. |
+| Method       | Type                                   | Description                                      |
+|--------------|----------------------------------------|--------------------------------------------------|
+| [isDateType](#isDateType) | `(): boolean`                          |                                                  |
+| [reset](#reset)      | `(): void`                             | Resets component to initial state.               |
+| [validate](#validate)   | `(force?: boolean \| undefined): void` | Validates value<br /><br />**force**: Whether to force validation. |
 
 ## Events
 

package/components/input/demo/api.min.js

@@ -2827,7 +2827,7 @@ class BaseInput extends r {
     }
 
     if (changedProperties.has('error')) {
-      this.validation.validate(this, true);
+      this.validate(true);
     }
 
     if (changedProperties.has('validity')) {
@@ -3019,11 +3019,11 @@ class BaseInput extends r {
   }
 
   /**
-   * 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/demo/index.min.js

@@ -2765,7 +2765,7 @@ class BaseInput extends r {
     }
 
     if (changedProperties.has('error')) {
-      this.validation.validate(this, true);
+      this.validate(true);
     }
 
     if (changedProperties.has('validity')) {
@@ -2957,11 +2957,11 @@ class BaseInput extends r {
   }
 
   /**
-   * 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/dist/base-input.d.ts

@@ -347,10 +347,10 @@ export default class BaseInput extends LitElement {
      */
     private getActiveElement;
     /**
-     * Public method force validation of input.
-     * @returns {void}
+     * Validates value
+     * @param {boolean} [force=false] - Whether to force validation.
      */
-    validate(): void;
+    validate(force?: boolean): void;
     /**
      * Resets component to initial state.
      * @returns {void}

package/components/input/dist/base-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-input.d.ts","sourceRoot":"","sources":["../src/base-input.js"],"names":[],"mappings":"AAoBA;;;;;;;;;;;;;;;;GAgBG;AAEH;IA+EE;QAGI;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;;;;;QAUH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;;MAMN;IAGD,+CAMC;IArVC,cAAiB;IACjB,kBAAqB;IACrB,kBAAqB;IACrB,oBAAuB;IACvB,SAAoB;IACpB,SAAoB;IACpB,eAA0B;IAC1B,eAA0B;IAC1B,qBAAwB;IACxB,iCAAyC;IAG3C;;;;OAIG;IACH,wBAsDC;IArDC,+BAA0C;IAC1C,mBAA8B;IAC9B,kBAAyB;IACzB,2BAAmC;IACnC,kBAAqB;IACrB,cAAuC;IAEvC,4BASC;IAED,yBAQC;IAED,8BAMC;IAED;;;OAGG;IACH,iCAIC;IAMD,iBAEwC;IAwZ1C,qBAwEC;IAlEC,+BAA0D;IAC1D,+BAA0D;IAIxD,6BAAqD;IAmC7C,uBAA0D;IA4BtE;;;;OAIG;IACH,2BAHW,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GACd,IAAI,CA6DhB;IArDG,iBAAwB;IAuD5B;;;OAGG;IACH,2BAkBC;IAED;;;OAGG;IACH,6BAMC;IAED;;;OAGG;IACH,sBAMC;IAED;;;;OAIG;IACH,cAEC;IAED;;;;;OAKG;IACH,sBAIC;IAED;;;;OAIG;IACH,2BAUC;IAED;;;;OAIG;IACH,yBAOC;IALC,cAAe;IAOjB;;;OAGG;IACH,oBA0BC;IAED;;;;OAIG;IACH,sBAWC;IAED;;;;OAIG;IACH,mBAMC;IAED;;;;;OAKG;IACH,yBAYC;IAED;;;OAGG;IACH,YAFa,IAAI,CAIhB;IAED;;;OAGG;IACH,SAFa,IAAI,CAIhB;IAED;;;;OAIG;IACH,6BAYC;IAVG,sBAAuB;IAY3B;;;;;OAKG;IACH,qBAMC;IAED;;;;;OAKG;IACH,oBAwBC;IAED;;;;OAIG;IACH,gCAGC;IAED;;;;OAIG;IACH,uBAkBC;IAED;;;;OAIG;IACH,wBAQC;IAED;;;;OAIG;IACH,2BAQC;IAKD;;;;OAIG;IACH,0BAWC;IALC,kBAAqC;IAOvC;;;;OAIG;IACH,oCAqFC;CACF;2BAtkC+B,KAAK;+BAUN,+BAA+B"}
+{"version":3,"file":"base-input.d.ts","sourceRoot":"","sources":["../src/base-input.js"],"names":[],"mappings":"AAoBA;;;;;;;;;;;;;;;;GAgBG;AAEH;IA+EE;QAGI;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;;;;;QAUH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;;MAMN;IAGD,+CAMC;IArVC,cAAiB;IACjB,kBAAqB;IACrB,kBAAqB;IACrB,oBAAuB;IACvB,SAAoB;IACpB,SAAoB;IACpB,eAA0B;IAC1B,eAA0B;IAC1B,qBAAwB;IACxB,iCAAyC;IAG3C;;;;OAIG;IACH,wBAsDC;IArDC,+BAA0C;IAC1C,mBAA8B;IAC9B,kBAAyB;IACzB,2BAAmC;IACnC,kBAAqB;IACrB,cAAuC;IAEvC,4BASC;IAED,yBAQC;IAED,8BAMC;IAED;;;OAGG;IACH,iCAIC;IAMD,iBAEwC;IAwZ1C,qBAwEC;IAlEC,+BAA0D;IAC1D,+BAA0D;IAIxD,6BAAqD;IAmC7C,uBAA0D;IA4BtE;;;;OAIG;IACH,2BAHW,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GACd,IAAI,CA6DhB;IArDG,iBAAwB;IAuD5B;;;OAGG;IACH,2BAkBC;IAED;;;OAGG;IACH,6BAMC;IAED;;;OAGG;IACH,sBAMC;IAED;;;;OAIG;IACH,cAEC;IAED;;;;;OAKG;IACH,sBAIC;IAED;;;;OAIG;IACH,2BAUC;IAED;;;;OAIG;IACH,yBAOC;IALC,cAAe;IAOjB;;;OAGG;IACH,oBA0BC;IAED;;;;OAIG;IACH,sBAWC;IAED;;;;OAIG;IACH,mBAMC;IAED;;;;;OAKG;IACH,yBAYC;IAED;;;OAGG;IACH,iBAFW,OAAO,QAIjB;IAED;;;OAGG;IACH,SAFa,IAAI,CAIhB;IAED;;;;OAIG;IACH,6BAYC;IAVG,sBAAuB;IAY3B;;;;;OAKG;IACH,qBAMC;IAED;;;;;OAKG;IACH,oBAwBC;IAED;;;;OAIG;IACH,gCAGC;IAED;;;;OAIG;IACH,uBAkBC;IAED;;;;OAIG;IACH,wBAQC;IAED;;;;OAIG;IACH,2BAQC;IAKD;;;;OAIG;IACH,0BAWC;IALC,kBAAqC;IAOvC;;;;OAIG;IACH,oCAqFC;CACF;2BAtkC+B,KAAK;+BAUN,+BAA+B"}

package/components/input/dist/index.js

@@ -2748,7 +2748,7 @@ class BaseInput extends r {
     }
 
     if (changedProperties.has('error')) {
-      this.validation.validate(this, true);
+      this.validate(true);
     }
 
     if (changedProperties.has('validity')) {
@@ -2940,11 +2940,11 @@ class BaseInput extends r {
   }
 
   /**
-   * 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/base-input.js

@@ -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/menu/.turbo/turbo-build.log

@@ -101,13 +101,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 873ms
+created dist in 578ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 417ms
+created ./demo/ in 588ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 456ms
+created ./demo/ in 526ms
 
 > @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

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

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 1s
+created dist in 849ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 824ms
+created ./demo/ in 660ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 571ms
+created ./demo/ in 688ms

package/components/menu/README.md

@@ -100,7 +100,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.16/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.18/dist/auro-menu__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-menu use cases

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

@@ -138,13 +138,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 753ms
+created dist in 663ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 406ms
+created ./demo/ in 437ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 504ms
+created ./demo/ in 419ms
 
 > @aurodesignsystem/auro-radio@4.1.1 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component radio