@aurodesignsystem/auro-formkit 1.6.0-beta.6 → 1.6.0-beta.7

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

@@ -130,6 +130,10 @@ export class AuroCombobox extends LitElement {
      * @private
      */
     private runtimeUtils;
+    /**
+     * @private
+     */
+    private isHiddenWhileLoading;
     dropdownTag: any;
     inputTag: any;
     /**
@@ -187,6 +191,21 @@ export class AuroCombobox extends LitElement {
      */
     private configureInput;
     auroInputHelpText: any;
+    /**
+     * Manages the visibility of the dropdown based on loading state changes.
+     *
+     * This method listens for loading state changes and adjusts the visibility of the dropdown accordingly.
+     * If the dropdown is visible and loading is true without any loading placeholders, it hides the dropdown
+     * and sets a flag to indicate it is hidden while loading. If loading is false and the dropdown was previously
+     * hidden, it checks if the active element is within the dropdown and shows it again if true.
+     *
+     * @private
+     * @param {CustomEvent} event - The event object containing details about the loading state change.
+     * @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
+     * @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
+     * @returns {void}
+     */
+    private handleMenuLoadingChange;
     /**
      * Handle changes to the input value and trigger changes that should result.
      * @private
@@ -212,6 +231,7 @@ export class AuroCombobox extends LitElement {
     /**
      * Watch for slot changes and recalculate the menuoptions.
      * @private
+     * @param {Event} event - slotchange event
      * @returns {void}
      */
     private handleSlotChange;

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

@@ -1 +1 @@
-{"version":3,"file":"auro-combobox.d.ts","sourceRoot":"","sources":["../src/auro-combobox.js"],"names":[],"mappings":"AAyBA;;;;;;;;;;;;;;;;;;GAkBG;AAGH;IA0CE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA8CI;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;MAGN;IAED,+CAEC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAvIC,kBAAqB;IACrB,cAAyB;IACzB,WAAiB;IACjB,oBAA0B;IAI1B;;OAEG;IACH,mBAA0C;IAE1C;;OAEG;IACH,qBAAiD;IAMjD,iBAAyF;IACzF,cAA6E;IAG/E;;;OAGG;IACH,wBAIC;IAHC,wBAA0B;IAC1B,kBAAwB;IACxB,4BAAqD;IAyGvD;;;;OAIG;IACH,0BAiDC;IA1CG,mBAA8B;IA4ClC;;;;OAIG;IACH,6BAMC;IAJG,qCAA+E;IAMnF;;;;OAIG;IACH,gBAIC;IAED;;;;OAIG;IACH,gBAUC;IAED;;;;OAIG;IACH,0BAaC;IAZC,iBAA8D;IAchE;;;;OAIG;IACH,sBAyEC;IAxEC,cAAwD;IA0E1D;;;;OAIG;IACH,uBAuEC;IAFG,uBAA2C;IAI/C;;;;OAIG;IACH,+BAeC;IAED;;;;OAIG;IACH,0BAqCC;IAWC,iBAAiE;IAWnE,qBAgBC;IAZC,cAA4E;IAC5E,WAAoE;IAatE;;;OAGG;IACH,SAFa,IAAI,CAIhB;IAED,sCAgCC;IAED;;;;OAIG;IACH,yBAWC;IAGD,4CA8CC;CACF;2BA1pB0B,KAAK"}
+{"version":3,"file":"auro-combobox.d.ts","sourceRoot":"","sources":["../src/auro-combobox.js"],"names":[],"mappings":"AAyBA;;;;;;;;;;;;;;;;;;GAkBG;AAGH;IA+CE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA8CI;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;MAGN;IAED,+CAEC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA5IC,kBAAqB;IACrB,cAAyB;IACzB,WAAiB;IACjB,oBAA0B;IAI1B;;OAEG;IACH,mBAA0C;IAE1C;;OAEG;IACH,qBAAiD;IAEjD;;OAEG;IACH,6BAAiC;IAMjC,iBAAyF;IACzF,cAA6E;IAG/E;;;OAGG;IACH,wBAIC;IAHC,wBAA0B;IAC1B,kBAAwB;IACxB,4BAAqD;IAyGvD;;;;OAIG;IACH,0BAiDC;IA1CG,mBAA8B;IA4ClC;;;;OAIG;IACH,6BAMC;IAJG,qCAA+E;IAMnF;;;;OAIG;IACH,gBAIC;IAED;;;;OAIG;IACH,gBAcC;IAED;;;;OAIG;IACH,0BAaC;IAZC,iBAA8D;IAchE;;;;OAIG;IACH,sBAyEC;IAxEC,cAAwD;IA0E1D;;;;OAIG;IACH,uBAuEC;IAFG,uBAA2C;IAI/C;;;;;;;;;;;;;OAaG;IACH,gCAOC;IAED;;;;OAIG;IACH,+BAeC;IAED;;;;OAIG;IACH,0BAqCC;IAWC,iBAAiE;IAWnE,qBAgBC;IAZC,cAA4E;IAC5E,WAAoE;IAatE;;;OAGG;IACH,SAFa,IAAI,CAIhB;IAED,sCAgCC;IAED;;;;;OAKG;IACH,yBAcC;IAGD,4CA8CC;CACF;2BA9rB0B,KAAK"}

package/components/combobox/dist/index.js

@@ -7234,6 +7234,11 @@ class AuroCombobox extends r$6 {
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
 
+    /**
+     * @private
+     */
+    this.isHiddenWhileLoading = false;
+
     /**
      * Generate unique names for dependency components.
      */
@@ -7369,7 +7374,7 @@ class AuroCombobox extends r$6 {
       this.noMatchOption = undefined;
 
       this.options.forEach((option) => {
-        let matchString = option.innerText.toLowerCase();
+        let matchString = option.textContent.toLowerCase();
 
         if (option.hasAttribute('nomatch')) {
           this.noMatchOption = option;
@@ -7445,8 +7450,12 @@ class AuroCombobox extends r$6 {
       return;
     }
     if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
-      if ((this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
-        this.dropdown.show();
+      if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
+        if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
+          this.isHiddenWhileLoading = true;
+        } else {
+          this.dropdown.show();
+        }
       }
     }
   }
@@ -7478,7 +7487,7 @@ class AuroCombobox extends r$6 {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
-
+    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
 
     // a racing condition on custom-combobox with custom-menu
     if (!this.menu) {
@@ -7489,7 +7498,7 @@ class AuroCombobox extends r$6 {
       return;
     }
 
-    this.menu.shadowRoot.addEventListener('slotchange', () => this.handleSlotChange());
+    this.menu.shadowRoot.addEventListener('slotchange', (event) => this.handleSlotChange(event));
 
     if (this.checkmark) {
       this.menu.removeAttribute('nocheckmark');
@@ -7511,8 +7520,8 @@ class AuroCombobox extends r$6 {
           this.value = this.optionSelected.value;
         }
 
-        if (this.input.value !== this.optionSelected.innerText) {
-          this.input.value = this.optionSelected.innerText;
+        if (this.input.value !== this.optionSelected.textContent) {
+          this.input.value = this.optionSelected.textContent;
         }
 
         if (this.menu.matchWord !== this.input.value) {
@@ -7588,7 +7597,7 @@ class AuroCombobox extends r$6 {
         this.menu.value = this.value;
       }
 
-      if (this.optionSelected && this.input.value !== this.optionSelected.innerText) {
+      if (this.optionSelected && this.input.value !== this.optionSelected.textContent) {
         this.optionSelected = undefined;
       }
 
@@ -7629,6 +7638,29 @@ class AuroCombobox extends r$6 {
     });
   }
 
+  /**
+   * Manages the visibility of the dropdown based on loading state changes.
+   *
+   * This method listens for loading state changes and adjusts the visibility of the dropdown accordingly.
+   * If the dropdown is visible and loading is true without any loading placeholders, it hides the dropdown
+   * and sets a flag to indicate it is hidden while loading. If loading is false and the dropdown was previously
+   * hidden, it checks if the active element is within the dropdown and shows it again if true.
+   *
+   * @private
+   * @param {CustomEvent} event - The event object containing details about the loading state change.
+   * @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
+   * @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
+   * @returns {void}
+   */
+  handleMenuLoadingChange(event) {
+    if (!event.detail.loading && this.isHiddenWhileLoading) {
+      if (this.contains(document.activeElement)) {
+        this.dropdown.show();
+      }
+      this.isHiddenWhileLoading = false;
+    }
+  }
+
   /**
    * Handle changes to the input value and trigger changes that should result.
    * @private
@@ -7675,7 +7707,7 @@ class AuroCombobox extends r$6 {
        */
       if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {
         if (this.availableOptions.length > 0) {
-          this.dropdown.show();
+          this.showBib();
         }
 
         if (this.dropdown.isPopoverVisible) {
@@ -7747,8 +7779,8 @@ class AuroCombobox extends r$6 {
       if (this.value) {
         if (this.optionSelected && this.optionSelected.value === this.value) {
           // If value updates and the previously selected option already matches the new value
-          // just update the input value to use the innerText of the optionSelected
-          this.input.value = this.optionSelected.innerText;
+          // just update the input value to use the textContent of the optionSelected
+          this.input.value = this.optionSelected.textContent;
         } else {
           // Otherwise just enter the value into the input
           this.optionSelected = undefined;
@@ -7778,19 +7810,23 @@ class AuroCombobox extends r$6 {
   /**
    * Watch for slot changes and recalculate the menuoptions.
    * @private
+   * @param {Event} event - slotchange event
    * @returns {void}
    */
-  handleSlotChange() {
-    this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
-    this.options.forEach((opt) => {
-      if (this.checkmark) {
-        opt.removeAttribute('nocheckmark');
-      } else {
-        opt.setAttribute('nocheckmark', '');
-      }
-    });
+  handleSlotChange(event) {
+    // treat only generic menuoptions
+    if (!event.target.name) {
+      this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
+      this.options.forEach((opt) => {
+        if (this.checkmark) {
+          opt.removeAttribute('nocheckmark');
+        } else {
+          opt.setAttribute('nocheckmark', '');
+        }
+      });
 
-    this.handleMenuOptions();
+      this.handleMenuOptions();
+    }
   }
 
   // function that renders the HTML and CSS into  the scope of the component
@@ -7800,7 +7836,7 @@ class AuroCombobox extends r$6 {
         <div aria-live="polite" class="util_displayHiddenVisually">
           ${this.optionActive && this.availableOptions.length > 0
             ? u$6`
-              ${`${this.optionActive.innerText}, selected, ${this.availableOptions.indexOf(this.optionActive) + 1} of ${this.availableOptions.length}`}
+              ${`${this.optionActive.textContent}, selected, ${this.availableOptions.indexOf(this.optionActive) + 1} of ${this.availableOptions.length}`}
             `
             : undefined
           }

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

@@ -65,6 +65,11 @@ export class AuroCombobox extends LitElement {
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
 
+    /**
+     * @private
+     */
+    this.isHiddenWhileLoading = false;
+
     /**
      * Generate unique names for dependency components.
      */
@@ -200,7 +205,7 @@ export class AuroCombobox extends LitElement {
       this.noMatchOption = undefined;
 
       this.options.forEach((option) => {
-        let matchString = option.innerText.toLowerCase();
+        let matchString = option.textContent.toLowerCase();
 
         if (option.hasAttribute('nomatch')) {
           this.noMatchOption = option;
@@ -276,8 +281,12 @@ export class AuroCombobox extends LitElement {
       return;
     }
     if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
-      if ((this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
-        this.dropdown.show();
+      if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
+        if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
+          this.isHiddenWhileLoading = true;
+        } else {
+          this.dropdown.show();
+        }
       }
     }
   }
@@ -309,7 +318,7 @@ export class AuroCombobox extends LitElement {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
-
+    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
 
     // a racing condition on custom-combobox with custom-menu
     if (!this.menu) {
@@ -320,7 +329,7 @@ export class AuroCombobox extends LitElement {
       return;
     }
 
-    this.menu.shadowRoot.addEventListener('slotchange', () => this.handleSlotChange());
+    this.menu.shadowRoot.addEventListener('slotchange', (event) => this.handleSlotChange(event));
 
     if (this.checkmark) {
       this.menu.removeAttribute('nocheckmark');
@@ -342,8 +351,8 @@ export class AuroCombobox extends LitElement {
           this.value = this.optionSelected.value;
         }
 
-        if (this.input.value !== this.optionSelected.innerText) {
-          this.input.value = this.optionSelected.innerText;
+        if (this.input.value !== this.optionSelected.textContent) {
+          this.input.value = this.optionSelected.textContent;
         }
 
         if (this.menu.matchWord !== this.input.value) {
@@ -419,7 +428,7 @@ export class AuroCombobox extends LitElement {
         this.menu.value = this.value;
       }
 
-      if (this.optionSelected && this.input.value !== this.optionSelected.innerText) {
+      if (this.optionSelected && this.input.value !== this.optionSelected.textContent) {
         this.optionSelected = undefined;
       }
 
@@ -460,6 +469,29 @@ export class AuroCombobox extends LitElement {
     });
   }
 
+  /**
+   * Manages the visibility of the dropdown based on loading state changes.
+   *
+   * This method listens for loading state changes and adjusts the visibility of the dropdown accordingly.
+   * If the dropdown is visible and loading is true without any loading placeholders, it hides the dropdown
+   * and sets a flag to indicate it is hidden while loading. If loading is false and the dropdown was previously
+   * hidden, it checks if the active element is within the dropdown and shows it again if true.
+   *
+   * @private
+   * @param {CustomEvent} event - The event object containing details about the loading state change.
+   * @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
+   * @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
+   * @returns {void}
+   */
+  handleMenuLoadingChange(event) {
+    if (!event.detail.loading && this.isHiddenWhileLoading) {
+      if (this.contains(document.activeElement)) {
+        this.dropdown.show();
+      }
+      this.isHiddenWhileLoading = false;
+    }
+  }
+
   /**
    * Handle changes to the input value and trigger changes that should result.
    * @private
@@ -506,7 +538,7 @@ export class AuroCombobox extends LitElement {
        */
       if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {
         if (this.availableOptions.length > 0) {
-          this.dropdown.show();
+          this.showBib();
         }
 
         if (this.dropdown.isPopoverVisible) {
@@ -578,8 +610,8 @@ export class AuroCombobox extends LitElement {
       if (this.value) {
         if (this.optionSelected && this.optionSelected.value === this.value) {
           // If value updates and the previously selected option already matches the new value
-          // just update the input value to use the innerText of the optionSelected
-          this.input.value = this.optionSelected.innerText;
+          // just update the input value to use the textContent of the optionSelected
+          this.input.value = this.optionSelected.textContent;
         } else {
           // Otherwise just enter the value into the input
           this.optionSelected = undefined;
@@ -609,19 +641,23 @@ export class AuroCombobox extends LitElement {
   /**
    * Watch for slot changes and recalculate the menuoptions.
    * @private
+   * @param {Event} event - slotchange event
    * @returns {void}
    */
-  handleSlotChange() {
-    this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
-    this.options.forEach((opt) => {
-      if (this.checkmark) {
-        opt.removeAttribute('nocheckmark');
-      } else {
-        opt.setAttribute('nocheckmark', '');
-      }
-    });
+  handleSlotChange(event) {
+    // treat only generic menuoptions
+    if (!event.target.name) {
+      this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
+      this.options.forEach((opt) => {
+        if (this.checkmark) {
+          opt.removeAttribute('nocheckmark');
+        } else {
+          opt.setAttribute('nocheckmark', '');
+        }
+      });
 
-    this.handleMenuOptions();
+      this.handleMenuOptions();
+    }
   }
 
   // function that renders the HTML and CSS into  the scope of the component
@@ -631,7 +667,7 @@ export class AuroCombobox extends LitElement {
         <div aria-live="polite" class="util_displayHiddenVisually">
           ${this.optionActive && this.availableOptions.length > 0
             ? html`
-              ${`${this.optionActive.innerText}, selected, ${this.availableOptions.indexOf(this.optionActive) + 1} of ${this.availableOptions.length}`}
+              ${`${this.optionActive.textContent}, selected, ${this.availableOptions.indexOf(this.optionActive) + 1} of ${this.availableOptions.length}`}
             `
             : undefined
           }

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

@@ -74,10 +74,10 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 515ms
+created dist in 448ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 273ms
+created ./demo/ in 299ms
 
 ./demo/api.js → ./demo/...
 created ./demo/ in 304ms

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

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 668ms
+created dist in 561ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 346ms
+created ./demo/ in 308ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 303ms
+created ./demo/ in 253ms

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.3s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 3.6s
+created ./demo/ in 3.5s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 3.4s
+created ./demo/ in 3.2s
 
 > @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

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.5s
+created dist in 1.1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1s
+created ./demo/ in 748ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 746ms
+created ./demo/ in 705ms
 
 > @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

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 1.3s
+created dist in 1.1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1s
+created ./demo/ in 623ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 606ms
+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 574ms
+created dist in 425ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 233ms
+created ./demo/ in 311ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 160ms
+created ./demo/ in 235ms
 
 > @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 684ms
+created dist in 419ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 259ms
+created ./demo/ in 232ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 231ms
+created ./demo/ in 218ms

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

@@ -166,13 +166,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 856ms
+created ./demo/ in 1s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 949ms
+created ./demo/ in 811ms
 
 > @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

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

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 1.6s
+created dist in 1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 706ms
+created ./demo/ in 964ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 773ms
+created ./demo/ in 940ms

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 846ms
+created dist in 662ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 512ms
+created ./demo/ in 542ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 533ms
+created ./demo/ in 522ms
 
 > @auro-formkit/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
@@ -150,6 +150,7 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/menu/d
   ⁕ FILE:src=./../apiExamples/nocheckmark.html 
   ⁕ FILE:src=./../apiExamples/disabledMenu.html 
   ⁕ FILE:src=./../apiExamples/matchWord.html 
+  ⁕ FILE:src=./../apiExamples/loading.html 
   ⁕ FILE:src=./../apiExamples/scroll.html 
   ⁕ FILE:src=./../apiExamples/hr.html 
   ⁕ FILE:src=./../apiExamples/nestedMenu.html 
@@ -163,6 +164,8 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/menu/d
   ⁕ CODE:src=./../apiExamples/disabledMenu.html 
   ⁕ CODE:src=./../apiExamples/matchWord.js 
   ⁕ CODE:src=./../apiExamples/matchWord.html 
+  ⁕ CODE:src=./../apiExamples/loading.js 
+  ⁕ CODE:src=./../apiExamples/loading.html 
   ⁕ CODE:src=./../apiExamples/scroll.html 
   ⁕ CODE:src=./../apiExamples/hr.html 
   ⁕ CODE:src=./../apiExamples/nestedMenu.html 

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

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 675ms
+created dist in 1s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 838ms
+created ./demo/ in 713ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 643ms
+created ./demo/ in 547ms

package/components/menu/demo/api.html

@@ -43,6 +43,8 @@
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-input@latest/dist/auro-input__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/dist/auro-loader__bundled.js" type="module"></script>
     <script type="module" data-demo-script="true">
       import { initExamples } from "./api.min.js"
       initExamples();

package/components/menu/demo/api.js

@@ -3,6 +3,7 @@
 import { auroMenuResetExample } from '../apiExamples/reset';
 import { auroMenuMatchWordExample } from '../apiExamples/matchWord';
 import { auroMenuCustomEventExample } from '../apiExamples/customEvent';
+import { auroMenuLoadingExample } from '../apiExamples/loading';
 import '../src/index.js';
 
 export function initExamples(initCount) {
@@ -13,6 +14,7 @@ export function initExamples(initCount) {
     auroMenuResetExample();
     auroMenuMatchWordExample();
     auroMenuCustomEventExample();
+    auroMenuLoadingExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called