@aurodesignsystem/auro-formkit 2.0.0-beta.47 → 2.0.0-beta.49

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

@@ -1616,7 +1616,7 @@ class AuroCounter extends r$9 {
   }
 }
 
-var styleCss$5 = i$g`:host{position:relative;display:block}[slot=trigger],::slotted([slot=valueText]){display:block;overflow:hidden;text-overflow:ellipsis}[auro-dropdown]{display:block}[auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}`;
+var styleCss$5 = i$g`:host{position:relative;display:block}[slot=trigger],::slotted([slot=valueText]){display:block;overflow:hidden;text-overflow:ellipsis}[auro-dropdown]{display:block}[auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}#slotHolder{display:none}`;
 
 /**
  * @license
@@ -5019,7 +5019,7 @@ const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litS
 
 var colorCss$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$2 = 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]){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}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#bodyContainer{overflow:auto;flex:1 1 100%;padding-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$2 = 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]){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}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#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-color-container-primary-default, #ffffff)}`;
 
@@ -5864,6 +5864,11 @@ class AuroCounterGroup extends r$9 {
      */
     this.dropdown = undefined;
 
+    /**
+     * @private
+     */
+    this.bibtemplate = undefined;
+
     /**
      * @private
      */
@@ -6089,22 +6094,39 @@ class AuroCounterGroup extends r$9 {
    * This sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.
    */
   configureBibtemplate() {
-    const bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
-    bibtemplate.addEventListener('close-click', () => {
+    this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
+    this.bibtemplate.addEventListener('close-click', () => {
       if (this.dropdown.isPopoverVisible) {
         this.dropdown.hide();
       }
     });
-    const bibHeader = this.querySelector('[slot="bib.fullscreen.headline"]');
-    if (bibHeader) {
-      bibHeader.setAttribute('slot', 'header');
-      bibtemplate.append(bibHeader);
+  }
+
+  /**
+   * Watch for slot changes and recalculate the menuoptions.
+   * @private
+   * @param {Event} event - `slotchange` event.
+   * @returns {void}
+   */
+  handleSlotChange(event) {
+    let targetSlot = '';
+    if (event.target.name === 'bib.fullscreen.headline') {
+      targetSlot = 'header';
+    } else if (event.target.name === 'bib.fullscreen.footer') {
+      targetSlot = 'footer';
     }
+    if (targetSlot) {
+      if (!this.dropdown) {
+        this.configureDropdownCounters();
+      }
 
-    const bibFooter = this.querySelector('[slot="bib.fullscreen.footer"]');
-    if (bibFooter) {
-      bibFooter.setAttribute('slot', 'footer');
-      bibtemplate.append(bibFooter);
+      this.bibtemplate.querySelectorAll(`[slot="${targetSlot}"]`).forEach((old) => old.remove());
+
+      event.target.assignedNodes().forEach((node) => {
+        const clone = node.cloneNode(true);
+        clone.setAttribute('slot', targetSlot);
+        this.bibtemplate.append(clone);
+      });
     }
   }
 
@@ -6183,19 +6205,23 @@ class AuroCounterGroup extends r$9 {
     return u$6`
     ${this.isDropdown
       ? u$6`<${this.dropdownTag} common chevron fullscreenBreakpoint="${this.fullscreenBreakpoint}">
-
         <div slot="trigger"><slot name="valueText">
           ${this.counters && Array.from(this.counters).map((counter, index) => `${counter.value} ${counter.defaultSlot}${index !== this.counters.length - 1 ? ', ' : ''}`)}
         </slot></div>
         <div slot="label"><slot name="label"></slot></div>
         <div slot="helpText"><slot name="helpText"></slot></div>
 
-          <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
+        <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
           <auro-counter-wrapper isInDropdown>
           </auro-counter-wrapper>
         </${this.bibtemplateTag}>
       </${this.dropdownTag}>
-      <slot @slotchange=${() => this.configureDropdownCounters()}></slot>`
+      <slot @slotchange=${() => this.configureDropdownCounters()}></slot>
+      <div id="slotHolder">
+        <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
+        <slot name="bib.fullscreen.footer" @slotchange="${this.handleSlotChange}"></slot>
+      </div>
+      `
       : u$6`<auro-counter-wrapper><slot @slotchange=${() => this.configureCounters()}></slot></auro-counter-wrapper>`
     }`;
   }

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

@@ -1616,7 +1616,7 @@ class AuroCounter extends r$9 {
   }
 }
 
-var styleCss$5 = i$g`:host{position:relative;display:block}[slot=trigger],::slotted([slot=valueText]){display:block;overflow:hidden;text-overflow:ellipsis}[auro-dropdown]{display:block}[auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}`;
+var styleCss$5 = i$g`:host{position:relative;display:block}[slot=trigger],::slotted([slot=valueText]){display:block;overflow:hidden;text-overflow:ellipsis}[auro-dropdown]{display:block}[auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}#slotHolder{display:none}`;
 
 /**
  * @license
@@ -5019,7 +5019,7 @@ const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litS
 
 var colorCss$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$2 = 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]){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}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#bodyContainer{overflow:auto;flex:1 1 100%;padding-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$2 = 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]){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}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#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-color-container-primary-default, #ffffff)}`;
 
@@ -5864,6 +5864,11 @@ class AuroCounterGroup extends r$9 {
      */
     this.dropdown = undefined;
 
+    /**
+     * @private
+     */
+    this.bibtemplate = undefined;
+
     /**
      * @private
      */
@@ -6089,22 +6094,39 @@ class AuroCounterGroup extends r$9 {
    * This sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.
    */
   configureBibtemplate() {
-    const bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
-    bibtemplate.addEventListener('close-click', () => {
+    this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
+    this.bibtemplate.addEventListener('close-click', () => {
       if (this.dropdown.isPopoverVisible) {
         this.dropdown.hide();
       }
     });
-    const bibHeader = this.querySelector('[slot="bib.fullscreen.headline"]');
-    if (bibHeader) {
-      bibHeader.setAttribute('slot', 'header');
-      bibtemplate.append(bibHeader);
+  }
+
+  /**
+   * Watch for slot changes and recalculate the menuoptions.
+   * @private
+   * @param {Event} event - `slotchange` event.
+   * @returns {void}
+   */
+  handleSlotChange(event) {
+    let targetSlot = '';
+    if (event.target.name === 'bib.fullscreen.headline') {
+      targetSlot = 'header';
+    } else if (event.target.name === 'bib.fullscreen.footer') {
+      targetSlot = 'footer';
     }
+    if (targetSlot) {
+      if (!this.dropdown) {
+        this.configureDropdownCounters();
+      }
 
-    const bibFooter = this.querySelector('[slot="bib.fullscreen.footer"]');
-    if (bibFooter) {
-      bibFooter.setAttribute('slot', 'footer');
-      bibtemplate.append(bibFooter);
+      this.bibtemplate.querySelectorAll(`[slot="${targetSlot}"]`).forEach((old) => old.remove());
+
+      event.target.assignedNodes().forEach((node) => {
+        const clone = node.cloneNode(true);
+        clone.setAttribute('slot', targetSlot);
+        this.bibtemplate.append(clone);
+      });
     }
   }
 
@@ -6183,19 +6205,23 @@ class AuroCounterGroup extends r$9 {
     return u$6`
     ${this.isDropdown
       ? u$6`<${this.dropdownTag} common chevron fullscreenBreakpoint="${this.fullscreenBreakpoint}">
-
         <div slot="trigger"><slot name="valueText">
           ${this.counters && Array.from(this.counters).map((counter, index) => `${counter.value} ${counter.defaultSlot}${index !== this.counters.length - 1 ? ', ' : ''}`)}
         </slot></div>
         <div slot="label"><slot name="label"></slot></div>
         <div slot="helpText"><slot name="helpText"></slot></div>
 
-          <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
+        <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
           <auro-counter-wrapper isInDropdown>
           </auro-counter-wrapper>
         </${this.bibtemplateTag}>
       </${this.dropdownTag}>
-      <slot @slotchange=${() => this.configureDropdownCounters()}></slot>`
+      <slot @slotchange=${() => this.configureDropdownCounters()}></slot>
+      <div id="slotHolder">
+        <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
+        <slot name="bib.fullscreen.footer" @slotchange="${this.handleSlotChange}"></slot>
+      </div>
+      `
       : u$6`<auro-counter-wrapper><slot @slotchange=${() => this.configureCounters()}></slot></auro-counter-wrapper>`
     }`;
   }

package/components/counter/dist/auro-counter-group.d.ts

@@ -95,6 +95,10 @@ export class AuroCounterGroup extends LitElement {
      * @private
      */
     private dropdown;
+    /**
+     * @private
+     */
+    private bibtemplate;
     /**
      * @private
      */
@@ -147,6 +151,13 @@ export class AuroCounterGroup extends LitElement {
      * This sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.
      */
     private configureBibtemplate;
+    /**
+     * Watch for slot changes and recalculate the menuoptions.
+     * @private
+     * @param {Event} event - `slotchange` event.
+     * @returns {void}
+     */
+    private handleSlotChange;
     /**
      * Safely converts a value to a number, returning 0 if invalid.
      * @private

package/components/counter/dist/index.js

@@ -1616,7 +1616,7 @@ class AuroCounter extends r$9 {
   }
 }
 
-var styleCss$5 = i$g`:host{position:relative;display:block}[slot=trigger],::slotted([slot=valueText]){display:block;overflow:hidden;text-overflow:ellipsis}[auro-dropdown]{display:block}[auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}`;
+var styleCss$5 = i$g`:host{position:relative;display:block}[slot=trigger],::slotted([slot=valueText]){display:block;overflow:hidden;text-overflow:ellipsis}[auro-dropdown]{display:block}[auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}#slotHolder{display:none}`;
 
 /**
  * @license
@@ -5019,7 +5019,7 @@ const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litS
 
 var colorCss$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$2 = 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]){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}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#bodyContainer{overflow:auto;flex:1 1 100%;padding-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$2 = 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]){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}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#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-color-container-primary-default, #ffffff)}`;
 
@@ -5864,6 +5864,11 @@ class AuroCounterGroup extends r$9 {
      */
     this.dropdown = undefined;
 
+    /**
+     * @private
+     */
+    this.bibtemplate = undefined;
+
     /**
      * @private
      */
@@ -6089,22 +6094,39 @@ class AuroCounterGroup extends r$9 {
    * This sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.
    */
   configureBibtemplate() {
-    const bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
-    bibtemplate.addEventListener('close-click', () => {
+    this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
+    this.bibtemplate.addEventListener('close-click', () => {
       if (this.dropdown.isPopoverVisible) {
         this.dropdown.hide();
       }
     });
-    const bibHeader = this.querySelector('[slot="bib.fullscreen.headline"]');
-    if (bibHeader) {
-      bibHeader.setAttribute('slot', 'header');
-      bibtemplate.append(bibHeader);
+  }
+
+  /**
+   * Watch for slot changes and recalculate the menuoptions.
+   * @private
+   * @param {Event} event - `slotchange` event.
+   * @returns {void}
+   */
+  handleSlotChange(event) {
+    let targetSlot = '';
+    if (event.target.name === 'bib.fullscreen.headline') {
+      targetSlot = 'header';
+    } else if (event.target.name === 'bib.fullscreen.footer') {
+      targetSlot = 'footer';
     }
+    if (targetSlot) {
+      if (!this.dropdown) {
+        this.configureDropdownCounters();
+      }
 
-    const bibFooter = this.querySelector('[slot="bib.fullscreen.footer"]');
-    if (bibFooter) {
-      bibFooter.setAttribute('slot', 'footer');
-      bibtemplate.append(bibFooter);
+      this.bibtemplate.querySelectorAll(`[slot="${targetSlot}"]`).forEach((old) => old.remove());
+
+      event.target.assignedNodes().forEach((node) => {
+        const clone = node.cloneNode(true);
+        clone.setAttribute('slot', targetSlot);
+        this.bibtemplate.append(clone);
+      });
     }
   }
 
@@ -6183,19 +6205,23 @@ class AuroCounterGroup extends r$9 {
     return u$6`
     ${this.isDropdown
       ? u$6`<${this.dropdownTag} common chevron fullscreenBreakpoint="${this.fullscreenBreakpoint}">
-
         <div slot="trigger"><slot name="valueText">
           ${this.counters && Array.from(this.counters).map((counter, index) => `${counter.value} ${counter.defaultSlot}${index !== this.counters.length - 1 ? ', ' : ''}`)}
         </slot></div>
         <div slot="label"><slot name="label"></slot></div>
         <div slot="helpText"><slot name="helpText"></slot></div>
 
-          <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
+        <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
           <auro-counter-wrapper isInDropdown>
           </auro-counter-wrapper>
         </${this.bibtemplateTag}>
       </${this.dropdownTag}>
-      <slot @slotchange=${() => this.configureDropdownCounters()}></slot>`
+      <slot @slotchange=${() => this.configureDropdownCounters()}></slot>
+      <div id="slotHolder">
+        <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
+        <slot name="bib.fullscreen.footer" @slotchange="${this.handleSlotChange}"></slot>
+      </div>
+      `
       : u$6`<auro-counter-wrapper><slot @slotchange=${() => this.configureCounters()}></slot></auro-counter-wrapper>`
     }`;
   }

package/components/counter/dist/registered.js

@@ -1616,7 +1616,7 @@ class AuroCounter extends r$9 {
   }
 }
 
-var styleCss$5 = i$g`:host{position:relative;display:block}[slot=trigger],::slotted([slot=valueText]){display:block;overflow:hidden;text-overflow:ellipsis}[auro-dropdown]{display:block}[auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}`;
+var styleCss$5 = i$g`:host{position:relative;display:block}[slot=trigger],::slotted([slot=valueText]){display:block;overflow:hidden;text-overflow:ellipsis}[auro-dropdown]{display:block}[auro-dropdown]::part(trigger){max-height:var(--ds-size-300, 1.5rem)}#slotHolder{display:none}`;
 
 /**
  * @license
@@ -5019,7 +5019,7 @@ const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litS
 
 var colorCss$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$2 = 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]){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}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#bodyContainer{overflow:auto;flex:1 1 100%;padding-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$2 = 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]){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}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#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-color-container-primary-default, #ffffff)}`;
 
@@ -5864,6 +5864,11 @@ class AuroCounterGroup extends r$9 {
      */
     this.dropdown = undefined;
 
+    /**
+     * @private
+     */
+    this.bibtemplate = undefined;
+
     /**
      * @private
      */
@@ -6089,22 +6094,39 @@ class AuroCounterGroup extends r$9 {
    * This sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.
    */
   configureBibtemplate() {
-    const bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
-    bibtemplate.addEventListener('close-click', () => {
+    this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
+    this.bibtemplate.addEventListener('close-click', () => {
       if (this.dropdown.isPopoverVisible) {
         this.dropdown.hide();
       }
     });
-    const bibHeader = this.querySelector('[slot="bib.fullscreen.headline"]');
-    if (bibHeader) {
-      bibHeader.setAttribute('slot', 'header');
-      bibtemplate.append(bibHeader);
+  }
+
+  /**
+   * Watch for slot changes and recalculate the menuoptions.
+   * @private
+   * @param {Event} event - `slotchange` event.
+   * @returns {void}
+   */
+  handleSlotChange(event) {
+    let targetSlot = '';
+    if (event.target.name === 'bib.fullscreen.headline') {
+      targetSlot = 'header';
+    } else if (event.target.name === 'bib.fullscreen.footer') {
+      targetSlot = 'footer';
     }
+    if (targetSlot) {
+      if (!this.dropdown) {
+        this.configureDropdownCounters();
+      }
 
-    const bibFooter = this.querySelector('[slot="bib.fullscreen.footer"]');
-    if (bibFooter) {
-      bibFooter.setAttribute('slot', 'footer');
-      bibtemplate.append(bibFooter);
+      this.bibtemplate.querySelectorAll(`[slot="${targetSlot}"]`).forEach((old) => old.remove());
+
+      event.target.assignedNodes().forEach((node) => {
+        const clone = node.cloneNode(true);
+        clone.setAttribute('slot', targetSlot);
+        this.bibtemplate.append(clone);
+      });
     }
   }
 
@@ -6183,19 +6205,23 @@ class AuroCounterGroup extends r$9 {
     return u$6`
     ${this.isDropdown
       ? u$6`<${this.dropdownTag} common chevron fullscreenBreakpoint="${this.fullscreenBreakpoint}">
-
         <div slot="trigger"><slot name="valueText">
           ${this.counters && Array.from(this.counters).map((counter, index) => `${counter.value} ${counter.defaultSlot}${index !== this.counters.length - 1 ? ', ' : ''}`)}
         </slot></div>
         <div slot="label"><slot name="label"></slot></div>
         <div slot="helpText"><slot name="helpText"></slot></div>
 
-          <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
+        <${this.bibtemplateTag} ?large="${this.largeMobileHeadline}">
           <auro-counter-wrapper isInDropdown>
           </auro-counter-wrapper>
         </${this.bibtemplateTag}>
       </${this.dropdownTag}>
-      <slot @slotchange=${() => this.configureDropdownCounters()}></slot>`
+      <slot @slotchange=${() => this.configureDropdownCounters()}></slot>
+      <div id="slotHolder">
+        <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
+        <slot name="bib.fullscreen.footer" @slotchange="${this.handleSlotChange}"></slot>
+      </div>
+      `
       : u$6`<auro-counter-wrapper><slot @slotchange=${() => this.configureCounters()}></slot></auro-counter-wrapper>`
     }`;
   }

package/components/datepicker/README.md

@@ -94,10 +94,10 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@6.0.0/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.46/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.46/dist/auro-input__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.46/dist/auro-popover__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.46/dist/auro-datepicker__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.48/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.48/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.48/dist/auro-popover__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.48/dist/auro-datepicker__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-datepicker use cases

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

@@ -1063,11 +1063,11 @@ var colorCss$b = i$h`.util_displayInline{display:inline}.util_displayInlineBlock
 
 var tokensCss$8 = i$h`:host{--ds-auro-datepicker-placeholder-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-datepicker-range-input-divider-color: var(--ds-color-border-primary-default, #585e67);--ds-auro-calendar-mobile-header-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-mobile-header-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-calendar-mobile-header-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-calendar-nav-btn-border-color: transparent;--ds-auro-calendar-nav-btn-chevron-color: var(--ds-color-icon-ui-primary-default-default, #2c67b5);--ds-auro-calendar-nav-btn-container-color: transparent;--ds-auro-calendar-month-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-month-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-calendar-month-header-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-calendar-cell-border-color: transparent;--ds-auro-calendar-cell-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-calendar-cell-container-color: transparent;--ds-auro-calendar-cell-in-range-color: var(--ds-color-container-secondary-default, #f7f7f7);--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
-var styleCss$a = i$h`:host{--calendar-width: 336px;--mobile-footer-height: 150px;--mobile-header-height: 68px;height:100vh;height:100dvh}.calendars{display:flex;flex-direction:row}.calendarNavBtn{display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.prevMonth,.nextMonth{position:absolute;top:var(--ds-size-200, 1rem)}.prevMonth{left:var(--ds-size-50, 0.25rem)}.nextMonth{right:var(--ds-size-50, 0.25rem)}.headerActions{padding:0 var(--ds-size-200, 1rem)}.mobileHeader{width:100%;height:var(--mobile-header-height);z-index:1;align-items:center;flex-direction:row}.headerDateFrom{display:flex;height:var(--mobile-header-height);flex:1;flex-direction:column;justify-content:center;padding:0 var(--ds-size-150, 0.75rem) 0 var(--ds-size-200, 1rem)}.mobileDateLabel{font-size:var(--ds-text-body-size-xs, 0.75rem)}.headerDateTo{height:calc(var(--mobile-header-height) - var(--ds-size-300, 1.5rem));padding:var(--ds-size-300, 1.5rem) var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host(:not([noRange])) .headerDateTo{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center}:host(:not([noRange])) .headerDateTo:after{position:absolute;top:calc(50% + 10px);left:0;display:block;width:1px;height:var(--ds-size-300, 1.5rem);content:"";transform:translateY(-50%)}.mobileFooter{display:none;width:100%;align-items:flex-end;flex-direction:column;justify-content:flex-end}.mobileFooterActions{position:relative;bottom:0;left:50%;display:none;width:calc(100% - var(--ds-size-200, 1rem)*2);align-items:flex-end;flex-direction:column;justify-content:flex-end;padding:var(--ds-size-150) calc(var(--ds-size-200, 1rem));transform:translateX(-50%)}.mobileFooterActions auro-button{width:100%}:host([isfullscreen]){width:100%}:host([isfullscreen]) .prevMonth,:host([isfullscreen]) .nextMonth{display:none}:host([isfullscreen]) .mobileHeader,:host([isfullscreen]) .mobileFooter,:host([isfullscreen]) .mobileFooterActions{display:flex}:host([isfullscreen]) .calendarWrapper{display:flex;height:100%;max-height:100dvh;flex-direction:column;overflow:auto hidden}:host([isfullscreen]) .calendars{display:flex;flex-direction:column;flex:1;align-items:center;width:100%;overflow-y:scroll;overscroll-behavior:contain}:host([isfullscreen]) .calendars:after{display:block;width:100%;height:var(--mobile-footer-height);content:""}`;
+var styleCss$a = i$h`:host{--calendar-width: 336px;--mobile-footer-height: 150px;--mobile-header-height: 68px;height:100vh;height:100dvh}.calendars{display:flex;flex-direction:row}.calendarNavButtons{position:absolute;top:var(--ds-size-200, 1rem);right:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem)}.calendarNavBtn{display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.prevMonth,.nextMonth{position:absolute;top:0}.prevMonth{left:0}.nextMonth{right:0}.headerActions{padding:0 var(--ds-size-200, 1rem)}.mobileHeader{width:100%;height:var(--mobile-header-height);z-index:1;align-items:center;flex-direction:row}.headerDateFrom{display:flex;height:var(--mobile-header-height);flex:1;flex-direction:column;justify-content:center;padding:0 var(--ds-size-150, 0.75rem) 0 var(--ds-size-200, 1rem)}.mobileDateLabel{font-size:var(--ds-text-body-size-xs, 0.75rem)}.headerDateTo{height:calc(var(--mobile-header-height) - var(--ds-size-300, 1.5rem));padding:var(--ds-size-300, 1.5rem) var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host(:not([noRange])) .headerDateTo{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center}:host(:not([noRange])) .headerDateTo:after{position:absolute;top:calc(50% + 10px);left:0;display:block;width:1px;height:var(--ds-size-300, 1.5rem);content:"";transform:translateY(-50%)}.mobileFooter{display:none;width:100%;align-items:flex-end;flex-direction:column;justify-content:flex-end}.mobileFooterActions{position:relative;bottom:0;left:50%;display:none;width:calc(100% - var(--ds-size-200, 1rem)*2);align-items:flex-end;flex-direction:column;justify-content:flex-end;padding:var(--ds-size-150) calc(var(--ds-size-200, 1rem));transform:translateX(-50%)}.mobileFooterActions auro-button{width:100%}:host([isfullscreen]){width:100%;max-height:100dvh;overflow:hidden}:host([isfullscreen]) .prevMonth,:host([isfullscreen]) .nextMonth{display:none}:host([isfullscreen]) .mobileHeader,:host([isfullscreen]) .mobileFooter,:host([isfullscreen]) .mobileFooterActions{display:flex}:host([isfullscreen]) .calendarWrapper{display:flex;flex-direction:column}:host([isfullscreen]) .calendars{display:flex;flex-direction:column;flex:1;align-items:center;width:100%;overflow-y:scroll;overscroll-behavior:contain}:host([isfullscreen]) .calendars:after{display:block;width:100%;height:var(--mobile-footer-height);content:""}`;
 
 var colorCss$a = i$h`.calendarNavBtn{border-color:var(--ds-auro-calendar-nav-btn-border-color);background-color:var(--ds-auro-calendar-nav-btn-container-color);color:var(--ds-auro-calendar-nav-btn-chevron-color)}.calendarNavBtn:hover,.calendarNavBtn:focus{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}.calendarNavBtn:active{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-calendar-nav-btn-border-color)}.mobileHeader{background-color:var(--ds-auro-calendar-mobile-header-container-color)}.mobileDateLabel{color:var(--ds-auro-calendar-mobile-header-text-color)}:host(:not([noRange])) .headerDateTo:after{background-color:var(--ds-auro-calendar-mobile-header-divider-color)}@media screen and (max-width: 576px){.calendarNavBtn{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}}`;
 
-var styleCss$9 = i$h`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{position:relative;display:block;width:calc(100% - var(--ds-size-200, 1rem) - var(--ds-size-200, 1rem));margin:0 var(--ds-size-200, 1rem)}@media screen and (min-width: 576px){:host{width:336px;padding:var(--ds-size-200, 1rem)}}@media screen and (min-width: 576px){:host(:not(:last-of-type)):after{position:absolute;top:var(--ds-size-200, 1rem);right:calc(-1*var(--ds-size-200, 1rem));height:calc(100% - var(--ds-size-200, 1rem) - var(--ds-size-200, 1rem));display:block;width:1px;content:""}}.header{display:flex;align-items:center;flex-direction:row;padding:calc(var(--ds-size-100, 0.5rem) + var(--ds-size-50, 0.25rem) + var(--ds-size-25, 0.125rem)) 0 calc(var(--ds-size-100, 0.5rem) + var(--ds-size-50, 0.25rem) + var(--ds-size-25, 0.125rem));text-align:center}.headerTitle{display:flex;align-items:center;flex:1;flex-direction:row;justify-content:center;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.headerTitle div:first-child{margin-right:var(--ds-size-100, 0.5rem)}.calendarNavBtn{position:relative;display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.table{width:100%;border-collapse:collapse}.thead{margin-bottom:var(--ds-size-100, 0.5rem)}.th{display:flex;flex:1;align-items:center;justify-content:center;font-weight:700}.tbody{width:100%;transition:all 0ms;transform:translateX(0)}@media screen and (min-width: 576px){.tbody{height:384px}}.td{flex:1;margin:0;padding:0}.tr{display:flex;flex-direction:row;width:100%}`;
+var styleCss$9 = i$h`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{position:relative;display:block;width:calc(100% - var(--ds-size-200, 1rem) - var(--ds-size-200, 1rem));margin:0 var(--ds-size-200, 1rem)}@media screen and (min-width: 576px){:host{width:336px;padding:var(--ds-size-200, 1rem)}}@media screen and (min-width: 576px){:host(:not(:last-of-type)):after{position:absolute;top:var(--ds-size-200, 1rem);right:calc(-1*var(--ds-size-200, 1rem));height:calc(100% - var(--ds-size-200, 1rem) - var(--ds-size-200, 1rem));display:block;width:1px;content:""}}.header{display:flex;height:var(--ds-size-500, 2.5rem);margin-bottom:var(--ds-size-150, 0.75rem);align-items:center;flex-direction:row;text-align:center}.headerTitle{display:flex;align-items:center;flex:1;flex-direction:row;justify-content:center;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.headerTitle div:first-child{margin-right:var(--ds-size-100, 0.5rem)}.calendarNavBtn{position:relative;display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.table{width:100%;border-collapse:collapse}.thead{margin-bottom:var(--ds-size-100, 0.5rem)}.th{display:flex;flex:1;align-items:center;justify-content:center;font-weight:700}.tbody{width:100%;transition:all 0ms;transform:translateX(0)}@media screen and (min-width: 576px){.tbody{height:384px}}.td{flex:1;margin:0;padding:0}.tr{display:flex;flex-direction:row;width:100%}`;
 
 var colorCss$9 = i$h`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{background-color:var(--ds-auro-calendar-month-container-color)}@media screen and (min-width: 576px){:host(:not(:last-of-type)):after{background-color:var(--ds-auro-calendar-month-divider-color)}}.header{color:var(--ds-auro-calendar-month-header-color)}`;
 
@@ -10607,7 +10607,7 @@ const a$6=Symbol.for(""),o$1$2=t=>{if(t?.r===a$6)return t?._$litStatic$},s$7=t=>
 
 var colorCss$1$2 = i$5$2`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
 
-var styleCss$2$2 = i$5$2`#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]){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}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#bodyContainer{overflow:auto;flex:1 1 100%;padding-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
+var styleCss$2$2 = i$5$2`#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]){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}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#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$2`: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-color-container-primary-default, #ffffff)}`;
 
@@ -11688,16 +11688,18 @@ class AuroCalendar extends RangeDatepicker {
         <div class="calendars">
           ${this.renderAllCalendars()}
         </div>
-        ${this.showPrevMonthBtn ? u$9`
-          <button class="calendarNavBtn prevMonth" @click="${this.handlePrevMonth}">
-            ${this.util.generateIconHtml(chevronLeft)}
-          </button>
-        ` : undefined}
-        ${this.showNextMonthBtn ? u$9`
-          <button class="calendarNavBtn nextMonth" @click="${this.handleNextMonth}">
-            ${this.util.generateIconHtml(chevronRight)}
-          </button>
-        ` : undefined}
+        <div class="calendarNavButtons">
+          ${this.showPrevMonthBtn ? u$9`
+            <button class="calendarNavBtn prevMonth" @click="${this.handlePrevMonth}">
+              ${this.util.generateIconHtml(chevronLeft)}
+            </button>
+          ` : undefined}
+          ${this.showNextMonthBtn ? u$9`
+            <button class="calendarNavBtn nextMonth" @click="${this.handleNextMonth}">
+              ${this.util.generateIconHtml(chevronRight)}
+            </button>
+          ` : undefined}
+        </div>
       </div>
 
       <auro-button slot="footer" fluid @click="${this.utilCal.requestDismiss}">Done</auro-button>