@aurodesignsystem/auro-formkit 5.2.2 → 5.2.3

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

@@ -376,6 +376,14 @@ export class AuroCombobox extends AuroElement {
      * @returns {void}
      */
     showBib(): void;
+    /**
+     * Forces focus to the internal input element and positions the cursor at the end of the text.
+     * This is used when clicking anywhere within the Combobox to ensure the input receives focus
+     * and the cursor is positioned at the end for better user experience.
+     * @private
+     * @returns {void}
+     */
+    private forceFocusToInputEnd;
     /**
      * Binds all behavior needed to the dropdown after rendering.
      * @private
@@ -404,6 +412,7 @@ export class AuroCombobox extends AuroElement {
      */
     private configureMenu;
     menu: Element;
+    defaultMenuShape: string;
     /**
      * Binds all behavior needed to the input after rendering.
      * @private

package/components/combobox/dist/index.js

@@ -1,6 +1,7 @@
 import { css, LitElement, html as html$1 } from 'lit';
 import { unsafeStatic, literal, html } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
 
@@ -3852,7 +3853,7 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
 
 var iconVersion$2 = '8.1.2';
 
-var styleCss$2$2 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host(:not([matchWidth])) .container{min-width:fit-content}: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;overscroll-behavior:contain}: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][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}`;
+var styleCss$2$2 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host(:not([matchWidth])) .container{min-width:fit-content}: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;overscroll-behavior:contain}: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][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}`;
 
 var colorCss$2$2 = css`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -4055,7 +4056,7 @@ var shapeSizeCss$1 = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-class
 
 var colorCss$1$2 = css`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([ondark])) .wrapper:hover{--ds-auro-dropdown-trigger-background-color: var(--ds-auro-dropdown-trigger-hover-background-color)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label,:host([onDark]) .helpText{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark]) .wrapper:hover{--ds-auro-dropdown-trigger-background-color: var(--ds-auro-dropdown-trigger-hover-background-color)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
 
-var styleCss$1$3 = css`:host{position:relative;display:block;text-align:left;transform:translateZ(0)}:host([open]){z-index:var(--depth-tooltip, 400)}:host([open][isbibfullscreen]){position:fixed;top:0;left:0}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
+var styleCss$1$3 = css`:host{position:relative;display:block;text-align:left}[popover=manual]{overflow:visible;padding:0;border:inherit;margin:0;background:inherit;outline:inherit}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
 
 var classicColorCss$1 = css``;
 
@@ -4413,6 +4414,9 @@ class AuroDropdown extends AuroElement$4 {
     /** @private */
     this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
 
+    /** @private */
+    this.bibElement = createRef();
+
     this.privateDefaults();
   }
 
