docs(datetime): add wheel part to styling section (#4383)

thetaPC · web-flow · commit d175dc009435 · 2026-01-29T06:32:16.000-08:00
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
   }

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,10 @@ ion-datetime {`
`7`	`7`	`--wheel-fade-background-rgb: 245, 235, 247;`
`8`	`8`	`}`
`9`	`9`
	`10`	`+ion-datetime::part(wheel):focus {`
	`11`	`+ background: rgb(109, 208, 164);`
	`12`	`+}`
	`13`	`+`
`10`	`14`	`ion-datetime::part(wheel-item) {`
`11`	`15`	`color: rgb(255, 66, 97);`
`12`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,10 @@`
`18`	`18`	`--wheel-fade-background-rgb: 245, 235, 247;`
`19`	`19`	`}`
`20`	`20`
	`21`	`+ ion-datetime::part(wheel):focus {`
	`22`	`+ background: rgb(109, 208, 164);`
	`23`	`+ }`
	`24`	`+`
`21`	`25`	`ion-datetime::part(wheel-item) {`
`22`	`26`	`color: rgb(255, 66, 97);`
`23`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,10 @@`
`8`	`8`	`--wheel-fade-background-rgb: 245, 235, 247;`
`9`	`9`	`}`
`10`	`10`
	`11`	`+ ion-datetime::part(wheel):focus {`
	`12`	`+ background: rgb(109, 208, 164);`
	`13`	`+ }`
	`14`	`+`
`11`	`15`	`ion-datetime::part(wheel-item) {`
`12`	`16`	`color: rgb(255, 66, 97);`
`13`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,10 @@`
`16`	`16`	`--wheel-fade-background-rgb: 245, 235, 247;`
`17`	`17`	`}`
`18`	`18`
	`19`	`+ ion-datetime::part(wheel):focus {`
	`20`	`+ background: rgb(109, 208, 164);`
	`21`	`+ }`
	`22`	`+`
`19`	`23`	`ion-datetime::part(wheel-item) {`
`20`	`24`	`color: rgb(255, 66, 97);`
`21`	`25`	`}`