From 1229eba355658f237c0701bfef405833d42ee57d Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 29 Jul 2025 14:42:39 -0400
Subject: [PATCH 1/2] docs(datetime): add border property to highlightedDates
 examples

---
 static/code/stackblitz/v8/angular/package.json |  4 ++--
 static/code/stackblitz/v8/html/package.json    |  2 +-
 static/code/stackblitz/v8/react/package.json   |  2 +-
 static/code/stackblitz/v8/vue/package.json     |  4 ++--
 .../array/angular/example_component_ts.md      |  8 ++++++--
 .../datetime/highlightedDates/array/demo.html  | 18 ++++++++++++++----
 .../highlightedDates/array/javascript.md       |  8 ++++++--
 .../datetime/highlightedDates/array/react.md   |  8 ++++++--
 .../v8/datetime/highlightedDates/array/vue.md  |  8 ++++++--
 .../callback/angular/example_component_ts.md   |  6 ++++--
 .../highlightedDates/callback/demo.html        | 16 ++++++++++++----
 .../highlightedDates/callback/javascript.md    |  6 ++++--
 .../highlightedDates/callback/react.md         |  6 ++++--
 .../datetime/highlightedDates/callback/vue.md  |  6 ++++--
 14 files changed, 72 insertions(+), 30 deletions(-)

diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json
index 8e1322e643b..7ec6dee97a1 100644
--- a/static/code/stackblitz/v8/angular/package.json
+++ b/static/code/stackblitz/v8/angular/package.json
@@ -15,8 +15,8 @@
     "@angular/platform-browser": "^19.0.0",
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",
-    "@ionic/angular": "8.6.1",
-    "@ionic/core": "8.6.1",
+    "@ionic/angular": "8.6.3-dev.11753813535.1498583f",
+    "@ionic/core": "8.6.3-dev.11753813535.1498583f",
     "ionicons": "8.0.9",
     "rxjs": "^7.8.1",
     "tslib": "^2.5.0",
diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json
index c7b1cef6220..bc790b640df 100644
--- a/static/code/stackblitz/v8/html/package.json
+++ b/static/code/stackblitz/v8/html/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@ionic/core": "8.6.1",
+    "@ionic/core": "8.6.3-dev.11753813535.1498583f",
     "ionicons": "8.0.9"
   }
 }
diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json
index b1b63666ae6..176cdd1f891 100644
--- a/static/code/stackblitz/v8/react/package.json
+++ b/static/code/stackblitz/v8/react/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "8.6.1",
+    "@ionic/react": "8.6.3-dev.11753813535.1498583f",
     "@ionic/react-router": "8.6.1",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json
index 81dde41ce6f..95c05457036 100644
--- a/static/code/stackblitz/v8/vue/package.json
+++ b/static/code/stackblitz/v8/vue/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "8.6.1",
-    "@ionic/vue-router": "8.6.1",
+    "@ionic/vue": "8.6.3-dev.11753813535.1498583f",
+    "@ionic/vue-router": "8.6.3-dev.11753813535.1498583f",
     "vue": "^3.2.25",
     "vue-router": "4.5.1"
   },
diff --git a/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md
index 1382b5db0e9..ca7f322c840 100644
--- a/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -14,21 +14,25 @@ export class ExampleComponent {
       date: '2023-01-05',
       textColor: '#800080',
       backgroundColor: '#ffc0cb',
+      border: '1px solid #e91e63',
     },
     {
       date: '2023-01-10',
       textColor: '#09721b',
       backgroundColor: '#c8e5d0',
+      border: '1px solid #4caf50',
     },
     {
       date: '2023-01-20',
-      textColor: 'var(--ion-color-secondary-contrast)',
-      backgroundColor: 'var(--ion-color-secondary)',
+      textColor: 'var(--ion-color-secondary)',
+      backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
+      border: '1px solid var(--ion-color-secondary-shade)',
     },
     {
       date: '2023-01-23',
       textColor: 'rgb(68, 10, 184)',
       backgroundColor: 'rgb(211, 200, 229)',
+      border: '1px solid rgb(103, 58, 183)',
     },
   ];
 }
diff --git a/static/usage/v8/datetime/highlightedDates/array/demo.html b/static/usage/v8/datetime/highlightedDates/array/demo.html
index 1e8545bf042..1b97cbbe947 100644
--- a/static/usage/v8/datetime/highlightedDates/array/demo.html
+++ b/static/usage/v8/datetime/highlightedDates/array/demo.html
@@ -6,8 +6,14 @@
     <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@8/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@8.6.3-dev.11753813535.1498583f/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@8.6.3-dev.11753813535.1498583f/css/ionic.bundle.css"
