diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 72e908cb92..8dcb3cb3ba 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -3386,6 +3386,10 @@ export interface IonSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonSelectElement;
 }
+export interface IonSkeletonTextCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonSkeletonTextElement;
+}
 export interface IonSplitPaneCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonSplitPaneElement;
@@ -6921,6 +6925,10 @@ declare namespace LocalJSX {
           * If `true`, the skeleton text will animate.
          */
         "animated"?: boolean;
+        /**
+          * Emitted when the styles change.
+         */
+        "onIonStyle"?: (event: IonSkeletonTextCustomEvent<StyleEventDetail>) => void;
     }
     interface IonSpinner {
         /**
diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-ios-ltr-Mobile-Firefox-linux.png
index 4df0af8873..d374cb54e1 100644
Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index 36acb354ed..096fbea383 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -164,6 +164,8 @@ export class Checkbox implements ComponentInterface {
   private emitStyle() {
     const style: StyleEventDetail = {
       'interactive-disabled': this.disabled,
+      // TODO(FW-3100): remove this
+      legacy: !!this.legacy,
     };
 
     // TODO(FW-3100): remove this
diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss
index db724e3cca..b1d15e3173 100644
--- a/core/src/components/datetime/datetime.scss
+++ b/core/src/components/datetime/datetime.scss
@@ -243,6 +243,9 @@ ion-picker-column-internal {
   justify-content: space-between;
 }
 
+// TODO(FW-3547): the styles targeting ion-item
+// can be removed if we refactor datetime to
+// not use an ion-item
 :host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
   --background: translucent;
@@ -252,6 +255,11 @@ ion-picker-column-internal {
   display: flex;
 
   align-items: center;
+
+  // Width is set to auto because it is set
+  // to min-content elsewhere and we want to
+  // prevent wrapping the label in datetime
+  width: auto;
 }
 
 :host .calendar-action-buttons ion-item ion-icon {
diff --git a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Chrome-linux.png
index 0abfde48b3..8dc98b087b 100644
Binary files a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Firefox-linux.png
index 6da39531c7..68864ae0bc 100644
Binary files a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Safari-linux.png
index 73c4dd97c4..c0c282000c 100644
Binary files a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 6498eeffa4..4a6e50723c 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -479,6 +479,8 @@ export class Input implements ComponentInterface {
         'has-value': this.hasValue(),
         'has-focus': this.hasFocus,
         'interactive-disabled': this.disabled,
+        // TODO(FW-2764): remove this
+        legacy: !!this.legacy,
       });
     }
   }
diff --git a/core/src/components/input/test/legacy/spec/index.html b/core/src/components/input/test/legacy/spec/index.html
index 831936c667..82ffdb8978 100644
--- a/core/src/components/input/test/legacy/spec/index.html
+++ b/core/src/components/input/test/legacy/spec/index.html
@@ -29,7 +29,7 @@
             <h2>Inactive</h2>
             <ion-item>
               <ion-label position="floating">Label</ion-label>
-              <ion-input placeholder="Placeholder Text"></ion-input>
+              <ion-input legacy="true" placeholder="Placeholder Text"></ion-input>
             </ion-item>
           </div>
 
@@ -37,7 +37,7 @@
             <h2>Focused</h2>
             <ion-item class="item-has-focus">
               <ion-label position="floating">Label</ion-label>
-              <ion-input placeholder="Placeholder Text"></ion-input>
+              <ion-input legacy="true" placeholder="Placeholder Text"></ion-input>
             </ion-item>
           </div>
 
@@ -45,7 +45,7 @@
             <h2>Activated</h2>
             <ion-item>
               <ion-label position="floating">Label</ion-label>
-              <ion-input placeholder="Placeholder Text" value="Input Text"></ion-input>
+              <ion-input legacy="true" placeholder="Placeholder Text" value="Input Text"></ion-input>
             </ion-item>
           </div>
 
@@ -53,7 +53,7 @@
             <h2>Hover</h2>
             <ion-item class="item-hovered">
               <ion-label position="floating">Label</ion-label>
-              <ion-input></ion-input>
+              <ion-input legacy="true"></ion-input>
             </ion-item>
           </div>
 
@@ -61,7 +61,7 @@
             <h2>Disabled</h2>
             <ion-item>
               <ion-label position="floating">Label</ion-label>
-              <ion-input disabled></ion-input>
+              <ion-input legacy="true" disabled></ion-input>
             </ion-item>
           </div>
 
@@ -69,7 +69,7 @@
             <h2>Toggle Placeholder</h2>
             <ion-item>
               <ion-label position="floating">Label</ion-label>
-              <ion-input id="floatingToggle" type="password"></ion-input>
+              <ion-input legacy="true" id="floatingToggle" type="password"></ion-input>
               <ion-button
                 fill="clear"
                 slot="end"
@@ -89,7 +89,7 @@
             <h2>Inactive</h2>
             <ion-item>
               <ion-label position="stacked">Label</ion-label>
-              <ion-input></ion-input>
+              <ion-input legacy="true"></ion-input>
             </ion-item>
           </div>
 
@@ -97,7 +97,7 @@
             <h2>Focused</h2>
             <ion-item class="item-has-focus">
               <ion-label position="stacked">Label</ion-label>
-              <ion-input placeholder="Placeholder Text"></ion-input>
+              <ion-input legacy="true" placeholder="Placeholder Text"></ion-input>
             </ion-item>
           </div>
 
@@ -105,7 +105,7 @@
             <h2>Activated</h2>
             <ion-item>
               <ion-label position="stacked">Label</ion-label>
-              <ion-input placeholder="Placeholder Text" value="Input Text"></ion-input>
+              <ion-input legacy="true" placeholder="Placeholder Text" value="Input Text"></ion-input>
             </ion-item>
           </div>
 
@@ -113,7 +113,7 @@
             <h2>Hover</h2>
             <ion-item class="item-hovered">
               <ion-label position="stacked">Label</ion-label>
-              <ion-input></ion-input>
+              <ion-input legacy="true"></ion-input>
             </ion-item>
           </div>
 
@@ -121,7 +121,7 @@
             <h2>Disabled</h2>
             <ion-item>
               <ion-label position="stacked">Label</ion-label>
-              <ion-input disabled></ion-input>
+              <ion-input legacy="true" disabled></ion-input>
             </ion-item>
           </div>
 
@@ -129,7 +129,7 @@
             <h2>Toggle Placeholder</h2>
             <ion-item>
               <ion-label position="stacked">Label</ion-label>
-              <ion-input id="stackedToggle" type="password"></ion-input>
+              <ion-input legacy="true" id="stackedToggle" type="password"></ion-input>
               <ion-button
                 fill="clear"
                 slot="end"
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index 9973b195ff..229cdaa067 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -214,6 +214,11 @@
   display: flex;
   position: relative;
 
+  // Flex wrap is required here in order to wrap
+  // the start slot + .item-inner content that
+  // doesn't fit on the same line
+  flex-wrap: wrap;
+
   align-items: inherit;
   justify-content: inherit;
 
@@ -231,9 +236,15 @@
   background: var(--background);
 
   overflow: inherit;
-  box-sizing: border-box;
 
   z-index: 1;
+
+  box-sizing: border-box;
+}
+
+// TODO(FW-5289): remove
+:host(.item-legacy) .item-native {
+  flex-wrap: unset;
 }
 
 .item-native::-moz-focus-inner {
@@ -273,11 +284,25 @@ button, a {
   // This is required to work with an inset highlight
   position: relative;
 
-  flex: 1;
+  // This flex property is required in order to make
+  // the elements wrap when there is a slotted start
+  // element and a label
+  flex: 1 0 auto;
+
   flex-direction: inherit;
+
+  // Flex wrap is required here in order to wrap
+  // .input-wrapper content + the end slot that
+  // doesn't fit on the same line
+  flex-wrap: wrap;
+
   align-items: inherit;
   align-self: stretch;
 
+  // Max width must be set to 100%, otherwise the
+  // elements will overflow this container instead
+  // of wrapping
+  max-width: 100%;
   min-height: inherit;
 
   border-width: var(--inner-border-width);
@@ -289,6 +314,14 @@ button, a {
   box-sizing: border-box;
 }
 
+// TODO(FW-5289): remove
+:host(.item-legacy) .item-inner {
+  flex: 1;
+
+  flex-wrap: unset;
+
+  max-width: unset;
+}
 
 // Item Bottom
 // --------------------------------------------------
@@ -349,6 +382,11 @@ button, a {
 
 ::slotted(ion-label:not([slot="end"])) {
   flex: 1;
+
+  // Setting width to min-content allows the label to
+  // shrink and wrap its text instead of moving to its
+  // own row if there are slotted elements next to it
+  width: min-content;
 }
 
 // Item Input
@@ -361,18 +399,41 @@ button, a {
 .input-wrapper {
   display: flex;
 
-  flex: 1;
+  // This flex property is required in order to keep
+  // the label from shrinking when there are wide
+  // elements next to it
+  flex: 1 0 auto;
+
   flex-direction: inherit;
 
+  // Flex wrap is required here in order to wrap
+  // content in the default slot (such as a label
+  // and a button) that doesn't fit on the same line
+  flex-wrap: wrap;
+
   align-items: inherit;
   align-self: stretch;
 
+  // Max width must be set to 100%, otherwise the
+  // elements will overflow this container instead
+  // of wrapping
+  max-width: 100%;
+
   text-overflow: ellipsis;
 
   overflow: inherit;
   box-sizing: border-box;
 }
 
+// TODO(FW-5289): remove
+:host(.item-legacy) .input-wrapper {
+  flex: 1;
+
+  flex-wrap: unset;
+
+  max-width: unset;
+}
+
 :host(.item-label-stacked),
 :host(.item-label-floating) {
   align-items: start;
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png
index fcdd58f30c..5dcb0bd726 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png
index b84d3c3e6e..7ca90b8b85 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png
index d7da3d79cd..6cedd64817 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png
index 6b0fbb44c8..9e54eac08a 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png
index 2e60a7ffaf..a3e9d3e2aa 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png
index 1cca3e2e45..99cb77ae03 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/basic/index.html b/core/src/components/item/test/basic/index.html
index 24526ffece..7cf4190884 100644
--- a/core/src/components/item/test/basic/index.html
+++ b/core/src/components/item/test/basic/index.html
@@ -43,11 +43,13 @@
         </ion-item>
 
         <ion-item>
-          <ion-label> Single line text that should have ellipses when it doesn't all fit in the item</ion-label>
+          <ion-label class="ion-text-nowrap">
+            Single line text that should have ellipses when it doesn't all fit in the item
+          </ion-label>
         </ion-item>
 
         <ion-item lines="none">
-          <ion-label> Single line item with no lines</ion-label>
+          <ion-label>Single line item with no lines</ion-label>
         </ion-item>
 
         <ion-item>
@@ -57,21 +59,21 @@
         </ion-item>
 
         <ion-item color="secondary">
-          <ion-label class="ion-text-wrap">
+          <ion-label>
             <h1>H1 Title Text</h1>
             <p>Paragraph line 1</p>
           </ion-label>
         </ion-item>
 
         <ion-item>
-          <ion-label class="ion-text-wrap">
+          <ion-label>
             <h2>H2 Title Text</h2>
             <p>Paragraph line 1</p>
           </ion-label>
         </ion-item>
 
         <ion-item>
-          <ion-label class="ion-text-wrap">
+          <ion-label>
             <ion-text color="primary">
               <h3>H3 Title Text</h3>
             </ion-text>
@@ -83,7 +85,7 @@
         </ion-item>
 
         <ion-item>
-          <ion-label class="ion-text-wrap">
+          <ion-label>
             <h4>H4 Title Text</h4>
             <p>Paragraph line 1</p>
             <p>Paragraph line 2</p>
@@ -92,7 +94,7 @@
         </ion-item>
 
         <ion-item>
-          <ion-label> Item using inner ion-label </ion-label>
+          <ion-label>Item using inner ion-label </ion-label>
         </ion-item>
 
         <ion-item class="overflow-visible">
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-ios-ltr-Mobile-Chrome-linux.png
index 4df2e266e5..b524d7d3c4 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-ios-ltr-Mobile-Firefox-linux.png
index f6dd1a563e..91da0f0f29 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-ios-ltr-Mobile-Safari-linux.png
index 3e69f5b296..ecafa8faac 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-md-ltr-Mobile-Chrome-linux.png
index 98a9323205..6393467631 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-md-ltr-Mobile-Firefox-linux.png
index ccd24bc120..2ec727d1b9 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-md-ltr-Mobile-Safari-linux.png
index fca1b90ec8..77cce58584 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png
index 04e99c4632..26bb6bdb21 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png
index e2c4938048..5ee3eb16b0 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png
index 44d31f9b61..38571aeb3d 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png
index 78ea8ce7d5..a76c3ce952 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png
index 75f0ab5c4a..03d3ab3393 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png
index 2678a1a284..c4a7fe016b 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png
index dde71260a4..3f12e90682 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png
index 0f3e460412..c15079c899 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png
index 0fff3679d3..eeb2a09a32 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png
index f99490f0cc..f97e99c8ee 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png
index 6b3978d18e..9b2293d68d 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png
index e611adc408..03af95783f 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Chrome-linux.png
index 5159d2fb52..39b0931f7f 100644
Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Firefox-linux.png
index 437d1f29df..8b8fc625b6 100644
Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Safari-linux.png
index 1675962d19..fd0c13dfcb 100644
Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Chrome-linux.png
index a7f901ac0e..a2eff6efb1 100644
Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Firefox-linux.png
index 80e56ec666..dfde33d34a 100644
Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Safari-linux.png
index ec96f4c46f..fe04bafaff 100644
Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/disabled/index.html b/core/src/components/item/test/disabled/index.html
index 3c653f134c..c8c0e935b8 100644
--- a/core/src/components/item/test/disabled/index.html
+++ b/core/src/components/item/test/disabled/index.html
@@ -144,8 +144,7 @@
 
           <ion-item>
             <ion-checkbox aria-label="Checkbox" slot="start"></ion-checkbox>
-            <ion-label>Checkbox + Toggle</ion-label>
-            <ion-toggle aria-label="Checkbox" disabled value="45"></ion-toggle>
+            <ion-toggle disabled value="45">Checkbox + Toggle</ion-toggle>
           </ion-item>
 
           <ion-item>
diff --git a/core/src/components/item/test/disabled/item.e2e.ts b/core/src/components/item/test/disabled/item.e2e.ts
index 50dafa7b5c..3e37ac267e 100644
--- a/core/src/components/item/test/disabled/item.e2e.ts
+++ b/core/src/components/item/test/disabled/item.e2e.ts
@@ -11,7 +11,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 
       await page.setIonViewport();
 
-      // TODO: FW-4037 - Fix label color inconsistency between disabled controls
       await expect(page).toHaveScreenshot(screenshot(`item-disabled-diff`));
     });
   });
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png
index 9c1ae2ef4a..d43f48be2a 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png
index 0becf58521..4535dcaef8 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png
index 8c1740ccb7..12b27f395f 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png
index ccc750abd2..a5237bf74a 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png
index f7237ec2ce..20ea4848ae 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png
index 291c55995b..ecde3c33e0 100644
Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Chrome-linux.png
index 41eb6db754..43fa7f0cfc 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Firefox-linux.png
index 2f716dfc21..67e8da305c 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Safari-linux.png
index 5ba4246edf..a3172c555d 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Chrome-linux.png
index 0f1f5cf87b..5379c1d79d 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Firefox-linux.png
index b1f4aa67c4..9e3d3d5b93 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Safari-linux.png
index 614f02a7d7..07b9d1f843 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Chrome-linux.png
index 45b6b84662..d5057c87b3 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Firefox-linux.png
index b5d5a201a8..32cd77abd2 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Safari-linux.png
index 148333df74..3f0b032859 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Chrome-linux.png
index 97bbc279bb..43487eba48 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Firefox-linux.png
index 3f004fc7d6..6f4e7e9b98 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Safari-linux.png
index 4f35e512fc..d8d0caf5c5 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Chrome-linux.png
index 801c66a8ea..a83e28e22e 100644
Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Firefox-linux.png
index d5e01b8357..d42f565a38 100644
Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Safari-linux.png
index aca7f1d528..937d4def36 100644
Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Chrome-linux.png
index 411f980c29..7a80514231 100644
Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Firefox-linux.png
index 98edc05146..87a6c43f0d 100644
Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Safari-linux.png
index bd77316c1a..a2f70a2648 100644
Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Chrome-linux.png
index 9ccb755e98..f81032d39f 100644
Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Firefox-linux.png
index ab6642f115..06d6c03b60 100644
Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Safari-linux.png
index c3b3d02fe5..eb70cb97e5 100644
Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Chrome-linux.png
index 9f4611645b..649ddf2fd5 100644
Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Firefox-linux.png
index 6f8fff2bb0..f8db5aad03 100644
Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Safari-linux.png
index 9fa873e320..1a92d658cb 100644
Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-ltr-Mobile-Chrome-linux.png
index 2186484a5a..5b670cd994 100644
Binary files a/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-ltr-Mobile-Firefox-linux.png
index 8b4c9eab0e..9fc6e00ecb 100644
Binary files a/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-ltr-Mobile-Safari-linux.png
index 4bcfa04f95..0bbe694d55 100644
Binary files a/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-rtl-Mobile-Chrome-linux.png
index 19efce3a00..eff45f6b78 100644
Binary files a/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-rtl-Mobile-Firefox-linux.png
index fd7b64f01d..a0213a6473 100644
Binary files a/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-rtl-Mobile-Safari-linux.png
index b0c7a1e81f..5987b74fd4 100644
Binary files a/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/legacy/alignment/index.html b/core/src/components/item/test/legacy/alignment/index.html
index e4f9a35514..ab8c70ceb4 100644
--- a/core/src/components/item/test/legacy/alignment/index.html
+++ b/core/src/components/item/test/legacy/alignment/index.html
@@ -46,7 +46,7 @@
           </ion-item>
           <ion-item>
             <ion-label>Destination</ion-label>
-            <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select placeholder="Choose Really Really Long Destination Here" legacy="true">
               <ion-select-option>Madison, WI</ion-select-option>
               <ion-select-option>Atlanta, GA</ion-select-option>
             </ion-select>
@@ -61,7 +61,7 @@
           </ion-item>
           <ion-item>
             <ion-label position="fixed">Destination</ion-label>
-            <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select placeholder="Choose Really Really Long Destination Here" legacy="true">
               <ion-select-option>Madison, WI</ion-select-option>
               <ion-select-option>Atlanta, GA</ion-select-option>
             </ion-select>
@@ -76,7 +76,7 @@
           </ion-item>
           <ion-item>
             <ion-label position="floating">Destination</ion-label>
-            <ion-select>
+            <ion-select legacy="true">
               <ion-select-option>Madison, WI</ion-select-option>
               <ion-select-option>Atlanta, GA</ion-select-option>
             </ion-select>
@@ -91,7 +91,7 @@
           </ion-item>
           <ion-item>
             <ion-label position="stacked">Destination</ion-label>
-            <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select placeholder="Choose Really Really Long Destination Here" legacy="true">
               <ion-select-option>Madison, WI</ion-select-option>
               <ion-select-option>Atlanta, GA</ion-select-option>
             </ion-select>
@@ -106,7 +106,7 @@
           </ion-item>
           <ion-item>
             <ion-label slot="end">Destination</ion-label>
-            <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select placeholder="Choose Really Really Long Destination Here" legacy="true">
               <ion-select-option>Madison, WI</ion-select-option>
               <ion-select-option>Atlanta, GA</ion-select-option>
             </ion-select>
diff --git a/core/src/components/item/test/legacy/disabled/index.html b/core/src/components/item/test/legacy/disabled/index.html
index 7378c9c84b..7fc1857ab2 100644
--- a/core/src/components/item/test/legacy/disabled/index.html
+++ b/core/src/components/item/test/legacy/disabled/index.html
@@ -41,7 +41,7 @@
 
           <ion-item>
             <ion-label>Disabled Select</ion-label>
-            <ion-select disabled value="n64">
+            <ion-select disabled value="n64" legacy="true">
               <ion-select-option value="">No Game Console</ion-select-option>
               <ion-select-option value="nes">NES</ion-select-option>
               <ion-select-option value="n64">Nintendo64</ion-select-option>
@@ -54,34 +54,34 @@
 
           <ion-item>
             <ion-label>Disabled Input</ion-label>
-            <ion-input placeholder="Disabled" disabled></ion-input>
+            <ion-input placeholder="Disabled" disabled legacy="true"></ion-input>
           </ion-item>
 
           <ion-item>
             <ion-label>Disabled Textarea</ion-label>
-            <ion-textarea placeholder="Disabled" disabled></ion-textarea>
+            <ion-textarea placeholder="Disabled" disabled legacy="true"></ion-textarea>
           </ion-item>
 
           <ion-item>
             <ion-label>Disabled Toggle</ion-label>
-            <ion-toggle disabled checked slot="end"></ion-toggle>
+            <ion-toggle disabled checked slot="end" legacy="true"></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Disabled Checkbox</ion-label>
-            <ion-checkbox disabled checked slot="start"></ion-checkbox>
+            <ion-checkbox disabled checked slot="start" legacy="true"></ion-checkbox>
           </ion-item>
 
           <ion-radio-group value="radio">
             <ion-item>
               <ion-label>Disabled Radio</ion-label>
-              <ion-radio disabled value="radio" slot="start"></ion-radio>
+              <ion-radio disabled value="radio" slot="start" legacy="true"></ion-radio>
             </ion-item>
           </ion-radio-group>
 
           <ion-item>
             <ion-label>Disabled Range</ion-label>
-            <ion-range disabled value="10"></ion-range>
+            <ion-range disabled value="10" legacy="true"></ion-range>
           </ion-item>
         </ion-list>
 
@@ -111,25 +111,25 @@
           </ion-item>
 
           <ion-item>
-            <ion-checkbox disabled slot="start"></ion-checkbox>
+            <ion-checkbox disabled slot="start" legacy="true"></ion-checkbox>
             <ion-label>Checkbox + Radio</ion-label>
             <ion-radio slot="end"></ion-radio>
           </ion-item>
 
           <ion-item>
-            <ion-checkbox disabled slot="start"></ion-checkbox>
+            <ion-checkbox disabled slot="start" legacy="true"></ion-checkbox>
             <ion-radio slot="start"></ion-radio>
             <ion-label>Checkbox + Radio</ion-label>
           </ion-item>
 
           <ion-item>
             <ion-label>Disabled Selects</ion-label>
-            <ion-select placeholder="month">
+            <ion-select placeholder="month" legacy="true">
               <ion-select-option value="1">January</ion-select-option>
               <ion-select-option value="2">February</ion-select-option>
               <ion-select-option value="3">March</ion-select-option>
             </ion-select>
-            <ion-select disabled placeholder="year">
+            <ion-select disabled placeholder="year" legacy="true">
               <ion-select-option value="1990">1990</ion-select-option>
               <ion-select-option value="1991">1991</ion-select-option>
               <ion-select-option value="1992">1992</ion-select-option>
@@ -142,19 +142,19 @@
           </ion-item>
 
           <ion-item>
-            <ion-checkbox slot="start"></ion-checkbox>
+            <ion-checkbox slot="start" legacy="true"></ion-checkbox>
             <ion-label>Checkbox + Range</ion-label>
             <ion-range disabled value="45"></ion-range>
           </ion-item>
 
           <ion-item>
-            <ion-checkbox slot="start"></ion-checkbox>
+            <ion-checkbox slot="start" legacy="true"></ion-checkbox>
             <ion-label>Checkbox + Toggle</ion-label>
             <ion-toggle disabled value="45"></ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-checkbox disabled slot="start"></ion-checkbox>
+            <ion-checkbox disabled slot="start" legacy="true"></ion-checkbox>
             <ion-label>Checkbox + Buttons</ion-label>
             <ion-button slot="end">Default</ion-button>
             <ion-button slot="end">Buttons</ion-button>
@@ -162,7 +162,7 @@
 
           <ion-item>
             <ion-label>Disabled Input</ion-label>
-            <ion-input slot="start" placeholder="Disabled" disabled></ion-input>
+            <ion-input slot="start" placeholder="Disabled" disabled legacy="true"></ion-input>
             <ion-segment>
               <ion-segment-button value="friends">
                 <ion-label>Friends</ion-label>
@@ -174,7 +174,7 @@
           </ion-item>
 
           <ion-item>
-            <ion-checkbox slot="start" disabled></ion-checkbox>
+            <ion-checkbox slot="start" disabled legacy="true"></ion-checkbox>
             <ion-label>Disabled Checkbox</ion-label>
             <ion-searchbar></ion-searchbar>
           </ion-item>
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png
index 71487aa355..21d672195c 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Firefox-linux.png
index ea08d6035e..878856e8e8 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Safari-linux.png
index d62f664c6e..296fb72247 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png
index ad69eda216..ce3733c006 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Firefox-linux.png
index dd67daaf0c..eee02b7f44 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Safari-linux.png
index 648aacd933..1c377d195d 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png
index 1ca0f4a0f6..12d647de20 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Firefox-linux.png
index 24f832a7d9..8ad1301969 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Safari-linux.png
index 4ea4daa293..3e9e676177 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Chrome-linux.png
index ad0d91d860..9035ebc6ec 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png
index 01ed510634..f7c5ca2adb 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Safari-linux.png
index d008871598..a194d82047 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Chrome-linux.png
index d1eb932c9a..3aadb833c8 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Firefox-linux.png
index 4a43a74a27..fcd232cceb 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Safari-linux.png
index 1a691a079a..f12160d5c4 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Chrome-linux.png
index 035180272d..01d5a97549 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Firefox-linux.png
index c17e53cbc3..5003e2cfe0 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Safari-linux.png
index f21cfc94e1..1f50cdbf43 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png
index cc2f0b510e..e05f98c749 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png
index 78137c1031..8d03fde387 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Safari-linux.png
index 16aad76c5b..f63bed46ab 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png
index 04a9aa54cb..048d9993b4 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png
index 7190b58088..33b548a3cc 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Safari-linux.png
index 29da603149..41615ac938 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png
index 141532a579..e10a38e845 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png
index 8f8d0bea88..0b85e6a644 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png
index 83a37bd679..86c578722c 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png
index e0bb9918d5..b6336ee78a 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png
index 089de1baac..6b9217c54d 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png
index 4c7b45088d..5921cfc078 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/text/index.html b/core/src/components/item/test/text/index.html
deleted file mode 100644
index 9276aa4b16..0000000000
--- a/core/src/components/item/test/text/index.html
+++ /dev/null
@@ -1,111 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Item - Text</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Item Text</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content id="content" class="outer-content">
-        <ion-list>
-          <ion-list-header>
-            <ion-label>List Header</ion-label>
-          </ion-list-header>
-          <ion-item>
-            <ion-label>Item</ion-label>
-          </ion-item>
-          <ion-item-divider>
-            <ion-label>Item Divider</ion-label>
-          </ion-item-divider>
-          <ion-item>
-            <ion-label>Item</ion-label>
-          </ion-item>
-        </ion-list>
-
-        <ion-item>
-          <ion-label>Plain Ol' div with some text</ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Single line text that should have ellipses when it doesn't all fit in the item</ion-label>
-        </ion-item>
-
-        <ion-item lines="none">
-          <ion-label>Single line item with no lines</ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label class="ion-text-wrap">
-            Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on .item
-          </ion-label>
-        </ion-item>
-
-        <ion-item color="secondary">
-          <ion-label class="ion-text-wrap">
-            <h1>H1 Title Text</h1>
-            <p>Paragraph line 1</p>
-          </ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label class="ion-text-wrap">
-            <h2>H2 Title Text</h2>
-            <p>Paragraph line 1</p>
-          </ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label class="ion-text-wrap">
-            <ion-text color="primary">
-              <h3>H3 Title Text</h3>
-            </ion-text>
-            <p>Paragraph line 1</p>
-            <ion-text color="secondary">
-              <p>Paragraph line 2 secondary</p>
-            </ion-text>
-          </ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label class="ion-text-wrap">
-            <h4>H4 Title Text</h4>
-            <p>Paragraph line 1</p>
-            <p>Paragraph line 2</p>
-            <p>Paragraph line 3</p>
-          </ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Item using inner ion-label</ion-label>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>ion-label</ion-label>
-          <div>div</div>
-        </ion-item>
-      </ion-content>
-
-      <style>
-        .outer-content {
-          --background: #f2f2f2;
-        }
-      </style>
-    </ion-app>
-  </body>
-</html>
diff --git a/core/src/components/item/test/text/item.e2e.ts b/core/src/components/item/test/text/item.e2e.ts
deleted file mode 100644
index 2338f91a3e..0000000000
--- a/core/src/components/item/test/text/item.e2e.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('item: text'), () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.goto(`/src/components/item/test/text`, config);
-
-      await page.setIonViewport();
-
-      await expect(page).toHaveScreenshot(screenshot(`item-text-diff`));
-    });
-  });
-});
diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 0c9e7b4d61..0000000000
Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index fa06e211e3..0000000000
Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 347e463768..0000000000
Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 9b35d61c86..0000000000
Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index e20a3c39c6..0000000000
Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 2e16695805..0000000000
Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 57e5a8a19e..0000000000
Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index f12ceb2738..0000000000
Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 7904957d4f..0000000000
Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Chrome-linux.png
deleted file mode 100644
index 3bed4fb233..0000000000
Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 40baf22159..0000000000
Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Safari-linux.png
deleted file mode 100644
index 926353ba49..0000000000
Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss
index 92c3c532ce..ff3e372bf5 100644
--- a/core/src/components/label/label.scss
+++ b/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
 // --------------------------------------------------
diff --git a/core/src/components/label/test/color/label.e2e.ts-snapshots/item-color-inherit-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/label/test/color/label.e2e.ts-snapshots/item-color-inherit-ios-ltr-Mobile-Chrome-linux.png
index 328adda027..e249f6ef39 100644
Binary files a/core/src/components/label/test/color/label.e2e.ts-snapshots/item-color-inherit-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/label/test/color/label.e2e.ts-snapshots/item-color-inherit-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/label/test/color/label.e2e.ts-snapshots/item-color-inherit-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/label/test/color/label.e2e.ts-snapshots/item-color-inherit-ios-ltr-Mobile-Firefox-linux.png
index 6ee0f1b0a4..f8dcc019f4 100644
Binary files a/core/src/components/label/test/color/label.e2e.ts-snapshots/item-color-inherit-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/label/test/color/label.e2e.ts-snapshots/item-color-inherit-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/label/test/color/label.e2e.ts-snapshots/item-color-inherit-ios-ltr-Mobile-Safari-linux.png b/core/src/components/label/test/color/label.e2e.ts-snapshots/item-color-inherit-ios-ltr-Mobile-Safari-linux.png
index 7019c75b41..dc8fa28d74 100644
Binary files a/core/src/components/label/test/color/label.e2e.ts-snapshots/item-color-inherit-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/label/test/color/label.e2e.ts-snapshots/item-color-inherit-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/label/test/headings/index.html b/core/src/components/label/test/headings/index.html
index 2a5e9d8175..0c832f4d5a 100644
--- a/core/src/components/label/test/headings/index.html
+++ b/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?
diff --git a/core/src/components/modal/test/sheet/index.html b/core/src/components/modal/test/sheet/index.html
index 6ac6b24488..8fed5eac09 100644
--- a/core/src/components/modal/test/sheet/index.html
+++ b/core/src/components/modal/test/sheet/index.html
@@ -87,7 +87,7 @@
         <ion-content class="ion-padding">
           <ion-item>
             <ion-label>Input outside modal</ion-label>
-            <ion-input id="root-input"></ion-input>
+            <ion-input id="root-input" legacy="true"></ion-input>
           </ion-item>
 
           <ion-button id="sheet-modal" onclick="presentModal()">Present Sheet Modal</ion-button>
diff --git a/core/src/components/note/test/a11y/note.e2e.ts b/core/src/components/note/test/a11y/note.e2e.ts
index 74b8aecb8b..bf7839a763 100644
--- a/core/src/components/note/test/a11y/note.e2e.ts
+++ b/core/src/components/note/test/a11y/note.e2e.ts
@@ -61,5 +61,53 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 
       await expect(note).toHaveScreenshot(screenshot(`note-item-divider-scale`));
     });
+    test('should wrap label to the next line without truncating', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-list>
+          <ion-item>
+            <ion-note slot="start">Really really long note</ion-note>
+            <ion-label>Label</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Label</ion-label>
+            <ion-note slot="end">Really really long note</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-note slot="start">Note</ion-note>
+            <ion-label>Really really long label</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Really really long label</ion-label>
+            <ion-note slot="end">Note</ion-note>
+          </ion-item>
+
+          <ion-item>
+            <ion-note slot="start">Really really long note</ion-note>
+            <ion-label>Really really long label</ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Really really long label</ion-label>
+            <ion-note slot="end">Really really long note</ion-note>
+          </ion-item>
+        </ion-list>
+      `,
+        config
+      );
+
+      const list = page.locator('ion-list');
+
+      await expect(list).toHaveScreenshot(screenshot(`note-wrapping-label-scale`));
+    });
   });
 });
diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a585813609
Binary files /dev/null and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..4273df06f3
Binary files /dev/null and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7e665c4e97
Binary files /dev/null and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..d2f8031710
Binary files /dev/null and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3625d21a1e
Binary files /dev/null and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..768ac8a47a
Binary files /dev/null and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/note/test/basic/index.html b/core/src/components/note/test/basic/index.html
index 0f049bb3f9..51f1d01770 100644
--- a/core/src/components/note/test/basic/index.html
+++ b/core/src/components/note/test/basic/index.html
@@ -23,12 +23,13 @@
       </ion-header>
 
       <ion-content>
+        <div class="ion-padding">
+          <ion-note>Default Note</ion-note>
+        </div>
+
         <ion-list>
-          <ion-list-header>
-            <ion-label> Notes Right </ion-label>
-          </ion-list-header>
           <ion-item>
-            <ion-label>Default Note</ion-label>
+            <ion-label>Item Note</ion-label>
             <ion-note slot="end">99</ion-note>
           </ion-item>
 
@@ -37,117 +38,44 @@
             <ion-note slot="end" color="primary">99</ion-note>
           </ion-item>
 
-          <ion-item>
-            <ion-label>Secondary Note</ion-label>
-            <ion-note slot="end" color="secondary">99</ion-note>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Tertiary Note</ion-label>
-            <ion-note slot="end" color="tertiary">99</ion-note>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Success Note</ion-label>
-            <ion-note slot="end" color="success">99</ion-note>
-          </ion-item>
-
           <ion-item>
             <ion-label>Warning Note</ion-label>
-            <ion-note slot="end" color="warning">99</ion-note>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Danger Note</ion-label>
-            <ion-note slot="end" color="danger">99</ion-note>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Light Note</ion-label>
-            <ion-note slot="end" color="light">99</ion-note>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Medium Note</ion-label>
-            <ion-note slot="end" color="medium">99</ion-note>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Dark Note</ion-label>
-            <ion-note slot="end" color="dark">99</ion-note>
-          </ion-item>
-
-          <ion-item onclick="toggleColor()">
-            <ion-note id="toggleColor" slot="end" color="primary">primary</ion-note>
-            <ion-label>Dynamic Note Color (toggle)</ion-label>
+            <ion-note slot="start" color="warning">99</ion-note>
           </ion-item>
         </ion-list>
 
         <ion-list>
-          <ion-list-header>
-            <ion-label> Notes Left </ion-label>
-          </ion-list-header>
           <ion-item>
-            <ion-label>Default Note</ion-label>
-            <ion-note slot="start">99</ion-note>
+            <ion-note slot="start">Really really long note</ion-note>
+            <ion-label>Label</ion-label>
           </ion-item>
 
           <ion-item>
-            <ion-label>Primary Note</ion-label>
-            <ion-note slot="start" color="primary">99</ion-note>
+            <ion-label>Label</ion-label>
+            <ion-note slot="end">Really really long note</ion-note>
           </ion-item>
 
           <ion-item>
-            <ion-label>Secondary Note</ion-label>
-            <ion-note slot="start" color="secondary">99</ion-note>
+            <ion-note slot="start">Note</ion-note>
+            <ion-label>Really really long label</ion-label>
           </ion-item>
 
           <ion-item>
-            <ion-label>Tertiary Note</ion-label>
-            <ion-note slot="start" color="tertiary">99</ion-note>
+            <ion-label>Really really long label</ion-label>
+            <ion-note slot="end">Note</ion-note>
           </ion-item>
 
           <ion-item>
-            <ion-label>Success Note</ion-label>
-            <ion-note slot="start" color="success">99</ion-note>
+            <ion-note slot="start">Really really long note</ion-note>
+            <ion-label>Really really long label</ion-label>
           </ion-item>
 
           <ion-item>
-            <ion-label>Warning Note</ion-label>
-            <ion-note slot="start" color="warning">99</ion-note>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Danger Note</ion-label>
-            <ion-note slot="start" color="danger">99</ion-note>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Light Note</ion-label>
-            <ion-note slot="start" color="light">99</ion-note>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Medium Note</ion-label>
-            <ion-note slot="start" color="medium">99</ion-note>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Dark Note</ion-label>
-            <ion-note slot="start" color="dark">99</ion-note>
+            <ion-label>Really really long label</ion-label>
+            <ion-note slot="end">Really really long note</ion-note>
           </ion-item>
         </ion-list>
       </ion-content>
     </ion-app>
-
-    <script>
-      const note = document.querySelector('#toggleColor');
-
-      function toggleColor() {
-        const prev = note.getAttribute('color');
-        note.setAttribute('color', prev === 'secondary' ? 'primary' : 'secondary');
-        note.innerHTML = prev === 'secondary' ? 'primary' : 'secondary';
-      }
-    </script>
   </body>
 </html>
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index e22a47b34f..864a0dd486 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -184,6 +184,8 @@ export class Radio implements ComponentInterface {
   private emitStyle() {
     const style: StyleEventDetail = {
       'interactive-disabled': this.disabled,
+      // TODO(FW-3125): remove this
+      legacy: !!this.legacy,
     };
 
     if (this.legacyFormController.hasLegacyControl()) {
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 2e194cd8c6..d105b69506 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -397,6 +397,8 @@ export class Range implements ComponentInterface {
       this.ionStyle.emit({
         interactive: true,
         'interactive-disabled': this.disabled,
+        // TODO(FW-2997): remove this
+        legacy: !!this.legacy,
       });
     }
   }
diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Chrome-linux.png
index d609ebc02f..0dca8dc3dc 100644
Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Firefox-linux.png
index a12147b45f..3bb853b774 100644
Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Safari-linux.png
index 3ba7d632f9..53cdd23bb8 100644
Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Chrome-linux.png
index 6743cc63fb..c3951b7dbc 100644
Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Firefox-linux.png
index 77a7da7a36..e938e607f9 100644
Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Safari-linux.png
index b18142c1f8..4b22fc38c9 100644
Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Chrome-linux.png
index 0b4773970a..f23146f4d0 100644
Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Firefox-linux.png
index 33ea179ecb..0d4bff834c 100644
Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Safari-linux.png
index 83366defcf..05ee11071e 100644
Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Chrome-linux.png
index 332566c1a5..043edcb729 100644
Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Firefox-linux.png
index 3947321d18..f85697b2c3 100644
Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Safari-linux.png
index 2b0ffb3bc3..b1617b79b9 100644
Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss
index b6deed4ce1..50a13f06de 100644
--- a/core/src/components/select/select.scss
+++ b/core/src/components/select/select.scss
@@ -78,6 +78,19 @@
 
 // Select Used in ion-item
 // --------------------------------------------------
+
+// TODO FW-3194 - Remove the :not(.legacy-select) piece
+//
+// The flex and width properties are required here
+// in order to allow the select to shrink inside of an item
+// otherwise it always wraps to the next line even
+// when it can shrink
+:host(.in-item:not(.legacy-select)) {
+  flex: 1 1 0;
+
+  width: 0;
+}
+
 // TODO FW-3194 - Remove this
 :host(.in-item.legacy-select) {
   position: static;
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 7196f4267e..df8a00ae18 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -751,6 +751,8 @@ export class Select implements ComponentInterface {
       style['has-placeholder'] = this.placeholder !== undefined;
       style['has-value'] = this.hasValue();
       style['has-focus'] = this.isExpanded;
+      // TODO(FW-3194): remove this
+      style['legacy'] = !!this.legacy;
     }
 
     this.ionStyle.emit(style);
diff --git a/core/src/components/select/test/legacy/custom/index.html b/core/src/components/select/test/legacy/custom/index.html
index e5438f72dd..54991c3edb 100644
--- a/core/src/components/select/test/legacy/custom/index.html
+++ b/core/src/components/select/test/legacy/custom/index.html
@@ -28,21 +28,21 @@
             <ion-label> Standalone Select </ion-label>
           </ion-list-header>
 
-          <ion-select placeholder="Default Select" legacy="true">
+          <ion-select legacy="true" placeholder="Default Select" legacy="true">
             <ion-select-option value="madison">Madison, WI</ion-select-option>
             <ion-select-option value="austin">Austin, TX</ion-select-option>
             <ion-select-option value="chicago">Chicago, IL</ion-select-option>
             <ion-select-option value="seattle">Seattle, WA</ion-select-option>
           </ion-select>
 
-          <ion-select placeholder="Placeholder" legacy="true" class="custom-part-colors">
+          <ion-select legacy="true" placeholder="Placeholder" legacy="true" class="custom-part-colors">
             <ion-select-option value="madison">Madison, WI</ion-select-option>
             <ion-select-option value="austin">Austin, TX</ion-select-option>
             <ion-select-option value="chicago">Chicago, IL</ion-select-option>
             <ion-select-option value="seattle">Seattle, WA</ion-select-option>
           </ion-select>
 
-          <ion-select value="austin" legacy="true" class="custom-part-colors">
+          <ion-select legacy="true" value="austin" legacy="true" class="custom-part-colors">
             <ion-select-option value="madison">Madison, WI</ion-select-option>
             <ion-select-option value="austin">Austin, TX</ion-select-option>
             <ion-select-option value="chicago">Chicago, IL</ion-select-option>
@@ -55,7 +55,7 @@
 
           <ion-item>
             <ion-label>Location</ion-label>
-            <ion-select placeholder="Default Select">
+            <ion-select legacy="true" placeholder="Default Select">
               <ion-select-option value="madison">Madison, WI</ion-select-option>
               <ion-select-option value="austin">Austin, TX</ion-select-option>
               <ion-select-option value="chicago">Chicago, IL</ion-select-option>
@@ -71,7 +71,7 @@
 
           <ion-item>
             <ion-label>Default Interface (Alert)</ion-label>
-            <ion-select placeholder="Styled Options" class="custom-options">
+            <ion-select legacy="true" placeholder="Styled Options" class="custom-options">
               <ion-select-option class="select-option-custom-red" value="madison">Madison, WI</ion-select-option>
               <ion-select-option class="select-option-custom-red" value="austin">Austin, TX</ion-select-option>
               <ion-select-option class="select-option-custom-purple" value="chicago">Chicago, IL</ion-select-option>
@@ -81,7 +81,7 @@
 
           <ion-item>
             <ion-label>Action Sheet Interface</ion-label>
-            <ion-select placeholder="Styled Options" interface="action-sheet" class="custom-options">
+            <ion-select legacy="true" placeholder="Styled Options" interface="action-sheet" class="custom-options">
               <ion-select-option class="select-option-custom-red" value="madison">Madison, WI</ion-select-option>
               <ion-select-option class="select-option-custom-red" value="austin">Austin, TX</ion-select-option>
               <ion-select-option class="select-option-custom-purple" value="chicago">Chicago, IL</ion-select-option>
@@ -91,7 +91,7 @@
 
           <ion-item>
             <ion-label>Popover Interface</ion-label>
-            <ion-select placeholder="Styled Options" interface="popover" class="custom-options">
+            <ion-select legacy="true" placeholder="Styled Options" interface="popover" class="custom-options">
               <ion-select-option class="select-option-custom-red" value="madison">Madison, WI</ion-select-option>
               <ion-select-option class="select-option-custom-red" value="austin">Austin, TX</ion-select-option>
               <ion-select-option class="select-option-custom-purple" value="chicago">Chicago, IL</ion-select-option>
@@ -101,7 +101,7 @@
 
           <ion-item>
             <ion-label>Default Interface (Alert): Multiple</ion-label>
-            <ion-select multiple="true" placeholder="Styled Options" class="custom-options">
+            <ion-select legacy="true" multiple="true" placeholder="Styled Options" class="custom-options">
               <ion-select-option class="select-option-custom-red" value="madison">Madison, WI</ion-select-option>
               <ion-select-option class="select-option-custom-red" value="austin">Austin, TX</ion-select-option>
               <ion-select-option class="select-option-custom-purple" value="chicago">Chicago, IL</ion-select-option>
diff --git a/core/src/components/select/test/legacy/spec/index.html b/core/src/components/select/test/legacy/spec/index.html
index 66efa90e59..66c15e3182 100644
--- a/core/src/components/select/test/legacy/spec/index.html
+++ b/core/src/components/select/test/legacy/spec/index.html
@@ -30,7 +30,7 @@
 
             <ion-item>
               <ion-label position="floating">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -43,7 +43,7 @@
 
             <ion-item class="ion-focused">
               <ion-label position="floating">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -56,7 +56,7 @@
 
             <ion-item fill="solid">
               <ion-label position="floating">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -69,7 +69,7 @@
 
             <ion-item fill="solid" class="ion-focused">
               <ion-label position="floating">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -82,7 +82,7 @@
 
             <ion-item fill="outline">
               <ion-label position="floating">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -95,7 +95,7 @@
 
             <ion-item fill="outline" class="ion-focused">
               <ion-label position="floating">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -115,7 +115,7 @@
 
             <ion-item>
               <ion-label position="stacked">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -128,7 +128,7 @@
 
             <ion-item class="ion-focused">
               <ion-label position="stacked">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -141,7 +141,7 @@
 
             <ion-item fill="solid">
               <ion-label position="stacked">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -154,7 +154,7 @@
 
             <ion-item fill="solid" class="ion-focused">
               <ion-label position="stacked">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -167,7 +167,7 @@
 
             <ion-item fill="outline">
               <ion-label position="stacked">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -180,7 +180,7 @@
 
             <ion-item fill="outline" class="ion-focused">
               <ion-label position="stacked">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -200,7 +200,7 @@
 
             <ion-item>
               <ion-label>Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -213,7 +213,7 @@
 
             <ion-item class="ion-focused">
               <ion-label>Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -226,7 +226,7 @@
 
             <ion-item fill="solid">
               <ion-label>Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -239,7 +239,7 @@
 
             <ion-item fill="solid" class="ion-focused">
               <ion-label>Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -252,7 +252,7 @@
 
             <ion-item fill="outline">
               <ion-label>Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -265,7 +265,7 @@
 
             <ion-item fill="outline" class="ion-focused">
               <ion-label>Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -285,7 +285,7 @@
 
             <ion-item>
               <ion-label position="fixed">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -298,7 +298,7 @@
 
             <ion-item class="ion-focused">
               <ion-label position="fixed">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -311,7 +311,7 @@
 
             <ion-item fill="solid">
               <ion-label position="fixed">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -324,7 +324,7 @@
 
             <ion-item fill="solid" class="ion-focused">
               <ion-label position="fixed">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -337,7 +337,7 @@
 
             <ion-item fill="outline">
               <ion-label position="fixed">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -350,7 +350,7 @@
 
             <ion-item fill="outline" class="ion-focused">
               <ion-label position="fixed">Fruit</ion-label>
-              <ion-select interface="popover">
+              <ion-select legacy="true" interface="popover">
                 <ion-select-option></ion-select-option>
                 <ion-select-option value="apple">Apple</ion-select-option>
                 <ion-select-option value="orange">Orange</ion-select-option>
@@ -367,7 +367,7 @@
         <ion-list>
           <ion-item>
             <ion-label>Inline</ion-label>
-            <ion-select interface="popover">
+            <ion-select legacy="true" interface="popover">
               <ion-select-option></ion-select-option>
               <ion-select-option value="apple">Apple</ion-select-option>
               <ion-select-option value="orange">Orange</ion-select-option>
@@ -377,7 +377,7 @@
 
           <ion-item>
             <ion-label position="fixed">Fixed</ion-label>
-            <ion-select interface="popover">
+            <ion-select legacy="true" interface="popover">
               <ion-select-option></ion-select-option>
               <ion-select-option value="apple">Apple</ion-select-option>
               <ion-select-option value="orange">Orange</ion-select-option>
@@ -387,7 +387,7 @@
 
           <ion-item>
             <ion-label position="floating">Floating</ion-label>
-            <ion-select interface="popover">
+            <ion-select legacy="true" interface="popover">
               <ion-select-option></ion-select-option>
               <ion-select-option value="apple">Apple</ion-select-option>
               <ion-select-option value="orange">Orange</ion-select-option>
@@ -397,7 +397,7 @@
 
           <ion-item>
             <ion-label position="stacked">Stacked</ion-label>
-            <ion-select interface="popover">
+            <ion-select legacy="true" interface="popover">
               <ion-select-option></ion-select-option>
               <ion-select-option value="apple">Apple</ion-select-option>
               <ion-select-option value="orange">Orange</ion-select-option>
diff --git a/core/src/components/select/test/legacy/wrapping/select.e2e.ts b/core/src/components/select/test/legacy/wrapping/select.e2e.ts
index fcf3a75018..5e8daa7dd9 100644
--- a/core/src/components/select/test/legacy/wrapping/select.e2e.ts
+++ b/core/src/components/select/test/legacy/wrapping/select.e2e.ts
@@ -36,7 +36,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         `
         <ion-item>
           <ion-label>Really long label should not wrap</ion-label>
-          <ion-select value="wrap" class="ion-text-wrap">
+          <ion-select value="wrap" legacy="true" class="ion-text-wrap">
             <ion-select-option value="wrap">Should wrap value only when label exists and really long text exists to make it wrap the text</ion-select-option>
           </ion-select>
         </ion-item>
diff --git a/core/src/components/skeleton-text/skeleton-text.tsx b/core/src/components/skeleton-text/skeleton-text.tsx
index 4ca8718db8..12a82f9d24 100644
--- a/core/src/components/skeleton-text/skeleton-text.tsx
+++ b/core/src/components/skeleton-text/skeleton-text.tsx
@@ -1,9 +1,10 @@
-import type { ComponentInterface } from '@stencil/core';
-import { Component, Element, Host, Prop, h } from '@stencil/core';
+import type { ComponentInterface, EventEmitter } from '@stencil/core';
+import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
 import { hostContext } from '@utils/theme';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
+import type { StyleEventDetail } from '../../interface';
 
 @Component({
   tag: 'ion-skeleton-text',
@@ -18,6 +19,27 @@ export class SkeletonText implements ComponentInterface {
    */
   @Prop() animated = false;
 
+  /**
+   * Emitted when the styles change.
+   * @internal
+   */
+  @Event() ionStyle!: EventEmitter<StyleEventDetail>;
+
+  componentWillLoad() {
+    this.emitStyle();
+  }
+
+  private emitStyle() {
+    // The emitted property is used by item in order
+    // to add the item-skeleton-text class which applies
+    // overflow: hidden to its label
+    const style: StyleEventDetail = {
+      'skeleton-text': true,
+    };
+
+    this.ionStyle.emit(style);
+  }
+
   render() {
     const animated = this.animated && config.getBoolean('animated', true);
     const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
diff --git a/core/src/components/textarea/test/legacy/autogrow/index.html b/core/src/components/textarea/test/legacy/autogrow/index.html
index 24dbf7b30c..b7673c95c5 100644
--- a/core/src/components/textarea/test/legacy/autogrow/index.html
+++ b/core/src/components/textarea/test/legacy/autogrow/index.html
@@ -26,17 +26,17 @@
         <ion-list>
           <ion-item>
             <ion-label color="primary">Autogrow</ion-label>
-            <ion-textarea auto-grow="true"></ion-textarea>
+            <ion-textarea legacy="true" auto-grow="true"></ion-textarea>
           </ion-item>
 
           <ion-item fill="outline">
             <ion-label color="primary" position="stacked">Autogrow w/ stacked label</ion-label>
-            <ion-textarea auto-grow="true" value=""></ion-textarea>
+            <ion-textarea legacy="true" auto-grow="true" value=""></ion-textarea>
           </ion-item>
 
           <ion-item fill="outline">
             <ion-label color="primary" position="floating">Autogrow w/ floating label</ion-label>
-            <ion-textarea auto-grow="true" value=""></ion-textarea>
+            <ion-textarea legacy="true" auto-grow="true" value=""></ion-textarea>
           </ion-item>
         </ion-list>
       </ion-content>
diff --git a/core/src/components/textarea/test/legacy/basic/index.html b/core/src/components/textarea/test/legacy/basic/index.html
index b3dc366317..90e883551d 100644
--- a/core/src/components/textarea/test/legacy/basic/index.html
+++ b/core/src/components/textarea/test/legacy/basic/index.html
@@ -26,46 +26,46 @@
         <ion-list>
           <ion-item>
             <ion-label color="primary">Inline Label</ion-label>
-            <ion-textarea placeholder="Textarea"></ion-textarea>
+            <ion-textarea legacy="true" placeholder="Textarea"></ion-textarea>
           </ion-item>
 
           <ion-item>
             <ion-label color="primary" position="fixed">Fixed Label</ion-label>
-            <ion-textarea placeholder="Textarea"></ion-textarea>
+            <ion-textarea legacy="true" placeholder="Textarea"></ion-textarea>
           </ion-item>
 
           <ion-item>
-            <ion-textarea placeholder="Textarea with no label" legacy="true"></ion-textarea>
+            <ion-textarea legacy="true" placeholder="Textarea with no label" legacy="true"></ion-textarea>
           </ion-item>
 
           <ion-item>
             <ion-label color="primary" position="stacked">Stacked Label</ion-label>
-            <ion-textarea placeholder="Textarea"></ion-textarea>
+            <ion-textarea legacy="true" placeholder="Textarea"></ion-textarea>
           </ion-item>
 
           <ion-item>
             <ion-label color="primary" position="floating">Floating Label</ion-label>
-            <ion-textarea></ion-textarea>
+            <ion-textarea legacy="true"></ion-textarea>
           </ion-item>
 
           <ion-item>
             <ion-label>Disabled</ion-label>
-            <ion-textarea id="dynamicDisabled" value="Disabled" disabled></ion-textarea>
+            <ion-textarea legacy="true" id="dynamicDisabled" value="Disabled" disabled></ion-textarea>
           </ion-item>
 
           <ion-item>
             <ion-label>Readonly</ion-label>
-            <ion-textarea id="dynamicReadonly" value="Readonly" readonly></ion-textarea>
+            <ion-textarea legacy="true" id="dynamicReadonly" value="Readonly" readonly></ion-textarea>
           </ion-item>
 
           <ion-item>
             <ion-label position="floating">Dynamic Value</ion-label>
-            <ion-textarea id="dynamicValue" value="dynamic"></ion-textarea>
+            <ion-textarea legacy="true" id="dynamicValue" value="dynamic"></ion-textarea>
           </ion-item>
 
           <ion-item>
             <ion-label color="primary">Clear on Edit</ion-label>
-            <ion-textarea clear-on-edit="true"></ion-textarea>
+            <ion-textarea legacy="true" clear-on-edit="true"></ion-textarea>
           </ion-item>
         </ion-list>
 
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index b78121d97d..437e4ed60f 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -392,6 +392,8 @@ export class Textarea implements ComponentInterface {
         'has-placeholder': this.placeholder !== undefined,
         'has-value': this.hasValue(),
         'has-focus': this.hasFocus,
+        // TODO(FW-2876): remove this
+        legacy: !!this.legacy,
       });
     }
   }
