From 6b43eb170a677f6d9ef1b6e11fe99c197ab50c31 Mon Sep 17 00:00:00 2001
From: Eunsun Mota <eunsun.mota@alaskaair.com>
Date: Thu, 19 Dec 2024 18:01:20 -0500
Subject: [PATCH] refactor: set dropdown.label with the default font-size when
 placeholder has no text to render #36

---
 components/combobox/demo/api.min.js       | 72 ++++++++++++++++++++-
 components/combobox/demo/index.min.js     | 72 ++++++++++++++++++++-
 components/datepicker/demo/api.min.js     | 72 ++++++++++++++++++++-
 components/datepicker/demo/index.min.js   | 72 ++++++++++++++++++++-
 components/dropdown/demo/api.min.js       | 72 ++++++++++++++++++++-
 components/dropdown/demo/index.min.js     | 72 ++++++++++++++++++++-
 components/dropdown/src/auro-dropdown.js  | 72 ++++++++++++++++++++-
 components/dropdown/src/styles/style.scss |  5 ++
 components/select/demo/api.md             | 30 ++++-----
 components/select/demo/api.min.js         | 77 +++++++++++++++++++++--
 components/select/demo/index.min.js       | 77 +++++++++++++++++++++--
 components/select/docs/api.md             | 30 ++++-----
 components/select/src/auro-select.js      |  5 +-
 13 files changed, 668 insertions(+), 60 deletions(-)

diff --git a/components/combobox/demo/api.min.js b/components/combobox/demo/api.min.js
index 7020ccd2..75f83074 100644
--- a/components/combobox/demo/api.min.js
+++ b/components/combobox/demo/api.min.js
@@ -2925,7 +2925,7 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
 
 var iconVersion$2 = '6.1.1';
 
-var styleCss$1$2 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$2 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$2 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
@@ -3081,6 +3081,16 @@ class AuroDropdown extends r$5 {
     this.tabIndex = 0;
     this.noToggle = false;
 
+    /**
+     * @private
+     */
+    this._hasTriggerContent = false;
+
+    /**
+     * @private
+     */
+    this.triggerContentSlot = undefined;
+
     /**
      * @private
      */
@@ -3214,6 +3224,37 @@ class AuroDropdown extends r$5 {
     ];
   }
 
