diff --git a/doc/rating/pt/PTDoc.vue b/doc/rating/pt/PTDoc.vue
index 65503ac6c..acdbe9ed7 100644
--- a/doc/rating/pt/PTDoc.vue
+++ b/doc/rating/pt/PTDoc.vue
@@ -4,9 +4,7 @@
         <Rating
             v-model="value"
             :pt="{
-                onIcon: () => ({
-                    class: 'text-orange-400'
-                })
+                onIcon: { class: 'text-orange-400' }
             }"
         />
     </div>
@@ -23,9 +21,7 @@ export default {
 <Rating
     v-model="value"
     :pt="{
-        onIcon: () => ({
-            class: 'text-orange-400'
-        })
+        onIcon: { class: 'text-orange-400' }
     }"
 />`,
                 options: `
@@ -34,9 +30,7 @@ export default {
         <Rating
             v-model="value"
             :pt="{
-                onIcon: () => ({
-                    class: 'text-orange-400'
-                })
+                onIcon: { class: 'text-orange-400' }
             }"
         />
     </div>
@@ -57,9 +51,7 @@ export default {
         <Rating
             v-model="value"
             :pt="{
-                onIcon: () => ({
-                    class: 'text-orange-400'
-                })
+                onIcon: { class: 'text-orange-400' }
             }"
         />
     </div>
diff --git a/doc/selectbutton/pt/PTDoc.vue b/doc/selectbutton/pt/PTDoc.vue
index e0e81805c..9f40b32bd 100644
--- a/doc/selectbutton/pt/PTDoc.vue
+++ b/doc/selectbutton/pt/PTDoc.vue
@@ -6,8 +6,8 @@
             :options="options"
             aria-labelledby="basic"
             :pt="{
-                label: ({ state }) => ({
-                    class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
+                button: ({ context }) => ({
+                    class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
                 })
             }"
         />
@@ -28,10 +28,11 @@ export default {
     :options="options"
     aria-labelledby="basic"
     :pt="{
-        label: ({ state }) => ({
-            class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
+        button: ({ context }) => ({
+            class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
         })
-    }"/>`,
+    }"
+/>`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
@@ -40,8 +41,8 @@ export default {
             :options="options"
             aria-labelledby="basic"
             :pt="{
-                label: ({ state }) => ({
-                    class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
+                button: ({ context }) => ({
+                    class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
                 })
             }"
         />
@@ -66,8 +67,8 @@ export default {
             :options="options"
             aria-labelledby="basic"
             :pt="{
-                label: ({ state }) => ({
-                    class: state.focusedIndex === 1 ? 'text-blue-300' : undefined
+                button: ({ context }) => ({
+                    class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
                 })
             }"
         />
diff --git a/doc/slider/pt/PTDoc.vue b/doc/slider/pt/PTDoc.vue
index e76bbe8de..7db123da0 100644
--- a/doc/slider/pt/PTDoc.vue
+++ b/doc/slider/pt/PTDoc.vue
@@ -3,14 +3,10 @@
     <div class="card flex justify-content-center">
         <Slider
             v-model="value"
-            class="w-14rem"
             :pt="{
-                handle: {
-                    class: 'bg-orange-400 border-900'
-                },
-                range: {
-                    class: 'bg-orange-400'
-                }
+                root: { class: 'w-14rem' },
+                handle: { class: 'bg-orange-400 border-900' },
+                range: { class: 'bg-orange-400' }
             }"
         />
     </div>
@@ -26,14 +22,10 @@ export default {
                 basic: `
 <Slider
     v-model="value"
-    class="w-14rem"
     :pt="{
-        handle: {
-            class: 'bg-orange-400 border-900'
-        },
-        range: {
-            class: 'bg-orange-400'
-        }
+        root: { class: 'w-14rem' },
+        handle: { class: 'bg-orange-400 border-900' },
+        range: { class: 'bg-orange-400' }
     }"
 />`,
                 options: `
@@ -41,14 +33,10 @@ export default {
     <div class="card flex justify-content-center">
         <Slider
             v-model="value"
-            class="w-14rem"
             :pt="{
-                handle: {
-                    class: 'bg-orange-400 border-900'
-                },
-                range: {
-                    class: 'bg-orange-400'
-                }
+                root: { class: 'w-14rem' },
+                handle: { class: 'bg-orange-400 border-900' },
+                range: { class: 'bg-orange-400' }
             }"
         />
     </div>
@@ -68,14 +56,10 @@ export default {
     <div class="card flex justify-content-center">
         <Slider
             v-model="value"
-            class="w-14rem"
             :pt="{
-                handle: {
-                    class: 'bg-orange-400 border-900'
-                },
-                range: {
-                    class: 'bg-orange-400'
-                }
+                root: { class: 'w-14rem' },
+                handle: { class: 'bg-orange-400 border-900' },
+                range: { class: 'bg-orange-400' }
             }"
         />
     </div>
diff --git a/doc/tristatecheckbox/pt/PTDoc.vue b/doc/tristatecheckbox/pt/PTDoc.vue
index 3e344abea..1982b66ca 100644
--- a/doc/tristatecheckbox/pt/PTDoc.vue
+++ b/doc/tristatecheckbox/pt/PTDoc.vue
@@ -4,9 +4,9 @@
         <TriStateCheckbox
             v-model="value"
             :pt="{
-                checboxBox: () => ({
-                    class: value ? 'bg-green-500 border-white' : undefined
-                })
+                checbox: {
+                    class: value ? 'bg-teal-500 border-white' : undefined
+                }
             }"
         />
         <label for="checkbox">{{ value == null ? 'null' : value }}</label>
@@ -24,9 +24,9 @@ export default {
 <TriStateCheckbox
     v-model="value"
     :pt="{
-        checboxBox: () => ({
-            class: value ? 'bg-green-500 border-white' : undefined
-        })
+        checbox: {
+            class: value ? 'bg-teal-500 border-white' : undefined
+        }
     }"
 />`,
                 options: `
@@ -35,9 +35,9 @@ export default {
         <TriStateCheckbox
             v-model="value"
             :pt="{
-                checboxBox: () => ({
-                    class: value ? 'bg-green-500 border-white' : undefined
-                })
+                checbox: {
+                    class: value ? 'bg-teal-500 border-white' : undefined
+                }
             }"
         />
         <label for="checkbox">{{ value == null ? 'null' : value }}</label>
@@ -59,9 +59,9 @@ export default {
         <TriStateCheckbox
             v-model="value"
             :pt="{
-                checboxBox: () => ({
-                    class: value ? 'bg-green-500 border-white' : undefined
-                })
+                checbox: {
+                    class: value ? 'bg-teal-500 border-white' : undefined
+                }
             }"
         />
         <label for="checkbox">{{ value == null ? 'null' : value }}</label>