@aurodesignsystem/auro-formkit 1.6.0-beta.5 → 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,4CA6CC;CACF;2BAzpB0B,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

@@ -2768,13 +2768,13 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
 
 var iconVersion$1 = '6.1.1';
 
-var styleCss$1$1 = i$3$1`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$1 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$1 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
 var tokensCss$4 = i$3$1`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
-var styleCss$5 = i$3$1`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin-top:var(--ds-size-50, 0.25rem)}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:block}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
+var styleCss$5 = i$3$1`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
 
 var colorCss$4 = i$3$1`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -2877,12 +2877,13 @@ if (!customElements.get("auro-dropdownbib")) {
  * @attr { Boolean } disabled - If declared, the dropdown is not interactive.
  * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
  * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
+ * @attr {Boolean} fluid - Makes the trigger to be full width of its parent container
  * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width.
  * @attr { Boolean } inset - If declared, will apply padding around trigger slot content.
  * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots.
  * @attr { Boolean } hoverToggle - if declared, the trigger will toggle the big on mouseover/mouseout.
- * @attr { Boolean } noToggle - If declared, the trigger will only show the the dropdown bib.
- * @attr { Boolean } focusShow - if declared, the the bib will display when focus is applied to the trigger.
+ * @attr { Boolean } noToggle - If declared, the trigger will only show the dropdown bib.
+ * @attr { Boolean } focusShow - if declared, the bib will display when focus is applied to the trigger.
  * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element.
  * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
  * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed.
@@ -2985,6 +2986,10 @@ class AuroDropdown extends r$5 {
         type: Boolean,
         reflect: true
       },
+      fluid: {
+        type: Boolean,
+        reflect: true,
+      },
       focusShow: {
         type: Boolean,
         reflect: true
@@ -7229,6 +7234,11 @@ class AuroCombobox extends r$6 {
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
 
+    /**
+     * @private
+     */
+    this.isHiddenWhileLoading = false;
+
     /**
      * Generate unique names for dependency components.
      */
@@ -7364,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;
@@ -7440,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();
+        }
       }
     }
   }
@@ -7473,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) {
@@ -7484,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');
@@ -7506,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) {
@@ -7583,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;
       }
 
@@ -7592,7 +7606,7 @@ class AuroCombobox extends r$6 {
       this.handleMenuOptions();
 
       this.handleInputValueChange();
-      // validate only if the the value was set programmatically
+      // validate only if the value was set programmatically
       if (document.activeElement !== this) {
         this.validation.validate(this);
       }
@@ -7624,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
@@ -7670,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) {
@@ -7742,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;
@@ -7773,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
@@ -7795,13 +7836,14 @@ 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
           }
         </div>
         <${this.dropdownTag}
           for="dropdownMenu"
+          fluid
           bordered
           rounded
           matchWidth

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;
       }
 
@@ -428,7 +437,7 @@ export class AuroCombobox extends LitElement {
       this.handleMenuOptions();
 
       this.handleInputValueChange();
-      // validate only if the the value was set programmatically
+      // validate only if the value was set programmatically
       if (document.activeElement !== this) {
         this.validation.validate(this);
       }
@@ -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,13 +667,14 @@ 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
           }
         </div>
         <${this.dropdownTag}
           for="dropdownMenu"
+          fluid
           bordered
           rounded
           matchWidth

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 507ms
+created dist in 448ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 372ms
+created ./demo/ in 299ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 340ms
+created ./demo/ in 304ms
 
 > @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 785ms
+created dist in 561ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 256ms
+created ./demo/ in 308ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 295ms
+created ./demo/ in 253ms