+    />
     <style>
       ion-datetime {
         width: 350px;
@@ -31,21 +37,25 @@
           date: '2023-01-05',
           textColor: '#800080',
           backgroundColor: '#ffc0cb',
+          border: '1px solid #e91e63',
         },
         {
           date: '2023-01-10',
           textColor: '#09721b',
           backgroundColor: '#c8e5d0',
+          border: '1px solid #4caf50',
         },
         {
           date: '2023-01-20',
-          textColor: 'var(--ion-color-secondary-contrast)',
-          backgroundColor: 'var(--ion-color-secondary)',
+          textColor: 'var(--ion-color-secondary)',
+          backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
+          border: '1px solid var(--ion-color-secondary-shade)',
         },
         {
           date: '2023-01-23',
           textColor: 'rgb(68, 10, 184)',
           backgroundColor: 'rgb(211, 200, 229)',
+          border: '1px solid rgb(103, 58, 183)',
         },
       ];
     </script>
diff --git a/static/usage/v8/datetime/highlightedDates/array/javascript.md b/static/usage/v8/datetime/highlightedDates/array/javascript.md
index a27ff554ee2..9eae9580daf 100644
--- a/static/usage/v8/datetime/highlightedDates/array/javascript.md
+++ b/static/usage/v8/datetime/highlightedDates/array/javascript.md
@@ -8,21 +8,25 @@
       date: '2023-01-05',
       textColor: '#800080',
       backgroundColor: '#ffc0cb',
+      border: '1px solid #e91e63',
     },
     {
       date: '2023-01-10',
       textColor: '#09721b',
       backgroundColor: '#c8e5d0',
+      border: '1px solid #4caf50',
     },
     {
       date: '2023-01-20',
-      textColor: 'var(--ion-color-secondary-contrast)',
-      backgroundColor: 'var(--ion-color-secondary)',
+      textColor: 'var(--ion-color-secondary)',
+      backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
+      border: '1px solid var(--ion-color-secondary-shade)',
     },
     {
       date: '2023-01-23',
       textColor: 'rgb(68, 10, 184)',
       backgroundColor: 'rgb(211, 200, 229)',
+      border: '1px solid rgb(103, 58, 183)',
     },
   ];
 </script>
diff --git a/static/usage/v8/datetime/highlightedDates/array/react.md b/static/usage/v8/datetime/highlightedDates/array/react.md
index 4d8d9258f63..f49daad4da2 100644
--- a/static/usage/v8/datetime/highlightedDates/array/react.md
+++ b/static/usage/v8/datetime/highlightedDates/array/react.md
@@ -11,21 +11,25 @@ function Example() {
           date: '2023-01-05',
           textColor: '#800080',
           backgroundColor: '#ffc0cb',
+          border: '1px solid #e91e63',
         },
         {
           date: '2023-01-10',
           textColor: '#09721b',
           backgroundColor: '#c8e5d0',
+          border: '1px solid #4caf50',
         },
         {
           date: '2023-01-20',
-          textColor: 'var(--ion-color-secondary-contrast)',
-          backgroundColor: 'var(--ion-color-secondary)',
+          textColor: 'var(--ion-color-secondary)',
+          backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
+          border: '1px solid var(--ion-color-secondary-shade)',
         },
         {
           date: '2023-01-23',
           textColor: 'rgb(68, 10, 184)',
           backgroundColor: 'rgb(211, 200, 229)',
+          border: '1px solid rgb(103, 58, 183)',
         },
       ]}
     ></IonDatetime>
diff --git a/static/usage/v8/datetime/highlightedDates/array/vue.md b/static/usage/v8/datetime/highlightedDates/array/vue.md
index 408f58f2833..40cc4316e6d 100644
--- a/static/usage/v8/datetime/highlightedDates/array/vue.md
+++ b/static/usage/v8/datetime/highlightedDates/array/vue.md
@@ -15,21 +15,25 @@
           date: '2023-01-05',
           textColor: '#800080',
           backgroundColor: '#ffc0cb',
