@aurodesignsystem-dev/auro-formkit 0.0.0-pr816.2 → 0.0.0-pr819.1

package/components/select/dist/index.js

@@ -5358,7 +5358,7 @@ var dropdownVersion = '3.0.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;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%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#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}#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 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)}`;
 
@@ -7262,15 +7262,13 @@ class AuroBibtemplate extends LitElement {
       <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? html`
         <div id="headerContainer">
-          <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">
+          <${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">
             <slot name="subheader"></slot>
           </span>
         </div>` : null}
@@ -7972,7 +7970,6 @@ 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) {
@@ -7988,10 +7985,6 @@ class AuroSelect extends AuroElement$3 {
       }
     });
 
-    this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
-      this.updateMenuShapeSize();
-    });
-
     // setting up bibtemplate
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
 
@@ -8056,30 +8049,6 @@ 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
@@ -8096,7 +8065,14 @@ class AuroSelect extends AuroElement$3 {
       return;
     }
 
-    this.updateMenuShapeSize();
+    // 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);
+    }
 
     if (this.multiSelect) {
       this.menu.multiSelect = this.multiSelect;

package/components/select/dist/registered.js

@@ -5358,7 +5358,7 @@ var dropdownVersion = '3.0.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;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%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#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}#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 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)}`;
 
@@ -7262,15 +7262,13 @@ class AuroBibtemplate extends LitElement {
       <div id="bibTemplate" part="bibtemplate">
       ${this.isFullscreen ? html`
         <div id="headerContainer">
-          <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">
+          <${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">
             <slot name="subheader"></slot>
           </span>
         </div>` : null}
@@ -7972,7 +7970,6 @@ 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) {
@@ -7988,10 +7985,6 @@ class AuroSelect extends AuroElement$3 {
       }
     });
 
-    this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
-      this.updateMenuShapeSize();
-    });
-
     // setting up bibtemplate
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
 
@@ -8056,30 +8049,6 @@ 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
@@ -8096,7 +8065,14 @@ class AuroSelect extends AuroElement$3 {
       return;
     }
 
-    this.updateMenuShapeSize();
+    // 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);
+    }
 
     if (this.multiSelect) {
       this.menu.multiSelect = this.multiSelect;

package/package.json

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