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

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);
   }
 
@@ -16604,6 +16600,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 +16627,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 +16646,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 +16678,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) {
@@ -18468,12 +18486,12 @@ class AuroMenuOption extends AuroElement$1 {
     /**
      * @private
      */
-    this.shape = "box";
+    this.shape = undefined;
 
     /**
      * @private
      */
-    this.size = "sm";
+    this.size = undefined;
 
     /**
      * Generate unique names for dependency components.
@@ -18546,6 +18564,13 @@ class AuroMenuOption extends AuroElement$1 {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
 
+    if (!this.hasAttribute('size')) {
+      this.size = this.parentElement.getAttribute('size') || 'sm';
+    }
+    if (!this.hasAttribute('shape')) {
+      this.shape = this.parentElement.getAttribute('shape') || 'box';
+    }
+
     this.setAttribute('role', 'option');
     this.setAttribute('aria-selected', 'false');
 

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);
   }
 
@@ -16462,6 +16458,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 +16485,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 +16504,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 +16536,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) {
@@ -18326,12 +18344,12 @@ class AuroMenuOption extends AuroElement$1 {
     /**
      * @private
      */
-    this.shape = "box";
+    this.shape = undefined;
 
     /**
      * @private
      */
-    this.size = "sm";
+    this.size = undefined;
 
     /**
      * Generate unique names for dependency components.
@@ -18404,6 +18422,13 @@ class AuroMenuOption extends AuroElement$1 {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
 
+    if (!this.hasAttribute('size')) {
+      this.size = this.parentElement.getAttribute('size') || 'sm';
+    }
+    if (!this.hasAttribute('shape')) {
+      this.shape = this.parentElement.getAttribute('shape') || 'box';
+    }
+
     this.setAttribute('role', 'option');
     this.setAttribute('aria-selected', 'false');
 

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);
   }
 
@@ -16380,6 +16376,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 +16403,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 +16422,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 +16454,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);
   }
 
@@ -16380,6 +16376,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 +16403,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 +16422,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 +16454,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/datepicker/demo/api.min.js

@@ -23911,6 +23911,8 @@ class BaseInput extends AuroElement$2 {
      * @private
      */
     this.size = 'lg';
+
+    this.privateDefaults();
   }
 
   /**
@@ -23929,10 +23931,6 @@ class BaseInput extends AuroElement$2 {
     this.label = 'Input label is undefined';
     this.placeholderStr = '';
 
-    this.layout = 'classic';
-    this.shape = 'classic';
-    this.size = 'lg';
-
     this.allowedInputTypes = [
       "text",
       "number",
@@ -24338,8 +24336,6 @@ class BaseInput extends AuroElement$2 {
   connectedCallback() {
     super.connectedCallback();
 
-    this.privateDefaults();
-
     notifyOnLangChange(this);
   }
 

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

@@ -23652,6 +23652,8 @@ class BaseInput extends AuroElement$2 {
      * @private
      */
     this.size = 'lg';
+
+    this.privateDefaults();
   }
 
   /**
@@ -23670,10 +23672,6 @@ class BaseInput extends AuroElement$2 {
     this.label = 'Input label is undefined';
     this.placeholderStr = '';
 
-    this.layout = 'classic';
-    this.shape = 'classic';
-    this.size = 'lg';
-
     this.allowedInputTypes = [
       "text",
       "number",
@@ -24079,8 +24077,6 @@ class BaseInput extends AuroElement$2 {
   connectedCallback() {
     super.connectedCallback();
 
-    this.privateDefaults();
-
     notifyOnLangChange(this);
   }
 

package/components/datepicker/dist/index.js

@@ -23588,6 +23588,8 @@ class BaseInput extends AuroElement$2 {
      * @private
      */
     this.size = 'lg';
+
+    this.privateDefaults();
   }
 
   /**
@@ -23606,10 +23608,6 @@ class BaseInput extends AuroElement$2 {
     this.label = 'Input label is undefined';
     this.placeholderStr = '';
 
-    this.layout = 'classic';
-    this.shape = 'classic';
-    this.size = 'lg';
-
     this.allowedInputTypes = [
       "text",
       "number",
@@ -24015,8 +24013,6 @@ class BaseInput extends AuroElement$2 {
   connectedCallback() {
     super.connectedCallback();
 
-    this.privateDefaults();
-
     notifyOnLangChange(this);
   }
 

package/components/datepicker/dist/registered.js

@@ -23588,6 +23588,8 @@ class BaseInput extends AuroElement$2 {
      * @private
      */
     this.size = 'lg';
