fix(item): wrap elements and label contents when the font size increases or the elements do not fit (#28146)

1) Wraps the label text and other content in an item when there is not enough room for everything to fit, instead of truncating the label with an ellipsis. Does not apply to items containing legacy inputs.
2) Passes the legacy property up to item from checkbox, input, radio, range, select, textarea and toggle. Item adds classes for all of these and does not wrap its contents if that class exists. If a developer is using a legacy input without the legacy property on it then they will need to add the legacy property to prevent the wrapping.
3) If a developer does not want the text to wrap for labels in modern items, the `ion-text-nowrap` class can be added to the label.

core/src/components/label/label.scss

@@ -19,18 +19,30 @@
 
   text-overflow: ellipsis;
 
+  box-sizing: border-box;
+}
+
+// TODO(FW-5289): remove
+:host-context(.item-legacy) {
   white-space: nowrap;
 
   overflow: hidden;
-  box-sizing: border-box;
+}
+
+// TODO(FW-5289): move to :host-context(.item)
+// Shouldn't need :not(.item-input) as this was
+// only needed because of the specificity with
+// :not(.item-legacy)
+:host-context(.item:not(.item-input):not(.item-legacy)) {
+  flex-grow: 1;
 }
 
 :host(.ion-color) {
   color: current-color(base);
 }
 
-:host(.ion-text-wrap) {
-  white-space: normal;
+:host(.ion-text-nowrap) {
+  overflow: hidden;
 }
 
 :host-context(.item-interactive-disabled:not(.item-multiple-inputs)) {
@@ -50,6 +62,11 @@
   align-self: baseline;
 }
 
+// Overflow hidden is required for the proper
+// margins between skeleton text elements
+:host-context(.item-skeleton-text) {
+  overflow: hidden;
+}
 
 // Fixed Inputs
 // --------------------------------------------------

core/src/components/label/test/headings/index.html

@@ -25,13 +25,13 @@
       <ion-content>
         <ion-list>
           <ion-item>
-            <ion-label>
+            <ion-label class="ion-text-nowrap">
               Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis
               reprehenderit ipsa nostrum aperiam optio porro?
             </ion-label>
           </ion-item>
           <ion-item>
-            <ion-label>
+            <ion-label class="ion-text-nowrap">
               <p>
                 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis
                 reprehenderit ipsa nostrum aperiam optio porro?
@@ -39,7 +39,7 @@
             </ion-label>
           </ion-item>
           <ion-item>
-            <ion-label>
+            <ion-label class="ion-text-nowrap">
               <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
             </ion-label>
           </ion-item>
@@ -49,7 +49,7 @@
             </ion-label>
           </ion-item>
           <ion-item>
-            <ion-label>
+            <ion-label class="ion-text-nowrap">
               <h2>
                 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis
                 reprehenderit ipsa nostrum aperiam optio porro?
@@ -65,7 +65,7 @@
             </ion-label>
           </ion-item>
           <ion-item>
-            <ion-label>
+            <ion-label class="ion-text-nowrap">
               <h3>
                 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis
                 reprehenderit ipsa nostrum aperiam optio porro?