diff --git a/doc/blockui/pt/PTDoc.vue b/doc/blockui/pt/PTDoc.vue
index 67a338062..07f74e1f2 100644
--- a/doc/blockui/pt/PTDoc.vue
+++ b/doc/blockui/pt/PTDoc.vue
@@ -5,13 +5,11 @@
             <Button label="Block" @click="blocked = true" class="mr-2"></Button>
             <Button label="Unblock" @click="blocked = false"></Button>
         </div>
-        <BlockUI :blocked="blocked" :pt="{ root: { class: 'bg-red-100' } }">
-            <Panel header="Basic">
-                <p class="m-0">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </Panel>
+        <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
         </BlockUI>
     </div>
     <DocSectionCode :code="code" />
@@ -24,26 +22,29 @@ export default {
             blocked: false,
             code: {
                 basic: `
-<Badge value="2"
-    :pt="{
-        root: { class: 'bg-primary border-round-sm' }
-    }"
-/>`,
+<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
+    <p class="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</BlockUI>`,
                 options: `
 <template>
-    <Badge value="2"
-        :pt="{
-            root: { class: 'bg-primary border-round-sm' }
-        }"
-    />
+    <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </BlockUI>
 </template>`,
                 composition: `
 <template>
-    <Badge value="2"
-        :pt="{
-            root: { class: 'bg-primary border-round-sm' }
-        }"
-    />
+    <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </BlockUI>
 </template>`
             }
         };
diff --git a/doc/contextmenu/pt/PTDoc.vue b/doc/contextmenu/pt/PTDoc.vue
index 88c3e6545..5aa5a61df 100644
--- a/doc/contextmenu/pt/PTDoc.vue
+++ b/doc/contextmenu/pt/PTDoc.vue
@@ -6,7 +6,7 @@
             ref="menu"
             :model="items"
             :pt="{
-                action: ({ props, state, options }) => ({ class: options.active ? 'bg-primary-200' : options.focused ? 'bg-primary-300' : undefined })
+                action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
             }"
         />
     </div>
@@ -150,7 +150,7 @@ export default {
     ref="menu"
     :model="items"
     :pt="{
-        action: ({ props, state, options }) => ({ class: options.active ? 'bg-primary-200' : options.focused ? 'bg-primary-300' : undefined })
+        action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
     }"
 />`,
                 options: `
@@ -161,7 +161,7 @@ export default {
             ref="menu"
             :model="items"
             :pt="{
-                action: ({ props, state, options }) => ({ class: options.active ? 'bg-primary-200' : options.focused ? 'bg-primary-300' : undefined })
+                action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
             }"
         />
     </div>
@@ -314,7 +314,7 @@ export default {
             ref="menu"
             :model="items"
             :pt="{
-                action: ({ props, state, options }) => ({ class: options.active ? 'bg-primary-200' : options.focused ? 'bg-primary-300' : undefined })
+                action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
             }"
         />
     </div>
diff --git a/doc/megamenu/pt/PTDoc.vue b/doc/megamenu/pt/PTDoc.vue
index a477d5459..2ae853aca 100644
--- a/doc/megamenu/pt/PTDoc.vue
+++ b/doc/megamenu/pt/PTDoc.vue
@@ -4,8 +4,8 @@
         <MegaMenu
             :model="items"
             :pt="{
-                action: ({ props, state, options }) => ({
-                    class: options.active ? 'bg-primary-200 border-round-sm' : options.focused ? 'bg-primary-300 border-round-sm' : undefined
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
                 })
             }"
         />
@@ -138,8 +138,8 @@ export default {
 <MegaMenu
     :model="items"
     :pt="{
-        action: ({ props, state, options }) => ({
-            class: options.active ? 'bg-primary-200 border-round-sm' : options.focused ? 'bg-primary-300 border-round-sm' : undefined
+        action: ({ props, state, context }) => ({
+            class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
         })
     }"
 />`,
@@ -149,8 +149,8 @@ export default {
         <MegaMenu
             :model="items"
             :pt="{
-                action: ({ props, state, options }) => ({
-                    class: options.active ? 'bg-primary-200 border-round-sm' : options.focused ? 'bg-primary-300 border-round-sm' : undefined
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
                 })
             }"
         />
@@ -287,8 +287,8 @@ export default {
         <MegaMenu
             :model="items"
             :pt="{
-                action: ({ props, state, options }) => ({
-                    class: options.active ? 'bg-primary-200 border-round-sm' : options.focused ? 'bg-primary-300 border-round-sm' : undefined
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
                 })
             }"
         />
diff --git a/doc/menu/pt/PTDoc.vue b/doc/menu/pt/PTDoc.vue
index 9ef6a5c42..c48cc01cc 100644
--- a/doc/menu/pt/PTDoc.vue
+++ b/doc/menu/pt/PTDoc.vue
@@ -5,8 +5,8 @@
             :model="items"
             :pt="{
                 submenuHeader: { class: 'text-surface-900' },
-                action: ({ props, state, options }) => ({
-                    class: options.focused ? 'bg-primary-400' : undefined
+                action: ({ props, state, context }) => ({
+                    class: context.focused ? 'bg-primary-400' : undefined
                 })
             }"
         />
@@ -60,8 +60,8 @@ export default {
     :model="items"
     :pt="{
         submenuHeader: { class: 'text-surface-900' },
-        action: ({ props, state, options }) => ({
-            class: options.focused ? 'bg-primary-400' : undefined
+        action: ({ props, state, context }) => ({
+            class: context.focused ? 'bg-primary-400' : undefined
         })
     }"
 />`,
@@ -72,8 +72,8 @@ export default {
             :model="items"
             :pt="{
                 submenuHeader: { class: 'text-surface-900' },
-                action: ({ props, state, options }) => ({
-                    class: options.focused ? 'bg-primary-400' : undefined
+                action: ({ props, state, context }) => ({
+                    class: context.focused ? 'bg-primary-400' : undefined
                 })
             }"
         />
@@ -132,8 +132,8 @@ export default {
             :model="items"
             :pt="{
                 submenuHeader: { class: 'text-surface-900' },
-                action: ({ props, state, options }) => ({
-                    class: options.focused ? 'bg-primary-400' : undefined
+                action: ({ props, state, context }) => ({
+                    class: context.focused ? 'bg-primary-400' : undefined
                 })
             }"
         />
diff --git a/doc/menubar/pt/PTDoc.vue b/doc/menubar/pt/PTDoc.vue
index 7bcae93ef..a33dd03bd 100644
--- a/doc/menubar/pt/PTDoc.vue
+++ b/doc/menubar/pt/PTDoc.vue
@@ -4,8 +4,8 @@
         <Menubar
             :model="items"
             :pt="{
-                action: ({ props, state, options }) => ({
-                    class: options.active ? 'bg-primary-200 border-round-sm' : options.focused ? 'bg-primary-300 border-round-sm' : undefined
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
                 })
             }"
         />
@@ -145,8 +145,8 @@ export default {
 <Menubar
     :model="items"
     :pt="{
-        action: ({ props, state, options }) => ({
-            class: options.active ? 'bg-primary-200 border-round-sm' : options.focused ? 'bg-primary-300 border-round-sm' : undefined
+        action: ({ props, state, context }) => ({
+            class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
         })
     }"
 />`,
@@ -156,8 +156,8 @@ export default {
         <Menubar
             :model="items"
             :pt="{
-                action: ({ props, state, options }) => ({
-                    class: options.active ? 'bg-primary-200 border-round-sm' : options.focused ? 'bg-primary-300 border-round-sm' : undefined
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
                 })
             }"
         />
@@ -301,8 +301,8 @@ export default {
         <Menubar
             :model="items"
             :pt="{
-                action: ({ props, state, options }) => ({
-                    class: options.active ? 'bg-primary-200 border-round-sm' : options.focused ? 'bg-primary-300 border-round-sm' : undefined
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
                 })
             }"
         />
diff --git a/doc/splitbutton/pt/PTDoc.vue b/doc/splitbutton/pt/PTDoc.vue
index 52641a58c..db9ca20a5 100644
--- a/doc/splitbutton/pt/PTDoc.vue
+++ b/doc/splitbutton/pt/PTDoc.vue
@@ -53,7 +53,7 @@ export default {
             root: { class: 'surface-ground' }
         }
     }"
-    />`,
+/>`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/tabmenu/pt/PTDoc.vue b/doc/tabmenu/pt/PTDoc.vue
index c47316c3a..d5b5a5b67 100644
--- a/doc/tabmenu/pt/PTDoc.vue
+++ b/doc/tabmenu/pt/PTDoc.vue
@@ -4,8 +4,8 @@
         <TabMenu
             :model="items"
             :pt="{
-                action: ({ props, state, options }) => ({
-                    class: options.order === state.d_activeIndex ? 'bg-primary' : undefined
+                action: ({ props, state, context }) => ({
+                    class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
                 })
             }"
         />
@@ -44,8 +44,8 @@ export default {
 <TabMenu
     :model="items"
     :pt="{
-        action: ({ props, state, index }) => ({
-            class: index === state.d_activeIndex ? 'bg-primary' : undefined
+        action: ({ props, state, context }) => ({
+            class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
         })
     }"
 />`,
@@ -55,8 +55,8 @@ export default {
         <TabMenu
             :model="items"
             :pt="{
-                action: ({ props, state, index }) => ({
-                    class: index === state.d_activeIndex ? 'bg-primary' : undefined
+                action: ({ props, state, context }) => ({
+                    class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
                 })
             }"
         />
@@ -99,8 +99,8 @@ export default {
         <TabMenu
             :model="items"
             :pt="{
-                action: ({ props, state, index }) => ({
-                    class: index === state.d_activeIndex ? 'bg-primary' : undefined
+                action: ({ props, state, context }) => ({
+                    class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
                 })
             }"
         />
diff --git a/doc/tieredmenu/pt/PTDoc.vue b/doc/tieredmenu/pt/PTDoc.vue
index dbaa2e0f9..45cf18d0d 100644
--- a/doc/tieredmenu/pt/PTDoc.vue
+++ b/doc/tieredmenu/pt/PTDoc.vue
@@ -4,8 +4,8 @@
         <TieredMenu
             :model="items"
             :pt="{
-                action: ({ props, state, options }) => ({
-                    class: options.active ? 'bg-primary-200 border-round-sm' : options.focused ? 'bg-primary-300 border-round-sm' : undefined
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
                 })
             }"
         />
@@ -145,11 +145,25 @@ export default {
             ],
             code: {
                 basic: `
-<TieredMenu :model="items" />`,
+<TieredMenu
+    :model="items"
+    :pt="{
+        action: ({ props, state, context }) => ({
+            class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
+        })
+    }"
+/>`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <TieredMenu :model="items" />
+        <TieredMenu
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
+                })
+            }"
+        />
     </div>
 </template>
 
@@ -290,7 +304,14 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <TieredMenu :model="items" />
+        <TieredMenu
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
+                })
+            }"
+        />
     </div>
 </template>