+
+    this.privateDefaults();
   }
 
   /**
@@ -23606,10 +23608,6 @@ class BaseInput extends AuroElement$2 {
     this.label = 'Input label is undefined';
     this.placeholderStr = '';
 
-    this.layout = 'classic';
-    this.shape = 'classic';
-    this.size = 'lg';
-
     this.allowedInputTypes = [
       "text",
       "number",
@@ -24015,8 +24013,6 @@ class BaseInput extends AuroElement$2 {
   connectedCallback() {
     super.connectedCallback();
 
-    this.privateDefaults();
-
     notifyOnLangChange(this);
   }
 

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

@@ -5153,6 +5153,8 @@ class BaseInput extends AuroElement$2 {
      * @private
      */
     this.size = 'lg';
+
+    this.privateDefaults();
   }
 
   /**
@@ -5171,10 +5173,6 @@ class BaseInput extends AuroElement$2 {
     this.label = 'Input label is undefined';
     this.placeholderStr = '';
 
-    this.layout = 'classic';
-    this.shape = 'classic';
-    this.size = 'lg';
-
     this.allowedInputTypes = [
       "text",
       "number",
@@ -5580,8 +5578,6 @@ class BaseInput extends AuroElement$2 {
   connectedCallback() {
     super.connectedCallback();
 
-    this.privateDefaults();
-
     notifyOnLangChange(this);
   }
 

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

@@ -5078,6 +5078,8 @@ class BaseInput extends AuroElement$2 {
      * @private
      */
     this.size = 'lg';
+
+    this.privateDefaults();
   }
 
   /**
@@ -5096,10 +5098,6 @@ class BaseInput extends AuroElement$2 {
     this.label = 'Input label is undefined';
     this.placeholderStr = '';
 
-    this.layout = 'classic';
-    this.shape = 'classic';
-    this.size = 'lg';
-
     this.allowedInputTypes = [
       "text",
       "number",
@@ -5505,8 +5503,6 @@ class BaseInput extends AuroElement$2 {
   connectedCallback() {
     super.connectedCallback();
 
-    this.privateDefaults();
-
     notifyOnLangChange(this);
   }
 

package/components/input/dist/index.js

@@ -5002,6 +5002,8 @@ class BaseInput extends AuroElement$2 {
      * @private
      */
     this.size = 'lg';
+
+    this.privateDefaults();
   }
 
   /**
@@ -5020,10 +5022,6 @@ class BaseInput extends AuroElement$2 {
     this.label = 'Input label is undefined';
     this.placeholderStr = '';
 
-    this.layout = 'classic';
-    this.shape = 'classic';
-    this.size = 'lg';
-
     this.allowedInputTypes = [
       "text",
       "number",
@@ -5429,8 +5427,6 @@ class BaseInput extends AuroElement$2 {
   connectedCallback() {
     super.connectedCallback();
 
-    this.privateDefaults();
-
     notifyOnLangChange(this);
   }
 

package/components/input/dist/registered.js

@@ -5002,6 +5002,8 @@ class BaseInput extends AuroElement$2 {
      * @private
      */
     this.size = 'lg';
+
+    this.privateDefaults();
   }
 
   /**
@@ -5020,10 +5022,6 @@ class BaseInput extends AuroElement$2 {
     this.label = 'Input label is undefined';
     this.placeholderStr = '';
 
-    this.layout = 'classic';
-    this.shape = 'classic';
-    this.size = 'lg';
-
     this.allowedInputTypes = [
       "text",
       "number",
@@ -5429,8 +5427,6 @@ class BaseInput extends AuroElement$2 {
   connectedCallback() {
     super.connectedCallback();
 
-    this.privateDefaults();
-
     notifyOnLangChange(this);
   }
 

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

@@ -1583,12 +1583,12 @@ class AuroMenuOption extends AuroElement$1 {
     /**
      * @private
      */
-    this.shape = "box";
+    this.shape = undefined;
 
     /**
      * @private
      */
