From 97d42cfb117857b9a7c6799c1a56bde75858a181 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Wed, 30 Aug 2023 11:40:25 -0700
Subject: [PATCH 1/9] docs(content): add playground for safe area usage

---
 docs/api/content.md                           | 23 ++++++++++++
 .../angular/example_component_css.md          |  8 +++++
 .../angular/example_component_html.md         |  5 +++
 .../v7/content/theming/safe-area/demo.html    | 36 +++++++++++++++++++
 .../v7/content/theming/safe-area/index.md     | 33 +++++++++++++++++
 .../content/theming/safe-area/javascript.md   | 14 ++++++++
 .../theming/safe-area/react/main_css.md       |  8 +++++
 .../theming/safe-area/react/main_tsx.md       | 15 ++++++++
 .../usage/v7/content/theming/safe-area/vue.md | 27 ++++++++++++++
 9 files changed, 169 insertions(+)
 create mode 100644 static/usage/v7/content/theming/safe-area/angular/example_component_css.md
 create mode 100644 static/usage/v7/content/theming/safe-area/angular/example_component_html.md
 create mode 100644 static/usage/v7/content/theming/safe-area/demo.html
 create mode 100644 static/usage/v7/content/theming/safe-area/index.md
 create mode 100644 static/usage/v7/content/theming/safe-area/javascript.md
 create mode 100644 static/usage/v7/content/theming/safe-area/react/main_css.md
 create mode 100644 static/usage/v7/content/theming/safe-area/react/main_tsx.md
 create mode 100644 static/usage/v7/content/theming/safe-area/vue.md

diff --git a/docs/api/content.md b/docs/api/content.md
index f4380b209bd..1a2db803e0a 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -95,6 +95,29 @@ import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index
 
 <CSSProps />
 
+### Safe Area Padding
+
+The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/layout/safe-area). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.md#application-variables).
+
+import SafeArea from '@site/static/usage/v7/content/theming/safe-area/index.md';
+
+<SafeArea />
+
+The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the `padding-top` property to the value of the `--ion-safe-area-top` variable.
+
+```css
+ion-content::part(scroll) {
+  padding-top: var(--ion-safe-area-top, 0);
+}
+```
+
+Another common use case is to apply padding to the left side of the content to account for the [notch](/docs/layout/notch) when the device is in landscape mode and the notch is on the left side. This can be done by setting the `padding-left` property to the value of the `--ion-safe-area-left` variable.
+
+```css
+ion-content::part(scroll) {
+  padding-left: var(--ion-safe-area-left, 0);
+}
+```
 
 ## Interfaces
 
