@aurodesignsystem-dev/auro-formkit 0.0.0-pr819.3 → 0.0.0-pr832.0

package/components/bibtemplate/dist/index.js

@@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 var colorCss$3 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$4 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$4 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
@@ -1909,13 +1909,15 @@ class AuroBibtemplate extends LitElement {
       <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? html$1`
         <div id="headerContainer">
-          <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
-            <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
-          </${this.buttonTag}>
-          <${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
-            <slot name="header"></slot>
-          </${this.headerTag}>
-          <span id="subheader">
+          <div class="titleRow">
+            <${this.headerTag} class="header" display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
+              <slot name="header"></slot>
+            </${this.headerTag}>
+            <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
+              <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
+            </${this.buttonTag}>
+          </div>
+          <span class="subheader">
             <slot name="subheader"></slot>
           </span>
         </div>` : null}

package/components/bibtemplate/dist/registered.js

@@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 var colorCss$3 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$4 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$4 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
@@ -1909,13 +1909,15 @@ class AuroBibtemplate extends LitElement {
       <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? html$1`
         <div id="headerContainer">
-          <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
-            <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
-          </${this.buttonTag}>
-          <${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
-            <slot name="header"></slot>
-          </${this.headerTag}>
-          <span id="subheader">
+          <div class="titleRow">
+            <${this.headerTag} class="header" display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
+              <slot name="header"></slot>
+            </${this.headerTag}>
+            <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
+              <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
+            </${this.buttonTag}>
+          </div>
+          <span class="subheader">
             <slot name="subheader"></slot>
           </span>
         </div>` : null}

package/components/checkbox/demo/api.md

@@ -66,12 +66,13 @@ Custom element for the purpose of allowing users to select one or more options o
 
 ## Events
 
