@aurodesignsystem/auro-formkit 2.0.0-beta.26 → 2.0.0-beta.28

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

@@ -235,6 +235,22 @@ class AuroForm extends r {
     }, {});
   }
 
+  /**
+   * Getter for internal _submitElements.
+   * @returns {HTMLButtonElement[]}
+   */
+  get submitElements() {
+    return this._submitelements;
+  }
+
+  /**
+   * Getter for internal _resetElements.
+   * @returns {HTMLButtonElement[]}
+   */
+  get resetElements() {
+    return this._resetElements;
+  }
+
   /**
    * Infer validity status based on current formState.
    * @private
@@ -260,6 +276,9 @@ class AuroForm extends r {
    * @returns {"valid" | "invalid"}
    */
   get validity() {
+    // Force calculate, as sometimes validity won't reflect
+    // the latest value while in-between renders.
+    this._calculateValidity();
     return this._validity;
   }
 
@@ -327,6 +346,27 @@ class AuroForm extends r {
     ]) => tags.map((tag) => `${tag}${extraAttributes}, [${tag}]${extraAttributes}`)).join(', '));
   }
 
+  /**
+   * Store an element in state and on the _elements array.
+   * @param {HTMLElement} element - The element to add to our state.
+   * @private
+   */
+  _addElementToState(element) {
+    const targetName = element.getAttribute('name');
+    if (this.formState[targetName]) {
+      return;
+    }
+
+    this.formState[targetName] = {
+      value: element.getAttribute('value'),
+      validity: element.validity || null,
+      required: element.hasAttribute('required'),
+      // element
+    };
+
+    this._elements.push(element);
+  }
+
   /**
    * Initialize (or reinitialize) the form state.
    */
@@ -338,14 +378,7 @@ class AuroForm extends r {
 
     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
-        };
-
-        this._elements.push(element);
+        this._addElementToState(element);
       }
 
       if (this.isButtonElement(element) && element.getAttribute('type') === 'submit') {
@@ -369,7 +402,11 @@ class AuroForm extends r {
     this.setDisabledStateOnButtons();
   }
 
+  /**
+   * Reset fires an event called `reset` - just as you would expect from a normal form.
+   */
   reset() {
+    const previousValue = this.value;
     this._elements.forEach((element) => element.reset());
 
     this.updateComplete.then(() => {
@@ -381,16 +418,20 @@ class AuroForm extends r {
       // Wait for the above changes to run through, then disable submit/reset
       this.updateComplete.then(() => {
         this.setDisabledStateOnButtons();
+
+        this.dispatchEvent(new CustomEvent('reset', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            previousValue
+          }
+        }));
       });
     });
   }
 
   /**
    * 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:
@@ -437,13 +478,16 @@ class AuroForm extends r {
         return;
       }
 
+      // Occasionally, a form element will emit their event before the form can read data about the form element.
+      if (!this.formState[targetName] && this.isFormElement(event.target)) {
+        this._addElementToState(event.target);
+      }
+
       // Check special input types and handle their edge cases
       if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
         this.formState[targetName].value = event.target.values;
-
         this.requestUpdate('formState');
       } else {
-        // "Normal" input value handling, just assign the value
         this.formState[targetName].value = event.target.value;
         this.requestUpdate('formState');
       }
@@ -455,6 +499,10 @@ class AuroForm extends r {
         return;
       }
 
+      if (!this.formState[targetName]) {
+        this._addElementToState(event.target);
+      }
+
       this.formState[targetName].validity = event.detail.validity;
       this._calculateValidity();
     });

package/components/form/demo/index.min.js

@@ -235,6 +235,22 @@ class AuroForm extends r {
     }, {});
   }
 
+  /**
+   * Getter for internal _submitElements.
+   * @returns {HTMLButtonElement[]}
+   */
+  get submitElements() {
+    return this._submitelements;
+  }
+
+  /**
+   * Getter for internal _resetElements.
+   * @returns {HTMLButtonElement[]}
+   */
+  get resetElements() {
+    return this._resetElements;
+  }
+
   /**
    * Infer validity status based on current formState.
    * @private
@@ -260,6 +276,9 @@ class AuroForm extends r {
    * @returns {"valid" | "invalid"}
    */
   get validity() {
+    // Force calculate, as sometimes validity won't reflect
+    // the latest value while in-between renders.
+    this._calculateValidity();
     return this._validity;
   }
 
