@aurodesignsystem-dev/auro-formkit 0.0.0-pr815.0 → 0.0.0-pr816.1

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)}#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} class="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)}#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} class="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/combobox/demo/api.min.js

@@ -10479,6 +10479,8 @@ class BaseInput extends AuroElement$2$1 {
      * @private
      */
     this.size = 'lg';
+
+    this.privateDefaults();
   }
 
   /**
@@ -10497,10 +10499,6 @@ class BaseInput extends AuroElement$2$1 {
     this.label = 'Input label is undefined';
     this.placeholderStr = '';
 
-    this.layout = 'classic';
-    this.shape = 'classic';
-    this.size = 'lg';
-
     this.allowedInputTypes = [
       "text",
       "number",
@@ -10906,8 +10904,6 @@ class BaseInput extends AuroElement$2$1 {
   connectedCallback() {
     super.connectedCallback();
 
-    this.privateDefaults();
-
     notifyOnLangChange(this);
   }
 
@@ -13828,7 +13824,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)}#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)}`;
 
@@ -15732,13 +15728,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} class="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}
@@ -16604,6 +16602,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(() => {
@@ -16630,7 +16629,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);
     });
   }
 
@@ -16645,6 +16648,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
@@ -16653,14 +16680,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) {

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

@@ -10337,6 +10337,8 @@ class BaseInput extends AuroElement$2$1 {
      * @private
      */
     this.size = 'lg';
+
+    this.privateDefaults();
   }
 
   /**
@@ -10355,10 +10357,6 @@ class BaseInput extends AuroElement$2$1 {
     this.label = 'Input label is undefined';
     this.placeholderStr = '';
 
-    this.layout = 'classic';
-    this.shape = 'classic';
-    this.size = 'lg';
-
     this.allowedInputTypes = [
       "text",
       "number",
@@ -10764,8 +10762,6 @@ class BaseInput extends AuroElement$2$1 {
   connectedCallback() {
     super.connectedCallback();
 
-    this.privateDefaults();
-
     notifyOnLangChange(this);
   }
 
@@ -13686,7 +13682,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)}#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)}`;
 
@@ -15590,13 +15586,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} class="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}
@@ -16462,6 +16460,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(() => {
@@ -16488,7 +16487,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);
     });
   }
 
@@ -16503,6 +16506,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
@@ -16511,14 +16538,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) {

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

package/components/combobox/dist/index.js

@@ -10255,6 +10255,8 @@ class BaseInput extends AuroElement$2$1 {
      * @private
      */
     this.size = 'lg';
+
+    this.privateDefaults();
   }
 
   /**
@@ -10273,10 +10275,6 @@ class BaseInput extends AuroElement$2$1 {
     this.label = 'Input label is undefined';
     this.placeholderStr = '';
 
-    this.layout = 'classic';
-    this.shape = 'classic';
-    this.size = 'lg';
-
     this.allowedInputTypes = [
       "text",
       "number",
@@ -10682,8 +10680,6 @@ class BaseInput extends AuroElement$2$1 {
   connectedCallback() {
     super.connectedCallback();
 
-    this.privateDefaults();
-
     notifyOnLangChange(this);
   }
 
@@ -13604,7 +13600,7 @@ var inputVersion = '4.2.0';
 
 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)}#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)}`;
 
@@ -15508,13 +15504,15 @@ class AuroBibtemplate extends LitElement {
       <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? html`
         <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} class="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}
@@ -16380,6 +16378,7 @@ class AuroCombobox extends AuroElement {
     // 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(() => {
@@ -16406,7 +16405,11 @@ class AuroCombobox extends AuroElement {
     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);
     });
   }
 
@@ -16421,6 +16424,30 @@ class AuroCombobox extends AuroElement {
     }
   }
 
+  /**
+   * 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
@@ -16429,14 +16456,7 @@ class AuroCombobox extends AuroElement {
   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) {

package/components/combobox/dist/registered.js

@@ -10255,6 +10255,8 @@ class BaseInput extends AuroElement$2$1 {
      * @private
      */
     this.size = 'lg';
+
+    this.privateDefaults();
   }
 
   /**
@@ -10273,10 +10275,6 @@ class BaseInput extends AuroElement$2$1 {
     this.label = 'Input label is undefined';
     this.placeholderStr = '';
 
-    this.layout = 'classic';
-    this.shape = 'classic';
-    this.size = 'lg';
-
     this.allowedInputTypes = [
       "text",
       "number",
@@ -10682,8 +10680,6 @@ class BaseInput extends AuroElement$2$1 {
   connectedCallback() {
     super.connectedCallback();
 
-    this.privateDefaults();
-
     notifyOnLangChange(this);
   }
 
@@ -13604,7 +13600,7 @@ var inputVersion = '4.2.0';
 
 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)}#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)}`;
 
@@ -15508,13 +15504,15 @@ class AuroBibtemplate extends LitElement {
       <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? html`
         <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} class="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}
@@ -16380,6 +16378,7 @@ class AuroCombobox extends AuroElement {
     // 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(() => {
@@ -16406,7 +16405,11 @@ class AuroCombobox extends AuroElement {
     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);
     });
   }
 
@@ -16421,6 +16424,30 @@ class AuroCombobox extends AuroElement {
     }
   }
 
+  /**
+   * 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
@@ -16429,14 +16456,7 @@ class AuroCombobox extends AuroElement {
   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) {

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

@@ -7481,7 +7481,7 @@ var dropdownVersion = '3.0.0';
 
 var colorCss$3 = 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 = 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 = 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)}#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)}`;
 
@@ -9385,13 +9385,15 @@ class AuroBibtemplate extends i$2 {
       <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? u`
         <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} class="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}