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

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Semantic Release Automated Changelog
 
+# [2.0.0-beta.48](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.0.0-beta.47...v2.0.0-beta.48) (2025-02-27)
+
+
+### Bug Fixes
+
+* support dynamic `bib.fullscreen.headline` and `label` ([5f3b7ca](https://github.com/AlaskaAirlines/auro-formkit/commit/5f3b7ca00aeb4c11eed14451c470df6c4c2118a2))
+
 # [2.0.0-beta.47](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.0.0-beta.46...v2.0.0-beta.47) (2025-02-27)
 
 

package/components/checkbox/README.md

@@ -96,7 +96,7 @@ 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@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-checkbox@2.0.0-beta.46/dist/auro-checkbox__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-checkbox@2.0.0-beta.47/dist/auro-checkbox__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-checkbox use cases

package/components/combobox/README.md

@@ -101,10 +101,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-menu@2.0.0-beta.46/dist/auro-menu__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-combobox@2.0.0-beta.46/dist/auro-combobox__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.47/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.47/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.47/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-combobox@2.0.0-beta.47/dist/auro-combobox__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-combobox use cases

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

@@ -11508,7 +11508,7 @@ i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-i
 
 i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
 
-var styleCss$3 = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important;box-shadow:unset !important;outline:unset !important;--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}`;
+var styleCss$3 = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important;box-shadow:unset !important;outline:unset !important;--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}#slotHolder{display:none}`;
 
 // Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -11880,12 +11880,6 @@ class AuroCombobox extends r$b {
     this.hideBib = this.hideBib.bind(this);
     this.bibtemplate.addEventListener('close-click', this.hideBib);
 
-    const bibHeader = this.querySelector('[slot="bib.fullscreen.headline"]');
-    if (bibHeader) {
-      bibHeader.setAttribute('slot', 'header');
-      this.bibtemplate.append(bibHeader);
-    }
-
     this.dropdown.setAttribute('role', 'combobox');
     this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
       this.showBib();
@@ -12017,13 +12011,6 @@ class AuroCombobox extends r$b {
     this.input.addEventListener('keydown', this.bubbleUpInputKeyEvent);
     this.input.addEventListener('keyup', this.bubbleUpInputKeyEvent);
 
-    // Programatically inject as the slot cannot be carried over to bibtemplate.
-    // It's because the bib is newly attach to body.
-    const label = this.querySelector('[slot="label"]');
-    if (label) {
-      this.input.append(label);
-    }
-
     this.addEventListener('keyup', (evt) => {
       if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') {
         this.showBib();
@@ -12327,6 +12314,24 @@ class AuroCombobox extends r$b {
     }
   }
 
+  /**
+   * Applies slotted nodes to a target element with a new slot name.
+   * @private
+   * @param {HTMLSlotElement} slot - The slot element containing the nodes to apply.
+   * @param {HTMLElement} target - The target element to apply the nodes to.
+   * @param {string} newSlotName - The new slot name for the applied nodes.
+   * @returns {void}
+   */
+  transportAssignedNodes(slot, target, newSlotName) {
+    // Remove previous slot nodes if necessary.
+    target.querySelectorAll(`[slot="${newSlotName}"]`).forEach((old) => old.remove());
+    slot.assignedNodes().forEach((node) => {
+      const clone = node.cloneNode(true);
+      clone.setAttribute('slot', newSlotName);
+      target.append(clone);
+    });
+  }
+
   /**
    * Watch for slot changes and recalculate the menuoptions.
    * @private
@@ -12334,18 +12339,28 @@ class AuroCombobox extends r$b {
    * @returns {void}
    */
   handleSlotChange(event) {
-    // treat only generic menuoptions
-    if (!event.target.name) {
-      this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
-      this.options.forEach((opt) => {
-        if (this.checkmark) {
-          opt.removeAttribute('nocheckmark');
-        } else {
-          opt.setAttribute('nocheckmark', '');
-        }
-      });
+    switch (event.target.name) {
+      case '':
+        // Treat only generic menuoptions.
+        this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
+        this.options.forEach((opt) => {
+          if (this.checkmark) {
+            opt.removeAttribute('nocheckmark');
+          } else {
+            opt.setAttribute('nocheckmark', '');
+          }
+        });
 
-      this.handleMenuOptions();
+        this.handleMenuOptions();
+        break;
+      case 'label':
+        // Programatically inject as the slot cannot be carried over to bibtemplate.
+        // It's because the bib is/will be seperated from dropdown to body.
+        this.transportAssignedNodes(event.target, this.input, 'label');
+        break;
+      case 'bib.fullscreen.headline':
+        this.transportAssignedNodes(event.target, this.bibtemplate, 'header');
+        break;
     }
   }
 
@@ -12361,6 +12376,10 @@ class AuroCombobox extends r$b {
             : undefined
           }
         </div>
+        <div id="slotHolder" aria-hidden="true">
+          <slot name="label" @slotchange="${this.handleSlotChange}"></slot>
+          <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
+        </div>
         <${this.dropdownTag}
           for="dropdownMenu"
           fluid

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

@@ -11366,7 +11366,7 @@ i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-i
 
 i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
 
-var styleCss$3 = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important;box-shadow:unset !important;outline:unset !important;--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}`;
+var styleCss$3 = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important;box-shadow:unset !important;outline:unset !important;--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}#slotHolder{display:none}`;
 
 // Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -11738,12 +11738,6 @@ class AuroCombobox extends r$b {
     this.hideBib = this.hideBib.bind(this);
     this.bibtemplate.addEventListener('close-click', this.hideBib);
 
-    const bibHeader = this.querySelector('[slot="bib.fullscreen.headline"]');
-    if (bibHeader) {
-      bibHeader.setAttribute('slot', 'header');
-      this.bibtemplate.append(bibHeader);
-    }
-
     this.dropdown.setAttribute('role', 'combobox');
     this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
       this.showBib();
@@ -11875,13 +11869,6 @@ class AuroCombobox extends r$b {
     this.input.addEventListener('keydown', this.bubbleUpInputKeyEvent);
     this.input.addEventListener('keyup', this.bubbleUpInputKeyEvent);
 
-    // Programatically inject as the slot cannot be carried over to bibtemplate.
-    // It's because the bib is newly attach to body.
-    const label = this.querySelector('[slot="label"]');
-    if (label) {
-      this.input.append(label);
-    }
-
     this.addEventListener('keyup', (evt) => {
       if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') {
         this.showBib();
@@ -12185,6 +12172,24 @@ class AuroCombobox extends r$b {
     }
   }
 
+  /**
+   * Applies slotted nodes to a target element with a new slot name.
+   * @private
+   * @param {HTMLSlotElement} slot - The slot element containing the nodes to apply.
+   * @param {HTMLElement} target - The target element to apply the nodes to.
+   * @param {string} newSlotName - The new slot name for the applied nodes.
+   * @returns {void}
+   */
+  transportAssignedNodes(slot, target, newSlotName) {
+    // Remove previous slot nodes if necessary.
+    target.querySelectorAll(`[slot="${newSlotName}"]`).forEach((old) => old.remove());
+    slot.assignedNodes().forEach((node) => {
+      const clone = node.cloneNode(true);
+      clone.setAttribute('slot', newSlotName);
+      target.append(clone);
+    });
+  }
+
   /**
    * Watch for slot changes and recalculate the menuoptions.
    * @private
@@ -12192,18 +12197,28 @@ class AuroCombobox extends r$b {
    * @returns {void}
    */
   handleSlotChange(event) {
-    // treat only generic menuoptions
-    if (!event.target.name) {
-      this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
-      this.options.forEach((opt) => {
-        if (this.checkmark) {
-          opt.removeAttribute('nocheckmark');
-        } else {
-          opt.setAttribute('nocheckmark', '');
-        }
-      });
+    switch (event.target.name) {
+      case '':
+        // Treat only generic menuoptions.
+        this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
+        this.options.forEach((opt) => {
+          if (this.checkmark) {
+            opt.removeAttribute('nocheckmark');
+          } else {
+            opt.setAttribute('nocheckmark', '');
+          }
+        });
 
-      this.handleMenuOptions();
+        this.handleMenuOptions();
+        break;
+      case 'label':
+        // Programatically inject as the slot cannot be carried over to bibtemplate.
+        // It's because the bib is/will be seperated from dropdown to body.
+        this.transportAssignedNodes(event.target, this.input, 'label');
+        break;
+      case 'bib.fullscreen.headline':
+        this.transportAssignedNodes(event.target, this.bibtemplate, 'header');
+        break;
     }
   }
 
@@ -12219,6 +12234,10 @@ class AuroCombobox extends r$b {
             : undefined
           }
         </div>
+        <div id="slotHolder" aria-hidden="true">
+          <slot name="label" @slotchange="${this.handleSlotChange}"></slot>
+          <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
+        </div>
         <${this.dropdownTag}
           for="dropdownMenu"
           fluid

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

@@ -275,6 +275,15 @@ export class AuroCombobox extends LitElement {
      */
     validate(force?: boolean): void;
     updated(changedProperties: any): void;
+    /**
+     * Applies slotted nodes to a target element with a new slot name.
+     * @private
+     * @param {HTMLSlotElement} slot - The slot element containing the nodes to apply.
+     * @param {HTMLElement} target - The target element to apply the nodes to.
+     * @param {string} newSlotName - The new slot name for the applied nodes.
+     * @returns {void}
+     */
+    private transportAssignedNodes;
     /**
      * Watch for slot changes and recalculate the menuoptions.
      * @private

package/components/combobox/dist/index.js

@@ -11343,7 +11343,7 @@ i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-i
 
 i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
 
-var styleCss = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important;box-shadow:unset !important;outline:unset !important;--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}`;
+var styleCss = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important;box-shadow:unset !important;outline:unset !important;--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}#slotHolder{display:none}`;
 
 // Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -11715,12 +11715,6 @@ class AuroCombobox extends r$b {
     this.hideBib = this.hideBib.bind(this);
     this.bibtemplate.addEventListener('close-click', this.hideBib);
 
-    const bibHeader = this.querySelector('[slot="bib.fullscreen.headline"]');
-    if (bibHeader) {
-      bibHeader.setAttribute('slot', 'header');
-      this.bibtemplate.append(bibHeader);
-    }
-
     this.dropdown.setAttribute('role', 'combobox');
     this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
       this.showBib();
@@ -11852,13 +11846,6 @@ class AuroCombobox extends r$b {
     this.input.addEventListener('keydown', this.bubbleUpInputKeyEvent);
     this.input.addEventListener('keyup', this.bubbleUpInputKeyEvent);
 
-    // Programatically inject as the slot cannot be carried over to bibtemplate.
-    // It's because the bib is newly attach to body.
-    const label = this.querySelector('[slot="label"]');
-    if (label) {
-      this.input.append(label);
-    }
-
     this.addEventListener('keyup', (evt) => {
       if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') {
         this.showBib();
@@ -12162,6 +12149,24 @@ class AuroCombobox extends r$b {
     }
   }
 
+  /**
+   * Applies slotted nodes to a target element with a new slot name.
+   * @private
+   * @param {HTMLSlotElement} slot - The slot element containing the nodes to apply.
+   * @param {HTMLElement} target - The target element to apply the nodes to.
+   * @param {string} newSlotName - The new slot name for the applied nodes.
+   * @returns {void}
+   */
+  transportAssignedNodes(slot, target, newSlotName) {
+    // Remove previous slot nodes if necessary.
+    target.querySelectorAll(`[slot="${newSlotName}"]`).forEach((old) => old.remove());
+    slot.assignedNodes().forEach((node) => {
+      const clone = node.cloneNode(true);
+      clone.setAttribute('slot', newSlotName);
+      target.append(clone);
+    });
+  }
+
   /**
    * Watch for slot changes and recalculate the menuoptions.
    * @private
@@ -12169,18 +12174,28 @@ class AuroCombobox extends r$b {
    * @returns {void}
    */
   handleSlotChange(event) {
-    // treat only generic menuoptions
-    if (!event.target.name) {
-      this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
-      this.options.forEach((opt) => {
-        if (this.checkmark) {
-          opt.removeAttribute('nocheckmark');
-        } else {
-          opt.setAttribute('nocheckmark', '');
-        }
-      });
+    switch (event.target.name) {
+      case '':
+        // Treat only generic menuoptions.
+        this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
+        this.options.forEach((opt) => {
+          if (this.checkmark) {
+            opt.removeAttribute('nocheckmark');
+          } else {
+            opt.setAttribute('nocheckmark', '');
+          }
+        });
 
-      this.handleMenuOptions();
+        this.handleMenuOptions();
+        break;
+      case 'label':
+        // Programatically inject as the slot cannot be carried over to bibtemplate.
+        // It's because the bib is/will be seperated from dropdown to body.
+        this.transportAssignedNodes(event.target, this.input, 'label');
+        break;
+      case 'bib.fullscreen.headline':
+        this.transportAssignedNodes(event.target, this.bibtemplate, 'header');
+        break;
     }
   }
 
@@ -12196,6 +12211,10 @@ class AuroCombobox extends r$b {
             : undefined
           }
         </div>
+        <div id="slotHolder" aria-hidden="true">
+          <slot name="label" @slotchange="${this.handleSlotChange}"></slot>
+          <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
+        </div>
         <${this.dropdownTag}
           for="dropdownMenu"
           fluid

package/components/combobox/dist/registered.js

@@ -11343,7 +11343,7 @@ i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-i
 
 i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
 
-var styleCss = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important;box-shadow:unset !important;outline:unset !important;--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}`;
+var styleCss = i$g`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]{min-height:var(--ds-size-700, 3.5rem);max-height:var(--ds-size-700, 3.5rem)}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important;box-shadow:unset !important;outline:unset !important;--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}#slotHolder{display:none}`;
 
 // Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -11715,12 +11715,6 @@ class AuroCombobox extends r$b {
     this.hideBib = this.hideBib.bind(this);
     this.bibtemplate.addEventListener('close-click', this.hideBib);
 
-    const bibHeader = this.querySelector('[slot="bib.fullscreen.headline"]');
-    if (bibHeader) {
-      bibHeader.setAttribute('slot', 'header');
-      this.bibtemplate.append(bibHeader);
-    }
-
     this.dropdown.setAttribute('role', 'combobox');
     this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
       this.showBib();
@@ -11852,13 +11846,6 @@ class AuroCombobox extends r$b {
     this.input.addEventListener('keydown', this.bubbleUpInputKeyEvent);
     this.input.addEventListener('keyup', this.bubbleUpInputKeyEvent);
 
-    // Programatically inject as the slot cannot be carried over to bibtemplate.
-    // It's because the bib is newly attach to body.
-    const label = this.querySelector('[slot="label"]');
-    if (label) {
-      this.input.append(label);
-    }
-
     this.addEventListener('keyup', (evt) => {
       if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') {
         this.showBib();
@@ -12162,6 +12149,24 @@ class AuroCombobox extends r$b {
     }
   }
 
+  /**
+   * Applies slotted nodes to a target element with a new slot name.
+   * @private
+   * @param {HTMLSlotElement} slot - The slot element containing the nodes to apply.
+   * @param {HTMLElement} target - The target element to apply the nodes to.
+   * @param {string} newSlotName - The new slot name for the applied nodes.
+   * @returns {void}
+   */
+  transportAssignedNodes(slot, target, newSlotName) {
+    // Remove previous slot nodes if necessary.
+    target.querySelectorAll(`[slot="${newSlotName}"]`).forEach((old) => old.remove());
+    slot.assignedNodes().forEach((node) => {
+      const clone = node.cloneNode(true);
+      clone.setAttribute('slot', newSlotName);
+      target.append(clone);
+    });
+  }
+
   /**
    * Watch for slot changes and recalculate the menuoptions.
    * @private
@@ -12169,18 +12174,28 @@ class AuroCombobox extends r$b {
    * @returns {void}
    */
   handleSlotChange(event) {
-    // treat only generic menuoptions
-    if (!event.target.name) {
-      this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
-      this.options.forEach((opt) => {
-        if (this.checkmark) {
-          opt.removeAttribute('nocheckmark');
-        } else {
-          opt.setAttribute('nocheckmark', '');
-        }
-      });
+    switch (event.target.name) {
+      case '':
+        // Treat only generic menuoptions.
+        this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
+        this.options.forEach((opt) => {
+          if (this.checkmark) {
+            opt.removeAttribute('nocheckmark');
+          } else {
+            opt.setAttribute('nocheckmark', '');
+          }
+        });
 
-      this.handleMenuOptions();
+        this.handleMenuOptions();
+        break;
+      case 'label':
+        // Programatically inject as the slot cannot be carried over to bibtemplate.
+        // It's because the bib is/will be seperated from dropdown to body.
+        this.transportAssignedNodes(event.target, this.input, 'label');
+        break;
+      case 'bib.fullscreen.headline':
+        this.transportAssignedNodes(event.target, this.bibtemplate, 'header');
+        break;
     }
   }
 
@@ -12196,6 +12211,10 @@ class AuroCombobox extends r$b {
             : undefined
           }
         </div>
+        <div id="slotHolder" aria-hidden="true">
+          <slot name="label" @slotchange="${this.handleSlotChange}"></slot>
+          <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
+        </div>
         <${this.dropdownTag}
           for="dropdownMenu"
           fluid

package/components/counter/README.md

@@ -100,7 +100,7 @@ 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@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-counter@2.0.0-beta.46/dist/auro-counter__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-counter@2.0.0-beta.47/dist/auro-counter__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-counter use cases

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
@@ -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
@@ -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
@@ -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
@@ -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.47/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.47/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.47/dist/auro-popover__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.47/dist/auro-datepicker__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-datepicker use cases

package/components/dropdown/README.md

@@ -97,7 +97,7 @@ 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@5.1.2/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-dropdown@2.0.0-beta.47/dist/auro-dropdown__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-dropdown use cases

package/components/form/README.md

@@ -98,7 +98,7 @@ 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@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.46/dist/auro-form__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.47/dist/auro-form__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-form use cases

package/components/input/README.md

@@ -89,7 +89,7 @@ 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@5.1.2/dist/bundled/essentials.css" />
-<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-input@2.0.0-beta.47/dist/auro-input__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-input use cases

package/components/menu/README.md

@@ -100,7 +100,7 @@ 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@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.46/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.47/dist/auro-menu__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-menu use cases

package/components/radio/README.md

@@ -90,7 +90,7 @@ 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@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-radio@2.0.0-beta.46/dist/auro-radio__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-radio@2.0.0-beta.47/dist/auro-radio__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-radio use cases

package/components/select/README.md

@@ -99,9 +99,9 @@ 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@5.1.2/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-menu@2.0.0-beta.46/dist/auro-menu__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.46/dist/auro-select__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.47/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.47/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.47/dist/auro-select__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-select use cases

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "2.0.0-beta.47",
+  "version": "2.0.0-beta.48",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {