From 6e7737ef0bac129b5113f5d05d458972d8da04d7 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Wed, 23 Aug 2023 13:54:41 -0500
Subject: [PATCH 1/4] docs(datetime): add best practices for setting value
 async (#3053)

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

diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index c166841c37a..26368c8f2b6 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -98,6 +98,10 @@ While seconds, milliseconds, and time zone can be specified using the ISO 8601 d
 
 If you need to present a datetime in an overlay such as a modal or a popover, we recommend using [ion-datetime-button](./datetime-button). `ion-datetime-button` should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay.
 
+## Setting Values Asynchronously
+
+If its `value` is updated programmatically after a datetime has already been created, the datetime will automatically jump to the new date. However, it is recommended to avoid updating the `value` in this way when users are able to interact with the datetime, as this could be disorienting for those currently trying to select a date. For example, if a datetime's `value` is loaded by an asyncronous process, it is recommended to hide the datetime with CSS until the value has finished updating.
+
 ## Date Constraints
 
 ### Max and Min Dates

From 56a80608e9ba65296d32fe1b9f352f49c88077ea Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Tue, 5 Sep 2023 14:31:29 -0700
Subject: [PATCH 2/4] feat(checkbox, radio, toggle, range): stacked labels for
 form controls (#3097)

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
---
 docs/api/checkbox.md                          | 16 +++++++--
 docs/api/radio.md                             | 17 ++++++++--
 docs/api/toggle.md                            | 12 ++++++-
 .../code/stackblitz/v7/angular/package.json   |  4 +--
 static/code/stackblitz/v7/html/package.json   |  2 +-
 static/code/stackblitz/v7/react/package.json  |  4 +--
 static/code/stackblitz/v7/vue/package.json    |  4 +--
 static/usage/v7/checkbox/alignment/angular.md | 11 ++++++
 static/usage/v7/checkbox/alignment/demo.html  | 29 ++++++++++++++++
 static/usage/v7/checkbox/alignment/index.md   | 17 ++++++++++
 .../usage/v7/checkbox/alignment/javascript.md | 11 ++++++
 static/usage/v7/checkbox/alignment/react.md   | 25 ++++++++++++++
 static/usage/v7/checkbox/alignment/vue.md     | 24 +++++++++++++
 .../v7/checkbox/label-placement/angular.md    |  4 +++
 .../v7/checkbox/label-placement/demo.html     |  4 +++
 .../v7/checkbox/label-placement/javascript.md |  4 +++
 .../v7/checkbox/label-placement/react.md      |  4 +++
 .../usage/v7/checkbox/label-placement/vue.md  |  4 +++
 static/usage/v7/radio/alignment/angular.md    | 15 ++++++++
 static/usage/v7/radio/alignment/demo.html     | 34 +++++++++++++++++++
 static/usage/v7/radio/alignment/index.md      | 17 ++++++++++
 static/usage/v7/radio/alignment/javascript.md | 15 ++++++++
 static/usage/v7/radio/alignment/react.md      | 27 +++++++++++++++
 static/usage/v7/radio/alignment/vue.md        | 26 ++++++++++++++
 .../usage/v7/radio/label-placement/angular.md |  6 ++++
 .../usage/v7/radio/label-placement/demo.html  |  6 ++++
 .../v7/radio/label-placement/javascript.md    |  6 ++++
 .../usage/v7/radio/label-placement/react.md   |  8 +++++
 static/usage/v7/radio/label-placement/vue.md  |  6 ++++
 static/usage/v7/range/labels/angular.md       |  4 +++
 static/usage/v7/range/labels/demo.html        |  4 +++
 static/usage/v7/range/labels/javascript.md    |  4 +++
 static/usage/v7/range/labels/react.md         |  4 +++
 static/usage/v7/range/labels/vue.md           |  4 +++
 static/usage/v7/toggle/alignment/angular.md   |  4 +++
 static/usage/v7/toggle/alignment/demo.html    | 25 ++++++++++++++
 static/usage/v7/toggle/alignment/index.md     | 17 ++++++++++
 .../usage/v7/toggle/alignment/javascript.md   |  4 +++
 static/usage/v7/toggle/alignment/react.md     | 20 +++++++++++
 static/usage/v7/toggle/alignment/vue.md       | 17 ++++++++++
 .../v7/toggle/label-placement/angular.md      |  1 +
 .../usage/v7/toggle/label-placement/demo.html |  1 +
 .../v7/toggle/label-placement/javascript.md   |  1 +
 .../usage/v7/toggle/label-placement/react.md  |  1 +
 static/usage/v7/toggle/label-placement/vue.md |  1 +
 45 files changed, 461 insertions(+), 13 deletions(-)
 create mode 100644 static/usage/v7/checkbox/alignment/angular.md
 create mode 100644 static/usage/v7/checkbox/alignment/demo.html
 create mode 100644 static/usage/v7/checkbox/alignment/index.md
 create mode 100644 static/usage/v7/checkbox/alignment/javascript.md
 create mode 100644 static/usage/v7/checkbox/alignment/react.md
 create mode 100644 static/usage/v7/checkbox/alignment/vue.md
 create mode 100644 static/usage/v7/radio/alignment/angular.md
 create mode 100644 static/usage/v7/radio/alignment/demo.html
 create mode 100644 static/usage/v7/radio/alignment/index.md
 create mode 100644 static/usage/v7/radio/alignment/javascript.md
 create mode 100644 static/usage/v7/radio/alignment/react.md
 create mode 100644 static/usage/v7/radio/alignment/vue.md
 create mode 100644 static/usage/v7/toggle/alignment/angular.md
 create mode 100644 static/usage/v7/toggle/alignment/demo.html
 create mode 100644 static/usage/v7/toggle/alignment/index.md
 create mode 100644 static/usage/v7/toggle/alignment/javascript.md
 create mode 100644 static/usage/v7/toggle/alignment/react.md
 create mode 100644 static/usage/v7/toggle/alignment/vue.md

diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index fdfbe1c8a48..c43a878a0ce 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -29,15 +29,27 @@ import Basic from '@site/static/usage/v7/checkbox/basic/index.md';
 
 ## Label Placement
 
-Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
+Developers can use the `labelPlacement` property to control how the label is placed relative to the control. This property mirrors the flexbox `flex-direction` property.
 
 import LabelPlacement from '@site/static/usage/v7/checkbox/label-placement/index.md';
 
 <LabelPlacement />
 
+## Alignment
+
+Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
+
+:::note
+Stacked checkboxes can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
+:::
+
+import Alignment from '@site/static/usage/v7/checkbox/alignment/index.md';
+
+<Alignment />
+
 ## Justification
 
-Developers can use the `justify` property to control how the label and control are packed on a line.
+Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property.
 
 import Justify from '@site/static/usage/v7/checkbox/justify/index.md';
 
diff --git a/docs/api/radio.md b/docs/api/radio.md
index c9b659ed8aa..9473c5cc790 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -30,21 +30,32 @@ import Basic from '@site/static/usage/v7/radio/basic/index.md';
 
 ## Label Placement
 
-Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
+Developers can use the `labelPlacement` property to control how the label is placed relative to the control.  This property mirrors the flexbox `flex-direction` property.
 
 import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md';
 
 <LabelPlacement />
 
+## Alignment
+
+Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
+
+:::note
+Stacked radios can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
+:::
+
+import Alignment from '@site/static/usage/v7/radio/alignment/index.md';
+
+<Alignment />
+
 ## Justification
 
-Developers can use the `justify` property to control how the label and control are packed on a line.
+Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property.
 
 import Justify from '@site/static/usage/v7/radio/justify/index.md';
 
 <Justify />
 
-
 :::note
 `ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly.
 :::
diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index 336821e90be..0af93c616ea 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -53,6 +53,17 @@ import LabelPlacement from '@site/static/usage/v7/toggle/label-placement/index.m
 
 <LabelPlacement />
 
+## Alignment
+
+Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
+
+:::note
+Stacked toggles can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
+:::
+
+import Alignment from '@site/static/usage/v7/toggle/alignment/index.md';
+
+<Alignment />
 
 ## Justification
 
@@ -62,7 +73,6 @@ import Justify from '@site/static/usage/v7/toggle/justify/index.md';
 
 <Justify />
 
-
 ## Theming
 
 ### Colors
diff --git a/static/code/stackblitz/v7/angular/package.json b/static/code/stackblitz/v7/angular/package.json
index 66f368834db..cefb6716d28 100644
--- a/static/code/stackblitz/v7/angular/package.json
+++ b/static/code/stackblitz/v7/angular/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@ionic/angular": "^7.0.0",
-    "@ionic/core": "^7.0.0"
+    "@ionic/angular": "7.3.2-dev.11693507138.1f9ed625",
+    "@ionic/core": "7.3.2-dev.11693507138.1f9ed625"
   }
 }
diff --git a/static/code/stackblitz/v7/html/package.json b/static/code/stackblitz/v7/html/package.json
index 7583138334d..197e88283c5 100644
--- a/static/code/stackblitz/v7/html/package.json
+++ b/static/code/stackblitz/v7/html/package.json
@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@ionic/core": "^7.0.0"
+    "@ionic/core": "7.3.2-dev.11693507138.1f9ed625"
   }
 }
diff --git a/static/code/stackblitz/v7/react/package.json b/static/code/stackblitz/v7/react/package.json
index 9e3c1a361ff..c81f0d18330 100644
--- a/static/code/stackblitz/v7/react/package.json
+++ b/static/code/stackblitz/v7/react/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "^7.0.10",
-    "@ionic/react-router": "^7.0.10",
+    "@ionic/react": "7.3.2-dev.11693507138.1f9ed625",
+    "@ionic/react-router": "7.3.2-dev.11693507138.1f9ed625",
     "@types/node": "^16.11.35",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
diff --git a/static/code/stackblitz/v7/vue/package.json b/static/code/stackblitz/v7/vue/package.json
index 5d661e04f57..a953097ada0 100644
--- a/static/code/stackblitz/v7/vue/package.json
+++ b/static/code/stackblitz/v7/vue/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "^7.0.10",
-    "@ionic/vue-router": "^7.0.10",
+    "@ionic/vue": "7.3.2-dev.11693507138.1f9ed625",
+    "@ionic/vue-router": "7.3.2-dev.11693507138.1f9ed625",
     "vue": "^3.2.25",
     "vue-router": "4.0.13"
   },
diff --git a/static/usage/v7/checkbox/alignment/angular.md b/static/usage/v7/checkbox/alignment/angular.md
new file mode 100644
index 00000000000..4cb28d1b19b
--- /dev/null
+++ b/static/usage/v7/checkbox/alignment/angular.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-checkbox label-placement="stacked" alignment="start">Aligned to the Start</ion-checkbox>
+  </ion-item>
+
+  <ion-item>
+    <ion-checkbox label-placement="stacked" alignment="center">Aligned to the Center</ion-checkbox>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/checkbox/alignment/demo.html b/static/usage/v7/checkbox/alignment/demo.html
new file mode 100644
index 00000000000..8cd4888c61b
--- /dev/null
+++ b/static/usage/v7/checkbox/alignment/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Checkbox</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" />
+  </head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-checkbox label-placement="stacked" alignment="start">Aligned to the Start</ion-checkbox>
+            </ion-item>
+
+            <ion-item>
+              <ion-checkbox label-placement="stacked" alignment="center">Aligned to the Center</ion-checkbox>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/checkbox/alignment/index.md b/static/usage/v7/checkbox/alignment/index.md
new file mode 100644
index 00000000000..80aa3a8c538
--- /dev/null
+++ b/static/usage/v7/checkbox/alignment/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/checkbox/alignment/demo.html"
+/>
diff --git a/static/usage/v7/checkbox/alignment/javascript.md b/static/usage/v7/checkbox/alignment/javascript.md
new file mode 100644
index 00000000000..4cb28d1b19b
--- /dev/null
+++ b/static/usage/v7/checkbox/alignment/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-checkbox label-placement="stacked" alignment="start">Aligned to the Start</ion-checkbox>
+  </ion-item>
+
+  <ion-item>
+    <ion-checkbox label-placement="stacked" alignment="center">Aligned to the Center</ion-checkbox>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/checkbox/alignment/react.md b/static/usage/v7/checkbox/alignment/react.md
new file mode 100644
index 00000000000..16b9d9b18e2
--- /dev/null
+++ b/static/usage/v7/checkbox/alignment/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonCheckbox, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonList>
+        <IonItem>
+          <IonCheckbox labelPlacement="stacked" alignment="start">
+            Aligned to the Start
+          </IonCheckbox>
+        </IonItem>
+
+        <IonItem>
+          <IonCheckbox labelPlacement="stacked" alignment="center">
+            Aligned to the Center
+          </IonCheckbox>
+        </IonItem>
+      </IonList>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/checkbox/alignment/vue.md b/static/usage/v7/checkbox/alignment/vue.md
new file mode 100644
index 00000000000..4dffcd383aa
--- /dev/null
+++ b/static/usage/v7/checkbox/alignment/vue.md
@@ -0,0 +1,24 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-checkbox label-placement="stacked" alignment="start">Aligned to the Start</ion-checkbox>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox label-placement="stacked" alignment="center">Aligned to the Center</ion-checkbox>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonCheckbox } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonCheckbox,
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/checkbox/label-placement/angular.md b/static/usage/v7/checkbox/label-placement/angular.md
index f2cb87d8171..154f82929d8 100644
--- a/static/usage/v7/checkbox/label-placement/angular.md
+++ b/static/usage/v7/checkbox/label-placement/angular.md
@@ -8,4 +8,8 @@
 <br />
 
 <ion-checkbox labelPlacement="fixed">Fixed Width Label</ion-checkbox>
+
+<br />
+
+<ion-checkbox labelPlacement="stacked">Stacked Label</ion-checkbox>
 ```
diff --git a/static/usage/v7/checkbox/label-placement/demo.html b/static/usage/v7/checkbox/label-placement/demo.html
index 68f4256f4c1..b010f8e8a3e 100644
--- a/static/usage/v7/checkbox/label-placement/demo.html
+++ b/static/usage/v7/checkbox/label-placement/demo.html
@@ -24,6 +24,10 @@
             <br />
 
             <ion-checkbox label-placement="fixed">Fixed Width Label</ion-checkbox>
+
+            <br />
+
+            <ion-checkbox label-placement="stacked">Stacked Label</ion-checkbox>
           </div>
         </div>
       </ion-content>
diff --git a/static/usage/v7/checkbox/label-placement/javascript.md b/static/usage/v7/checkbox/label-placement/javascript.md
index e3321ed4f9b..be18191d9a0 100644
--- a/static/usage/v7/checkbox/label-placement/javascript.md
+++ b/static/usage/v7/checkbox/label-placement/javascript.md
@@ -8,4 +8,8 @@
 <br />
 
 <ion-checkbox label-placement="fixed">Fixed Width Label</ion-checkbox>
+
+<br />
+
+<ion-checkbox label-placement="stacked">Stacked Label</ion-checkbox>
 ```
diff --git a/static/usage/v7/checkbox/label-placement/react.md b/static/usage/v7/checkbox/label-placement/react.md
index 7c9bf728131..6fc222b9035 100644
--- a/static/usage/v7/checkbox/label-placement/react.md
+++ b/static/usage/v7/checkbox/label-placement/react.md
@@ -14,6 +14,10 @@ function Example() {
       <br />
 
       <IonCheckbox labelPlacement="fixed">Fixed Width Label</IonCheckbox>
+
+      <br />
+
+      <IonCheckbox labelPlacement="stacked">Stacked Label</IonCheckbox>
     </>
   );
 }
diff --git a/static/usage/v7/checkbox/label-placement/vue.md b/static/usage/v7/checkbox/label-placement/vue.md
index 942149628cd..3530731da53 100644
--- a/static/usage/v7/checkbox/label-placement/vue.md
+++ b/static/usage/v7/checkbox/label-placement/vue.md
@@ -9,6 +9,10 @@
   <br />
 
   <ion-checkbox label-placement="fixed">Fixed Width Label</ion-checkbox>
+
+  <br />
+
+  <ion-checkbox label-placement="stacked">Stacked Label</ion-checkbox>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/radio/alignment/angular.md b/static/usage/v7/radio/alignment/angular.md
new file mode 100644
index 00000000000..51ebedc3c4c
--- /dev/null
+++ b/static/usage/v7/radio/alignment/angular.md
@@ -0,0 +1,15 @@
+```html
+<ion-list>
+  <ion-radio-group value="start">
+    <ion-item>
+      <ion-radio value="start" labelPlacement="stacked" alignment="start">Aligned to the Start</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+
+  <ion-radio-group value="center">
+    <ion-item>
+      <ion-radio value="center" labelPlacement="stacked" alignment="center">Aligned to the Center</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-list>
+```
diff --git a/static/usage/v7/radio/alignment/demo.html b/static/usage/v7/radio/alignment/demo.html
new file mode 100644
index 00000000000..ca2b0fc943e
--- /dev/null
+++ b/static/usage/v7/radio/alignment/demo.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Radio</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" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-radio-group value="start">
+              <ion-item>
+                <ion-radio value="start" label-placement="stacked" alignment="start">Aligned to the Start</ion-radio>
+              </ion-item>
+            </ion-radio-group>
+
+            <ion-radio-group value="center">
+              <ion-item>
+                <ion-radio value="center" label-placement="stacked" alignment="center">Aligned to the Center</ion-radio>
+              </ion-item>
+            </ion-radio-group>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/radio/alignment/index.md b/static/usage/v7/radio/alignment/index.md
new file mode 100644
index 00000000000..eb491f6f693
--- /dev/null
+++ b/static/usage/v7/radio/alignment/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/radio/alignment/demo.html"
+/>
diff --git a/static/usage/v7/radio/alignment/javascript.md b/static/usage/v7/radio/alignment/javascript.md
new file mode 100644
index 00000000000..37f54368452
--- /dev/null
+++ b/static/usage/v7/radio/alignment/javascript.md
@@ -0,0 +1,15 @@
+```html
+<ion-list>
+  <ion-radio-group value="start">
+    <ion-item>
+      <ion-radio value="start" label-placement="stacked" alignment="start">Aligned to the Start</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+
+  <ion-radio-group value="center">
+    <ion-item>
+      <ion-radio value="center" label-placement="stacked" alignment="center">Aligned to the Center</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-list>
+```
diff --git a/static/usage/v7/radio/alignment/react.md b/static/usage/v7/radio/alignment/react.md
new file mode 100644
index 00000000000..f7fcb232aea
--- /dev/null
+++ b/static/usage/v7/radio/alignment/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonRadioGroup value="start">
+        <IonItem>
+          <IonRadio value="start" labelPlacement="stacked" alignment="start">
+            Aligned to the Start
+          </IonRadio>
+        </IonItem>
+      </IonRadioGroup>
+
+      <IonRadioGroup value="center">
+        <IonItem>
+          <IonRadio value="center" labelPlacement="stacked" alignment="center">
+            Aligned to the Center
+          </IonRadio>
+        </IonItem>
+      </IonRadioGroup>
+    </IonList>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/radio/alignment/vue.md b/static/usage/v7/radio/alignment/vue.md
new file mode 100644
index 00000000000..0f208b37a2a
--- /dev/null
+++ b/static/usage/v7/radio/alignment/vue.md
@@ -0,0 +1,26 @@
+```html
+<template>
+  <ion-list>
+    <ion-radio-group value="start">
+      <ion-item>
+        <ion-radio value="start" label-placement="stacked" alignment="start">Aligned to the Start</ion-radio>
+      </ion-item>
+    </ion-radio-group>
+
+    <ion-radio-group value="center">
+      <ion-item>
+        <ion-radio value="center" label-placement="stacked" alignment="center">Aligned to the Center</ion-radio>
+      </ion-item>
+    </ion-radio-group>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonList, IonRadio, IonRadioGroup },
+  });
+</script>
+```
diff --git a/static/usage/v7/radio/label-placement/angular.md b/static/usage/v7/radio/label-placement/angular.md
index 9caedfee363..c62acb2938a 100644
--- a/static/usage/v7/radio/label-placement/angular.md
+++ b/static/usage/v7/radio/label-placement/angular.md
@@ -14,4 +14,10 @@
 <ion-radio-group value="fixed">
   <ion-radio value="fixed" labelPlacement="fixed">Fixed Width Label</ion-radio>
 </ion-radio-group>
+
+<br />
+
+<ion-radio-group value="stacked">
+  <ion-radio value="stacked" labelPlacement="stacked">Stacked Label</ion-radio>
+</ion-radio-group>
 ```
diff --git a/static/usage/v7/radio/label-placement/demo.html b/static/usage/v7/radio/label-placement/demo.html
index b038df4eb0e..8140ef0ed29 100644
--- a/static/usage/v7/radio/label-placement/demo.html
+++ b/static/usage/v7/radio/label-placement/demo.html
@@ -30,6 +30,12 @@
             <ion-radio-group value="fixed">
               <ion-radio value="fixed" label-placement="fixed">Fixed Width Label</ion-radio>
             </ion-radio-group>
+
+            <br />
+
+            <ion-radio-group value="stacked">
+              <ion-radio value="stacked" label-placement="stacked">Stacked Label</ion-radio>
+            </ion-radio-group>
           </div>
         </div>
       </ion-content>
diff --git a/static/usage/v7/radio/label-placement/javascript.md b/static/usage/v7/radio/label-placement/javascript.md
index f19fa4b10ac..44a731a1fae 100644
--- a/static/usage/v7/radio/label-placement/javascript.md
+++ b/static/usage/v7/radio/label-placement/javascript.md
@@ -14,4 +14,10 @@
 <ion-radio-group value="fixed">
   <ion-radio value="fixed" label-placement="fixed">Fixed Width Label</ion-radio>
 </ion-radio-group>
+
+<br />
+
+<ion-radio-group value="stacked">
+  <ion-radio value="stacked" label-placement="stacked">Stacked Label</ion-radio>
+</ion-radio-group>
 ```
diff --git a/static/usage/v7/radio/label-placement/react.md b/static/usage/v7/radio/label-placement/react.md
index 8827af5225f..42eb433075d 100644
--- a/static/usage/v7/radio/label-placement/react.md
+++ b/static/usage/v7/radio/label-placement/react.md
@@ -26,6 +26,14 @@ function Example() {
           Fixed Width Label
         </IonRadio>
       </IonRadioGroup>
+
+      <br />
+
+      <IonRadioGroup value="stacked">
+        <IonRadio value="stacked" labelPlacement="stacked">
+          Stacked Label
+        </IonRadio>
+      </IonRadioGroup>
     </>
   );
 }
diff --git a/static/usage/v7/radio/label-placement/vue.md b/static/usage/v7/radio/label-placement/vue.md
index 3562db1c507..d397b8ce31b 100644
--- a/static/usage/v7/radio/label-placement/vue.md
+++ b/static/usage/v7/radio/label-placement/vue.md
@@ -15,6 +15,12 @@
   <ion-radio-group value="fixed">
     <ion-radio value="fixed" label-placement="fixed">Fixed Width Label</ion-radio>
   </ion-radio-group>
+
+  <br />
+
+  <ion-radio-group value="stacked">
+    <ion-radio value="stacked" label-placement="stacked">Stacked Label</ion-radio>
+  </ion-radio-group>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/range/labels/angular.md b/static/usage/v7/range/labels/angular.md
index 45532c5f917..24c92babb74 100644
--- a/static/usage/v7/range/labels/angular.md
+++ b/static/usage/v7/range/labels/angular.md
@@ -8,4 +8,8 @@
 <br />
 
 <ion-range labelPlacement="fixed" label="Fixed Width Label"></ion-range>
+
+<br />
+
+<ion-range labelPlacement="stacked" label="Stacked Label"></ion-range>
 ```
diff --git a/static/usage/v7/range/labels/demo.html b/static/usage/v7/range/labels/demo.html
index 7357f88d861..1d37d7b1976 100644
--- a/static/usage/v7/range/labels/demo.html
+++ b/static/usage/v7/range/labels/demo.html
@@ -29,6 +29,10 @@
             <br />
 
             <ion-range label-placement="fixed" label="Fixed Width Label"></ion-range>
+
+            <br />
+
+            <ion-range label-placement="stacked" label="Stacked Label"></ion-range>
           </div>
         </div>
       </ion-content>
diff --git a/static/usage/v7/range/labels/javascript.md b/static/usage/v7/range/labels/javascript.md
index 9ee164f7d4d..88bf7ff3464 100644
--- a/static/usage/v7/range/labels/javascript.md
+++ b/static/usage/v7/range/labels/javascript.md
@@ -8,4 +8,8 @@
 <br />
 
 <ion-range label-placement="fixed" label="Fixed Width Label"></ion-range>
+
+<br />
+
+<ion-range label-placement="stacked" label="Stacked Label"></ion-range>
 ```
diff --git a/static/usage/v7/range/labels/react.md b/static/usage/v7/range/labels/react.md
index ef5563f178e..50799aa3d3b 100644
--- a/static/usage/v7/range/labels/react.md
+++ b/static/usage/v7/range/labels/react.md
@@ -13,6 +13,10 @@ function Example() {
       <br />
 
       <IonRange labelPlacement="fixed" label="Fixed Width Label"></IonRange>
+
+      <br />
+
+      <IonRange labelPlacement="stacked" label="Stacked Label"></IonRange>
     </>
   );
 }
diff --git a/static/usage/v7/range/labels/vue.md b/static/usage/v7/range/labels/vue.md
index 53b7932edb8..1d80cceb292 100644
--- a/static/usage/v7/range/labels/vue.md
+++ b/static/usage/v7/range/labels/vue.md
@@ -9,6 +9,10 @@
   <br />
 
   <ion-range label-placement="fixed" label="Fixed Width Label"></ion-range>
+
+  <br />
+
+  <ion-range label-placement="stacked" label="Stacked Label"></ion-range>
 </template>
 
 <script lang="ts">
diff --git a/static/usage/v7/toggle/alignment/angular.md b/static/usage/v7/toggle/alignment/angular.md
new file mode 100644
index 00000000000..2395fa81f6a
--- /dev/null
+++ b/static/usage/v7/toggle/alignment/angular.md
@@ -0,0 +1,4 @@
+```html
+<ion-toggle labelPlacement="stacked" alignment="start">Aligned to the Start</ion-toggle><br /><br />
+<ion-toggle labelPlacement="stacked" alignment="center">Aligned to the Center</ion-toggle>
+```
diff --git a/static/usage/v7/toggle/alignment/demo.html b/static/usage/v7/toggle/alignment/demo.html
new file mode 100644
index 00000000000..c8a899ee6fb
--- /dev/null
+++ b/static/usage/v7/toggle/alignment/demo.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Toggle</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" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <div>
+            <ion-toggle label-placement="stacked" alignment="start">Aligned to the Start</ion-toggle><br /><br />
+            <ion-toggle label-placement="stacked" alignment="center">Aligned to the Center</ion-toggle><br /><br />
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/toggle/alignment/index.md b/static/usage/v7/toggle/alignment/index.md
new file mode 100644
index 00000000000..0d94dbd5e1e
--- /dev/null
+++ b/static/usage/v7/toggle/alignment/index.md
@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/toggle/alignment/demo.html"
+/>
diff --git a/static/usage/v7/toggle/alignment/javascript.md b/static/usage/v7/toggle/alignment/javascript.md
new file mode 100644
index 00000000000..b40b7ba1014
--- /dev/null
+++ b/static/usage/v7/toggle/alignment/javascript.md
@@ -0,0 +1,4 @@
+```html
+<ion-toggle label-placement="stacked" alignment="start">Aligned to the Start</ion-toggle><br /><br />
+<ion-toggle label-placement="stacked" alignment="center">Aligned to the Center</ion-toggle>
+```
diff --git a/static/usage/v7/toggle/alignment/react.md b/static/usage/v7/toggle/alignment/react.md
new file mode 100644
index 00000000000..6af4a181100
--- /dev/null
+++ b/static/usage/v7/toggle/alignment/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonToggle } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonToggle labelPlacement="stacked" alignment="start">
+        Aligned to the Start
+      </IonToggle>
+      <br />
+      <br />
+      <IonToggle labelPlacement="stacked" alignment="center">
+        Aligned to the Center
+      </IonToggle>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toggle/alignment/vue.md b/static/usage/v7/toggle/alignment/vue.md
new file mode 100644
index 00000000000..b3bce543aa6
--- /dev/null
+++ b/static/usage/v7/toggle/alignment/vue.md
@@ -0,0 +1,17 @@
+```html
+<template>
+  <ion-toggle label-placement="stacked" alignment="start">Aligned to the Start</ion-toggle><br /><br />
+  <ion-toggle label-placement="stacked" alignment="center">Aligned to the Center</ion-toggle>
+</template>
+
+<script lang="ts">
+  import { IonToggle } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonToggle,
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/toggle/label-placement/angular.md b/static/usage/v7/toggle/label-placement/angular.md
index cc9ad6fcafc..390ea7bda37 100644
--- a/static/usage/v7/toggle/label-placement/angular.md
+++ b/static/usage/v7/toggle/label-placement/angular.md
@@ -2,4 +2,5 @@
 <ion-toggle labelPlacement="start">Label at the Start</ion-toggle><br /><br />
 <ion-toggle labelPlacement="end">Label at the End</ion-toggle><br /><br />
 <ion-toggle labelPlacement="fixed">Fixed Width Label</ion-toggle><br /><br />