@@ -327,6 +346,27 @@ class AuroForm extends r {
     ]) => tags.map((tag) => `${tag}${extraAttributes}, [${tag}]${extraAttributes}`)).join(', '));
   }
 
+  /**
+   * Store an element in state and on the _elements array.
+   * @param {HTMLElement} element - The element to add to our state.
+   * @private
+   */
+  _addElementToState(element) {
+    const targetName = element.getAttribute('name');
+    if (this.formState[targetName]) {
+      return;
+    }
+
+    this.formState[targetName] = {
+      value: element.getAttribute('value'),
+      validity: element.validity || null,
+      required: element.hasAttribute('required'),
+      // element
+    };
+
+    this._elements.push(element);
+  }
+
   /**
    * Initialize (or reinitialize) the form state.
    */
@@ -338,14 +378,7 @@ class AuroForm extends r {
 
     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
-        };
-
-        this._elements.push(element);
+        this._addElementToState(element);
       }
 
       if (this.isButtonElement(element) && element.getAttribute('type') === 'submit') {
@@ -369,7 +402,11 @@ class AuroForm extends r {
     this.setDisabledStateOnButtons();
   }
 
+  /**
+   * Reset fires an event called `reset` - just as you would expect from a normal form.
+   */
   reset() {
+    const previousValue = this.value;
     this._elements.forEach((element) => element.reset());
 
     this.updateComplete.then(() => {
@@ -381,16 +418,20 @@ class AuroForm extends r {
       // Wait for the above changes to run through, then disable submit/reset
       this.updateComplete.then(() => {
         this.setDisabledStateOnButtons();
+
+        this.dispatchEvent(new CustomEvent('reset', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            previousValue
+          }
+        }));
       });
     });
   }
 
   /**
    * 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:
@@ -437,13 +478,16 @@ class AuroForm extends r {
         return;
       }
 
+      // Occasionally, a form element will emit their event before the form can read data about the form element.
+      if (!this.formState[targetName] && this.isFormElement(event.target)) {
+        this._addElementToState(event.target);
+      }
+
       // Check special input types and handle their edge cases
       if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
         this.formState[targetName].value = event.target.values;
-
         this.requestUpdate('formState');
       } else {
-        // "Normal" input value handling, just assign the value
         this.formState[targetName].value = event.target.value;
         this.requestUpdate('formState');
       }
@@ -455,6 +499,10 @@ class AuroForm extends r {
         return;
       }
 
+      if (!this.formState[targetName]) {
+        this._addElementToState(event.target);
+      }
+
       this.formState[targetName].validity = event.detail.validity;
       this._calculateValidity();
     });

package/components/form/dist/auro-form.d.ts

@@ -60,13 +60,12 @@ export class AuroForm extends LitElement {
     _submitelements: HTMLButtonElement[];
     /** @type {HTMLButtonElement[]} */
     _resetElements: HTMLButtonElement[];
+    /**
+     * Reset fires an event called `reset` - just as you would expect from a normal form.
+     */
     reset(): void;
     /**
      * Submit fires an event called `submit` - just as you would expect from a normal form.
-     *
-     * @example ```
-     * const form = document.querySelector('auro-
-     * ```
      */
     submit(): void;
     /**
@@ -107,6 +106,16 @@ export class AuroForm extends LitElement {
      * @returns {Record<string, string | number | boolean | string[] | null>} The form value.
      */
     get value(): Record<string, string | number | boolean | string[] | null>;
+    /**
+     * Getter for internal _submitElements.
+     * @returns {HTMLButtonElement[]}
+     */
+    get submitElements(): HTMLButtonElement[];
+    /**
+     * Getter for internal _resetElements.
+     * @returns {HTMLButtonElement[]}
+     */
+    get resetElements(): HTMLButtonElement[];
     /**
      * Infer validity status based on current formState.
      * @private
@@ -129,6 +138,12 @@ export class AuroForm extends LitElement {
      * @returns {NodeList}
      */
     queryAuroElements(): NodeList;