-    this.size = "sm";
+    this.size = undefined;
 
     /**
      * Generate unique names for dependency components.
@@ -1661,6 +1661,13 @@ class AuroMenuOption extends AuroElement$1 {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
 
+    if (!this.hasAttribute('size')) {
+      this.size = this.parentElement.getAttribute('size') || 'sm';
+    }
+    if (!this.hasAttribute('shape')) {
+      this.shape = this.parentElement.getAttribute('shape') || 'box';
+    }
+
     this.setAttribute('role', 'option');
     this.setAttribute('aria-selected', 'false');
 

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

@@ -1543,12 +1543,12 @@ class AuroMenuOption extends AuroElement$1 {
     /**
      * @private
      */
-    this.shape = "box";
+    this.shape = undefined;
 
     /**
      * @private
      */
-    this.size = "sm";
+    this.size = undefined;
 
     /**
      * Generate unique names for dependency components.
@@ -1621,6 +1621,13 @@ class AuroMenuOption extends AuroElement$1 {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
 
+    if (!this.hasAttribute('size')) {
+      this.size = this.parentElement.getAttribute('size') || 'sm';
+    }
+    if (!this.hasAttribute('shape')) {
+      this.shape = this.parentElement.getAttribute('shape') || 'box';
+    }
+
     this.setAttribute('role', 'option');
     this.setAttribute('aria-selected', 'false');
 

package/components/menu/dist/index.js

@@ -1537,12 +1537,12 @@ class AuroMenuOption extends AuroElement$1 {
     /**
      * @private
      */
-    this.shape = "box";
+    this.shape = undefined;
 
     /**
      * @private
      */
-    this.size = "sm";
+    this.size = undefined;
 
     /**
      * Generate unique names for dependency components.
@@ -1615,6 +1615,13 @@ class AuroMenuOption extends AuroElement$1 {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
 
+    if (!this.hasAttribute('size')) {
+      this.size = this.parentElement.getAttribute('size') || 'sm';
+    }
+    if (!this.hasAttribute('shape')) {
+      this.shape = this.parentElement.getAttribute('shape') || 'box';
+    }
+
     this.setAttribute('role', 'option');
     this.setAttribute('aria-selected', 'false');
 

package/components/menu/dist/registered.js

@@ -1496,12 +1496,12 @@ class AuroMenuOption extends AuroElement$1 {
     /**
      * @private
      */
-    this.shape = "box";
+    this.shape = undefined;
 
     /**
      * @private
      */
-    this.size = "sm";
+    this.size = undefined;
 
     /**
      * Generate unique names for dependency components.
@@ -1574,6 +1574,13 @@ class AuroMenuOption extends AuroElement$1 {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
 
+    if (!this.hasAttribute('size')) {
+      this.size = this.parentElement.getAttribute('size') || 'sm';
+    }
+    if (!this.hasAttribute('shape')) {
+      this.shape = this.parentElement.getAttribute('shape') || 'box';
+    }
+
     this.setAttribute('role', 'option');
     this.setAttribute('aria-selected', 'false');
 

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

@@ -8108,6 +8108,7 @@ class AuroSelect extends AuroElement$4 {
       this.isPopoverVisible = this.dropdown.isPopoverVisible;
 
       if (this.dropdown.isPopoverVisible) {
+        this.updateMenuShapeSize();
         // wait til the bib gets fully rendered
         setTimeout(() => {
           if (this.dropdown.isBibFullscreen) {
@@ -8123,6 +8124,10 @@ class AuroSelect extends AuroElement$4 {
       }
     });
 
+    this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
+      this.updateMenuShapeSize();
+    });
+
     // setting up bibtemplate
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
 
@@ -8187,6 +8192,30 @@ class AuroSelect extends AuroElement$4 {
     this.dropdown.requestUpdate();
   }
 
+  /**
+   * 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
@@ -8203,14 +8232,7 @@ class AuroSelect extends AuroElement$4 {
       return;
     }
 
-    // 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();
 
     if (this.multiSelect) {
       this.menu.multiSelect = this.multiSelect;
@@ -10288,12 +10310,12 @@ class AuroMenuOption extends AuroElement$4 {
     /**
      * @private
      */
-    this.shape = "box";
+    this.shape = undefined;
 
     /**
      * @private
      */