diff --git a/core/src/components/toggle/test/legacy/basic/index.html b/core/src/components/toggle/test/legacy/basic/index.html
index d6013e3246..c9804b6163 100644
--- a/core/src/components/toggle/test/legacy/basic/index.html
+++ b/core/src/components/toggle/test/legacy/basic/index.html
@@ -29,47 +29,61 @@
         <ion-list>
           <ion-item>
             <ion-label>Orange</ion-label>
-            <ion-toggle id="orange" slot="start" name="orange"></ion-toggle>
+            <ion-toggle legacy="true" id="orange" slot="start" name="orange"></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Apple</ion-label>
-            <ion-toggle slot="start" name="apple" checked></ion-toggle>
+            <ion-toggle legacy="true" slot="start" name="apple" checked></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Banana</ion-label>
-            <ion-toggle slot="start" name="banana" checked class="toggle-part"></ion-toggle>
+            <ion-toggle legacy="true" slot="start" name="banana" checked class="toggle-part"></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Cherry, disabled</ion-label>
-            <ion-toggle slot="start" color="danger" name="cherry" disabled></ion-toggle>
+            <ion-toggle legacy="true" slot="start" color="danger" name="cherry" disabled></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Grape, checked, disabled</ion-label>
-            <ion-toggle slot="start" id="grapeChecked" value="grape" name="grape" checked disabled></ion-toggle>
+            <ion-toggle
+              legacy="true"
+              slot="start"
+              id="grapeChecked"
+              value="grape"
+              name="grape"
+              checked
+              disabled
+            ></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Kiwi, (ionChange) Secondary color</ion-label>
-            <ion-toggle slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-toggle>
+            <ion-toggle legacy="true" slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Strawberry, (ionChange) checked="true"</ion-label>
-            <ion-toggle slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
+            <ion-toggle
+              legacy="true"
+              slot="start"
+              color="light"
+              (ionChange)="strawberryChange($event)"
+              checked="true"
+            ></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
-            <ion-toggle slot="end" color="danger" checked></ion-toggle>
+            <ion-toggle legacy="true" slot="end" color="danger" checked></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Checkbox right side</ion-label>
-            <ion-toggle slot="end" checked></ion-toggle>
+            <ion-toggle legacy="true" slot="end" checked></ion-toggle>
           </ion-item>
 
           <ion-item>
