fix(item): apply safe area to proper side regardless of direction

core/src/components/item/item.scss

@@ -203,14 +203,21 @@
 .item-native {
   @include border-radius(var(--border-radius));
   @include margin(0);
-  @include padding(
-    var(--padding-top),
-    var(--padding-end),
-    var(--padding-bottom),
-    calc(var(--padding-start) + var(--ion-safe-area-left, 0px))
-  );
+  @include padding(var(--padding-top), null, var(--padding-bottom));
   @include text-inherit();
 
+  /* stylelint-disable */
+  @include ltr() {
+    padding-right: var(--padding-end);
+    padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  }
+
+  @include rtl() {
+    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
+    padding-left: var(--padding-end);
+  }
+  /* stylelint-enable */
+
   display: flex;
   position: relative;
 
@@ -261,12 +268,19 @@ button, a {
 
 .item-inner {
   @include margin(0);
-  @include padding(
-    var(--inner-padding-top),
-    calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)),
-    var(--inner-padding-bottom),
-    var(--inner-padding-start)
-  );
+  @include padding(var(--inner-padding-top), null, var(--inner-padding-bottom));
+
+  /* stylelint-disable */
+  @include ltr() {
+    padding-right: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
+    padding-left: var(--inner-padding-start);
+  }
+
+  @include rtl() {
+    padding-right: var(--inner-padding-start);
+    padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
+  }
+  /* stylelint-enable */
 
   display: flex;
 
@@ -295,12 +309,19 @@ button, a {
 
 .item-bottom {
   @include margin(0);
-  @include padding(
-    0,
-    var(--inner-padding-end),
-    0,
-    calc(var(--padding-start) + var(--ion-safe-area-left, 0px))
-  );
+  @include padding(0, null);
+
+  /* stylelint-disable */
+  @include ltr() {
+    padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+    padding-right: calc(var(--inner-padding-end) + var(--ion-safe-area-right, 0px));
+  }
+
+  @include rtl() {
+    padding-left: calc(var(--inner-padding-end) + var(--ion-safe-area-left, 0px));
+    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
+  }
+  /* stylelint-enable */
 
   display: flex;
 

core/src/components/item/test/basic/item.e2e.ts

@@ -10,5 +10,37 @@ configs().forEach(({ title, screenshot, config }) => {
 
       await expect(page).toHaveScreenshot(screenshot(`item-diff`));
     });
+
+    /**
+     * This behavior needs to be tested for all modes & directions
+     * Safe padding should stay on the same side when the direction changes
+     */
+    test('should have safe area padding', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          :root {
+            --ion-safe-area-left: 40px;
+            --ion-safe-area-right: 20px;
+          }
+        </style>
+        <ion-list>
+          <ion-item>
+            <ion-label>Item with helper</ion-label>
+            <div slot="helper">Helper</div>
+          </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-list>
+      `,
+        config
+      );
+
+      const list = page.locator('ion-list');
+
+      await expect(list).toHaveScreenshot(screenshot('item-safe-area'));
+    });
   });
 });