diff --git a/doc/passthrough/BasicDoc.vue b/doc/passthrough/BasicDoc.vue
index 68cfcbee8..a7f42a635 100644
--- a/doc/passthrough/BasicDoc.vue
+++ b/doc/passthrough/BasicDoc.vue
@@ -12,9 +12,15 @@
             header="Header"
             toggleable
             :pt="{
-                header: (opts) => {
-                    return { class: opts.state.d_collapsed ? 'bg-primary border-primary' : 'bg-primary-reverse border-primary' };
-                },
+                header: (options) => ({
+                    class: [
+                        'border-primary',
+                        {
+                            'bg-primary': options.state.d_collapsed,
+                            'bg-primary-reverse': !options.state.d_collapsed
+                        }
+                    ]
+                }),
                 content: { class: 'border-primary text-lg text-primary-700' },
                 title: { class: 'text-xl' },
                 toggler: { class: 'bg-primary hover:bg-primary-reverse' }
@@ -37,12 +43,18 @@ export default {
                 basic: `
 <Panel header="Header" toggleable
     :pt="{
-        header: (opts: PanelPassThroughMethodOptions) => {
-            return { class: opts.state.d_collapsed ? 'bg-primary border-primary' : 'bg-primary-reverse border-primary' };
-        },
+        header: (options) => ({
+            class: [
+                'border-primary',
+                {
+                    'bg-primary': options.state.d_collapsed,
+                    'bg-primary-reverse': !options.state.d_collapsed,
+                },
+            ],
+        }),
         content: { class: 'border-primary text-lg text-primary-700' },
         title: { class: 'text-xl' },
-        toggler: { class: 'bg-primary hover:bg-primary-reverse' }
+        toggler: { class: 'bg-primary hover:bg-primary-reverse' },
     }">
     <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.
@@ -54,12 +66,18 @@ export default {
     <div class="card">
         <Panel header="Header" toggleable
             :pt="{
-                header: (opts: PanelPassThroughMethodOptions) => {
-                    return { class: opts.state.d_collapsed ? 'bg-primary border-primary' : 'bg-primary-reverse border-primary' };
-                },
+                header: (options) => ({
+                    class: [
+                        'border-primary',
+                        {
+                            'bg-primary': options.state.d_collapsed,
+                            'bg-primary-reverse': !options.state.d_collapsed,
+                        },
+                    ],
+                }),
                 content: { class: 'border-primary text-lg text-primary-700' },
                 title: { class: 'text-xl' },
-                toggler: { class: 'bg-primary hover:bg-primary-reverse' }
+                toggler: { class: 'bg-primary hover:bg-primary-reverse' },
             }">
             <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.
@@ -76,12 +94,18 @@ export default {
     <div class="card">
         <Panel header="Header" toggleable
             :pt="{
-                header: (opts: PanelPassThroughMethodOptions) => {
-                    return { class: opts.state.d_collapsed ? 'bg-primary border-primary' : 'bg-primary-reverse border-primary' };
-                },
+                header: (options) => ({
+                    class: [
+                        'border-primary',
+                        {
+                            'bg-primary': options.state.d_collapsed,
+                            'bg-primary-reverse': !options.state.d_collapsed,
+                        },
+                    ],
+                }),
                 content: { class: 'border-primary text-lg text-primary-700' },
                 title: { class: 'text-xl' },
-                toggler: { class: 'bg-primary hover:bg-primary-reverse' }
+                toggler: { class: 'bg-primary hover:bg-primary-reverse' },
             }">
             <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.