+    /**
+     * Store an element in state and on the _elements array.
+     * @param {HTMLElement} element - The element to add to our state.
+     * @private
+     */
+    private _addElementToState;
     /**
      * Initialize (or reinitialize) the form state.
      */

package/components/form/dist/auro-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auro-form.d.ts","sourceRoot":"","sources":["../src/auro-form.js"],"names":[],"mappings":"AAcA;;;;;;GAMG;AAEH;;GAEG;AAIH;;;;;GAKG;AAGH;IACE;;;;;;;;;;;;;;;;;;;MASC;IA4BD,uCAOC;IAiCD,yCAKC;IAWD,+CAEC;IAoMD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA/RC,wBAAwB;IACxB,WADW,SAAS,CACD;IAEnB,yCAAyC;IACzC,WADW,OAAO,GAAG,SAAS,GAAG,IAAI,CAChB;IACrB,yBAA2B;IAE3B,oDAAoD;IACpD,WADW,CAAC,WAAW,GAAG;QAAC,KAAK,EAAE,MAAM,IAAI,CAAA;KAAC,CAAC,EAAE,CAC7B;IAEnB,kCAAkC;IAClC,iBADW,iBAAiB,EAAE,CACL;IAEzB,kCAAkC;IAClC,gBADW,iBAAiB,EAAE,CACN;IA2N1B,cAcC;IAED;;;;;;OAMG;IACH,eAmBC;IAnPD;;;;;;OAMG;IACH,sBAEC;IAED;;;;;;OAMG;IACH,+BAEC;IAED;;;;OAIG;IACH,uBAHW,WAAW,GACT,OAAO,CAInB;IASD;;;;OAIG;IACH,yBAHW,WAAW,GACT,OAAO,CAInB;IAMD;;;;;;;;OAQG;IACH,aAFa,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC,CAOvE;IAED;;;OAGG;IACH,2BAcC;IAED;;;OAGG;IACH,gBAFa,OAAO,GAAG,SAAS,CAI/B;IAED,yBAUC;IAED;;;OAGG;IACH,sBAFa,OAAO,CAInB;IAED,kCAgBC;IAED;;;OAGG;IACH,qBAFa,QAAQ,CAsBpB;IAED;;OAEG;IACH,wBAqCC;IA0DD,4CAiCC;IAED,uCAaC;IAED,qBAEC;IAGD,+CAMC;CACF;;;;;;;;WAlYa,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI;;;;cAC3C,aAAa;;;;cACb,OAAO;;;;aACP,WAAW;;;;;;;;2BAXQ,KAAK"}
+{"version":3,"file":"auro-form.d.ts","sourceRoot":"","sources":["../src/auro-form.js"],"names":[],"mappings":"AAcA;;;;;;GAMG;AAEH;;GAEG;AAIH;;;;;GAKG;AAGH;IACE;;;;;;;;;;;;;;;;;;;MASC;IA4BD,uCAOC;IAiCD,yCAKC;IAWD,+CAEC;IA6OD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAxUC,wBAAwB;IACxB,WADW,SAAS,CACD;IAEnB,yCAAyC;IACzC,WADW,OAAO,GAAG,SAAS,GAAG,IAAI,CAChB;IACrB,yBAA2B;IAE3B,oDAAoD;IACpD,WADW,CAAC,WAAW,GAAG;QAAC,KAAK,EAAE,MAAM,IAAI,CAAA;KAAC,CAAC,EAAE,CAC7B;IAEnB,kCAAkC;IAClC,iBADW,iBAAiB,EAAE,CACL;IAEzB,kCAAkC;IAClC,gBADW,iBAAiB,EAAE,CACN;IA4P1B;;OAEG;IACH,cAuBC;IAED;;OAEG;IACH,eAmBC;IA5RD;;;;;;OAMG;IACH,sBAEC;IAED;;;;;;OAMG;IACH,+BAEC;IAED;;;;OAIG;IACH,uBAHW,WAAW,GACT,OAAO,CAInB;IASD;;;;OAIG;IACH,yBAHW,WAAW,GACT,OAAO,CAInB;IAMD;;;;;;;;OAQG;IACH,aAFa,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC,CAOvE;IAED;;;OAGG;IACH,sBAFa,iBAAiB,EAAE,CAI/B;IAED;;;OAGG;IACH,qBAFa,iBAAiB,EAAE,CAI/B;IAED;;;OAGG;IACH,2BAcC;IAED;;;OAGG;IACH,gBAFa,OAAO,GAAG,SAAS,CAO/B;IAED,yBAUC;IAED;;;OAGG;IACH,sBAFa,OAAO,CAInB;IAED,kCAgBC;IAED;;;OAGG;IACH,qBAFa,QAAQ,CAsBpB;IAED;;;;OAIG;IACH,2BAcC;IAED;;OAEG;IACH,wBA8BC;IAkED,4CAwCC;IAED,uCAaC;IAED,qBAEC;IAGD,+CAMC;CACF;;;;;;;;WAlba,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI;;;;cAC3C,aAAa;;;;cACb,OAAO;;;;aACP,WAAW;;;;;;;;2BAXQ,KAAK"}

