diff --git a/api-generator/build-apidoc.js b/api-generator/build-apidoc.js
index 00d5490d4..46df64a5e 100644
--- a/api-generator/build-apidoc.js
+++ b/api-generator/build-apidoc.js
@@ -358,6 +358,10 @@ if (project) {
                                         .map((s) => {
                                             if (s.text.indexOf('[here]') > -1) {
                                                 return `${s.text.slice(0, s.text.indexOf('[here]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">here</a> ${s.text.slice(s.text.indexOf(')') + 1)}`;
+                                            } else if (s.text.indexOf('[MDN Reference]') > -1) {
+                                                return `${s.text.slice(0, s.text.indexOf('[MDN Reference]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">MDN Reference</a> ${s.text.slice(
+                                                    s.text.indexOf(')') + 1
+                                                )}`;
                                             }
 
                                             return s.text || '';
diff --git a/components/lib/scrollpanel/ScrollPanel.vue b/components/lib/scrollpanel/ScrollPanel.vue
index b92c6bc28..710bb1666 100644
--- a/components/lib/scrollpanel/ScrollPanel.vue
+++ b/components/lib/scrollpanel/ScrollPanel.vue
@@ -103,39 +103,41 @@ export default {
             }
         },
         moveBar() {
-            /* horizontal scroll */
-            let totalWidth = this.$refs.content.scrollWidth;
-            let ownWidth = this.$refs.content.clientWidth;
-            let bottom = (this.$el.clientHeight - this.$refs.xBar.clientHeight) * -1;
+            if (this.$refs.content) {
+                /* horizontal scroll */
+                let totalWidth = this.$refs.content.scrollWidth;
+                let ownWidth = this.$refs.content.clientWidth;
+                let bottom = (this.$el.clientHeight - this.$refs.xBar.clientHeight) * -1;
 
-            this.scrollXRatio = ownWidth / totalWidth;
+                this.scrollXRatio = ownWidth / totalWidth;
 
-            /* vertical scroll */
-            let totalHeight = this.$refs.content.scrollHeight;
-            let ownHeight = this.$refs.content.clientHeight;
-            let right = (this.$el.clientWidth - this.$refs.yBar.clientWidth) * -1;
+                /* vertical scroll */
+                let totalHeight = this.$refs.content.scrollHeight;
+                let ownHeight = this.$refs.content.clientHeight;
+                let right = (this.$el.clientWidth - this.$refs.yBar.clientWidth) * -1;
 
-            this.scrollYRatio = ownHeight / totalHeight;
+                this.scrollYRatio = ownHeight / totalHeight;
 
-            this.frame = this.requestAnimationFrame(() => {
-                if (this.scrollXRatio >= 1) {
-                    this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-                    !this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
-                } else {
-                    this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-                    !this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
-                    this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
-                }
+                this.frame = this.requestAnimationFrame(() => {
+                    if (this.scrollXRatio >= 1) {
+                        this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+                        !this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
+                    } else {
+                        this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+                        !this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
+                        this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+                    }
 
-                if (this.scrollYRatio >= 1) {
-                    this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-                    !this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
-                } else {
-                    this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-                    !this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
-                    this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
-                }
-            });
+                    if (this.scrollYRatio >= 1) {
+                        this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+                        !this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
+                    } else {
+                        this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+                        !this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
+                        this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+                    }
+                });
+            }
         },
         onYBarMouseDown(e) {
             this.isYBarClicked = true;
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 391da3120..0866e3efe 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -882,7 +882,7 @@
                             "readonly": false,
                             "type": "null | Element | Document",
                             "default": "",
-                            "description": "Specifies the  `root`  option of the IntersectionObserver API\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/root)"
+                            "description": "Specifies the  `root`  option of the IntersectionObserver API\n <a target=\"_blank\" href=\"https://developer.mozilla.org/docs/Web/API/IntersectionObserver/root\">MDN Reference</a> "
                         },
                         {
                             "name": "rootMargin",
@@ -890,7 +890,7 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Specifies the  `rootMargin`  option of the IntersectionObserver API\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/rootMargin)"
+                            "description": "Specifies the  `rootMargin`  option of the IntersectionObserver API\n <a target=\"_blank\" href=\"https://developer.mozilla.org/docs/Web/API/IntersectionObserver/rootMargin\">MDN Reference</a> "
                         },
                         {
                             "name": "threshold",
@@ -898,7 +898,7 @@
                             "readonly": false,
                             "type": "readonly number[]",
                             "default": "",
-                            "description": "Specifies the  `threshold`  option of the IntersectionObserver API\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/thresholds)"
+                            "description": "Specifies the  `threshold`  option of the IntersectionObserver API\n <a target=\"_blank\" href=\"https://developer.mozilla.org/docs/Web/API/IntersectionObserver/thresholds\">MDN Reference</a> "
                         },
                         {
                             "name": "animateOnLoad",
diff --git a/doc/datatable/edit/CellEditDoc.vue b/doc/datatable/edit/CellEditDoc.vue
index da5f45cbc..f7c3b6f4c 100644
--- a/doc/datatable/edit/CellEditDoc.vue
+++ b/doc/datatable/edit/CellEditDoc.vue
@@ -49,10 +49,7 @@ export default {
             ],
             code: {
                 basic: `
-<DataTable
-    :value="products"
-    editMode="cell"
-    @cell-edit-complete="onCellEditComplete"
+<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
     :pt="{
         table: { style: 'min-width: 50rem' },
         column: {
@@ -80,10 +77,7 @@ export default {
                 options: `
 <template>
     <div class="card p-fluid">
-        <DataTable
-            :value="products"
-            editMode="cell"
-            @cell-edit-complete="onCellEditComplete"
+        <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
             :pt="{
                 table: { style: 'min-width: 50rem' },
                 column: {
@@ -169,10 +163,7 @@ export default {
                 composition: `
 <template>
     <div class="card p-fluid">
-        <DataTable
-            :value="products"
-            editMode="cell"
-            @cell-edit-complete="onCellEditComplete"
+        <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
             :pt="{
                 table: { style: 'min-width: 50rem' },
                 column: {
diff --git a/doc/datatable/edit/FilterSortEditDoc.vue b/doc/datatable/edit/FilterSortEditDoc.vue
index 0fd2cbc67..126554381 100644
--- a/doc/datatable/edit/FilterSortEditDoc.vue
+++ b/doc/datatable/edit/FilterSortEditDoc.vue
@@ -48,12 +48,7 @@ export default {
             },
             code: {
                 basic: `
-<DataTable
-    v-model:filters="filters"
-    :value="products"
-    editMode="cell"
-    @cell-edit-complete="onCellEditComplete"
-    filterDisplay="row"
+<DataTable  v-model:filters="filters" :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"  filterDisplay="row"
     :pt="{
         table: { style: 'min-width: 50rem' },
         column: {
@@ -76,12 +71,7 @@ export default {
                 options: `
 <template>
     <div class="card p-fluid">
-        <DataTable
-            v-model:filters="filters"
-            :value="products"
-            editMode="cell"
-            @cell-edit-complete="onCellEditComplete"
-            filterDisplay="row"
+        <DataTable v-model:filters="filters" :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" filterDisplay="row"
             :pt="{
                 table: { style: 'min-width: 50rem' },
                 column: {
@@ -159,12 +149,7 @@ export default {
                 composition: `
 <template>
     <div class="card p-fluid">
-        <DataTable
-            v-model:filters="filters"
-            :value="products"
-            editMode="cell"
-            @cell-edit-complete="onCellEditComplete"
-            filterDisplay="row"
+        <DataTable v-model:filters="filters" :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" filterDisplay="row"
             :pt="{
                 table: { style: 'min-width: 50rem' },
                 column: {
diff --git a/doc/datatable/edit/RowEditDoc.vue b/doc/datatable/edit/RowEditDoc.vue
index ac26c921a..f8d13bcdb 100644
--- a/doc/datatable/edit/RowEditDoc.vue
+++ b/doc/datatable/edit/RowEditDoc.vue
@@ -6,7 +6,21 @@
         </p>
     </DocSectionText>
     <div class="card p-fluid">
-        <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+        <DataTable
+            v-model:editingRows="editingRows"
+            :value="products"
+            editMode="row"
+            dataKey="id"
+            @row-edit-save="onRowEditSave"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        style: state['d_editing'] && 'padding-top: 0.6rem; padding-bottom: 0.6rem'
+                    })
+                }
+            }"
+        >
             <Column field="code" header="Code" style="width: 20%">
                 <template #editor="{ data, field }">
                     <InputText v-model="data[field]" />
@@ -58,8 +72,16 @@ export default {
             ],
             code: {
                 basic: `
-<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
-        @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
+    :pt="{
+        table: { style: 'min-width: 50rem' },
+        column: {
+            bodycell: ({ state }) => ({
+                style:  state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem' 
+            })
+        }
+    }"
+>
     <Column field="code" header="Code" style="width: 20%">
         <template #editor="{ data, field }">
             <InputText v-model="data[field]" />
@@ -96,8 +118,16 @@ export default {
                 options: `
 <template>
     <div class="card p-fluid">
-        <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
-                @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+        <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        style:  state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem' 
+                    })
+                }
+            }"
+        >
             <Column field="code" header="Code" style="width: 20%">
                 <template #editor="{ data, field }">
                     <InputText v-model="data[field]" />
@@ -178,19 +208,20 @@ export default {
     }
 };
 <\/script>
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0.6rem;
-    padding-bottom: 0.6rem;
-}
-</style>
 `,
                 composition: `
 <template>
     <div class="card p-fluid">
