From d26fc9f9b246fac84004b2e960887cfac4e9a038 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Thu, 22 Jan 2026 14:34:54 -0800
Subject: [PATCH] docs(datetime): add wheel part to styling section

---
 .../styling/wheel-styling/angular/example_component_css.md    | 4 ++++
 static/usage/v8/datetime/styling/wheel-styling/demo.html      | 4 ++++
 static/usage/v8/datetime/styling/wheel-styling/javascript.md  | 4 ++++
 .../usage/v8/datetime/styling/wheel-styling/react/main_css.md | 4 ++++
 static/usage/v8/datetime/styling/wheel-styling/vue.md         | 4 ++++
 5 files changed, 20 insertions(+)

diff --git a/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_css.md b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_css.md
index 3cd7e6ff8ac..d84fb8c9f09 100644
--- a/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_css.md
+++ b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_css.md
@@ -7,6 +7,10 @@ ion-datetime {
   --wheel-fade-background-rgb: 245, 235, 247;
 }
 
+ion-datetime::part(wheel):focus {
+  background: rgb(109, 208, 164);
+}
+
 ion-datetime::part(wheel-item) {
   color: rgb(255, 66, 97);
 }
diff --git a/static/usage/v8/datetime/styling/wheel-styling/demo.html b/static/usage/v8/datetime/styling/wheel-styling/demo.html
index b784a220c73..c19c18a8ac8 100644
--- a/static/usage/v8/datetime/styling/wheel-styling/demo.html
+++ b/static/usage/v8/datetime/styling/wheel-styling/demo.html
@@ -18,6 +18,10 @@
         --wheel-fade-background-rgb: 245, 235, 247;
       }
 
+      ion-datetime::part(wheel):focus {
+        background: rgb(109, 208, 164);
+      }
+
       ion-datetime::part(wheel-item) {
         color: rgb(255, 66, 97);
       }
diff --git a/static/usage/v8/datetime/styling/wheel-styling/javascript.md b/static/usage/v8/datetime/styling/wheel-styling/javascript.md
index 6ee932a323d..67a23fc7e7e 100644
--- a/static/usage/v8/datetime/styling/wheel-styling/javascript.md
+++ b/static/usage/v8/datetime/styling/wheel-styling/javascript.md
@@ -8,6 +8,10 @@
     --wheel-fade-background-rgb: 245, 235, 247;
   }
 
+  ion-datetime::part(wheel):focus {
+    background: rgb(109, 208, 164);
+  }
+
   ion-datetime::part(wheel-item) {
     color: rgb(255, 66, 97);
   }
diff --git a/static/usage/v8/datetime/styling/wheel-styling/react/main_css.md b/static/usage/v8/datetime/styling/wheel-styling/react/main_css.md
index 3cd7e6ff8ac..d84fb8c9f09 100644
--- a/static/usage/v8/datetime/styling/wheel-styling/react/main_css.md
+++ b/static/usage/v8/datetime/styling/wheel-styling/react/main_css.md
@@ -7,6 +7,10 @@ ion-datetime {
   --wheel-fade-background-rgb: 245, 235, 247;
 }
 
+ion-datetime::part(wheel):focus {
+  background: rgb(109, 208, 164);
+}
+
 ion-datetime::part(wheel-item) {
   color: rgb(255, 66, 97);
 }
diff --git a/static/usage/v8/datetime/styling/wheel-styling/vue.md b/static/usage/v8/datetime/styling/wheel-styling/vue.md
index d2c73da038a..4001c881c43 100644
--- a/static/usage/v8/datetime/styling/wheel-styling/vue.md
+++ b/static/usage/v8/datetime/styling/wheel-styling/vue.md
@@ -16,6 +16,10 @@
     --wheel-fade-background-rgb: 245, 235, 247;
   }
 
+  ion-datetime::part(wheel):focus {
+    background: rgb(109, 208, 164);
+  }
+
   ion-datetime::part(wheel-item) {
     color: rgb(255, 66, 97);
   }