package/components/form/dist/index.js

@@ -235,6 +235,22 @@ class AuroForm extends r {
     }, {});
   }
 
+  /**
+   * Getter for internal _submitElements.
+   * @returns {HTMLButtonElement[]}
+   */
+  get submitElements() {
+    return this._submitelements;
+  }
+
+  /**
+   * Getter for internal _resetElements.
+   * @returns {HTMLButtonElement[]}
+   */
+  get resetElements() {
+    return this._resetElements;
+  }
+
   /**
    * Infer validity status based on current formState.
    * @private
@@ -260,6 +276,9 @@ class AuroForm extends r {
    * @returns {"valid" | "invalid"}
    */
   get validity() {
+    // Force calculate, as sometimes validity won't reflect
+    // the latest value while in-between renders.
+    this._calculateValidity();
     return this._validity;
   }
 
@@ -327,6 +346,27 @@ class AuroForm extends r {
     ]) => tags.map((tag) => `${tag}${extraAttributes}, [${tag}]${extraAttributes}`)).join(', '));
   }
 
+  /**
+   * Store an element in state and on the _elements array.
+   * @param {HTMLElement} element - The element to add to our state.
+   * @private
+   */
+  _addElementToState(element) {
+    const targetName = element.getAttribute('name');
+    if (this.formState[targetName]) {
+      return;
+    }
+
+    this.formState[targetName] = {
+      value: element.getAttribute('value'),
+      validity: element.validity || null,
+      required: element.hasAttribute('required'),
+      // element
+    };
+
+    this._elements.push(element);
+  }
+
   /**
    * Initialize (or reinitialize) the form state.
    */
@@ -338,14 +378,7 @@ class AuroForm extends r {
 
     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
-        };
-
-        this._elements.push(element);
+        this._addElementToState(element);
       }
 
       if (this.isButtonElement(element) && element.getAttribute('type') === 'submit') {
@@ -369,7 +402,11 @@ class AuroForm extends r {
     this.setDisabledStateOnButtons();
   }
 
+  /**
+   * Reset fires an event called `reset` - just as you would expect from a normal form.
+   */
   reset() {
+    const previousValue = this.value;
     this._elements.forEach((element) => element.reset());
 
     this.updateComplete.then(() => {
@@ -381,16 +418,20 @@ class AuroForm extends r {
       // Wait for the above changes to run through, then disable submit/reset
       this.updateComplete.then(() => {
         this.setDisabledStateOnButtons();
+
+        this.dispatchEvent(new CustomEvent('reset', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            previousValue
+          }
+        }));
       });
     });
   }
 
   /**
    * 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:
@@ -437,13 +478,16 @@ class AuroForm extends r {
         return;
       }
 
+      // Occasionally, a form element will emit their event before the form can read data about the form element.
+      if (!this.formState[targetName] && this.isFormElement(event.target)) {
+        this._addElementToState(event.target);
+      }
+
       // Check special input types and handle their edge cases
       if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
         this.formState[targetName].value = event.target.values;
-
         this.requestUpdate('formState');
       } else {
-        // "Normal" input value handling, just assign the value
         this.formState[targetName].value = event.target.value;
         this.requestUpdate('formState');
       }
@@ -455,6 +499,10 @@ class AuroForm extends r {
         return;
       }
 
+      if (!this.formState[targetName]) {
+        this._addElementToState(event.target);
+      }
+
       this.formState[targetName].validity = event.detail.validity;
       this._calculateValidity();
     });

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

@@ -148,6 +148,22 @@ export class AuroForm extends LitElement {
     }, {});
   }
 
+  /**
+   * Getter for internal _submitElements.
+   * @returns {HTMLButtonElement[]}
+   */
+  get submitElements() {
+    return this._submitelements;
+  }
+
+  /**
+   * Getter for internal _resetElements.
+   * @returns {HTMLButtonElement[]}
+   */
+  get resetElements() {
+    return this._resetElements;
+  }
+
   /**
    * Infer validity status based on current formState.
    * @private
@@ -173,6 +189,9 @@ export class AuroForm extends LitElement {
    * @returns {"valid" | "invalid"}
    */
   get validity() {
+    // Force calculate, as sometimes validity won't reflect
+    // the latest value while in-between renders.
+    this._calculateValidity();
     return this._validity;
   }
 