+<ion-toggle labelPlacement="stacked">Stacked Label</ion-toggle>
 ```
diff --git a/static/usage/v7/toggle/label-placement/demo.html b/static/usage/v7/toggle/label-placement/demo.html
index 915b4677bc9..9f2d4d1d1cf 100644
--- a/static/usage/v7/toggle/label-placement/demo.html
+++ b/static/usage/v7/toggle/label-placement/demo.html
@@ -18,6 +18,7 @@
             <ion-toggle label-placement="start">Label at the Start</ion-toggle><br /><br />
             <ion-toggle label-placement="end">Label at the End</ion-toggle><br /><br />
             <ion-toggle label-placement="fixed">Fixed Width Label</ion-toggle><br /><br />
+            <ion-toggle label-placement="stacked">Stacked Label</ion-toggle><br /><br />
           </div>
         </div>
       </ion-content>
diff --git a/static/usage/v7/toggle/label-placement/javascript.md b/static/usage/v7/toggle/label-placement/javascript.md
index 86a03cc0971..ab259436848 100644
--- a/static/usage/v7/toggle/label-placement/javascript.md
+++ b/static/usage/v7/toggle/label-placement/javascript.md
@@ -2,4 +2,5 @@
 <ion-toggle label-placement="start">Label at the Start</ion-toggle><br /><br />
 <ion-toggle label-placement="end">Label at the End</ion-toggle><br /><br />
 <ion-toggle label-placement="fixed">Fixed Width Label</ion-toggle><br /><br />
+<ion-toggle label-placement="stacked">Stacked Label</ion-toggle>
 ```