+          border: '1px solid #e91e63',
         },
         {
           date: '2023-01-10',
           textColor: '#09721b',
           backgroundColor: '#c8e5d0',
+          border: '1px solid #4caf50',
         },
         {
           date: '2023-01-20',
-          textColor: 'var(--ion-color-secondary-contrast)',
-          backgroundColor: 'var(--ion-color-secondary)',
+          textColor: 'var(--ion-color-secondary)',
+          backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
+          border: '1px solid var(--ion-color-secondary-shade)',
         },
         {
           date: '2023-01-23',
           textColor: 'rgb(68, 10, 184)',
           backgroundColor: 'rgb(211, 200, 229)',
+          border: '1px solid rgb(103, 58, 183)',
         },
       ];
 
diff --git a/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
index b877e31c7e5..159d9f8700a 100644
--- a/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
+++ b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -17,13 +17,15 @@ export class ExampleComponent {
       return {
         textColor: '#800080',
         backgroundColor: '#ffc0cb',
+        border: '1px solid #e91e63',
       };
     }
 
     if (utcDay % 3 === 0) {
       return {
-        textColor: 'var(--ion-color-secondary-contrast)',
-        backgroundColor: 'var(--ion-color-secondary)',
+        textColor: 'var(--ion-color-secondary)',
+        backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
+        border: '1px solid var(--ion-color-secondary-shade)',
       };
     }
 
diff --git a/static/usage/v8/datetime/highlightedDates/callback/demo.html b/static/usage/v8/datetime/highlightedDates/callback/demo.html
index 855b797ed2d..ccb18ff6895 100644
--- a/static/usage/v8/datetime/highlightedDates/callback/demo.html
+++ b/static/usage/v8/datetime/highlightedDates/callback/demo.html
@@ -6,8 +6,14 @@
     <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@8/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@8.6.3-dev.11753813535.1498583f/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@8.6.3-dev.11753813535.1498583f/css/ionic.bundle.css"
+    />
     <style>
       ion-datetime {
         width: 350px;
@@ -34,13 +40,15 @@
           return {
             textColor: '#800080',
             backgroundColor: '#ffc0cb',
+            border: '1px solid #e91e63',
           };
         }
 
         if (utcDay % 3 === 0) {
           return {
-            textColor: 'var(--ion-color-secondary-contrast)',
-            backgroundColor: 'var(--ion-color-secondary)',
+            textColor: 'var(--ion-color-secondary)',
+            backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
+            border: '1px solid var(--ion-color-secondary-shade)',
           };
         }
 
diff --git a/static/usage/v8/datetime/highlightedDates/callback/javascript.md b/static/usage/v8/datetime/highlightedDates/callback/javascript.md
index 9041810960b..e7774445358 100644
--- a/static/usage/v8/datetime/highlightedDates/callback/javascript.md
+++ b/static/usage/v8/datetime/highlightedDates/callback/javascript.md
@@ -11,13 +11,15 @@
       return {
         textColor: '#800080',
         backgroundColor: '#ffc0cb',
+        border: '1px solid #e91e63',
       };
     }
 
     if (utcDay % 3 === 0) {
       return {
-        textColor: 'var(--ion-color-secondary-contrast)',
-        backgroundColor: 'var(--ion-color-secondary)',
+        textColor: 'var(--ion-color-secondary)',
+        backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
+        border: '1px solid var(--ion-color-secondary-shade)',
       };
     }
 
diff --git a/static/usage/v8/datetime/highlightedDates/callback/react.md b/static/usage/v8/datetime/highlightedDates/callback/react.md
index 6543a1366ca..b730427ea96 100644
--- a/static/usage/v8/datetime/highlightedDates/callback/react.md
+++ b/static/usage/v8/datetime/highlightedDates/callback/react.md
@@ -13,13 +13,15 @@ function Example() {
           return {
             textColor: '#800080',
             backgroundColor: '#ffc0cb',
+            border: '1px solid #e91e63',
           };
         }
 
         if (utcDay % 3 === 0) {
           return {
-            textColor: 'var(--ion-color-secondary-contrast)',
-            backgroundColor: 'var(--ion-color-secondary)',
+            textColor: 'var(--ion-color-secondary)',
+            backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
+            border: '1px solid var(--ion-color-secondary-shade)',
           };
         }
 