@@ -240,6 +259,27 @@ export class AuroForm extends LitElement {
     ]) => tags.map((tag) => `${tag}${extraAttributes}, [${tag}]${extraAttributes}`)).join(', '));
   }
 
+  /**
+   * Store an element in state and on the _elements array.
+   * @param {HTMLElement} element - The element to add to our state.
+   * @private
+   */
+  _addElementToState(element) {
+    const targetName = element.getAttribute('name');
+    if (this.formState[targetName]) {
+      return;
+    }
+
+    this.formState[targetName] = {
+      value: element.getAttribute('value'),
+      validity: element.validity || null,
+      required: element.hasAttribute('required'),
+      // element
+    };
+
+    this._elements.push(element);
+  }
+
   /**
    * Initialize (or reinitialize) the form state.
    */
@@ -251,14 +291,7 @@ export class AuroForm extends LitElement {
 
     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
-        };
-
-        this._elements.push(element);
+        this._addElementToState(element);
       }
 
       if (this.isButtonElement(element) && element.getAttribute('type') === 'submit') {
@@ -282,7 +315,11 @@ export class AuroForm extends LitElement {
     this.setDisabledStateOnButtons();
   }
 
+  /**
+   * Reset fires an event called `reset` - just as you would expect from a normal form.
+   */
   reset() {
+    const previousValue = this.value;
     this._elements.forEach((element) => element.reset());
 
     this.updateComplete.then(() => {
@@ -294,16 +331,20 @@ export class AuroForm extends LitElement {
       // Wait for the above changes to run through, then disable submit/reset
       this.updateComplete.then(() => {
         this.setDisabledStateOnButtons();
+
+        this.dispatchEvent(new CustomEvent('reset', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            previousValue
+          }
+        }));
       });
     });
   }
 
   /**
    * 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:
@@ -350,13 +391,16 @@ export class AuroForm extends LitElement {
         return;
       }
 
+      // Occasionally, a form element will emit their event before the form can read data about the form element.
+      if (!this.formState[targetName] && this.isFormElement(event.target)) {
+        this._addElementToState(event.target);
+      }
+
       // Check special input types and handle their edge cases
       if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
         this.formState[targetName].value = event.target.values;
-
         this.requestUpdate('formState');
       } else {
-        // "Normal" input value handling, just assign the value
         this.formState[targetName].value = event.target.value;
         this.requestUpdate('formState');
       }
@@ -368,6 +412,10 @@ export class AuroForm extends LitElement {
         return;
       }
 
+      if (!this.formState[targetName]) {
+        this._addElementToState(event.target);
+      }
+
       this.formState[targetName].validity = event.detail.validity;
       this._calculateValidity();
     });

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 1.5s
+created dist in 1.2s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1s
+created ./demo/ in 1.1s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 966ms
+created ./demo/ in 1s
 
 > @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

@@ -7,7 +7,7 @@
 created dist in 1.4s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 947ms
+created ./demo/ in 952ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 883ms
+created ./demo/ in 934ms

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.25/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.27/dist/auro-input__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-input use cases

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 817ms
+created dist in 996ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 582ms
+created ./demo/ in 784ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 397ms
+created ./demo/ in 539ms
 
 > @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 1.1s
+created dist in 838ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 799ms
+created ./demo/ in 722ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 486ms
+created ./demo/ in 583ms