diff --git a/static/usage/v7/toggle/label-placement/react.md b/static/usage/v7/toggle/label-placement/react.md
index 57940403843..a6fe77d7a02 100644
--- a/static/usage/v7/toggle/label-placement/react.md
+++ b/static/usage/v7/toggle/label-placement/react.md
@@ -14,6 +14,7 @@ function Example() {
       <IonToggle labelPlacement="fixed">Fixed Width Label</IonToggle>
       <br />
       <br />
+      <IonToggle labelPlacement="stacked">Stacked Label</IonToggle>
     </>
   );
 }
diff --git a/static/usage/v7/toggle/label-placement/vue.md b/static/usage/v7/toggle/label-placement/vue.md
index 682472e8d05..c9cfea701e1 100644
--- a/static/usage/v7/toggle/label-placement/vue.md
+++ b/static/usage/v7/toggle/label-placement/vue.md
@@ -3,6 +3,7 @@
   <ion-toggle label-placement="start">Label at the Start</ion-toggle><br /><br />
   <ion-toggle label-placement="end">Label at the End</ion-toggle><br /><br />
   <ion-toggle label-placement="fixed">Fixed Width Label</ion-toggle><br /><br />
+  <ion-toggle label-placement="stacked">Stacked Label</ion-toggle>
 </template>
 
 <script lang="ts">