-    this.size = "sm";
+    this.size = undefined;
 
     /**
      * Generate unique names for dependency components.
@@ -10366,6 +10388,13 @@ class AuroMenuOption extends AuroElement$4 {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
 
+    if (!this.hasAttribute('size')) {
+      this.size = this.parentElement.getAttribute('size') || 'sm';
+    }
+    if (!this.hasAttribute('shape')) {
+      this.shape = this.parentElement.getAttribute('shape') || 'box';
+    }
+
     this.setAttribute('role', 'option');
     this.setAttribute('aria-selected', 'false');
 

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

@@ -8016,6 +8016,7 @@ class AuroSelect extends AuroElement$4 {
       this.isPopoverVisible = this.dropdown.isPopoverVisible;
 
       if (this.dropdown.isPopoverVisible) {
+        this.updateMenuShapeSize();
         // wait til the bib gets fully rendered
         setTimeout(() => {
           if (this.dropdown.isBibFullscreen) {
@@ -8031,6 +8032,10 @@ class AuroSelect extends AuroElement$4 {
       }
     });
 
+    this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
+      this.updateMenuShapeSize();
+    });
+
     // setting up bibtemplate
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
 
@@ -8095,6 +8100,30 @@ class AuroSelect extends AuroElement$4 {
     this.dropdown.requestUpdate();
   }
 
+  /**
+   * 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
@@ -8111,14 +8140,7 @@ class AuroSelect extends AuroElement$4 {
       return;
     }
 
-    // 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();
 
     if (this.multiSelect) {
       this.menu.multiSelect = this.multiSelect;
@@ -10196,12 +10218,12 @@ class AuroMenuOption extends AuroElement$4 {
     /**
      * @private
      */
-    this.shape = "box";
+    this.shape = undefined;
 
     /**
      * @private
      */
-    this.size = "sm";
+    this.size = undefined;
 
     /**
      * Generate unique names for dependency components.
@@ -10274,6 +10296,13 @@ class AuroMenuOption extends AuroElement$4 {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
 
+    if (!this.hasAttribute('size')) {
+      this.size = this.parentElement.getAttribute('size') || 'sm';
+    }
+    if (!this.hasAttribute('shape')) {
+      this.shape = this.parentElement.getAttribute('shape') || 'box';
+    }
+
     this.setAttribute('role', 'option');
     this.setAttribute('aria-selected', 'false');
 

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

@@ -344,6 +344,11 @@ export class AuroSelect extends AuroElement {
      * @returns {void}
      */
     private updateDisplayedValue;
+    /**
+     * 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/select/dist/index.js

@@ -7970,6 +7970,7 @@ class AuroSelect extends AuroElement$3 {
       this.isPopoverVisible = this.dropdown.isPopoverVisible;
 
       if (this.dropdown.isPopoverVisible) {
+        this.updateMenuShapeSize();
         // wait til the bib gets fully rendered
         setTimeout(() => {
           if (this.dropdown.isBibFullscreen) {
@@ -7985,6 +7986,10 @@ class AuroSelect extends AuroElement$3 {
       }
     });
 
+    this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
+      this.updateMenuShapeSize();
+    });
+
     // setting up bibtemplate
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
 
@@ -8049,6 +8054,30 @@ class AuroSelect extends AuroElement$3 {
     this.dropdown.requestUpdate();
   }
 
+  /**
+   * 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
@@ -8065,14 +8094,7 @@ class AuroSelect extends AuroElement$3 {
       return;
     }
 
-    // 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();
 
     if (this.multiSelect) {
       this.menu.multiSelect = this.multiSelect;

package/components/select/dist/registered.js

@@ -7970,6 +7970,7 @@ class AuroSelect extends AuroElement$3 {
       this.isPopoverVisible = this.dropdown.isPopoverVisible;
 
       if (this.dropdown.isPopoverVisible) {
+        this.updateMenuShapeSize();
         // wait til the bib gets fully rendered
         setTimeout(() => {
           if (this.dropdown.isBibFullscreen) {
@@ -7985,6 +7986,10 @@ class AuroSelect extends AuroElement$3 {
       }
     });
 
+    this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
+      this.updateMenuShapeSize();
+    });
+
     // setting up bibtemplate
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
 
@@ -8049,6 +8054,30 @@ class AuroSelect extends AuroElement$3 {
     this.dropdown.requestUpdate();
   }
 
+  /**
+   * 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
@@ -8065,14 +8094,7 @@ class AuroSelect extends AuroElement$3 {
       return;
     }
 
-    // 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();
 
     if (this.multiSelect) {
       this.menu.multiSelect = this.multiSelect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr811.1",
+  "version": "0.0.0-pr816.0",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {