feat(textarea): add experimental label slot (#27677)

Issue number: resolves #27061

---------

<!-- 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. -->

Textarea does not accept custom HTML labels

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

- Textarea accepts custom HTML labels as an experimental feature. We
marked this as experimental because it makes use of "scoped slots" which
is an emulated version of Web Component slots. As a result, there may be
instances where the slot behavior does not exactly match the native slot
behavior.

Note to reviewers: This is a combination of previously reviewed PRs. The
implementation is complete, so feel free to bikeshed.

## 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. -->


Docs PR: https://github.com/ionic-team/ionic-docs/pull/3001

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/textarea/textarea.scss

@@ -62,8 +62,6 @@
 
   font-family: $font-family-base;
 
-  white-space: pre-wrap;
-
   z-index: $z-index-item-input;
 
   box-sizing: border-box;
@@ -74,6 +72,8 @@
   flex: 1;
 
   background: var(--background);
+
+  white-space: pre-wrap;
 }
 
 // TODO: FW-2876 - Remove this selector
@@ -131,9 +131,8 @@
   outline: none;
 
   background: transparent;
-  box-sizing: border-box;
-  resize: none;
-  appearance: none;
+
+  white-space: pre-wrap;
 
   /**
    * This ensures the textarea
@@ -145,6 +144,9 @@
    * contrast of the textarea.
    */
   z-index: 1;
+  box-sizing: border-box;
+  resize: none;
+  appearance: none;
 
   &::placeholder {
     @include padding(0);
@@ -159,6 +161,11 @@
   }
 }
 
+// TODO: FW-2876 - Remove this selector
+:host(.legacy-textarea) .native-textarea {
+  white-space: inherit;
+}
+
 // TODO: FW-2876 - Remove this selector
 :host(.legacy-textarea) .native-textarea,
 :host(.legacy-textarea) .textarea-legacy-wrapper::after {
@@ -455,7 +462,8 @@
  * works on block-level elements. A flex item is
  * considered blockified (https://www.w3.org/TR/css-display-3/#blockify).
  */
-.label-text {
+.label-text,
+::slotted([slot="label"]) {
   text-overflow: ellipsis;
 
   white-space: nowrap;
@@ -463,6 +471,16 @@
   overflow: hidden;
 }
 
+/**
+ * If no label text is placed into the slot
+ * then the element should be hidden otherwise
+ * there will be additional margins added.
+ */
+.label-text-wrapper-hidden,
+.textarea-outline-notch-hidden {
+  display: none;
+}
+
 .textarea-wrapper textarea {
   /**
    * When the floating label appears on top of the