-        <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
-                @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+        <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        style:  state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem' 
+                    })
+                }
+            }"
+        >
             <Column field="code" header="Code" style="width: 20%">
                 <template #editor="{ data, field }">
                     <InputText v-model="data[field]" />
@@ -266,14 +297,7 @@ const formatCurrency = (value) => {
     return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
 }
 
-<\/script>
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0.6rem;
-    padding-bottom: 0.6rem;
-}
-</style>`,
+<\/script>`,
                 data: `
 {
     id: '1000',
@@ -322,10 +346,3 @@ const formatCurrency = (value) => {
     }
 };
 </script>
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0.6rem;
-    padding-bottom: 0.6rem;
-}
-</style>
diff --git a/doc/inputnumber/VerticalDoc.vue b/doc/inputnumber/VerticalDoc.vue
index b13ecdfb0..864cbd64b 100644
--- a/doc/inputnumber/VerticalDoc.vue
+++ b/doc/inputnumber/VerticalDoc.vue
@@ -54,7 +54,7 @@ export default {
 </template>
 
 <script setup>
-import { ref } from "vuetest";
+import { ref } from "vue";
 
 const value = ref(50);
 <\/script>
diff --git a/doc/ripple/ConfigurationDoc.vue b/doc/ripple/ConfigurationDoc.vue
index c73633aac..5b8133ec8 100644
--- a/doc/ripple/ConfigurationDoc.vue
+++ b/doc/ripple/ConfigurationDoc.vue
@@ -14,7 +14,6 @@ export default {
 mounted() {
     this.$primevue.config.ripple = true;
 }
-
 `,
                 options: `
 mounted() {
@@ -26,7 +25,8 @@ import { usePrimeVue } from 'primevue/config';
 
 const PrimeVue = usePrimeVue();
 
-PrimeVue.config.ripple = true;`
+PrimeVue.config.ripple = true;
+`
             }
         };
     }
diff --git a/doc/ripple/CustomDoc.vue b/doc/ripple/CustomDoc.vue
index 51c11ac1c..d8ef6479e 100644
--- a/doc/ripple/CustomDoc.vue
+++ b/doc/ripple/CustomDoc.vue
@@ -3,9 +3,36 @@
         <p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>p-ink</i> element.</p>
     </DocSectionText>
     <div class="card flex justify-content-center align-items-center gap-2">
-        <div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
-        <div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
-        <div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
+        <div
+            v-ripple="{
+                pt: {
+                    root: { style: 'background: rgba(75, 175, 80, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Green
+        </div>
+        <div
+            v-ripple="{
+                pt: {
+                    root: { style: 'background: rgba(255, 193, 6, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Orange
+        </div>
+        <div
+            v-ripple="{
+                pt: {
+                    root: { style: 'background: rgba(156, 39, 176, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Purple
+        </div>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,31 +43,74 @@ export default {
         return {
             code: {
                 basic: `
