fix(list-header): apply safe area to proper side regardless of direction

core/src/components/list-header/list-header.ios.scss

@@ -9,7 +9,17 @@
   --color: #{$list-header-ios-color};
   --border-color: #{$item-ios-border-bottom-color};
 
-  @include padding-horizontal(calc(var(--ion-safe-area-left, 0px) + #{$list-header-ios-padding-start}), null);
+  /* stylelint-disable */
+  @include ltr() {
+    padding-right: var(--ion-safe-area-right);
+    padding-left: calc(var(--ion-safe-area-left, 0px) + #{$list-header-ios-padding-start});
+  }
+
+  @include rtl() {
+    padding-right: calc(var(--ion-safe-area-right, 0px) + #{$list-header-ios-padding-start});
+    padding-left: var(--ion-safe-area-left);
+  }
+  /* stylelint-enable */
 
   position: relative;
 

core/src/components/list-header/list-header.md.scss

@@ -9,7 +9,17 @@
   --color: #{$list-header-md-color};
   --border-color: #{$item-md-border-bottom-color};
 
-  @include padding-horizontal(calc(var(--ion-safe-area-left, 0) + #{$list-header-md-padding-start}), null);
+  /* stylelint-disable */
+  @include ltr() {
+    padding-right: var(--ion-safe-area-right);
+    padding-left: calc(var(--ion-safe-area-left, 0px) + #{$list-header-md-padding-start});
+  }
+
+  @include rtl() {
+    padding-right: calc(var(--ion-safe-area-right, 0px) + #{$list-header-md-padding-start});
+    padding-left: var(--ion-safe-area-left);
+  }
+  /* stylelint-enable */
 
   min-height: $list-header-md-min-height;
 

core/src/components/list-header/test/basic/list-header.e2e.ts

@@ -12,3 +12,37 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+/**
+ * This behavior needs to be tested in both modes and directions to
+ * make sure the safe area padding is applied only to that side
+ * regardless of direction
+ */
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('list-header: basic'), () => {
+    test.describe('safe area', () => {
+      test('should have padding added by the safe area', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            :root {
+              --ion-safe-area-left: 40px;
+              --ion-safe-area-right: 20px;
+            }
+          </style>
+
+          <ion-list-header>
+            <ion-label>List Header</ion-label>
+            <ion-button>Button</ion-button>
+          </ion-list-header>
+        `,
+          config
+        );
+
+        const listHeader = page.locator('ion-list-header');
+
+        await expect(listHeader).toHaveScreenshot(screenshot(`list-header-safe-area`));
+      });
+    });
+  });
+});