@@ -4849,6 +4853,14 @@ class AuroDropdown extends AuroElement$4 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
+
+    if (changedProperties.has('isPopoverVisible') && this.bibElement.value) {
+      if (this.isPopoverVisible) {
+        this.bibElement.value.showPopover();
+      } else {
+        this.bibElement.value.hidePopover();
+      }
+    }
   }
 
   /**
@@ -5189,7 +5201,10 @@ class AuroDropdown extends AuroElement$4 {
           id="bib"
           shape="${this.shape}"
           ?data-show="${this.isPopoverVisible}"
-          ?isfullscreen="${this.isBibFullscreen}">
+          ?isfullscreen="${this.isBibFullscreen}"
+          ${ref(this.bibElement)}
+          popover="manual"
+          >
           <div class="slotContent">
             <slot @slotchange="${this.handleDefaultSlot}"></slot>
           </div>
@@ -16458,7 +16473,7 @@ class AuroCombobox extends AuroElement {
     if (this.availableOptions.length === 0) {
       if (this.noMatchOption) {
         this.noMatchOption.removeAttribute('hidden');
-      } else {
+      } else if (!this.menu.loading || this.isHiddenWhileLoading) {
         this.hideBib();
       }
     } else if (this.noMatchOption) {
@@ -16574,7 +16589,6 @@ class AuroCombobox extends AuroElement {
       this.dropdown.hide();
       return;
     }
-
     if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
       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) {
@@ -16586,6 +16600,29 @@ class AuroCombobox extends AuroElement {
     }
   }
 
+  /**
+   * Forces focus to the internal input element and positions the cursor at the end of the text.
+   * This is used when clicking anywhere within the Combobox to ensure the input receives focus
+   * and the cursor is positioned at the end for better user experience.
+   * @private
+   * @returns {void}
+   */
+  forceFocusToInputEnd() {
+    // Set up input ref
+    let inputElement = null;
+
+    if (this.input.shadowRoot) {
+      inputElement = this.input.shadowRoot.querySelector('input');
+    }
+
+    if (inputElement) {
+      // Force focus and set cursor position to end of text to ensure visibility
+      inputElement.focus();
+      const textLength = inputElement.value ? inputElement.value.length : 0;
+      inputElement.setSelectionRange(textLength, textLength);
+    }
+  }
+
   /**
    * Binds all behavior needed to the dropdown after rendering.
    * @private
@@ -16614,6 +16651,9 @@ class AuroCombobox extends AuroElement {
 
     this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
       this.showBib();
+
+      // Fixes Chromium-specific issue where clicking outside input but within Combobox doesn't return focus
+      this.forceFocusToInputEnd();
     });
 
     // setting up bibtemplate
@@ -16676,13 +16716,21 @@ class AuroCombobox extends AuroElement {
       this.menu.setAttribute('size', 'md');
       this.menu.setAttribute('shape', 'box');
     } else {
-      // set menu's default size if there it's not specified.
-      if (!this.menu.getAttribute('size')) {
-        this.menu.setAttribute('size', this.layout !== 'emphasized' ? 'md' : this.size);
-      }
+      this.menu.setAttribute('size', this.layout === 'emphasized' ? 'lg' : 'md');
 
-      if (!this.getAttribute('shape')) {
-        this.menu.setAttribute('shape', this.layout === 'classic' ? 'box' : this.shape);
+      switch (this.layout) {
+        case 'classic':
+          this.menu.setAttribute('shape', 'box');
+          break;
+        case 'emphasized':
+          if (this.dropdown && this.dropdown.bib) {
+            this.dropdown.bib.shape = 'rounded';
+          }
+          this.menu.setAttribute('shape', 'rounded');
+          break;
+        default:
+          this.menu.setAttribute('shape', this.defaultMenuShape || this.shape);
+          break;
       }
     }
   }
@@ -16694,6 +16742,7 @@ class AuroCombobox extends AuroElement {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
+    this.defaultMenuShape = this.menu.getAttribute('shape');
 
     this.menu.value = this.value;
 
@@ -16786,10 +16835,6 @@ class AuroCombobox extends AuroElement {
         this.validate();
       }
     });
-
-    this.input.addEventListener('input', () => {
-      this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
-    });
   }
 
   /**
@@ -16842,15 +16887,18 @@ class AuroCombobox extends AuroElement {
       this.validate();
     }
 
-    // Hide menu if value is empty, otherwise show if there are available suggestions
     if (this.input.value && this.input.value.length === 0) {
+      // Hide menu if value is empty, otherwise show if there are available suggestions
       this.hideBib();
-    }
-
-    // Force dropdown bib to hide if input value has no matching suggestions
-    if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
+    } else if (this.menu.loading) {
+      // if input has value but menu is loading, show bib immediately
+      this.showBib();
+    } else if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
+      // Force dropdown bib to hide if input value has no matching suggestions
       this.hideBib();
     }
+
+    this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
   }
 
   /**
@@ -17025,7 +17073,7 @@ class AuroCombobox extends AuroElement {
       if (this.value) {
         // If the value got set programmatically make sure we hide the bib
         // when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
-        if (!this.contains(document.activeElement) && !this.bibtemplate.contains(document.activeElement)) {
+        if (!this.componentHasFocus) {
           this.hideBib();
         }
       } else {
@@ -17050,7 +17098,8 @@ class AuroCombobox extends AuroElement {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if (this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) {
+      // eslint-disable-next-line no-extra-parens
+      if ((this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) || this.menu.loading) {
         this.showBib();
       } else {
         this.hideBib();
@@ -17063,11 +17112,21 @@ class AuroCombobox extends AuroElement {
     }
 
     if (changedProperties.has('shape') && this.menu) {
-      this.menu.setAttribute('shape', this.layout === 'classic' ? 'box' : this.shape);
+      switch (this.layout) {
+        case 'classic':
+          this.menu.setAttribute('shape', 'box');
+          break;
+        case 'emphasized':
+          this.menu.setAttribute('shape', 'rounded');
+          break;
+        default:
+          this.menu.setAttribute('shape', this.defaultMenuShape || this.shape);
+          break;
+      }
     }
 
     if (changedProperties.has('size') && this.menu) {
-      this.menu.setAttribute('size', this.layout !== 'emphasized' ? 'md' : this.size);
+      this.menu.setAttribute('size', this.layout === 'emphasized' ? 'lg' : 'md');
     }
   }
 

package/components/combobox/dist/registered.js

@@ -1,6 +1,7 @@
 import { css, LitElement, html as html$1 } from 'lit';
 import { unsafeStatic, literal, html } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
 
@@ -3852,7 +3853,7 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
 
 var iconVersion$2 = '8.1.2';
 
-var styleCss$2$2 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host(:not([matchWidth])) .container{min-width:fit-content}: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;overscroll-behavior:contain}: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][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}`;
+var styleCss$2$2 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host(:not([matchWidth])) .container{min-width:fit-content}: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;overscroll-behavior:contain}: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][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}`;
 
 var colorCss$2$2 = css`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -4055,7 +4056,7 @@ var shapeSizeCss$1 = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-class
 
 var colorCss$1$2 = css`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([ondark])) .wrapper:hover{--ds-auro-dropdown-trigger-background-color: var(--ds-auro-dropdown-trigger-hover-background-color)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label,:host([onDark]) .helpText{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark]) .wrapper:hover{--ds-auro-dropdown-trigger-background-color: var(--ds-auro-dropdown-trigger-hover-background-color)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
 
-var styleCss$1$3 = css`:host{position:relative;display:block;text-align:left;transform:translateZ(0)}:host([open]){z-index:var(--depth-tooltip, 400)}:host([open][isbibfullscreen]){position:fixed;top:0;left:0}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
+var styleCss$1$3 = css`:host{position:relative;display:block;text-align:left}[popover=manual]{overflow:visible;padding:0;border:inherit;margin:0;background:inherit;outline:inherit}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
 
 var classicColorCss$1 = css``;
 
@@ -4413,6 +4414,9 @@ class AuroDropdown extends AuroElement$4 {
     /** @private */
     this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
 
