fix(select): floating label covers placeholder when when blurred (#27446)

Issue number: resolves #27201

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Selects with a floating label, no value, and a placeholder should have
the label cover the placeholder when blurred. One focus, the label
should translate to the top of the select, and the placeholder should be
visible.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Floating label now covers the select and hides the placeholder when
the select is blurred, matching the `ion-input` and `ion-textarea`
behaviors.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <[email protected]>

Author: liamdebeasi

core/src/components/select/select.scss

@@ -227,6 +227,15 @@ button {
   box-sizing: border-box;
 }
 
+.select-wrapper .select-placeholder {
+  /**
+   * When the floating label appears on top of the
+   * select, we need to fade the text out so that the
+   * label does not overlap with the placeholder.
+   */
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 // Select Highlight
 // ----------------------------------------------------------------
 
@@ -473,16 +482,17 @@ button {
 }
 
 /**
- * The select should be hidden when the label
+ * The placeholder should be hidden when the label
  * is on top of the select. This prevents the label
  * from overlapping any placeholder value.
  */
-:host(.select-label-placement-floating:not(.has-placeholder)) .native-wrapper .select-text {
+:host(.select-label-placement-floating) .native-wrapper .select-placeholder {
   opacity: 0;
 }
 
-:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-text,
-:host(.has-value.select-label-placement-floating) .native-wrapper .select-text {
+:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,
+:host(.ion-focused.select-label-placement-floating) .native-wrapper .select-placeholder,
+:host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder {
   opacity: 1;
 }
 
@@ -492,8 +502,7 @@ button {
 :host(.select-label-placement-stacked) .label-text-wrapper,
 :host(.select-expanded.select-label-placement-floating) .label-text-wrapper,
 :host(.ion-focused.select-label-placement-floating) .label-text-wrapper,
-:host(.has-value.select-label-placement-floating) .label-text-wrapper,
-:host(.has-placeholder.select-label-placement-floating) .label-text-wrapper {
+:host(.has-value.select-label-placement-floating) .label-text-wrapper {
   @include transform(translateY(50%), scale(#{$select-floating-label-scale}));
 
   /**

core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-ltr-Mobile-Chrome-linux.png

@@ -179,6 +179,19 @@ configs().forEach(({ title, screenshot, config }) => {
       const textarea = page.locator('ion-textarea');
       expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-floating-no-value`));
     });
+    test('label should appear on top of the textarea when there is a placeholder and no value', async ({ page }) => {
+      await page.setContent(
+        `
+         <ion-textarea label="Standard" label-placement="floating" placeholder="Placeholder"></ion-textarea>
+       `,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+      expect(await textarea.screenshot()).toMatchSnapshot(
+        screenshot(`textarea-placement-floating-no-value-placeholder`)
+      );
+    });
     test('label should appear on top of the textarea when the textarea is focused', async ({ page }) => {
       await page.setContent(
         `