From ddb9aa923602da96ae4edbb811c96958b7843c54 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Wed, 6 Sep 2023 12:00:11 -0400
Subject: [PATCH 3/4] docs(datetime): adds playground for styling calendar days
 using shadow parts (#3101)

---
 docs/api/datetime.md                          | 21 ++++-
 .../angular/example_component_css.md          | 46 ++++++++++
 .../angular/example_component_html.md         |  3 +
 .../angular/example_component_ts.md           | 36 ++++++++
 .../datetime/styling/calendar-days/demo.html  | 91 +++++++++++++++++++
 .../datetime/styling/calendar-days/index.md   | 35 +++++++
 .../styling/calendar-days/javascript.md       | 72 +++++++++++++++
 .../styling/calendar-days/react/main_css.md   | 46 ++++++++++
 .../styling/calendar-days/react/main_tsx.md   | 33 +++++++
 .../v7/datetime/styling/calendar-days/vue.md  | 88 ++++++++++++++++++
 .../angular/example_component_ts.md           | 14 +++
 .../datetime/styling/wheel-styling/index.md   |  2 +
 12 files changed, 482 insertions(+), 5 deletions(-)
 create mode 100644 static/usage/v7/datetime/styling/calendar-days/angular/example_component_css.md
 create mode 100644 static/usage/v7/datetime/styling/calendar-days/angular/example_component_html.md
 create mode 100644 static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md
 create mode 100644 static/usage/v7/datetime/styling/calendar-days/demo.html
 create mode 100644 static/usage/v7/datetime/styling/calendar-days/index.md
 create mode 100644 static/usage/v7/datetime/styling/calendar-days/javascript.md
 create mode 100644 static/usage/v7/datetime/styling/calendar-days/react/main_css.md
 create mode 100644 static/usage/v7/datetime/styling/calendar-days/react/main_tsx.md
 create mode 100644 static/usage/v7/datetime/styling/calendar-days/vue.md
 create mode 100644 static/usage/v7/datetime/styling/wheel-styling/angular/example_component_ts.md

diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 26368c8f2b6..aca72185d7c 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -37,6 +37,7 @@ import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlighted
 import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md';
 
 import GlobalTheming from '@site/static/usage/v7/datetime/styling/global-theming/index.md';
+import CalendarDaysStyling from '@site/static/usage/v7/datetime/styling/calendar-days/index.md';
 import WheelStyling from '@site/static/usage/v7/datetime/styling/wheel-styling/index.md';
 
 <head>
@@ -50,7 +51,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Datetimes present a calendar interface and time wheel, making it easy for users to select dates and times. Datetimes are similar to the native `input` elements of `datetime-local`, however, Ionic Framework's Datetime component makes it easy to display the date and time in the preferred format, and manage the datetime values.
 
-## Overview 
+## Overview
 
 Historically, handling datetime values within JavaScript, or even within HTML
 inputs, has always been a challenge. Specifically, JavaScript's `Date` object is
@@ -100,7 +101,7 @@ If you need to present a datetime in an overlay such as a modal or a popover, we
 
 ## Setting Values Asynchronously
 
-If its `value` is updated programmatically after a datetime has already been created, the datetime will automatically jump to the new date. However, it is recommended to avoid updating the `value` in this way when users are able to interact with the datetime, as this could be disorienting for those currently trying to select a date. For example, if a datetime's `value` is loaded by an asyncronous process, it is recommended to hide the datetime with CSS until the value has finished updating.
+If its `value` is updated programmatically after a datetime has already been created, the datetime will automatically jump to the new date. However, it is recommended to avoid updating the `value` in this way when users are able to interact with the datetime, as this could be disorienting for those currently trying to select a date. For example, if a datetime's `value` is loaded by an asynchronous process, it is recommended to hide the datetime with CSS until the value has finished updating.
 
 ## Date Constraints
 
@@ -108,7 +109,7 @@ If its `value` is updated programmatically after a datetime has already been cre
 
 To customize the minimum and maximum datetime values, the `min` and `max` component properties can be provided which may make more sense for the app's use-case. Following the same IS0 8601 format listed in the table above, each component can restrict which dates can be selected by the user.
 
-The following example restricts date selection to March 2022 through May 2022 only. 
+The following example restricts date selection to March 2022 through May 2022 only.
 
 <MaxMin />
 
@@ -122,7 +123,7 @@ The following example allows minutes to be selected in increments of 15. It also
 
 ### Advanced Date Constraints
 
-With the `isDateEnabled` property, developers can customize the `ion-datetime` to disable a specific day, range of dates, weekends or any custom rule using an ISO 8601 date string. 
+With the `isDateEnabled` property, developers can customize the `ion-datetime` to disable a specific day, range of dates, weekends or any custom rule using an ISO 8601 date string.
 The `isDateEnabled` property accepts a function returning a boolean, indicating if a date is enabled. The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank.
 
 The following example shows how to disable all weekend dates. For more advanced date manipulation, we recommend using a date utility such as `date-fns`.
@@ -325,6 +326,16 @@ The benefit of this approach is that every component, not just `ion-datetime`, c
 
 <GlobalTheming />
 
+### Calendar Days
+
+The calendar days in a grid-style `ion-datetime` can be styled using CSS shadow parts.
+
+:::note
+The example below selects the day 2 days ago, unless that day is in the previous month, then it selects a day 2 days in the future. This is done for demo purposes in order to show how to apply custom styling to all days, the current day, and the selected day.
+:::
+
+<CalendarDaysStyling />
+
 ### Wheel Pickers
 
 The wheels used in `ion-datetime` can be styled through a combination of shadow parts and CSS variables. This applies to both the columns in wheel-style datetimes, and the month/year picker in grid-style datetimes.
@@ -367,7 +378,7 @@ import { format, parseISO } from 'date-fns';
 /**
  * This is provided in the event
  * payload from the `ionChange` event.
- * 
+ *
  * The value is an ISO-8601 date string.
  */
 const dateFromIonDatetime = '2021-06-04T14:23:00-04:00';
diff --git a/static/usage/v7/datetime/styling/calendar-days/angular/example_component_css.md b/static/usage/v7/datetime/styling/calendar-days/angular/example_component_css.md
new file mode 100644
index 00000000000..c8a3e173e21
--- /dev/null
+++ b/static/usage/v7/datetime/styling/calendar-days/angular/example_component_css.md
@@ -0,0 +1,46 @@
+```css
+/*
+* Custom Datetime Day Parts
+* -------------------------------------------
+*/
+
+ion-datetime::part(calendar-day) {
+  color: #da5296;
+}
+
+ion-datetime::part(calendar-day today) {
+  color: #8462d1;
+}
+
+ion-datetime::part(calendar-day):focus {
+  background-color: rgb(154 209 98 / 0.2);
+  box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
+}
+
+/*
+* Custom Material Design Datetime Day Parts
+* -------------------------------------------
+*/
+
+ion-datetime.md::part(calendar-day active),
+ion-datetime.md::part(calendar-day active):focus {
+  background-color: #9ad162;
+  border-color: #9ad162;
+  color: #fff;
+}
+
+ion-datetime.md::part(calendar-day today) {
+  border-color: #8462d1;
+}
+
+/*
+* Custom iOS Datetime Day Parts
+* -------------------------------------------
+*/
+
+ion-datetime.ios::part(calendar-day active),
+ion-datetime.ios::part(calendar-day active):focus {
+  background-color: rgb(154 209 98 / 0.2);
+  color: #9ad162;
+}
+```
diff --git a/static/usage/v7/datetime/styling/calendar-days/angular/example_component_html.md b/static/usage/v7/datetime/styling/calendar-days/angular/example_component_html.md
new file mode 100644
index 00000000000..dde0aec7085
--- /dev/null
+++ b/static/usage/v7/datetime/styling/calendar-days/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date" [(ngModel)]="datetime"></ion-datetime>
+```
diff --git a/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md b/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md
new file mode 100644
index 00000000000..56c95d0ba0e
--- /dev/null
+++ b/static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md
@@ -0,0 +1,36 @@
+```ts
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+// ViewEncapsulation is turned off for this demo due to
+// a lack of support for styling multiple css shadow parts
+// See https://github.com/angular/angular/issues/22515
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class ExampleComponent implements OnInit {
+  public datetime;
+
+  ngOnInit() {
+    const date = new Date();
+
+    // Set the value of the datetime to 2 days
+    // before the current day
+    let dayChange = -2;
+
+    // If the day we are going to set the value to
+    // is in the previous month then set the day 2 days
+    // later instead so it remains in the same month
+    if (date.getDate() + dayChange <= 0) {
+      dayChange = -dayChange;
+    }
+
+    // Set the value of the datetime to the day
+    // calculated above
+    date.setDate(date.getDate() + dayChange);
+    this.datetime = date.toISOString();
+  }
+}
+```
diff --git a/static/usage/v7/datetime/styling/calendar-days/demo.html b/static/usage/v7/datetime/styling/calendar-days/demo.html
new file mode 100644
index 00000000000..93046ed0dee
--- /dev/null
+++ b/static/usage/v7/datetime/styling/calendar-days/demo.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Datetime</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>
+      /*
+      * Custom Datetime Day Parts
+      * -------------------------------------------
+      */
+
+      ion-datetime::part(calendar-day) {
+        color: #da5296;
+      }
+
+      ion-datetime::part(calendar-day today) {
+        color: #8462d1;
+      }
+
+      ion-datetime::part(calendar-day):focus {
+        background-color: rgb(154 209 98 / 0.2);
+        box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
+      }
+
+      /*
+      * Custom Material Design Datetime Day Parts
+      * -------------------------------------------
+      */
+
+      ion-datetime.md::part(calendar-day active),
+      ion-datetime.md::part(calendar-day active):focus {
+        background-color: #9ad162;
+        border-color: #9ad162;
+        color: #fff;
+      }
+
+      ion-datetime.md::part(calendar-day today) {
+        border-color: #8462d1;
+      }
+
+      /*
+      * Custom iOS Datetime Day Parts
+      * -------------------------------------------
+      */
+
+      ion-datetime.ios::part(calendar-day active),
+      ion-datetime.ios::part(calendar-day active):focus {
+        background-color: rgb(154 209 98 / 0.2);
+        color: #9ad162;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime presentation="date"></ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const datetime = document.querySelector('ion-datetime');
+
+      const date = new Date();
+
+      // Set the value of the datetime to 2 days
+      // before the current day
+      let dayChange = -2;
+
+      // If the day we are going to set the value to
+      // is in the previous month then set the day 2 days
+      // later instead so it remains in the same month
+      if (date.getDate() + dayChange <= 0) {
+        dayChange = -dayChange;
+      }
+
+      // Set the value of the datetime to the day
+      // calculated above
+      date.setDate(date.getDate() + dayChange);
+      datetime.value = date.toISOString();
+    </script>
+  </body>
+</html>
diff --git a/static/usage/v7/datetime/styling/calendar-days/index.md b/static/usage/v7/datetime/styling/calendar-days/index.md
new file mode 100644
index 00000000000..4ab6c14f639
--- /dev/null
+++ b/static/usage/v7/datetime/styling/calendar-days/index.md
@@ -0,0 +1,35 @@
+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';
+import angular_example_component_ts from './angular/example_component_ts.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/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/datetime/styling/calendar-days/demo.html"
+  size="medium"
+/>
diff --git a/static/usage/v7/datetime/styling/calendar-days/javascript.md b/static/usage/v7/datetime/styling/calendar-days/javascript.md
new file mode 100644
index 00000000000..20aa37bb016
--- /dev/null
+++ b/static/usage/v7/datetime/styling/calendar-days/javascript.md
@@ -0,0 +1,72 @@
+```html
+<ion-datetime presentation="date"></ion-datetime>
+
+<script>
+  const datetime = document.querySelector('ion-datetime');
+
+  const date = new Date();
+
+  // Set the value of the datetime to 2 days
+  // before the current day
+  let dayChange = -2;
+
+  // If the day we are going to set the value to
+  // is in the previous month then set the day 2 days
+  // later instead so it remains in the same month
+  if (date.getDate() + dayChange <= 0) {
+    dayChange = -dayChange;
+  }
+
+  // Set the value of the datetime to the day
+  // calculated above
+  date.setDate(date.getDate() + dayChange);
+  datetime.value = date.toISOString();
+</script>
+
+<style>
+  /*
+  * Custom Datetime Day Parts
+  * -------------------------------------------
+  */
+
+  ion-datetime::part(calendar-day) {
+    color: #da5296;
+  }
+
+  ion-datetime::part(calendar-day today) {
+    color: #8462d1;
+  }
+
+  ion-datetime::part(calendar-day):focus {
+    background-color: rgb(154 209 98 / 0.2);
+    box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
+  }
+
+  /*
+  * Custom Material Design Datetime Day Parts
+  * -------------------------------------------
+  */
+
+  ion-datetime.md::part(calendar-day active),
+  ion-datetime.md::part(calendar-day active):focus {
+    background-color: #9ad162;
+    border-color: #9ad162;
+    color: #fff;
+  }
+
+  ion-datetime.md::part(calendar-day today) {
+    border-color: #8462d1;
+  }
+
+  /*
+  * Custom iOS Datetime Day Parts
+  * -------------------------------------------
+  */
+
+  ion-datetime.ios::part(calendar-day active),
+  ion-datetime.ios::part(calendar-day active):focus {
+    background-color: rgb(154 209 98 / 0.2);
+    color: #9ad162;
+  }
+</style>
+```
diff --git a/static/usage/v7/datetime/styling/calendar-days/react/main_css.md b/static/usage/v7/datetime/styling/calendar-days/react/main_css.md
new file mode 100644
index 00000000000..c8a3e173e21
--- /dev/null
+++ b/static/usage/v7/datetime/styling/calendar-days/react/main_css.md
@@ -0,0 +1,46 @@
+```css
+/*
+* Custom Datetime Day Parts
+* -------------------------------------------
+*/
+
+ion-datetime::part(calendar-day) {
+  color: #da5296;
+}
+
+ion-datetime::part(calendar-day today) {
+  color: #8462d1;
+}
+
+ion-datetime::part(calendar-day):focus {
+  background-color: rgb(154 209 98 / 0.2);
+  box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
+}
+
+/*
+* Custom Material Design Datetime Day Parts
+* -------------------------------------------
+*/
+
+ion-datetime.md::part(calendar-day active),
+ion-datetime.md::part(calendar-day active):focus {
+  background-color: #9ad162;
+  border-color: #9ad162;
+  color: #fff;
+}
+
+ion-datetime.md::part(calendar-day today) {
+  border-color: #8462d1;
+}
+
+/*
+* Custom iOS Datetime Day Parts
+* -------------------------------------------
+*/
+
+ion-datetime.ios::part(calendar-day active),
+ion-datetime.ios::part(calendar-day active):focus {
+  background-color: rgb(154 209 98 / 0.2);
+  color: #9ad162;
+}
+```
diff --git a/static/usage/v7/datetime/styling/calendar-days/react/main_tsx.md b/static/usage/v7/datetime/styling/calendar-days/react/main_tsx.md
new file mode 100644
index 00000000000..fc76cb27d59
--- /dev/null
+++ b/static/usage/v7/datetime/styling/calendar-days/react/main_tsx.md
@@ -0,0 +1,33 @@
+```tsx
+import React, { useEffect, useState } from 'react';
+import { IonDatetime } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const [datetime, setDatetime] = useState<string | null>(null);
+
+  useEffect(() => {
+    const date = new Date();
+
+    // Set the value of the datetime to 2 days
+    // before the current day
+    let dayChange = -2;
+
+    // If the day we are going to set the value to
+    // is in the previous month then set the day 2 days
+    // later instead so it remains in the same month
+    if (date.getDate() + dayChange <= 0) {
+      dayChange = -dayChange;
+    }
+
+    // Set the value of the datetime to the day
+    // calculated above
+    date.setDate(date.getDate() + dayChange);
+    setDatetime(date.toISOString());
+  }, []);
+
+  return <IonDatetime presentation="date" value={datetime}></IonDatetime>;
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/styling/calendar-days/vue.md b/static/usage/v7/datetime/styling/calendar-days/vue.md
new file mode 100644
index 00000000000..98031201d7c
--- /dev/null
+++ b/static/usage/v7/datetime/styling/calendar-days/vue.md
@@ -0,0 +1,88 @@
+```html
+<template>
+  <ion-datetime presentation="date" :value="datetime"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonDatetime,
+    },
+    setup() {
+      let datetime = ref('');
+
+      const date = new Date();
+
+      // Set the value of the datetime to 2 days
+      // before the current day
+      let dayChange = -2;
+
+      // If the day we are going to set the value to
+      // is in the previous month then set the day 2 days
+      // later instead so it remains in the same month
+      if (date.getDate() + dayChange <= 0) {
+        dayChange = -dayChange;
+      }
+
+      // Set the value of the datetime to the day
+      // calculated above
+      date.setDate(date.getDate() + dayChange);
+      datetime = date.toISOString();
+
+      return {
+        datetime,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  /*
+  * Custom Datetime Day Parts
+  * -------------------------------------------
+  */
+
+  ion-datetime::part(calendar-day) {
+    color: #da5296;
+  }
+
+  ion-datetime::part(calendar-day today) {
+    color: #8462d1;
+  }
+
+  ion-datetime::part(calendar-day):focus {
+    background-color: rgb(154 209 98 / 0.2);
+    box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
+  }
+
+  /*
+  * Custom Material Design Datetime Day Parts
+  * -------------------------------------------
+  */
+
+  ion-datetime.md::part(calendar-day active),
+  ion-datetime.md::part(calendar-day active):focus {
+    background-color: #9ad162;
+    border-color: #9ad162;
+    color: #fff;
+  }
+
+  ion-datetime.md::part(calendar-day today) {
+    border-color: #8462d1;
+  }
+
+  /*
+  * Custom iOS Datetime Day Parts
+  * -------------------------------------------
+  */
+
+  ion-datetime.ios::part(calendar-day active),
+  ion-datetime.ios::part(calendar-day active):focus {
+    background-color: rgb(154 209 98 / 0.2);
+    color: #9ad162;
+  }
+</style>
+```
diff --git a/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_ts.md b/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_ts.md
new file mode 100644
index 00000000000..39bac10093c
--- /dev/null
+++ b/static/usage/v7/datetime/styling/wheel-styling/angular/example_component_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { Component, ViewEncapsulation } from '@angular/core';
+
+// ViewEncapsulation is turned off for this demo due to
+// a lack of support for styling multiple css shadow parts
+// See https://github.com/angular/angular/issues/22515
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v7/datetime/styling/wheel-styling/index.md b/static/usage/v7/datetime/styling/wheel-styling/index.md
index 4cc1808f81b..25fab2a4910 100644
--- a/static/usage/v7/datetime/styling/wheel-styling/index.md
+++ b/static/usage/v7/datetime/styling/wheel-styling/index.md
@@ -9,6 +9,7 @@ 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_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="7"
@@ -25,6 +26,7 @@ import angular_example_component_css from './angular/example_component_css.md';
       files: {
         'src/app/example.component.html': angular_example_component_html,
         'src/app/example.component.css': angular_example_component_css,
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
   }}