diff --git a/static/usage/v8/datetime/highlightedDates/callback/vue.md b/static/usage/v8/datetime/highlightedDates/callback/vue.md
index e916b2cef1b..5288fefea8e 100644
--- a/static/usage/v8/datetime/highlightedDates/callback/vue.md
+++ b/static/usage/v8/datetime/highlightedDates/callback/vue.md
@@ -18,13 +18,15 @@
           return {
             textColor: '#800080',
             backgroundColor: '#ffc0cb',
+            border: '1px solid #e91e63',
           };
         }
 
         if (utcDay % 3 === 0) {
           return {
-            textColor: 'var(--ion-color-secondary-contrast)',
-            backgroundColor: 'var(--ion-color-secondary)',
+            textColor: 'var(--ion-color-secondary)',
+            backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)',
+            border: '1px solid var(--ion-color-secondary-shade)',
           };
         }
 

From e2823bbe8fc0855fc0341f23028b83fc035294b4 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Wed, 30 Jul 2025 14:24:19 -0400
Subject: [PATCH 2/2] chore: revert dev build

---
 static/code/stackblitz/v8/angular/package.json         |  4 ++--
 static/code/stackblitz/v8/html/package.json            |  2 +-
 static/code/stackblitz/v8/react/package.json           |  2 +-
 static/code/stackblitz/v8/vue/package.json             |  4 ++--
 .../usage/v8/datetime/highlightedDates/array/demo.html | 10 ++--------
 .../v8/datetime/highlightedDates/callback/demo.html    | 10 ++--------
 6 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json
index 7ec6dee97a1..8e1322e643b 100644
--- a/static/code/stackblitz/v8/angular/package.json
+++ b/static/code/stackblitz/v8/angular/package.json
@@ -15,8 +15,8 @@
     "@angular/platform-browser": "^19.0.0",
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",
-    "@ionic/angular": "8.6.3-dev.11753813535.1498583f",
-    "@ionic/core": "8.6.3-dev.11753813535.1498583f",
+    "@ionic/angular": "8.6.1",
+    "@ionic/core": "8.6.1",
     "ionicons": "8.0.9",
     "rxjs": "^7.8.1",
     "tslib": "^2.5.0",
diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json
index bc790b640df..c7b1cef6220 100644
--- a/static/code/stackblitz/v8/html/package.json
+++ b/static/code/stackblitz/v8/html/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@ionic/core": "8.6.3-dev.11753813535.1498583f",
+    "@ionic/core": "8.6.1",
     "ionicons": "8.0.9"
   }
 }
diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json
index 176cdd1f891..b1b63666ae6 100644
--- a/static/code/stackblitz/v8/react/package.json
+++ b/static/code/stackblitz/v8/react/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "8.6.3-dev.11753813535.1498583f",
+    "@ionic/react": "8.6.1",
     "@ionic/react-router": "8.6.1",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json
index 95c05457036..81dde41ce6f 100644
--- a/static/code/stackblitz/v8/vue/package.json
+++ b/static/code/stackblitz/v8/vue/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "8.6.3-dev.11753813535.1498583f",
-    "@ionic/vue-router": "8.6.3-dev.11753813535.1498583f",
+    "@ionic/vue": "8.6.1",
+    "@ionic/vue-router": "8.6.1",
     "vue": "^3.2.25",
     "vue-router": "4.5.1"
   },
diff --git a/static/usage/v8/datetime/highlightedDates/array/demo.html b/static/usage/v8/datetime/highlightedDates/array/demo.html
index 1b97cbbe947..9f27a6f29c8 100644
--- a/static/usage/v8/datetime/highlightedDates/array/demo.html
+++ b/static/usage/v8/datetime/highlightedDates/array/demo.html
@@ -6,14 +6,8 @@
     <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@8.6.3-dev.11753813535.1498583f/dist/ionic/ionic.esm.js"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@ionic/core@8.6.3-dev.11753813535.1498583f/css/ionic.bundle.css"
-    />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
     <style>
       ion-datetime {
         width: 350px;
diff --git a/static/usage/v8/datetime/highlightedDates/callback/demo.html b/static/usage/v8/datetime/highlightedDates/callback/demo.html
index ccb18ff6895..447b01e38f5 100644
--- a/static/usage/v8/datetime/highlightedDates/callback/demo.html
+++ b/static/usage/v8/datetime/highlightedDates/callback/demo.html
@@ -6,14 +6,8 @@
     <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@8.6.3-dev.11753813535.1498583f/dist/ionic/ionic.esm.js"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@ionic/core@8.6.3-dev.11753813535.1498583f/css/ionic.bundle.css"
-    />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
     <style>
       ion-datetime {
         width: 350px;