diff --git a/static/usage/v7/content/theming/safe-area/angular/example_component_css.md b/static/usage/v7/content/theming/safe-area/angular/example_component_css.md
new file mode 100644
index 00000000000..17cf5c76c57
--- /dev/null
+++ b/static/usage/v7/content/theming/safe-area/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-content::part(scroll) {
+  padding-top: var(--ion-safe-area-top, 0);
+  padding-bottom: var(--ion-safe-area-bottom, 0);
+  padding-left: var(--ion-safe-area-left, 0);
+  padding-right: var(--ion-safe-area-right, 0);
+}
+```
diff --git a/static/usage/v7/content/theming/safe-area/angular/example_component_html.md b/static/usage/v7/content/theming/safe-area/angular/example_component_html.md
new file mode 100644
index 00000000000..d01b3935e35
--- /dev/null
+++ b/static/usage/v7/content/theming/safe-area/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+<ion-content>
+  <span>Here's a small text description for the content. Nothing more, nothing less.</span>
+</ion-content>
+```
diff --git a/static/usage/v7/content/theming/safe-area/demo.html b/static/usage/v7/content/theming/safe-area/demo.html
new file mode 100644
index 00000000000..81bca712c04
--- /dev/null
+++ b/static/usage/v7/content/theming/safe-area/demo.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Content</title>
+    <link rel="stylesheet" href="../../../../common.css" />
+    <script src="../../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-content {
+        --ion-safe-area-top: 40px;
+        --ion-safe-area-bottom: 40px;
+        --ion-safe-area-left: 20px;
+        --ion-safe-area-right: 20px;
+      }
+
+      ion-content::part(scroll) {
+        padding-top: var(--ion-safe-area-top, 0);
+        padding-bottom: var(--ion-safe-area-bottom, 0);
+        padding-left: var(--ion-safe-area-left, 0);
+        padding-right: var(--ion-safe-area-right, 0);
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <span>Here's a small text description for the content. Nothing more, nothing less.</span>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/content/theming/safe-area/index.md b/static/usage/v7/content/theming/safe-area/index.md
new file mode 100644
index 00000000000..465b257e298
--- /dev/null
+++ b/static/usage/v7/content/theming/safe-area/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/content/theming/safe-area/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/v7/content/theming/safe-area/javascript.md b/static/usage/v7/content/theming/safe-area/javascript.md
new file mode 100644
index 00000000000..4fa6c59b559
--- /dev/null
+++ b/static/usage/v7/content/theming/safe-area/javascript.md
@@ -0,0 +1,14 @@
+```html
+<ion-content>
+  <span>Here's a small text description for the content. Nothing more, nothing less.</span>
+</ion-content>
+
+<style>
+  ion-content::part(scroll) {
+    padding-top: var(--ion-safe-area-top, 0);
+    padding-bottom: var(--ion-safe-area-bottom, 0);
+    padding-left: var(--ion-safe-area-left, 0);
+    padding-right: var(--ion-safe-area-right, 0);
+  }
+</style>
+```
diff --git a/static/usage/v7/content/theming/safe-area/react/main_css.md b/static/usage/v7/content/theming/safe-area/react/main_css.md
new file mode 100644
index 00000000000..17cf5c76c57
--- /dev/null
+++ b/static/usage/v7/content/theming/safe-area/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-content::part(scroll) {
+  padding-top: var(--ion-safe-area-top, 0);
+  padding-bottom: var(--ion-safe-area-bottom, 0);
+  padding-left: var(--ion-safe-area-left, 0);
+  padding-right: var(--ion-safe-area-right, 0);
+}
+```
diff --git a/static/usage/v7/content/theming/safe-area/react/main_tsx.md b/static/usage/v7/content/theming/safe-area/react/main_tsx.md
new file mode 100644
index 00000000000..4f3ff8a34b4
--- /dev/null
+++ b/static/usage/v7/content/theming/safe-area/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonContent>
+      <span>Here's a small text description for the content. Nothing more, nothing less.</span>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/content/theming/safe-area/vue.md b/static/usage/v7/content/theming/safe-area/vue.md
new file mode 100644
index 00000000000..40d714bec2d
--- /dev/null
+++ b/static/usage/v7/content/theming/safe-area/vue.md
@@ -0,0 +1,27 @@
+```html
+<template>
+  <ion-content>
+    <span>Here's a small text description for the content. Nothing more, nothing less.</span>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonContent,
+    },
+  });
+</script>
+
+<style scoped>
+  ion-content::part(scroll) {
+    padding-top: var(--ion-safe-area-top, 0);
+    padding-bottom: var(--ion-safe-area-bottom, 0);
+    padding-left: var(--ion-safe-area-left, 0);
+    padding-right: var(--ion-safe-area-right, 0);
+  }
+</style>
+```

From 4a3f098f74be38accd0326d43654c46e35fb19d9 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Fri, 1 Sep 2023 09:52:24 -0700
Subject: [PATCH 2/9] docs(content): show safe area padding on StackBlitz

---
 .../safe-area/angular/example_component_css.md        | 11 +++++++++++
 .../usage/v7/content/theming/safe-area/javascript.md  | 11 +++++++++++
 .../v7/content/theming/safe-area/react/main_css.md    | 11 +++++++++++
 static/usage/v7/content/theming/safe-area/vue.md      | 11 +++++++++++
 4 files changed, 44 insertions(+)

diff --git a/static/usage/v7/content/theming/safe-area/angular/example_component_css.md b/static/usage/v7/content/theming/safe-area/angular/example_component_css.md
index 17cf5c76c57..3b8bcd76c96 100644
--- a/static/usage/v7/content/theming/safe-area/angular/example_component_css.md
+++ b/static/usage/v7/content/theming/safe-area/angular/example_component_css.md
@@ -1,4 +1,15 @@
 ```css