@@ -79,12 +93,17 @@
 
           <ion-item>
             <ion-label>Custom</ion-label>
-            <ion-toggle slot="start" style="--border-radius: 0px; --handle-border-radius: 0px" checked></ion-toggle>
+            <ion-toggle
+              legacy="true"
+              slot="start"
+              style="--border-radius: 0px; --handle-border-radius: 0px"
+              checked
+            ></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Stop Immediate Event Propagation</ion-label>
-            <ion-toggle slot="start" checked id="eventPropagation"></ion-toggle>
+            <ion-toggle legacy="true" slot="start" checked id="eventPropagation"></ion-toggle>
           </ion-item>
         </ion-list>
 
diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png
index 02b0330088..6e24de81eb 100644
Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png
index cf4c57ea63..6f316ecce3 100644
Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png
index 31fe07ee2b..3bffc41177 100644
Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png
index 2a4000f3c8..33a45096f8 100644
Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png
index d830cfc07d..db410cab08 100644
Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png
index 069aec853d..ff762d734e 100644
Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png
index 293d33592f..5d85fd0943 100644
Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png
index 4f5ccb57b4..56758fab97 100644
Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png
index c395a28b52..b0eab80081 100644
Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png
index 61f4982fd5..1ae1df850f 100644
Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png
index 19fcc99f79..9b216c1d9b 100644
Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png
index a9908ac291..0a68180651 100644
Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index 62ba1ec618..6a8535202b 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -223,6 +223,8 @@ export class Toggle implements ComponentInterface {
     if (this.legacyFormController.hasLegacyControl()) {
       this.ionStyle.emit({
         'interactive-disabled': this.disabled,
+        // TODO(FW-2990): remove this
+        legacy: !!this.legacy,
       });
     }
   }