+  /**
+   * Sets the value of the hasTriggerContent property and requests an update if changed.
+   *
+   * This setter updates the internal `_hasTriggerContent` property only if the new value differs 
+   * from the current value. If a change is detected, it triggers a request for the component to 
+   * update, ensuring that UI elements are refreshed accordingly.
+   *
+   * @private
+   * @setter hasTriggerContent
+   * @param {boolean} value - The new value indicating whether the trigger content is present.
+   * @returns {void}
+   */
+  set hasTriggerContent(value) {
+    if (value !== this._hasTriggerContent) {
+      this._hasTriggerContent = value;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Retrieves the value of the hasTriggerContent property.
+   *
+   * @private
+   * @getter hasTriggerContent
+   * @type {boolean}
+   * @returns {boolean} The current value of the hasTriggerContent property.
+   */
+  get hasTriggerContent() {
+    return this._hasTriggerContent;
+  }
+
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
@@ -3240,6 +3281,12 @@ class AuroDropdown extends r$5 {
     if (changedProperties.has('mobileFullscreenBreakpoint')) {
       this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint;
     }
+
+    if (this.triggerContentSlot) {
+      this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+    } else {
+      this.hasTriggerContent = false;
+    }
   }
 
   firstUpdated() {
@@ -3282,6 +3329,25 @@ class AuroDropdown extends r$5 {
     return inCustomSlot;
   }
 
+  /**
+   * Handles changes to the trigger content slot and updates related properties.
+   *
+   * It first updates the floater settings
+   * Then, it retrieves the assigned nodes from the event target and checks if any of 
+   * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
+   *
+   * @private
+   * @method handleTriggerContentSlotChange
+   * @param {Event} event - native slotchange event
+   * @returns {void}
+   */
+  handleTriggerContentSlotChange(event) {
+    this.floater.handleTriggerTabIndex();
+
+    this.triggerContentSlot = event.target.assignedNodes();
+    this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+  }
+
   /**
    * Handles the default slot change event and updates the content.
    *
@@ -3316,13 +3382,13 @@ class AuroDropdown extends r$5 {
           tabindex="${this.tabIndex}"
           >
           <div class="triggerContentWrapper">
-            <label class="label" id="triggerLabel">
+            <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
               <slot name="label"></slot>
             </label>
             <div class="triggerContent">
               <slot
                 name="trigger"
-                @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}"></slot>
+                @slotchange="${(event) => this.handleTriggerContentSlotChange(event)}"></slot>
             </div>
           </div>
           ${this.chevron || this.common ? u$1$1`
diff --git a/components/combobox/demo/index.min.js b/components/combobox/demo/index.min.js
index 8fecbefe..7a5f3348 100644
--- a/components/combobox/demo/index.min.js
+++ b/components/combobox/demo/index.min.js
@@ -2791,7 +2791,7 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
 
 var iconVersion$2 = '6.1.1';
 
-var styleCss$1$2 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$2 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$2 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
@@ -2947,6 +2947,16 @@ class AuroDropdown extends r$5 {
     this.tabIndex = 0;
     this.noToggle = false;
 
+    /**
+     * @private
+     */
+    this._hasTriggerContent = false;
+
+    /**
+     * @private
+     */
+    this.triggerContentSlot = undefined;
+
     /**
      * @private
      */
@@ -3080,6 +3090,37 @@ class AuroDropdown extends r$5 {
     ];
   }
 
+  /**
+   * Sets the value of the hasTriggerContent property and requests an update if changed.
+   *
+   * This setter updates the internal `_hasTriggerContent` property only if the new value differs 
+   * from the current value. If a change is detected, it triggers a request for the component to 
+   * update, ensuring that UI elements are refreshed accordingly.
+   *
+   * @private
+   * @setter hasTriggerContent
+   * @param {boolean} value - The new value indicating whether the trigger content is present.
+   * @returns {void}
+   */
+  set hasTriggerContent(value) {
+    if (value !== this._hasTriggerContent) {
+      this._hasTriggerContent = value;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Retrieves the value of the hasTriggerContent property.
+   *
+   * @private
+   * @getter hasTriggerContent
+   * @type {boolean}
+   * @returns {boolean} The current value of the hasTriggerContent property.
+   */
+  get hasTriggerContent() {
+    return this._hasTriggerContent;
+  }
+
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
@@ -3106,6 +3147,12 @@ class AuroDropdown extends r$5 {
     if (changedProperties.has('mobileFullscreenBreakpoint')) {
       this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint;
     }
+
+    if (this.triggerContentSlot) {
+      this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+    } else {
+      this.hasTriggerContent = false;
+    }
   }
 
   firstUpdated() {
@@ -3148,6 +3195,25 @@ class AuroDropdown extends r$5 {
     return inCustomSlot;
   }
 
+  /**
+   * Handles changes to the trigger content slot and updates related properties.
+   *
+   * It first updates the floater settings
+   * Then, it retrieves the assigned nodes from the event target and checks if any of 
+   * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
+   *
+   * @private
+   * @method handleTriggerContentSlotChange
+   * @param {Event} event - native slotchange event
+   * @returns {void}
+   */
+  handleTriggerContentSlotChange(event) {
+    this.floater.handleTriggerTabIndex();
+
+    this.triggerContentSlot = event.target.assignedNodes();
+    this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+  }
+
   /**
    * Handles the default slot change event and updates the content.
    *
@@ -3182,13 +3248,13 @@ class AuroDropdown extends r$5 {
           tabindex="${this.tabIndex}"
           >
           <div class="triggerContentWrapper">
-            <label class="label" id="triggerLabel">
+            <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
               <slot name="label"></slot>
             </label>
             <div class="triggerContent">
               <slot
                 name="trigger"
-                @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}"></slot>
+                @slotchange="${(event) => this.handleTriggerContentSlotChange(event)}"></slot>
             </div>
           </div>
           ${this.chevron || this.common ? u$1$1`
diff --git a/components/datepicker/demo/api.min.js b/components/datepicker/demo/api.min.js
index c45f31fc..dec62d68 100644
--- a/components/datepicker/demo/api.min.js
+++ b/components/datepicker/demo/api.min.js
@@ -13066,7 +13066,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
 
 var iconVersion$1 = '6.1.1';
 
-var styleCss$1$1 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$1 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$1 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
@@ -13222,6 +13222,16 @@ class AuroDropdown extends r$5 {
     this.tabIndex = 0;
     this.noToggle = false;
 
+    /**
+     * @private
+     */
+    this._hasTriggerContent = false;
+
+    /**
+     * @private
+     */
+    this.triggerContentSlot = undefined;
+
     /**
      * @private
      */
@@ -13355,6 +13365,37 @@ class AuroDropdown extends r$5 {
     ];
   }
 
+  /**
+   * Sets the value of the hasTriggerContent property and requests an update if changed.
+   *
+   * This setter updates the internal `_hasTriggerContent` property only if the new value differs 
+   * from the current value. If a change is detected, it triggers a request for the component to 
+   * update, ensuring that UI elements are refreshed accordingly.
+   *
+   * @private
+   * @setter hasTriggerContent
+   * @param {boolean} value - The new value indicating whether the trigger content is present.
+   * @returns {void}
+   */
+  set hasTriggerContent(value) {
+    if (value !== this._hasTriggerContent) {
+      this._hasTriggerContent = value;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Retrieves the value of the hasTriggerContent property.
+   *
+   * @private
+   * @getter hasTriggerContent
+   * @type {boolean}
+   * @returns {boolean} The current value of the hasTriggerContent property.
+   */
+  get hasTriggerContent() {
+    return this._hasTriggerContent;
+  }
+
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
@@ -13381,6 +13422,12 @@ class AuroDropdown extends r$5 {
     if (changedProperties.has('mobileFullscreenBreakpoint')) {
       this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint;
     }
+
+    if (this.triggerContentSlot) {
+      this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+    } else {
+      this.hasTriggerContent = false;
+    }
   }
 
   firstUpdated() {
@@ -13423,6 +13470,25 @@ class AuroDropdown extends r$5 {
     return inCustomSlot;
   }
 
+  /**
+   * Handles changes to the trigger content slot and updates related properties.
+   *
+   * It first updates the floater settings
+   * Then, it retrieves the assigned nodes from the event target and checks if any of 
+   * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
+   *
+   * @private
+   * @method handleTriggerContentSlotChange
+   * @param {Event} event - native slotchange event
+   * @returns {void}
+   */
+  handleTriggerContentSlotChange(event) {
+    this.floater.handleTriggerTabIndex();
+
+    this.triggerContentSlot = event.target.assignedNodes();
+    this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+  }
+
   /**
    * Handles the default slot change event and updates the content.
    *
@@ -13457,13 +13523,13 @@ class AuroDropdown extends r$5 {
           tabindex="${this.tabIndex}"
           >
           <div class="triggerContentWrapper">
-            <label class="label" id="triggerLabel">
+            <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
               <slot name="label"></slot>
             </label>
             <div class="triggerContent">
               <slot
                 name="trigger"
-                @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}"></slot>
+                @slotchange="${(event) => this.handleTriggerContentSlotChange(event)}"></slot>
             </div>
           </div>
           ${this.chevron || this.common ? u$1$1`
diff --git a/components/datepicker/demo/index.min.js b/components/datepicker/demo/index.min.js
index 1540a176..6acadbeb 100644
--- a/components/datepicker/demo/index.min.js
+++ b/components/datepicker/demo/index.min.js
@@ -12814,7 +12814,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
 
 var iconVersion$1 = '6.1.1';
 
-var styleCss$1$1 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$1 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$1 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
@@ -12970,6 +12970,16 @@ class AuroDropdown extends r$5 {
     this.tabIndex = 0;
     this.noToggle = false;
 
+    /**
+     * @private
+     */
+    this._hasTriggerContent = false;
+
+    /**
+     * @private
+     */
+    this.triggerContentSlot = undefined;
+
     /**
      * @private
      */
@@ -13103,6 +13113,37 @@ class AuroDropdown extends r$5 {
     ];
   }
 
+  /**
+   * Sets the value of the hasTriggerContent property and requests an update if changed.
+   *
+   * This setter updates the internal `_hasTriggerContent` property only if the new value differs 
+   * from the current value. If a change is detected, it triggers a request for the component to 
+   * update, ensuring that UI elements are refreshed accordingly.
+   *
+   * @private
+   * @setter hasTriggerContent
+   * @param {boolean} value - The new value indicating whether the trigger content is present.
+   * @returns {void}
+   */
+  set hasTriggerContent(value) {
+    if (value !== this._hasTriggerContent) {
+      this._hasTriggerContent = value;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Retrieves the value of the hasTriggerContent property.
+   *
+   * @private
+   * @getter hasTriggerContent
+   * @type {boolean}
+   * @returns {boolean} The current value of the hasTriggerContent property.
+   */
+  get hasTriggerContent() {
+    return this._hasTriggerContent;
+  }
+
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
@@ -13129,6 +13170,12 @@ class AuroDropdown extends r$5 {
     if (changedProperties.has('mobileFullscreenBreakpoint')) {
       this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint;
     }
+
+    if (this.triggerContentSlot) {
+      this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+    } else {
+      this.hasTriggerContent = false;
+    }
   }
 
   firstUpdated() {
@@ -13171,6 +13218,25 @@ class AuroDropdown extends r$5 {
     return inCustomSlot;
   }
 
+  /**
+   * Handles changes to the trigger content slot and updates related properties.
+   *
+   * It first updates the floater settings
+   * Then, it retrieves the assigned nodes from the event target and checks if any of 
+   * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
+   *
+   * @private
+   * @method handleTriggerContentSlotChange
+   * @param {Event} event - native slotchange event
+   * @returns {void}
+   */
+  handleTriggerContentSlotChange(event) {
+    this.floater.handleTriggerTabIndex();
+
+    this.triggerContentSlot = event.target.assignedNodes();
+    this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+  }
+
   /**
    * Handles the default slot change event and updates the content.
    *
@@ -13205,13 +13271,13 @@ class AuroDropdown extends r$5 {
           tabindex="${this.tabIndex}"
           >
           <div class="triggerContentWrapper">
-            <label class="label" id="triggerLabel">
+            <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
               <slot name="label"></slot>
             </label>
             <div class="triggerContent">
               <slot
                 name="trigger"
-                @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}"></slot>
+                @slotchange="${(event) => this.handleTriggerContentSlotChange(event)}"></slot>
             </div>
           </div>
           ${this.chevron || this.common ? u$1$1`
diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js
index 3bf2879a..18cedc5c 100644
--- a/components/dropdown/demo/api.min.js
+++ b/components/dropdown/demo/api.min.js
@@ -2415,7 +2415,7 @@ class AuroIcon extends BaseIcon {
 
 var iconVersion = '6.1.1';
 
-var styleCss$1 = i$3`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1 = i$3`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
@@ -2571,6 +2571,16 @@ class AuroDropdown extends r {
     this.tabIndex = 0;
     this.noToggle = false;
 
+    /**
+     * @private
+     */
+    this._hasTriggerContent = false;
+
+    /**
+     * @private
+     */
+    this.triggerContentSlot = undefined;
+
     /**
      * @private
      */
@@ -2704,6 +2714,37 @@ class AuroDropdown extends r {
     ];
   }
 
+  /**
+   * Sets the value of the hasTriggerContent property and requests an update if changed.
+   *
+   * This setter updates the internal `_hasTriggerContent` property only if the new value differs 
+   * from the current value. If a change is detected, it triggers a request for the component to 
+   * update, ensuring that UI elements are refreshed accordingly.
+   *
+   * @private
+   * @setter hasTriggerContent
+   * @param {boolean} value - The new value indicating whether the trigger content is present.
+   * @returns {void}
+   */
+  set hasTriggerContent(value) {
+    if (value !== this._hasTriggerContent) {
+      this._hasTriggerContent = value;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Retrieves the value of the hasTriggerContent property.
+   *
+   * @private
+   * @getter hasTriggerContent
+   * @type {boolean}
+   * @returns {boolean} The current value of the hasTriggerContent property.
+   */
+  get hasTriggerContent() {
+    return this._hasTriggerContent;
+  }
+
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
@@ -2730,6 +2771,12 @@ class AuroDropdown extends r {
     if (changedProperties.has('mobileFullscreenBreakpoint')) {
       this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint;
     }
+
+    if (this.triggerContentSlot) {
+      this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+    } else {
+      this.hasTriggerContent = false;
+    }
   }
 
   firstUpdated() {
@@ -2772,6 +2819,25 @@ class AuroDropdown extends r {
     return inCustomSlot;
   }
 
+  /**
+   * Handles changes to the trigger content slot and updates related properties.
+   *
+   * It first updates the floater settings
+   * Then, it retrieves the assigned nodes from the event target and checks if any of 
+   * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
+   *
+   * @private
+   * @method handleTriggerContentSlotChange
+   * @param {Event} event - native slotchange event
+   * @returns {void}
+   */
+  handleTriggerContentSlotChange(event) {
+    this.floater.handleTriggerTabIndex();
+
+    this.triggerContentSlot = event.target.assignedNodes();
+    this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+  }
+
   /**
    * Handles the default slot change event and updates the content.
    *
@@ -2806,13 +2872,13 @@ class AuroDropdown extends r {
           tabindex="${this.tabIndex}"
           >
           <div class="triggerContentWrapper">
-            <label class="label" id="triggerLabel">
+            <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
               <slot name="label"></slot>
             </label>
             <div class="triggerContent">
               <slot
                 name="trigger"
-                @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}"></slot>
+                @slotchange="${(event) => this.handleTriggerContentSlotChange(event)}"></slot>
             </div>
           </div>
           ${this.chevron || this.common ? u$1`
diff --git a/components/dropdown/demo/index.min.js b/components/dropdown/demo/index.min.js
index 8ed7c09a..61d13bd0 100644
--- a/components/dropdown/demo/index.min.js
+++ b/components/dropdown/demo/index.min.js
@@ -2390,7 +2390,7 @@ class AuroIcon extends BaseIcon {
 
 var iconVersion = '6.1.1';
 
-var styleCss$1 = i$3`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1 = i$3`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
@@ -2546,6 +2546,16 @@ class AuroDropdown extends r {
     this.tabIndex = 0;
     this.noToggle = false;
 
+    /**
+     * @private
+     */
+    this._hasTriggerContent = false;
+
+    /**
+     * @private
+     */
+    this.triggerContentSlot = undefined;
+
     /**
      * @private
      */
@@ -2679,6 +2689,37 @@ class AuroDropdown extends r {
     ];
   }
 
+  /**
+   * Sets the value of the hasTriggerContent property and requests an update if changed.
+   *
+   * This setter updates the internal `_hasTriggerContent` property only if the new value differs 
+   * from the current value. If a change is detected, it triggers a request for the component to 
+   * update, ensuring that UI elements are refreshed accordingly.
+   *
+   * @private
+   * @setter hasTriggerContent
+   * @param {boolean} value - The new value indicating whether the trigger content is present.
+   * @returns {void}
+   */
+  set hasTriggerContent(value) {
+    if (value !== this._hasTriggerContent) {
+      this._hasTriggerContent = value;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Retrieves the value of the hasTriggerContent property.
+   *
+   * @private
+   * @getter hasTriggerContent
+   * @type {boolean}
+   * @returns {boolean} The current value of the hasTriggerContent property.
+   */
+  get hasTriggerContent() {
+    return this._hasTriggerContent;
+  }
+
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
@@ -2705,6 +2746,12 @@ class AuroDropdown extends r {
     if (changedProperties.has('mobileFullscreenBreakpoint')) {
       this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint;
     }
+
+    if (this.triggerContentSlot) {
+      this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+    } else {
+      this.hasTriggerContent = false;
+    }
   }
 
   firstUpdated() {
@@ -2747,6 +2794,25 @@ class AuroDropdown extends r {
     return inCustomSlot;
   }
 
+  /**
+   * Handles changes to the trigger content slot and updates related properties.
+   *
+   * It first updates the floater settings
+   * Then, it retrieves the assigned nodes from the event target and checks if any of 
+   * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
+   *
+   * @private
+   * @method handleTriggerContentSlotChange
+   * @param {Event} event - native slotchange event
+   * @returns {void}
+   */
+  handleTriggerContentSlotChange(event) {
+    this.floater.handleTriggerTabIndex();
+
+    this.triggerContentSlot = event.target.assignedNodes();
+    this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+  }
+
   /**
    * Handles the default slot change event and updates the content.
    *
@@ -2781,13 +2847,13 @@ class AuroDropdown extends r {
           tabindex="${this.tabIndex}"
           >
           <div class="triggerContentWrapper">
-            <label class="label" id="triggerLabel">
+            <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
               <slot name="label"></slot>
             </label>
             <div class="triggerContent">
               <slot
                 name="trigger"
-                @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}"></slot>
+                @slotchange="${(event) => this.handleTriggerContentSlotChange(event)}"></slot>
             </div>
           </div>
           ${this.chevron || this.common ? u$1`
diff --git a/components/dropdown/src/auro-dropdown.js b/components/dropdown/src/auro-dropdown.js
index 18eca74e..8a56babe 100644
--- a/components/dropdown/src/auro-dropdown.js
+++ b/components/dropdown/src/auro-dropdown.js
@@ -4,7 +4,7 @@
 // ---------------------------------------------------------------------
 
 /* eslint-disable max-lines, lit-a11y/accessible-name, lit/no-invalid-html, lit/binding-positions,
-arrow-body-style, no-extra-parens, block-spacing, brace-style, curly, template-curly-spacing */
+arrow-body-style, no-extra-parens, block-spacing, brace-style, curly, template-curly-spacing, no-underscore-dangle */
 
 import { html } from "lit/static-html.js";
 import { LitElement } from "lit";
@@ -77,6 +77,16 @@ export class AuroDropdown extends LitElement {
     this.tabIndex = 0;
     this.noToggle = false;
 
+    /**
+     * @private
+     */
+    this._hasTriggerContent = false;
+
+    /**
+     * @private
+     */
+    this.triggerContentSlot = undefined;
+
     /**
      * @private
      */
@@ -210,6 +220,37 @@ export class AuroDropdown extends LitElement {
     ];
   }
 
+  /**
+   * Sets the value of the hasTriggerContent property and requests an update if changed.
+   *
+   * This setter updates the internal `_hasTriggerContent` property only if the new value differs
+   * from the current value. If a change is detected, it triggers a request for the component to
+   * update, ensuring that UI elements are refreshed accordingly.
+   *
+   * @private
+   * @setter hasTriggerContent
+   * @param {boolean} value - The new value indicating whether the trigger content is present.
+   * @returns {void}
+   */
+  set hasTriggerContent(value) {
+    if (value !== this._hasTriggerContent) {
+      this._hasTriggerContent = value;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Retrieves the value of the hasTriggerContent property.
+   *
+   * @private
+   * @getter hasTriggerContent
+   * @type {boolean}
+   * @returns {boolean} The current value of the hasTriggerContent property.
+   */
+  get hasTriggerContent() {
+    return this._hasTriggerContent;
+  }
+
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
@@ -236,6 +277,12 @@ export class AuroDropdown extends LitElement {
     if (changedProperties.has('mobileFullscreenBreakpoint')) {
       this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint;
     }
+
+    if (this.triggerContentSlot) {
+      this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+    } else {
+      this.hasTriggerContent = false;
+    }
   }
 
   firstUpdated() {
@@ -280,6 +327,25 @@ export class AuroDropdown extends LitElement {
     return inCustomSlot;
   }
 
+  /**
+   * Handles changes to the trigger content slot and updates related properties.
+   *
+   * It first updates the floater settings
+   * Then, it retrieves the assigned nodes from the event target and checks if any of
+   * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
+   *
+   * @private
+   * @method handleTriggerContentSlotChange
+   * @param {Event} event - native slotchange event
+   * @returns {void}
+   */
+  handleTriggerContentSlotChange(event) {
+    this.floater.handleTriggerTabIndex();
+
+    this.triggerContentSlot = event.target.assignedNodes();
+    this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+  }
+
   /**
    * Handles the default slot change event and updates the content.
    *
@@ -314,13 +380,13 @@ export class AuroDropdown extends LitElement {
           tabindex="${this.tabIndex}"
           >
           <div class="triggerContentWrapper">
-            <label class="label" id="triggerLabel">
+            <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
               <slot name="label"></slot>
             </label>
             <div class="triggerContent">
               <slot
                 name="trigger"
-                @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}"></slot>
+                @slotchange="${(event) => this.handleTriggerContentSlotChange(event)}"></slot>
             </div>
           </div>
           ${this.chevron || this.common ? html`
diff --git a/components/dropdown/src/styles/style.scss b/components/dropdown/src/styles/style.scss
index bd28c864..066aa304 100644
--- a/components/dropdown/src/styles/style.scss
+++ b/components/dropdown/src/styles/style.scss
@@ -32,7 +32,12 @@
 .label {
   font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
   line-height: var(--ds-text-body-size-default, $ds-text-body-size-default);
+  transition: all .3s cubic-bezier(.215, .61, .355, 1);
   white-space: normal;
+
+  &[hasTrigger='false'] {
+    font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
+  }
 }
 
 .trigger {
diff --git a/components/select/demo/api.md b/components/select/demo/api.md
index e694c234..f1734020 100644
--- a/components/select/demo/api.md
+++ b/components/select/demo/api.md
@@ -14,21 +14,21 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 ## Properties
 
-| Property                        | Attribute                       | Type      | Default                | Description                                      |
-|---------------------------------|---------------------------------|-----------|------------------------|--------------------------------------------------|
-| [disabled](#disabled)                      | `disabled`                      | `Boolean` |                        | When attribute is present element shows disabled state. |
-| [error](#error)                         | `error`                         | `String`  |                        | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
-| [flexMenuWidth](#flexMenuWidth)                 | `flexMenuWidth`                 | `Boolean` |                        | If set, makes dropdown bib width match the size of the content, rather than the width of the trigger. |
-| [noCheckmark](#noCheckmark)                   | `noCheckmark`                   | `Boolean` |                        | When true, checkmark on selected option will no longer be present. |
-| [noValidate](#noValidate)                    | `noValidate`                    | `Boolean` |                        | If set, disables auto-validation on blur.        |
-| [optionSelected](#optionSelected)                | `optionSelected`                | `Object`  | "undefined"            | Specifies the current selected menuOption.       |
-| [placeholder](#placeholder)                   | `placeholder`                   | `String`  | "Please select option" | Define placeholder text to display before a value is manually selected. |
-| [required](#required)                      | `required`                      | `Boolean` |                        | Populates the `required` attribute on the element. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `String`  |                        | Sets a custom help text message to display for all validityStates. |
-| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `String`  |                        | Custom help text message to display when validity = `customError`. |
-| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `String`  |                        | Custom help text message to display when validity = `valueMissing`. |
-| [validity](#validity)                      | `validity`                      | `String`  | "undefined"            | Specifies the `validityState` this element is in. |
-| [value](#value)                         | `value`                         | `String`  |                        | Value selected for the component.                |
+| Property                        | Attribute                       | Type      | Default     | Description                                      |
+|---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
+| [disabled](#disabled)                      | `disabled`                      | `Boolean` |             | When attribute is present element shows disabled state. |
+| [error](#error)                         | `error`                         | `String`  |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
+| [flexMenuWidth](#flexMenuWidth)                 | `flexMenuWidth`                 | `Boolean` |             | If set, makes dropdown bib width match the size of the content, rather than the width of the trigger. |
+| [noCheckmark](#noCheckmark)                   | `noCheckmark`                   | `Boolean` |             | When true, checkmark on selected option will no longer be present. |
+| [noValidate](#noValidate)                    | `noValidate`                    | `Boolean` |             | If set, disables auto-validation on blur.        |
+| [optionSelected](#optionSelected)                | `optionSelected`                | `Object`  | "undefined" | Specifies the current selected menuOption.       |
+| [placeholder](#placeholder)                   | `placeholder`                   | `String`  | ""          | Define placeholder text to display before a value is manually selected. |
+| [required](#required)                      | `required`                      | `Boolean` |             | Populates the `required` attribute on the element. Used for client-side validation. |
+| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `String`  |             | Sets a custom help text message to display for all validityStates. |
+| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `String`  |             | Custom help text message to display when validity = `customError`. |
+| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `String`  |             | Custom help text message to display when validity = `valueMissing`. |
+| [validity](#validity)                      | `validity`                      | `String`  | "undefined" | Specifies the `validityState` this element is in. |
+| [value](#value)                         | `value`                         | `String`  |             | Value selected for the component.                |
 
 ## Events
 
diff --git a/components/select/demo/api.min.js b/components/select/demo/api.min.js
index 38f18716..1f4ddbc6 100644
--- a/components/select/demo/api.min.js
+++ b/components/select/demo/api.min.js
@@ -2858,7 +2858,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
 
 var iconVersion$1 = '6.1.1';
 
-var styleCss$1$1 = i$3`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$1 = i$3`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
@@ -3014,6 +3014,16 @@ class AuroDropdown extends r {
     this.tabIndex = 0;
     this.noToggle = false;
 
+    /**
+     * @private
+     */
+    this._hasTriggerContent = false;
+
+    /**
+     * @private
+     */
+    this.triggerContentSlot = undefined;
+
     /**
      * @private
      */
@@ -3147,6 +3157,37 @@ class AuroDropdown extends r {
     ];
   }
 
+  /**
+   * Sets the value of the hasTriggerContent property and requests an update if changed.
+   *
+   * This setter updates the internal `_hasTriggerContent` property only if the new value differs 
+   * from the current value. If a change is detected, it triggers a request for the component to 
+   * update, ensuring that UI elements are refreshed accordingly.
+   *
+   * @private
+   * @setter hasTriggerContent
+   * @param {boolean} value - The new value indicating whether the trigger content is present.
+   * @returns {void}
+   */
+  set hasTriggerContent(value) {
+    if (value !== this._hasTriggerContent) {
+      this._hasTriggerContent = value;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Retrieves the value of the hasTriggerContent property.
+   *
+   * @private
+   * @getter hasTriggerContent
+   * @type {boolean}
+   * @returns {boolean} The current value of the hasTriggerContent property.
+   */
+  get hasTriggerContent() {
+    return this._hasTriggerContent;
+  }
+
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
@@ -3173,6 +3214,12 @@ class AuroDropdown extends r {
     if (changedProperties.has('mobileFullscreenBreakpoint')) {
       this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint;
     }
+
+    if (this.triggerContentSlot) {
+      this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+    } else {
+      this.hasTriggerContent = false;
+    }
   }
 
   firstUpdated() {
@@ -3215,6 +3262,25 @@ class AuroDropdown extends r {
     return inCustomSlot;
   }
 
+  /**
+   * Handles changes to the trigger content slot and updates related properties.
+   *
+   * It first updates the floater settings
+   * Then, it retrieves the assigned nodes from the event target and checks if any of 
+   * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
+   *
+   * @private
+   * @method handleTriggerContentSlotChange
+   * @param {Event} event - native slotchange event
+   * @returns {void}
+   */
+  handleTriggerContentSlotChange(event) {
+    this.floater.handleTriggerTabIndex();
+
+    this.triggerContentSlot = event.target.assignedNodes();
+    this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+  }
+
   /**
    * Handles the default slot change event and updates the content.
    *
@@ -3249,13 +3315,13 @@ class AuroDropdown extends r {
           tabindex="${this.tabIndex}"
           >
           <div class="triggerContentWrapper">
-            <label class="label" id="triggerLabel">
+            <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
               <slot name="label"></slot>
             </label>
             <div class="triggerContent">
               <slot
                 name="trigger"
-                @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}"></slot>
+                @slotchange="${(event) => this.handleTriggerContentSlotChange(event)}"></slot>
             </div>
           </div>
           ${this.chevron || this.common ? u$1`
@@ -3337,7 +3403,7 @@ class AuroSelect extends r$4 {
   constructor() {
     super();
 
-    this.placeholder = 'Please select option';
+    this.placeholder = '';
     this.optionSelected = undefined;
     this.validity = undefined;
 
@@ -3747,6 +3813,9 @@ class AuroSelect extends r$4 {
 
       this.validation.validate(this);
 
+      // notify dropdown as trigger content is changed
+      this.dropdown.requestUpdate();
+
       this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
         bubbles: true,
         cancelable: false,
diff --git a/components/select/demo/index.min.js b/components/select/demo/index.min.js
index 1950f851..1bcf096b 100644
--- a/components/select/demo/index.min.js
+++ b/components/select/demo/index.min.js
@@ -2768,7 +2768,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
 
 var iconVersion$1 = '6.1.1';
 
-var styleCss$1$1 = i$3`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1$1 = i$3`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
 var colorCss$1$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
@@ -2924,6 +2924,16 @@ class AuroDropdown extends r {
     this.tabIndex = 0;
     this.noToggle = false;
 
+    /**
+     * @private
+     */
+    this._hasTriggerContent = false;
+
+    /**
+     * @private
+     */
+    this.triggerContentSlot = undefined;
+
     /**
      * @private
      */
@@ -3057,6 +3067,37 @@ class AuroDropdown extends r {
     ];
   }
 
+  /**
+   * Sets the value of the hasTriggerContent property and requests an update if changed.
+   *
+   * This setter updates the internal `_hasTriggerContent` property only if the new value differs 
+   * from the current value. If a change is detected, it triggers a request for the component to 
+   * update, ensuring that UI elements are refreshed accordingly.
+   *
+   * @private
+   * @setter hasTriggerContent
+   * @param {boolean} value - The new value indicating whether the trigger content is present.
+   * @returns {void}
+   */
+  set hasTriggerContent(value) {
+    if (value !== this._hasTriggerContent) {
+      this._hasTriggerContent = value;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Retrieves the value of the hasTriggerContent property.
+   *
+   * @private
+   * @getter hasTriggerContent
+   * @type {boolean}
+   * @returns {boolean} The current value of the hasTriggerContent property.
+   */
+  get hasTriggerContent() {
+    return this._hasTriggerContent;
+  }
+
   /**
    * This will register this element with the browser.
    * @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
@@ -3083,6 +3124,12 @@ class AuroDropdown extends r {
     if (changedProperties.has('mobileFullscreenBreakpoint')) {
       this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint;
     }
+
+    if (this.triggerContentSlot) {
+      this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+    } else {
+      this.hasTriggerContent = false;
+    }
   }
 
   firstUpdated() {
@@ -3125,6 +3172,25 @@ class AuroDropdown extends r {
     return inCustomSlot;
   }
 
+  /**
+   * Handles changes to the trigger content slot and updates related properties.
+   *
+   * It first updates the floater settings
+   * Then, it retrieves the assigned nodes from the event target and checks if any of 
+   * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
+   *
+   * @private
+   * @method handleTriggerContentSlotChange
+   * @param {Event} event - native slotchange event
+   * @returns {void}
+   */
+  handleTriggerContentSlotChange(event) {
+    this.floater.handleTriggerTabIndex();
+
+    this.triggerContentSlot = event.target.assignedNodes();
+    this.hasTriggerContent = this.triggerContentSlot.reduce((old, sl) => old || Boolean(sl.textContent.trim()), false);
+  }
+
   /**
    * Handles the default slot change event and updates the content.
    *
@@ -3159,13 +3225,13 @@ class AuroDropdown extends r {
           tabindex="${this.tabIndex}"
           >
           <div class="triggerContentWrapper">
-            <label class="label" id="triggerLabel">
+            <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
               <slot name="label"></slot>
             </label>
             <div class="triggerContent">
               <slot
                 name="trigger"
-                @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}"></slot>
+                @slotchange="${(event) => this.handleTriggerContentSlotChange(event)}"></slot>
             </div>
           </div>
           ${this.chevron || this.common ? u$1`
@@ -3247,7 +3313,7 @@ class AuroSelect extends r$4 {
   constructor() {
     super();
 
-    this.placeholder = 'Please select option';
+    this.placeholder = '';
     this.optionSelected = undefined;
     this.validity = undefined;
 
@@ -3657,6 +3723,9 @@ class AuroSelect extends r$4 {
 
       this.validation.validate(this);
 
+      // notify dropdown as trigger content is changed
+      this.dropdown.requestUpdate();
+
       this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
         bubbles: true,
         cancelable: false,
diff --git a/components/select/docs/api.md b/components/select/docs/api.md
index cf85f609..b2308d7f 100644
--- a/components/select/docs/api.md
+++ b/components/select/docs/api.md
@@ -4,21 +4,21 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 ## Properties
 
-| Property                        | Attribute                       | Type      | Default                | Description                                      |
-|---------------------------------|---------------------------------|-----------|------------------------|--------------------------------------------------|
-| `disabled`                      | `disabled`                      | `Boolean` |                        | When attribute is present element shows disabled state. |
-| `error`                         | `error`                         | `String`  |                        | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
-| `flexMenuWidth`                 | `flexMenuWidth`                 | `Boolean` |                        | If set, makes dropdown bib width match the size of the content, rather than the width of the trigger. |
-| `noCheckmark`                   | `noCheckmark`                   | `Boolean` |                        | When true, checkmark on selected option will no longer be present. |
-| `noValidate`                    | `noValidate`                    | `Boolean` |                        | If set, disables auto-validation on blur.        |
-| `optionSelected`                | `optionSelected`                | `Object`  | "undefined"            | Specifies the current selected menuOption.       |
-| `placeholder`                   | `placeholder`                   | `String`  | "Please select option" | Define placeholder text to display before a value is manually selected. |
-| `required`                      | `required`                      | `Boolean` |                        | Populates the `required` attribute on the element. Used for client-side validation. |
-| `setCustomValidity`             | `setCustomValidity`             | `String`  |                        | Sets a custom help text message to display for all validityStates. |
-| `setCustomValidityCustomError`  | `setCustomValidityCustomError`  | `String`  |                        | Custom help text message to display when validity = `customError`. |
-| `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | `String`  |                        | Custom help text message to display when validity = `valueMissing`. |
-| `validity`                      | `validity`                      | `String`  | "undefined"            | Specifies the `validityState` this element is in. |
-| `value`                         | `value`                         | `String`  |                        | Value selected for the component.                |
+| Property                        | Attribute                       | Type      | Default     | Description                                      |
+|---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
+| `disabled`                      | `disabled`                      | `Boolean` |             | When attribute is present element shows disabled state. |
+| `error`                         | `error`                         | `String`  |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
+| `flexMenuWidth`                 | `flexMenuWidth`                 | `Boolean` |             | If set, makes dropdown bib width match the size of the content, rather than the width of the trigger. |
+| `noCheckmark`                   | `noCheckmark`                   | `Boolean` |             | When true, checkmark on selected option will no longer be present. |
+| `noValidate`                    | `noValidate`                    | `Boolean` |             | If set, disables auto-validation on blur.        |
+| `optionSelected`                | `optionSelected`                | `Object`  | "undefined" | Specifies the current selected menuOption.       |
+| `placeholder`                   | `placeholder`                   | `String`  | ""          | Define placeholder text to display before a value is manually selected. |
+| `required`                      | `required`                      | `Boolean` |             | Populates the `required` attribute on the element. Used for client-side validation. |
+| `setCustomValidity`             | `setCustomValidity`             | `String`  |             | Sets a custom help text message to display for all validityStates. |
+| `setCustomValidityCustomError`  | `setCustomValidityCustomError`  | `String`  |             | Custom help text message to display when validity = `customError`. |
+| `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | `String`  |             | Custom help text message to display when validity = `valueMissing`. |
+| `validity`                      | `validity`                      | `String`  | "undefined" | Specifies the `validityState` this element is in. |
+| `value`                         | `value`                         | `String`  |             | Value selected for the component.                |
 
 ## Events
 
diff --git a/components/select/src/auro-select.js b/components/select/src/auro-select.js
index b7ddad10..783cf9e7 100644
--- a/components/select/src/auro-select.js
+++ b/components/select/src/auro-select.js
@@ -51,7 +51,7 @@ export class AuroSelect extends LitElement {
   constructor() {
     super();
 
-    this.placeholder = 'Please select option';
+    this.placeholder = '';
     this.optionSelected = undefined;
     this.validity = undefined;
 
@@ -461,6 +461,9 @@ export class AuroSelect extends LitElement {
 
       this.validation.validate(this);
 
+      // notify dropdown as trigger content is changed
+      this.dropdown.requestUpdate();
+
       this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
         bubbles: true,
         cancelable: false,