From 9e0fc43417873d6bb621c30bad970977e85c6cdd Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Wed, 6 Sep 2023 09:01:09 -0700
Subject: [PATCH 4/4] chore(angular, html, react, vue): revert package versions
 on stackblitz (#3106)

---
 static/code/stackblitz/v7/angular/package.json | 4 ++--
 static/code/stackblitz/v7/html/package.json    | 2 +-
 static/code/stackblitz/v7/react/package.json   | 4 ++--
 static/code/stackblitz/v7/vue/package.json     | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/static/code/stackblitz/v7/angular/package.json b/static/code/stackblitz/v7/angular/package.json
index cefb6716d28..66f368834db 100644
--- a/static/code/stackblitz/v7/angular/package.json
+++ b/static/code/stackblitz/v7/angular/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@ionic/angular": "7.3.2-dev.11693507138.1f9ed625",
-    "@ionic/core": "7.3.2-dev.11693507138.1f9ed625"
+    "@ionic/angular": "^7.0.0",
+    "@ionic/core": "^7.0.0"
   }
 }
diff --git a/static/code/stackblitz/v7/html/package.json b/static/code/stackblitz/v7/html/package.json
index 197e88283c5..7583138334d 100644
--- a/static/code/stackblitz/v7/html/package.json
+++ b/static/code/stackblitz/v7/html/package.json
@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@ionic/core": "7.3.2-dev.11693507138.1f9ed625"
+    "@ionic/core": "^7.0.0"
   }
 }
diff --git a/static/code/stackblitz/v7/react/package.json b/static/code/stackblitz/v7/react/package.json
index c81f0d18330..9e3c1a361ff 100644
--- a/static/code/stackblitz/v7/react/package.json
+++ b/static/code/stackblitz/v7/react/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "7.3.2-dev.11693507138.1f9ed625",
-    "@ionic/react-router": "7.3.2-dev.11693507138.1f9ed625",
+    "@ionic/react": "^7.0.10",
+    "@ionic/react-router": "^7.0.10",
     "@types/node": "^16.11.35",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
diff --git a/static/code/stackblitz/v7/vue/package.json b/static/code/stackblitz/v7/vue/package.json
index a953097ada0..5d661e04f57 100644
--- a/static/code/stackblitz/v7/vue/package.json
+++ b/static/code/stackblitz/v7/vue/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "7.3.2-dev.11693507138.1f9ed625",
-    "@ionic/vue-router": "7.3.2-dev.11693507138.1f9ed625",
+    "@ionic/vue": "^7.0.10",
+    "@ionic/vue-router": "^7.0.10",
     "vue": "^3.2.25",
     "vue-router": "4.0.13"
   },