+ion-content {
+  /**
+   * Setting the variables for DEMO purposes only.
+   * Values will be set automatically when building an iOS or Android app.
+   */
+  --ion-safe-area-top: 20px;
+  --ion-safe-area-bottom: 20px;
+  --ion-safe-area-left: 20px;
+  --ion-safe-area-right: 20px;
+}
+
 ion-content::part(scroll) {
   padding-top: var(--ion-safe-area-top, 0);
   padding-bottom: var(--ion-safe-area-bottom, 0);
diff --git a/static/usage/v7/content/theming/safe-area/javascript.md b/static/usage/v7/content/theming/safe-area/javascript.md
index 4fa6c59b559..94b95d7325e 100644
--- a/static/usage/v7/content/theming/safe-area/javascript.md
+++ b/static/usage/v7/content/theming/safe-area/javascript.md
@@ -4,6 +4,17 @@
 </ion-content>
 
 <style>
+  ion-content {
+    /**
+     * Setting the variables for DEMO purposes only.
+     * Values will be set automatically when building an iOS or Android app.
+     */
+    --ion-safe-area-top: 20px;
+    --ion-safe-area-bottom: 20px;
+    --ion-safe-area-left: 20px;
+    --ion-safe-area-right: 20px;
+  }
+
   ion-content::part(scroll) {
     padding-top: var(--ion-safe-area-top, 0);
     padding-bottom: var(--ion-safe-area-bottom, 0);
diff --git a/static/usage/v7/content/theming/safe-area/react/main_css.md b/static/usage/v7/content/theming/safe-area/react/main_css.md
index 17cf5c76c57..3b8bcd76c96 100644
--- a/static/usage/v7/content/theming/safe-area/react/main_css.md
+++ b/static/usage/v7/content/theming/safe-area/react/main_css.md
@@ -1,4 +1,15 @@
 ```css
+ion-content {
+  /**
+   * Setting the variables for DEMO purposes only.
+   * Values will be set automatically when building an iOS or Android app.
+   */
+  --ion-safe-area-top: 20px;
+  --ion-safe-area-bottom: 20px;
+  --ion-safe-area-left: 20px;
+  --ion-safe-area-right: 20px;
+}
+
 ion-content::part(scroll) {
   padding-top: var(--ion-safe-area-top, 0);
   padding-bottom: var(--ion-safe-area-bottom, 0);
diff --git a/static/usage/v7/content/theming/safe-area/vue.md b/static/usage/v7/content/theming/safe-area/vue.md
index 40d714bec2d..e023a5a3053 100644
--- a/static/usage/v7/content/theming/safe-area/vue.md
+++ b/static/usage/v7/content/theming/safe-area/vue.md
@@ -17,6 +17,17 @@
 </script>
 
 <style scoped>
+  ion-content {
+    /**
+     * Setting the variables for DEMO purposes only.
+     * Values will be set automatically when building an iOS or Android app.
+     */
+    --ion-safe-area-top: 20px;
+    --ion-safe-area-bottom: 20px;
+    --ion-safe-area-left: 20px;
+    --ion-safe-area-right: 20px;
+  }
+
   ion-content::part(scroll) {
     padding-top: var(--ion-safe-area-top, 0);
     padding-bottom: var(--ion-safe-area-bottom, 0);

From dfeb5d1db8d996e2f320254781d2c43a42922ba5 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Fri, 1 Sep 2023 09:59:34 -0700
Subject: [PATCH 3/9] docs(content): switch to :root

---
 .../content/theming/safe-area/angular/example_component_css.md  | 2 +-
 static/usage/v7/content/theming/safe-area/javascript.md         | 2 +-
 static/usage/v7/content/theming/safe-area/react/main_css.md     | 2 +-
 static/usage/v7/content/theming/safe-area/vue.md                | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/static/usage/v7/content/theming/safe-area/angular/example_component_css.md b/static/usage/v7/content/theming/safe-area/angular/example_component_css.md
index 3b8bcd76c96..6466670f427 100644
--- a/static/usage/v7/content/theming/safe-area/angular/example_component_css.md
+++ b/static/usage/v7/content/theming/safe-area/angular/example_component_css.md
@@ -1,5 +1,5 @@
 ```css
-ion-content {
+:root {
   /**
    * Setting the variables for DEMO purposes only.
    * Values will be set automatically when building an iOS or Android app.
diff --git a/static/usage/v7/content/theming/safe-area/javascript.md b/static/usage/v7/content/theming/safe-area/javascript.md
index 94b95d7325e..2dc819d6a60 100644
--- a/static/usage/v7/content/theming/safe-area/javascript.md
+++ b/static/usage/v7/content/theming/safe-area/javascript.md
@@ -4,7 +4,7 @@
 </ion-content>
 
 <style>
-  ion-content {
+  :root {
     /**
      * Setting the variables for DEMO purposes only.
      * Values will be set automatically when building an iOS or Android app.
diff --git a/static/usage/v7/content/theming/safe-area/react/main_css.md b/static/usage/v7/content/theming/safe-area/react/main_css.md
index 3b8bcd76c96..6466670f427 100644
--- a/static/usage/v7/content/theming/safe-area/react/main_css.md
+++ b/static/usage/v7/content/theming/safe-area/react/main_css.md
@@ -1,5 +1,5 @@
 ```css
-ion-content {
+:root {
   /**
    * Setting the variables for DEMO purposes only.
    * Values will be set automatically when building an iOS or Android app.
diff --git a/static/usage/v7/content/theming/safe-area/vue.md b/static/usage/v7/content/theming/safe-area/vue.md
index e023a5a3053..f8d2cdd1ae0 100644
--- a/static/usage/v7/content/theming/safe-area/vue.md
+++ b/static/usage/v7/content/theming/safe-area/vue.md
@@ -17,7 +17,7 @@
 </script>
 
 <style scoped>
-  ion-content {
+  :root {
     /**
      * Setting the variables for DEMO purposes only.
      * Values will be set automatically when building an iOS or Android app.

From 7c6356af59d54fa02157af0999bdc31a1a75b1bc Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Fri, 1 Sep 2023 11:33:34 -0700
Subject: [PATCH 4/9] docs(content): requested changes

---
 docs/api/content.md                                           | 4 ++--
 .../angular/{example_component_css.md => global_css.md}       | 0
 static/usage/v7/content/theming/safe-area/index.md            | 4 ++--
 static/usage/v7/content/theming/safe-area/vue.md              | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)
 rename static/usage/v7/content/theming/safe-area/angular/{example_component_css.md => global_css.md} (100%)

diff --git a/docs/api/content.md b/docs/api/content.md
index 1a2db803e0a..c08be95577e 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -97,7 +97,7 @@ import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index
 
 ### Safe Area Padding
 
-The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/layout/safe-area). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.md#application-variables).
+The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.md#application-variables).
 
 import SafeArea from '@site/static/usage/v7/content/theming/safe-area/index.md';
 
@@ -111,7 +111,7 @@ ion-content::part(scroll) {
 }
 ```
 
-Another common use case is to apply padding to the left side of the content to account for the [notch](/docs/layout/notch) when the device is in landscape mode and the notch is on the left side. This can be done by setting the `padding-left` property to the value of the `--ion-safe-area-left` variable.
+Another common use case is to apply padding to the left side of the content to account for the notch when the device is in landscape mode and the notch is on the left side. This can be done by setting the `padding-left` property to the value of the `--ion-safe-area-left` variable.
 
 ```css
 ion-content::part(scroll) {
diff --git a/static/usage/v7/content/theming/safe-area/angular/example_component_css.md b/static/usage/v7/content/theming/safe-area/angular/global_css.md
similarity index 100%
rename from static/usage/v7/content/theming/safe-area/angular/example_component_css.md
rename to static/usage/v7/content/theming/safe-area/angular/global_css.md
diff --git a/static/usage/v7/content/theming/safe-area/index.md b/static/usage/v7/content/theming/safe-area/index.md
index 465b257e298..327cb1abcba 100644
--- a/static/usage/v7/content/theming/safe-area/index.md
+++ b/static/usage/v7/content/theming/safe-area/index.md
@@ -8,7 +8,7 @@ import react_main_css from './react/main_css.md';
 import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
+import angular_global_css from './angular/global_css.md';
 
 <Playground
   version="7"
@@ -24,7 +24,7 @@ import angular_example_component_css from './angular/example_component_css.md';
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
+        'src/global.css': angular_global_css,
       },
     },
   }}
diff --git a/static/usage/v7/content/theming/safe-area/vue.md b/static/usage/v7/content/theming/safe-area/vue.md
index f8d2cdd1ae0..090a43fe81c 100644
--- a/static/usage/v7/content/theming/safe-area/vue.md
+++ b/static/usage/v7/content/theming/safe-area/vue.md
@@ -16,7 +16,7 @@
   });
 </script>
 
-<style scoped>
+<style>
   :root {
     /**
      * Setting the variables for DEMO purposes only.

From 0d37140a73a8bbeb714951bd76e2ce600978b0db Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Fri, 1 Sep 2023 11:49:44 -0700
Subject: [PATCH 5/9] docs(content): remove extra ion-content

---
 static/usage/v7/content/theming/safe-area/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/usage/v7/content/theming/safe-area/index.md b/static/usage/v7/content/theming/safe-area/index.md
index 327cb1abcba..e6ee18def3c 100644
--- a/static/usage/v7/content/theming/safe-area/index.md
+++ b/static/usage/v7/content/theming/safe-area/index.md
@@ -30,4 +30,5 @@ import angular_global_css from './angular/global_css.md';
   }}
   src="usage/v7/content/theming/safe-area/demo.html"
   devicePreview
+  includeIonContent={false}
 />

From 9bdfc831cd912bf90df3734b66a0cf32b494bcaa Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Fri, 1 Sep 2023 11:56:58 -0700
Subject: [PATCH 6/9] docs(content): add angular example styles

---
 .../theming/safe-area/angular/example_component_css.md    | 8 ++++++++
 .../v7/content/theming/safe-area/angular/global_css.md    | 7 -------
 static/usage/v7/content/theming/safe-area/index.md        | 2 ++
 3 files changed, 10 insertions(+), 7 deletions(-)
 create mode 100644 static/usage/v7/content/theming/safe-area/angular/example_component_css.md

diff --git a/static/usage/v7/content/theming/safe-area/angular/example_component_css.md b/static/usage/v7/content/theming/safe-area/angular/example_component_css.md
new file mode 100644
index 00000000000..17cf5c76c57
--- /dev/null
+++ b/static/usage/v7/content/theming/safe-area/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-content::part(scroll) {
+  padding-top: var(--ion-safe-area-top, 0);
+  padding-bottom: var(--ion-safe-area-bottom, 0);
+  padding-left: var(--ion-safe-area-left, 0);
+  padding-right: var(--ion-safe-area-right, 0);
+}
+```
diff --git a/static/usage/v7/content/theming/safe-area/angular/global_css.md b/static/usage/v7/content/theming/safe-area/angular/global_css.md
index 6466670f427..bd18709f492 100644
--- a/static/usage/v7/content/theming/safe-area/angular/global_css.md
+++ b/static/usage/v7/content/theming/safe-area/angular/global_css.md
@@ -9,11 +9,4 @@
   --ion-safe-area-left: 20px;
   --ion-safe-area-right: 20px;
 }
-
-ion-content::part(scroll) {
-  padding-top: var(--ion-safe-area-top, 0);
-  padding-bottom: var(--ion-safe-area-bottom, 0);
-  padding-left: var(--ion-safe-area-left, 0);
-  padding-right: var(--ion-safe-area-right, 0);
-}
 ```
diff --git a/static/usage/v7/content/theming/safe-area/index.md b/static/usage/v7/content/theming/safe-area/index.md
index e6ee18def3c..6ab052ec2d9 100644
--- a/static/usage/v7/content/theming/safe-area/index.md
+++ b/static/usage/v7/content/theming/safe-area/index.md
@@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
 import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -24,6 +25,7 @@ import angular_global_css from './angular/global_css.md';
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
         'src/global.css': angular_global_css,
       },
     },

From 3e6030d7cc444b8fddfee8bce3159ad72a38e772 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Fri, 1 Sep 2023 12:14:20 -0700
Subject: [PATCH 7/9] docs(content): separate scoped styles for vue

---
 static/usage/v7/content/theming/safe-area/vue.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/static/usage/v7/content/theming/safe-area/vue.md b/static/usage/v7/content/theming/safe-area/vue.md
index 090a43fe81c..fa936f8b74b 100644
--- a/static/usage/v7/content/theming/safe-area/vue.md
+++ b/static/usage/v7/content/theming/safe-area/vue.md
@@ -35,4 +35,13 @@
     padding-right: var(--ion-safe-area-right, 0);
   }
 </style>
+
+<style scoped>
+  ion-content::part(scroll) {
+    padding-top: var(--ion-safe-area-top, 0);
+    padding-bottom: var(--ion-safe-area-bottom, 0);
+    padding-left: var(--ion-safe-area-left, 0);
+    padding-right: var(--ion-safe-area-right, 0);
+  }
+</style>
 ```

From 3bf41d22c5af8f2f348cadf2ed0aa257c451896f Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Fri, 1 Sep 2023 12:15:42 -0700
Subject: [PATCH 8/9] docs(select): move use cases

---
 docs/api/content.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/api/content.md b/docs/api/content.md
index c08be95577e..d974b05dd44 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -99,10 +99,6 @@ import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index
 
 The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.md#application-variables).
 
-import SafeArea from '@site/static/usage/v7/content/theming/safe-area/index.md';
-
-<SafeArea />
-
 The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the `padding-top` property to the value of the `--ion-safe-area-top` variable.
 
 ```css
@@ -119,6 +115,10 @@ ion-content::part(scroll) {
 }
 ```
 
+import SafeArea from '@site/static/usage/v7/content/theming/safe-area/index.md';
+
+<SafeArea />
+
 ## Interfaces
 
 ### ScrollBaseDetail

From 1efb16ce422cd5c5b2b53970e7975bbd5b6eab66 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Fri, 1 Sep 2023 12:21:11 -0700
Subject: [PATCH 9/9] docs(content): remove duplicate

---
 static/usage/v7/content/theming/safe-area/vue.md | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/static/usage/v7/content/theming/safe-area/vue.md b/static/usage/v7/content/theming/safe-area/vue.md
index fa936f8b74b..18c5e8c246e 100644
--- a/static/usage/v7/content/theming/safe-area/vue.md
+++ b/static/usage/v7/content/theming/safe-area/vue.md
@@ -27,13 +27,6 @@
     --ion-safe-area-left: 20px;
     --ion-safe-area-right: 20px;
   }
-
-  ion-content::part(scroll) {
-    padding-top: var(--ion-safe-area-top, 0);
-    padding-bottom: var(--ion-safe-area-bottom, 0);
-    padding-left: var(--ion-safe-area-left, 0);
-    padding-right: var(--ion-safe-area-right, 0);
-  }
 </style>
 
 <style scoped>