-| Event                   | Type               |
-|-------------------------|--------------------|
-| `auroCheckbox-focusin`  | `CustomEvent<any>` |
-| `auroCheckbox-focusout` | `CustomEvent<any>` |
-| `auroCheckbox-input`    | `CustomEvent<any>` |
-| [input](#input)                 | `CustomEvent<any>` |
+| Event                   | Type               | Description                                      |
+|-------------------------|--------------------|--------------------------------------------------|
+| `auroCheckbox-focusin`  | `CustomEvent<any>` |                                                  |
+| `auroCheckbox-focusout` | `CustomEvent<any>` |                                                  |
+| `auroCheckbox-input`    | `CustomEvent<any>` |                                                  |
+| [change](#change)                | `CustomEvent<any>` | (Deprecated) Notifies when checked value is changed. |
+| [input](#input)                 | `InputEvent`       | Notifies when when checked value is changed by user's interface. |
 
 ## CSS Shadow Parts
 

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

@@ -142,6 +142,9 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
+ *
+ * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
  */
 
 // build the component class
@@ -287,12 +290,6 @@ class AuroCheckbox extends i$2 {
   handleInput(event) {
     this.checked = event.target.checked;
 
-    this.dispatchEvent(new CustomEvent('input', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
-
     // Old event we need to deprecate
     this.dispatchEvent(new CustomEvent('auroCheckbox-input', {
       bubbles: true,
@@ -352,7 +349,7 @@ class AuroCheckbox extends i$2 {
       }
 
       if (!this.disabled) {
-        this.checked = !this.checked;
+        this.shadowRoot.querySelector('input').click();
         this.handleFocusin();
       }
     });
@@ -390,7 +387,7 @@ class AuroCheckbox extends i$2 {
             @change="${this.handleChange}"
             @input="${this.handleInput}"
             ?disabled="${this.disabled}"
-            .checked="${this.checked}"
+            ?checked="${this.checked}"
             id="${this.inputId}"
             name="${o$1(this.name)}"
             type="checkbox"

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

@@ -134,6 +134,9 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
+ *
+ * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
  */
 
 // build the component class
@@ -279,12 +282,6 @@ class AuroCheckbox extends i$2 {
   handleInput(event) {
     this.checked = event.target.checked;
 
-    this.dispatchEvent(new CustomEvent('input', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
-
     // Old event we need to deprecate
     this.dispatchEvent(new CustomEvent('auroCheckbox-input', {
       bubbles: true,
@@ -344,7 +341,7 @@ class AuroCheckbox extends i$2 {
       }
 
       if (!this.disabled) {
-        this.checked = !this.checked;
+        this.shadowRoot.querySelector('input').click();
         this.handleFocusin();
       }
     });
@@ -382,7 +379,7 @@ class AuroCheckbox extends i$2 {
             @change="${this.handleChange}"
             @input="${this.handleInput}"
             ?disabled="${this.disabled}"
-            .checked="${this.checked}"
+            ?checked="${this.checked}"
             id="${this.inputId}"
             name="${o$1(this.name)}"
             type="checkbox"

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

@@ -7,6 +7,9 @@
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
+ *
+ * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
  */
 export class AuroCheckbox extends LitElement {
     static get styles(): import("lit").CSSResult[];

package/components/checkbox/dist/index.js

@@ -94,6 +94,9 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
+ *
+ * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
  */
 
 // build the component class
@@ -239,12 +242,6 @@ class AuroCheckbox extends LitElement {
   handleInput(event) {
     this.checked = event.target.checked;
 
-    this.dispatchEvent(new CustomEvent('input', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
-
     // Old event we need to deprecate
     this.dispatchEvent(new CustomEvent('auroCheckbox-input', {
       bubbles: true,
@@ -304,7 +301,7 @@ class AuroCheckbox extends LitElement {
       }
 
       if (!this.disabled) {
-        this.checked = !this.checked;
+        this.shadowRoot.querySelector('input').click();
         this.handleFocusin();
       }
     });
@@ -342,7 +339,7 @@ class AuroCheckbox extends LitElement {
             @change="${this.handleChange}"
             @input="${this.handleInput}"
             ?disabled="${this.disabled}"
-            .checked="${this.checked}"
+            ?checked="${this.checked}"
             id="${this.inputId}"
             name="${ifDefined(this.name)}"
             type="checkbox"

package/components/checkbox/dist/registered.js

@@ -94,6 +94,9 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
+ *
+ * @event {CustomEvent<any>} change - (Deprecated) Notifies when checked value is changed.
+ * @event {InputEvent} input - Notifies when when checked value is changed by user's interface.
  */
 
 // build the component class
@@ -239,12 +242,6 @@ class AuroCheckbox extends LitElement {
   handleInput(event) {
     this.checked = event.target.checked;
 
-    this.dispatchEvent(new CustomEvent('input', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
-
     // Old event we need to deprecate
     this.dispatchEvent(new CustomEvent('auroCheckbox-input', {
       bubbles: true,
@@ -304,7 +301,7 @@ class AuroCheckbox extends LitElement {
       }
 
       if (!this.disabled) {
-        this.checked = !this.checked;
+        this.shadowRoot.querySelector('input').click();
         this.handleFocusin();
       }
     });
@@ -342,7 +339,7 @@ class AuroCheckbox extends LitElement {
             @change="${this.handleChange}"
             @input="${this.handleInput}"
             ?disabled="${this.disabled}"
-            .checked="${this.checked}"
+            ?checked="${this.checked}"
             id="${this.inputId}"
             name="${ifDefined(this.name)}"
             type="checkbox"

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

@@ -3023,12 +3023,6 @@ class AuroFloatingUI {
   }
 
   setupHideHandlers() {
-    this.preventFocusLoseOnBibClick = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    this.element.bib.addEventListener('mousedown', this.preventFocusLoseOnBibClick);
-
     // Define handlers & store references
     this.focusHandler = () => this.handleFocusLoss();
 
@@ -3078,11 +3072,6 @@ class AuroFloatingUI {
   cleanupHideHandlers() {
     // Remove event listeners if they exist
 
-    if (this.preventFocusLoseOnBibClick) {
-      this.element.bib.removeEventListener('mousedown', this.preventFocusLoseOnBibClick);
-      delete this.preventFocusLoseOnBibClick;
-    }
-
     if (this.focusHandler) {
       document.removeEventListener('focusin', this.focusHandler);
       this.focusHandler = null;
@@ -5489,7 +5478,7 @@ var styleDefaultCss = i$5`.layoutDefault .typeIcon,:host(:not([layout])) .typeIc
 
 var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-background-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([ondark])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 
-var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: transparent}`;
+var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: transparent}`;
 
 var classicStyleCss = i$5`:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}:host([layout*=classic]) .mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;justify-content:center;cursor:text}:host([layout*=classic]) .mainContent label{overflow:hidden;cursor:text;padding-block:var(--ds-size-50, 0.25rem);text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host([layout*=classic]) .mainContent input{height:auto;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0}:host([layout*=classic]) .accents .typeIcon>*{margin-left:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.left{padding-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.right{padding-left:var(--ds-size-100, 0.5rem);margin-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]).withValue{justify-content:flex-start}:host([layout*=classic]):focus-within{justify-content:flex-start}`;
 
@@ -13824,7 +13813,7 @@ var inputVersion = '4.2.0';
 
 var colorCss$3$1 = i$5`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$4$1 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$4$1 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = i$5`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
@@ -15728,13 +15717,15 @@ class AuroBibtemplate extends i$2 {
       <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? u$2`
         <div id="headerContainer">
-          <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
-            <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
-          </${this.buttonTag}>
-          <${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
-            <slot name="header"></slot>
-          </${this.headerTag}>
-          <span id="subheader">
+          <div class="titleRow">
+            <${this.headerTag} class="header" display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
+              <slot name="header"></slot>
+            </${this.headerTag}>
+            <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
+              <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
+            </${this.buttonTag}>
+          </div>
+          <span class="subheader">
             <slot name="subheader"></slot>
           </span>
         </div>` : null}
@@ -15754,7 +15745,7 @@ class AuroBibtemplate extends i$2 {
 
 var bibTemplateVersion = '1.0.0';
 
-var styleCss$4 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block}:host [auro-input]{--ds-auro-input-background-color: transparent}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
+var styleCss$4 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block}:host [auro-input]{--ds-auro-input-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
 var styleEmphasizedCss = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
 
@@ -16600,6 +16591,7 @@ class AuroCombobox extends AuroElement$1 {
     // Listen for the dropdown to be shown or hidden
     this.dropdown.addEventListener("auroDropdown-toggled", (ev) => {
       this.dropdownOpen = ev.detail.expanded;
+      this.updateMenuShapeSize();
 
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
@@ -16626,7 +16618,11 @@ class AuroCombobox extends AuroElement$1 {
     this.setInputFocus = this.setInputFocus.bind(this);
     this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
       // event when the strategy(bib mode) is changed between fullscreen and floating
-      setTimeout(this.setInputFocus, 0);
+      this.updateMenuShapeSize();
+
+      setTimeout(() => {
+        this.setInputFocus();
+      }, 0);
     });
   }
 
@@ -16641,6 +16637,30 @@ class AuroCombobox extends AuroElement$1 {
     }
   }
 
+  /**
+   * Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
+   * @private
+   */
+  updateMenuShapeSize() {
+    if (!this.menu) {
+      return;
+    }
+
+    if (this.dropdown && this.dropdown.isBibFullscreen) {
+      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);
+      }
+
+      if (!this.getAttribute('shape')) {
+        this.menu.setAttribute('shape', this.layout === 'classic' ? 'box' : this.shape);
+      }
+    }
+  }
+
   /**
    * Binds all behavior needed to the menu after rendering.
    * @private
@@ -16649,14 +16669,7 @@ class AuroCombobox extends AuroElement$1 {
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
 
-    // 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);
-    }
-
-    if (!this.getAttribute('shape')) {
-      this.menu.setAttribute('shape', this.layout === 'classic' ? 'box' : this.shape);
-    }
+    this.updateMenuShapeSize();
 
     // a racing condition on custom-combobox with custom-menu
     if (!this.menu || this.menuShadowRoot === null) {
@@ -17131,6 +17144,7 @@ class AuroCombobox extends AuroElement$1 {
             <slot name="bib.fullscreen.headline" slot="header"></slot>
             <slot></slot>
             <${this.inputTag}
+              id="inputInBib"
               @input="${this.handleInputValueChange}"
               .a11yControls="${this.dropdownId}"
               .autocomplete="${this.autocomplete}"

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

@@ -2881,12 +2881,6 @@ class AuroFloatingUI {
   }
 
   setupHideHandlers() {
-    this.preventFocusLoseOnBibClick = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    this.element.bib.addEventListener('mousedown', this.preventFocusLoseOnBibClick);
-
     // Define handlers & store references
     this.focusHandler = () => this.handleFocusLoss();
 
@@ -2936,11 +2930,6 @@ class AuroFloatingUI {
   cleanupHideHandlers() {
     // Remove event listeners if they exist
 
-    if (this.preventFocusLoseOnBibClick) {
-      this.element.bib.removeEventListener('mousedown', this.preventFocusLoseOnBibClick);
-      delete this.preventFocusLoseOnBibClick;
-    }
-
     if (this.focusHandler) {
       document.removeEventListener('focusin', this.focusHandler);
       this.focusHandler = null;
@@ -5347,7 +5336,7 @@ var styleDefaultCss = i$5`.layoutDefault .typeIcon,:host(:not([layout])) .typeIc
 
 var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-background-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([ondark])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 
-var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: transparent}`;
+var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: transparent}`;
 
 var classicStyleCss = i$5`:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}:host([layout*=classic]) .mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;justify-content:center;cursor:text}:host([layout*=classic]) .mainContent label{overflow:hidden;cursor:text;padding-block:var(--ds-size-50, 0.25rem);text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host([layout*=classic]) .mainContent input{height:auto;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0}:host([layout*=classic]) .accents .typeIcon>*{margin-left:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.left{padding-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.right{padding-left:var(--ds-size-100, 0.5rem);margin-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]).withValue{justify-content:flex-start}:host([layout*=classic]):focus-within{justify-content:flex-start}`;
 
@@ -13682,7 +13671,7 @@ var inputVersion = '4.2.0';
 
 var colorCss$3$1 = i$5`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$4$1 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){box-sizing:border-box;padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$4$1 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
 
 var tokenCss = i$5`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
 
@@ -15586,13 +15575,15 @@ class AuroBibtemplate extends i$2 {
       <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? u$2`
         <div id="headerContainer">
-          <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
-            <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
-          </${this.buttonTag}>
-          <${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
-            <slot name="header"></slot>
-          </${this.headerTag}>
-          <span id="subheader">
+          <div class="titleRow">
+            <${this.headerTag} class="header" display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
+              <slot name="header"></slot>
+            </${this.headerTag}>
+            <${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
+              <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
+            </${this.buttonTag}>
+          </div>
+          <span class="subheader">
             <slot name="subheader"></slot>
           </span>
         </div>` : null}
@@ -15612,7 +15603,7 @@ class AuroBibtemplate extends i$2 {
 
 var bibTemplateVersion = '1.0.0';
 
-var styleCss$4 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block}:host [auro-input]{--ds-auro-input-background-color: transparent}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
+var styleCss$4 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block}:host [auro-input]{--ds-auro-input-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
 var styleEmphasizedCss = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}`;
 
@@ -16458,6 +16449,7 @@ class AuroCombobox extends AuroElement$1 {
     // Listen for the dropdown to be shown or hidden
     this.dropdown.addEventListener("auroDropdown-toggled", (ev) => {
       this.dropdownOpen = ev.detail.expanded;
+      this.updateMenuShapeSize();
 
       // wait a frame in case the bib gets hide immediately after showing because there is no value
       setTimeout(() => {
@@ -16484,7 +16476,11 @@ class AuroCombobox extends AuroElement$1 {
     this.setInputFocus = this.setInputFocus.bind(this);
     this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
       // event when the strategy(bib mode) is changed between fullscreen and floating
-      setTimeout(this.setInputFocus, 0);
+      this.updateMenuShapeSize();
+
+      setTimeout(() => {
+        this.setInputFocus();
+      }, 0);
     });
   }
 
@@ -16499,6 +16495,30 @@ class AuroCombobox extends AuroElement$1 {
     }
   }
 
+  /**
+   * Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
+   * @private
+   */
+  updateMenuShapeSize() {
+    if (!this.menu) {
+      return;
+    }
+
+    if (this.dropdown && this.dropdown.isBibFullscreen) {
+      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);
+      }
+
+      if (!this.getAttribute('shape')) {
+        this.menu.setAttribute('shape', this.layout === 'classic' ? 'box' : this.shape);
+      }
+    }
+  }
+
   /**
    * Binds all behavior needed to the menu after rendering.
    * @private
@@ -16507,14 +16527,7 @@ class AuroCombobox extends AuroElement$1 {
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
 
-    // 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);
-    }
-
-    if (!this.getAttribute('shape')) {
-      this.menu.setAttribute('shape', this.layout === 'classic' ? 'box' : this.shape);
-    }
+    this.updateMenuShapeSize();
 
     // a racing condition on custom-combobox with custom-menu
     if (!this.menu || this.menuShadowRoot === null) {
@@ -16989,6 +17002,7 @@ class AuroCombobox extends AuroElement$1 {
             <slot name="bib.fullscreen.headline" slot="header"></slot>
             <slot></slot>
             <${this.inputTag}
+              id="inputInBib"
               @input="${this.handleInputValueChange}"
               .a11yControls="${this.dropdownId}"
               .autocomplete="${this.autocomplete}"

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

@@ -339,6 +339,11 @@ export class AuroCombobox extends AuroElement {
      * @private
      */
     private setInputFocus;
+    /**
+     * Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
+     * @private
+     */
+    private updateMenuShapeSize;
     /**
      * Binds all behavior needed to the menu after rendering.
      * @private