-<div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
-<div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
-<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
+<div
+    v-ripple="{
+        pt: {
+            root: { style: 'background: rgba(75, 175, 80, 0.3)' }
+        }
+    }"
+    class="p-ripple box shadow-2"
+>
+    Green
+</div>
+<div
+    v-ripple="{
+        pt: {
+            root: { style: 'background: rgba(255, 193, 6, 0.3)' }
+        }
+    }"
+    class="p-ripple box shadow-2"
+>
+    Orange
+</div>
+<div
+    v-ripple="{
+        pt: {
+            root: { style: 'background: rgba(156, 39, 176, 0.3)' }
+        }
+    }"
+    class="p-ripple box shadow-2"
+>
+    Purple
+</div>
 `,
                 options: `
 <template>
-    <div class="flex justify-content-center align-items-center">
-        <div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
-        <div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
-        <div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
+    <div class="flex justify-content-center align-items-center gap-2">
+        <div
+            v-ripple="{
+                pt: {
+                    root: { style: 'background: rgba(75, 175, 80, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Green
+        </div>
+        <div
+            v-ripple="{
+                pt: {
+                    root: { style: 'background: rgba(255, 193, 6, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Orange
+        </div>
+        <div
+            v-ripple="{
+                pt: {
+                    root: { style: 'background: rgba(156, 39, 176, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Purple
+        </div>
     </div>
 </template>
 
 <style scoped>
-::v-deep(.styled-box-green .p-ink) {
-    background: rgba(75, 175, 80, 0.3);
-}
-::v-deep(.styled-box-orange .p-ink) {
-    background: rgba(255, 193, 6, 0.3);
-}
-
-::v-deep(.styled-box-purple .p-ink) {
-    background: rgba(156, 39, 176, 0.3);
-}
-
 .box {
     background: var(--surface-card);
     padding: 2rem;
@@ -52,25 +122,41 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="flex justify-content-center align-items-center">
-        <div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
-        <div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
-        <div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
+    <div class="flex justify-content-center align-items-center gap-2">
+        <div
+            v-ripple="{
+                pt: {
+                    root: { style: 'background: rgba(75, 175, 80, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Green
+        </div>
+        <div
+            v-ripple="{
+                pt: {
+                    root: { style: 'background: rgba(255, 193, 6, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Orange
+        </div>
+        <div
+            v-ripple="{
+                pt: {
+                    root: { style: 'background: rgba(156, 39, 176, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Purple
+        </div>
     </div>
 </template>
 
 <style scoped>
-::v-deep(.styled-box-green .p-ink) {
-    background: rgba(75, 175, 80, 0.3);
-}
-::v-deep(.styled-box-orange .p-ink) {
-    background: rgba(255, 193, 6, 0.3);
-}
-
-::v-deep(.styled-box-purple .p-ink) {
-    background: rgba(156, 39, 176, 0.3);
-}
-
 .box {
     background: var(--surface-card);
     padding: 2rem;
@@ -93,15 +179,4 @@ export default {
     width: 110px;
     text-align: center;
 }
-
-::v-deep(.styled-box-green .p-ink) {
-    background: rgba(75, 175, 80, 0.3);
-}
-::v-deep(.styled-box-orange .p-ink) {
-    background: rgba(255, 193, 6, 0.3);
-}
-
-::v-deep(.styled-box-purple .p-ink) {
-    background: rgba(156, 39, 176, 0.3);
-}
 </style>
diff --git a/doc/virtualscroller/HorizontalDoc.vue b/doc/virtualscroller/HorizontalDoc.vue
index c62120329..2cc11daa5 100644
--- a/doc/virtualscroller/HorizontalDoc.vue
+++ b/doc/virtualscroller/HorizontalDoc.vue
@@ -3,13 +3,13 @@
         <p>Setting <i>orientation</i> to <i>horizontal</i> enables scrolling horizontally. In this case, the <i>itemSize</i> should refer to the width of an item.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
             <template v-slot:item="{ item, options }">
                 <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
-    <DocSectionCode :code="code" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
+    <DocSectionCode :code="code" />
 </template>
 
 <script>
@@ -19,7 +19,7 @@ export default {
             items: null,
             code: {
                 basic: `
-<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
     <template v-slot:item="{ item, options }">
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
     </template>
@@ -28,7 +28,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
             <template v-slot:item="{ item, options }">
                 <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
             </template>
@@ -48,20 +48,11 @@ export default {
     }
 };
 <\/script>
-
-<style lang="scss" scoped>
-::v-deep(.p-virtualscroller) {
-    .p-virtualscroller-content {
-        display: flex;
-        flex-direction: row;
-    }
-}
-</style>
 `,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
             <template v-slot:item="{ item, options }">
                 <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
             </template>
@@ -74,15 +65,7 @@ import { ref } from 'vue';
 
 const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
 <\/script>
-
-<style lang="scss" scoped>
-::v-deep(.p-virtualscroller) {
-    .p-virtualscroller-content {
-        display: flex;
-        flex-direction: row;
-    }
-}
-</style>`
+`
             }
         };
     },
@@ -91,12 +74,3 @@ const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`))
     }
 };
 </script>
-
-<style lang="scss" scoped>
-::v-deep(.p-virtualscroller) {
-    .p-virtualscroller-content {
-        display: flex;
-        flex-direction: row;
-    }
-}
-</style>