From 3acb074e848f575dae355d6b34aed90e9a79bfcd Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Tue, 5 May 2026 14:52:09 -0700
Subject: [PATCH] refactor(content, modal): update prefix for internal safe
 area variable

---
 core/src/components/content/content.scss              |  2 +-
 core/src/components/modal/modal.tsx                   | 10 +++++-----
 core/src/components/modal/test/safe-area/modal.e2e.ts |  4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss
index 89dae0aff94..640a9373010 100644
--- a/core/src/components/content/content.scss
+++ b/core/src/components/content/content.scss
@@ -64,7 +64,7 @@
 
 .inner-scroll {
   @include position(calc(var(--offset-top) * -1), 0px,calc(var(--offset-bottom) * -1), 0px);
-  @include padding(calc(var(--padding-top) + var(--offset-top)), var(--padding-end), calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom) + var(--ion-content-safe-area-padding-bottom, 0px)), var(--padding-start));
+  @include padding(calc(var(--padding-top) + var(--offset-top)), var(--padding-end), calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom) + var(--internal-content-safe-area-padding-bottom, 0px)), var(--padding-start));
 
   position: absolute;
 
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 5bbb67d3d61..2909945ad37 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -1517,12 +1517,12 @@ export class Modal implements ComponentInterface, OverlayInterface {
   }
 
   /**
-   * Sets --ion-content-safe-area-padding-bottom on the given ion-content
+   * Sets --internal-content-safe-area-padding-bottom on the given ion-content
    * when no footer is present, so ion-content's .inner-scroll includes
    * safe-area-bottom in its scroll padding. This keeps the modal background
    * edge-to-edge while ensuring content scrolls clear of the system nav bar.
    *
-   * --ion-content-safe-area-padding-bottom is an internal CSS property used
+   * --internal-content-safe-area-padding-bottom is an internal CSS property used
    * only by this code path. It is not part of ion-content's public API and
    * should not be set by consumers. The default of 0px makes it a no-op
    * when unset, which is the expected state for ion-content used outside of
@@ -1534,17 +1534,17 @@ export class Modal implements ComponentInterface, OverlayInterface {
     // padding. Custom modals with raw HTML are developer-controlled.
     if (!contentEl || hasFooter) return;
 
-    contentEl.style.setProperty('--ion-content-safe-area-padding-bottom', 'var(--ion-safe-area-bottom, 0px)');
+    contentEl.style.setProperty('--internal-content-safe-area-padding-bottom', 'var(--ion-safe-area-bottom, 0px)');
   }
 
   /**
-   * Removes the internal --ion-content-safe-area-padding-bottom property
+   * Removes the internal --internal-content-safe-area-padding-bottom property
    * from an already-located ion-content. Callers do their own
    * findContentAndFooter() so they can also read hasFooter if needed.
    */
   private clearContentSafeAreaPadding(contentEl: HTMLElement | null): void {
     if (!contentEl) return;
-    contentEl.style.removeProperty('--ion-content-safe-area-padding-bottom');
+    contentEl.style.removeProperty('--internal-content-safe-area-padding-bottom');
   }
 
   /**
diff --git a/core/src/components/modal/test/safe-area/modal.e2e.ts b/core/src/components/modal/test/safe-area/modal.e2e.ts
index a65b6f3fee8..8f13349fe95 100644
--- a/core/src/components/modal/test/safe-area/modal.e2e.ts
+++ b/core/src/components/modal/test/safe-area/modal.e2e.ts
@@ -132,11 +132,11 @@ configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, config
       expect(wrapperPaddingBottom).toBe('');
       expect(wrapperHeight).toBe('');
 
-      // ion-content should have --ion-content-safe-area-padding-bottom set so its
+      // ion-content should have --internal-content-safe-area-padding-bottom set so its
       // .inner-scroll element includes safe-area in its bottom padding.
       const content = modal.locator('ion-content');
       const safeAreaPadding = await content.evaluate((el: HTMLElement) => {
-        return el.style.getPropertyValue('--ion-content-safe-area-padding-bottom');
+        return el.style.getPropertyValue('--internal-content-safe-area-padding-bottom');
       });
       expect(safeAreaPadding).toBe('var(--ion-safe-area-bottom, 0px)');
     });