+    /** @private */
+    this.bibElement = createRef();
+
     this.privateDefaults();
   }
 
@@ -4849,6 +4853,14 @@ class AuroDropdown extends AuroElement$4 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
+
+    if (changedProperties.has('isPopoverVisible') && this.bibElement.value) {
+      if (this.isPopoverVisible) {
+        this.bibElement.value.showPopover();
+      } else {
+        this.bibElement.value.hidePopover();
+      }
+    }
   }
 
   /**
@@ -5189,7 +5201,10 @@ class AuroDropdown extends AuroElement$4 {
           id="bib"
           shape="${this.shape}"
           ?data-show="${this.isPopoverVisible}"
-          ?isfullscreen="${this.isBibFullscreen}">
+          ?isfullscreen="${this.isBibFullscreen}"
+          ${ref(this.bibElement)}
+          popover="manual"
+          >
           <div class="slotContent">
             <slot @slotchange="${this.handleDefaultSlot}"></slot>
           </div>
@@ -16458,7 +16473,7 @@ class AuroCombobox extends AuroElement {
     if (this.availableOptions.length === 0) {
       if (this.noMatchOption) {
         this.noMatchOption.removeAttribute('hidden');
-      } else {
+      } else if (!this.menu.loading || this.isHiddenWhileLoading) {
         this.hideBib();
       }
     } else if (this.noMatchOption) {
@@ -16574,7 +16589,6 @@ class AuroCombobox extends AuroElement {
       this.dropdown.hide();
       return;
     }
-
     if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
       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) {
@@ -16586,6 +16600,29 @@ class AuroCombobox extends AuroElement {
     }
   }
 
+  /**
+   * Forces focus to the internal input element and positions the cursor at the end of the text.
+   * This is used when clicking anywhere within the Combobox to ensure the input receives focus
+   * and the cursor is positioned at the end for better user experience.
+   * @private
+   * @returns {void}
+   */
+  forceFocusToInputEnd() {
+    // Set up input ref
+    let inputElement = null;
+
+    if (this.input.shadowRoot) {
+      inputElement = this.input.shadowRoot.querySelector('input');
+    }
+
+    if (inputElement) {
+      // Force focus and set cursor position to end of text to ensure visibility
+      inputElement.focus();
+      const textLength = inputElement.value ? inputElement.value.length : 0;
+      inputElement.setSelectionRange(textLength, textLength);
+    }
+  }
+
   /**
    * Binds all behavior needed to the dropdown after rendering.
    * @private
@@ -16614,6 +16651,9 @@ class AuroCombobox extends AuroElement {
 
     this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
       this.showBib();
+
+      // Fixes Chromium-specific issue where clicking outside input but within Combobox doesn't return focus
+      this.forceFocusToInputEnd();
     });
 
     // setting up bibtemplate
@@ -16676,13 +16716,21 @@ class AuroCombobox extends AuroElement {
       this.menu.setAttribute('size', 'md');
       this.menu.setAttribute('shape', 'box');
     } else {
-      // set menu's default size if there it's not specified.
-      if (!this.menu.getAttribute('size')) {
-        this.menu.setAttribute('size', this.layout !== 'emphasized' ? 'md' : this.size);
-      }
+      this.menu.setAttribute('size', this.layout === 'emphasized' ? 'lg' : 'md');
 
-      if (!this.getAttribute('shape')) {
-        this.menu.setAttribute('shape', this.layout === 'classic' ? 'box' : this.shape);
+      switch (this.layout) {
+        case 'classic':
+          this.menu.setAttribute('shape', 'box');
+          break;
+        case 'emphasized':
+          if (this.dropdown && this.dropdown.bib) {
+            this.dropdown.bib.shape = 'rounded';
+          }
+          this.menu.setAttribute('shape', 'rounded');
+          break;
+        default:
+          this.menu.setAttribute('shape', this.defaultMenuShape || this.shape);
+          break;
       }
     }
   }
@@ -16694,6 +16742,7 @@ class AuroCombobox extends AuroElement {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
+    this.defaultMenuShape = this.menu.getAttribute('shape');
 
     this.menu.value = this.value;
 
@@ -16786,10 +16835,6 @@ class AuroCombobox extends AuroElement {
         this.validate();
       }
     });
-
-    this.input.addEventListener('input', () => {
-      this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
-    });
   }
 
   /**
@@ -16842,15 +16887,18 @@ class AuroCombobox extends AuroElement {
       this.validate();
     }
 
-    // Hide menu if value is empty, otherwise show if there are available suggestions
     if (this.input.value && this.input.value.length === 0) {
+      // Hide menu if value is empty, otherwise show if there are available suggestions
       this.hideBib();
-    }
-
-    // Force dropdown bib to hide if input value has no matching suggestions
-    if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
+    } else if (this.menu.loading) {
+      // if input has value but menu is loading, show bib immediately
+      this.showBib();
+    } else if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
+      // Force dropdown bib to hide if input value has no matching suggestions
       this.hideBib();
     }
+
+    this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
   }
 
   /**
@@ -17025,7 +17073,7 @@ class AuroCombobox extends AuroElement {
       if (this.value) {
         // If the value got set programmatically make sure we hide the bib
         // when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
-        if (!this.contains(document.activeElement) && !this.bibtemplate.contains(document.activeElement)) {
+        if (!this.componentHasFocus) {
           this.hideBib();
         }
       } else {
@@ -17050,7 +17098,8 @@ class AuroCombobox extends AuroElement {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if (this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) {
+      // eslint-disable-next-line no-extra-parens
+      if ((this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) || this.menu.loading) {
         this.showBib();
       } else {
         this.hideBib();
@@ -17063,11 +17112,21 @@ class AuroCombobox extends AuroElement {
     }
 
     if (changedProperties.has('shape') && this.menu) {
-      this.menu.setAttribute('shape', this.layout === 'classic' ? 'box' : this.shape);
+      switch (this.layout) {
+        case 'classic':
+          this.menu.setAttribute('shape', 'box');
+          break;
+        case 'emphasized':
+          this.menu.setAttribute('shape', 'rounded');
+          break;
+        default:
+          this.menu.setAttribute('shape', this.defaultMenuShape || this.shape);
+          break;
+      }
     }
 
     if (changedProperties.has('size') && this.menu) {
-      this.menu.setAttribute('size', this.layout !== 'emphasized' ? 'md' : this.size);
+      this.menu.setAttribute('size', this.layout === 'emphasized' ? 'lg' : 'md');
     }
   }