diff --git a/apps/showcase/doc/button/TemplateDoc.vue b/apps/showcase/doc/button/TemplateDoc.vue
index 45505329b..13eebfc3d 100644
--- a/apps/showcase/doc/button/TemplateDoc.vue
+++ b/apps/showcase/doc/button/TemplateDoc.vue
@@ -3,7 +3,7 @@
         <p>Custom content inside a button is defined as children.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Button outlined class="border-2">
+        <Button outlined class="!border-2">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -25,7 +25,7 @@ export default {
         return {
             code: {
                 basic: `
-<Button outlined class="border-2">
+<Button outlined class="!border-2">
     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="..." fill="var(--p-primary-color)" />
         <path d="..." fill="var(--p-text-color)" />
@@ -35,7 +35,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-center">
-        <Button outlined class="border-2">
+        <Button outlined class="!border-2">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -56,7 +56,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <Button outlined class="border-2">
+        <Button outlined class="!border-2">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
diff --git a/apps/showcase/doc/cascadeselect/BasicDoc.vue b/apps/showcase/doc/cascadeselect/BasicDoc.vue
index 560077bb2..cb3b96263 100644
--- a/apps/showcase/doc/cascadeselect/BasicDoc.vue
+++ b/apps/showcase/doc/cascadeselect/BasicDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -93,13 +93,13 @@ export default {
             code: {
                 basic: `
 <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-    :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
     </div>
 </template>
 
@@ -191,7 +191,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/cascadeselect/DisabledDoc.vue b/apps/showcase/doc/cascadeselect/DisabledDoc.vue
index ba04f5d2d..7807ec8f3 100644
--- a/apps/showcase/doc/cascadeselect/DisabledDoc.vue
+++ b/apps/showcase/doc/cascadeselect/DisabledDoc.vue
@@ -3,7 +3,7 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
+        <CascadeSelect disabled placeholder="Disabled" class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,12 +14,12 @@ export default {
         return {
             code: {
                 basic: `
-<CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
+<CascadeSelect disabled placeholder="Disabled" class="w-56" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
+        <CascadeSelect disabled placeholder="Disabled" class="w-56" />
     </div>
 </template>
 
@@ -30,7 +30,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <CascadeSelect disabled placeholder="Disabled" style="min-width: 14rem" />
+        <CascadeSelect disabled placeholder="Disabled" class="w-56" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/cascadeselect/FilledDoc.vue b/apps/showcase/doc/cascadeselect/FilledDoc.vue
index 609237fae..6795889ec 100644
--- a/apps/showcase/doc/cascadeselect/FilledDoc.vue
+++ b/apps/showcase/doc/cascadeselect/FilledDoc.vue
@@ -3,7 +3,7 @@
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+        <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -90,13 +90,13 @@ export default {
             code: {
                 basic: `
 <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
-    :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
     </div>
 </template>
 
@@ -188,7 +188,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/cascadeselect/InvalidDoc.vue b/apps/showcase/doc/cascadeselect/InvalidDoc.vue
index 0830c5caf..9ba5f28ea 100644
--- a/apps/showcase/doc/cascadeselect/InvalidDoc.vue
+++ b/apps/showcase/doc/cascadeselect/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+        <CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -90,13 +90,13 @@ export default {
             code: {
                 basic: `
 <CascadeSelect v-model="selectedCity" :invalid="selectedCity === null"  :options="countries" optionLabel="cname" optionGroupLabel="name"
-    :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+    :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :invalid="selectedCity === null"  :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
     </div>
 </template>
 
@@ -188,7 +188,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :invalid="selectedCity === null"  :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/cascadeselect/LoadingStateDoc.vue b/apps/showcase/doc/cascadeselect/LoadingStateDoc.vue
index 132e28624..9be6b8849 100644
--- a/apps/showcase/doc/cascadeselect/LoadingStateDoc.vue
+++ b/apps/showcase/doc/cascadeselect/LoadingStateDoc.vue
@@ -3,7 +3,7 @@
         <p>Loading state can be used <i>loading</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <CascadeSelect loading placeholder="Loading..." style="min-width: 14rem" />
+        <CascadeSelect loading placeholder="Loading..." class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,12 +14,12 @@ export default {
         return {
             code: {
                 basic: `
-<CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />
+<CascadeSelect loading placeholder="Loading..." class="w-56" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />
+        <CascadeSelect loading placeholder="Loading..." class="w-56" />
     </div>
 </template>
 
@@ -30,7 +30,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <CascadeSelect loading placeholder="Loading..."  style="min-width: 14rem" />
+        <CascadeSelect loading placeholder="Loading..." class="w-56" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/cascadeselect/TemplateDoc.vue b/apps/showcase/doc/cascadeselect/TemplateDoc.vue
index 406c40e8d..83f3173d3 100644
--- a/apps/showcase/doc/cascadeselect/TemplateDoc.vue
+++ b/apps/showcase/doc/cascadeselect/TemplateDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            CascadeSelect is used as a controlled component with <i>v-model</i> property along with an <i>options</i> collection. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is
-            required to define the property that refers to the children of a group. Note that order of the <i>optionGroupChildren</i> matters as it should correspond to the data hierarchy.
+            Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. In addition <i>value</i>, <i>dropdownicon</i>,
+            <i>loadingicon</i>, and <i>optiongroupicon</i> slots are provided for further customization.
         </p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
             <template #option="slotProps">
                 <div class="flex items-center">
                     <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
@@ -15,6 +15,9 @@
                     <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
                 </div>
             </template>
+            <template #dropdownicon>
+                <i class="pi pi-map-marker"></i>
+            </template>
         </CascadeSelect>
     </div>
     <DocSectionCode :code="code" />
@@ -102,7 +105,7 @@ export default {
             code: {
                 basic: `
 <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-    :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
+    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
     <template #option="slotProps">
         <div class="flex items-center">
             <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px"  />
@@ -111,13 +114,16 @@ export default {
             <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
         </div>
     </template>
+    <template #dropdownicon>
+        <i class="pi pi-map-marker"></i>
+    </template>
 </CascadeSelect>
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
             <template #option="slotProps">
                 <div class="flex items-center">
                     <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px"  />
@@ -126,6 +132,9 @@ export default {
                     <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
                 </div>
             </template>
+            <template #dropdownicon>
+                <i class="pi pi-map-marker"></i>
+            </template>
         </CascadeSelect>
     </div>
 </template>
@@ -218,7 +227,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
             <template #option="slotProps">
                 <div class="flex items-center">
                     <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px"  />
@@ -227,6 +236,9 @@ export default {
                     <span>{{ slotProps.option.cname || slotProps.option.name }}</span>
                 </div>
             </template>
+            <template #dropdownicon>
+                <i class="pi pi-map-marker"></i>
+            </template>
         </CascadeSelect>
     </div>
 </template>
diff --git a/apps/showcase/doc/datatable/ExportDoc.vue b/apps/showcase/doc/datatable/ExportDoc.vue
index d4f3c56c2..364ef4707 100644
--- a/apps/showcase/doc/datatable/ExportDoc.vue
+++ b/apps/showcase/doc/datatable/ExportDoc.vue
@@ -6,7 +6,7 @@
         <div class="card">
             <DataTable ref="dt" :value="products" tableStyle="min-width: 50rem">
                 <template #header>
-                    <div style="text-align: left">
+                    <div class="text-end pb-4">
                         <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
                     </div>
                 </template>
@@ -31,7 +31,7 @@ export default {
                 basic: `
 <DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
     <template #header>
-        <div style="text-align: left">
+        <div class="text-end pb-4">
             <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
         </div>
     </template>
@@ -46,7 +46,7 @@ export default {
     <div>
         <DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
             <template #header>
-                <div style="text-align: left">
+                <div class="text-end pb-4">
                     <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
                 </div>
             </template>
@@ -84,7 +84,7 @@ export default {
     <div>
         <DataTable :value="products" ref="dt" tableStyle="min-width: 50rem">
             <template #header>
-                <div style="text-align: left">
+                <div class="text-end pb-4">
                     <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
                 </div>
             </template>
diff --git a/apps/showcase/doc/datatable/rowselection/ColumnRowSelectionDoc.vue b/apps/showcase/doc/datatable/rowselection/ColumnRowSelectionDoc.vue
new file mode 100644
index 000000000..146248892
--- /dev/null
+++ b/apps/showcase/doc/datatable/rowselection/ColumnRowSelectionDoc.vue
@@ -0,0 +1,143 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Row selection with an element inside a column is implemented with templating.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" tableStyle="min-width: 50rem">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+                <Column class="w-24 !text-end">
+                    <template #body="{ data }">
+                        <Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" tableStyle="min-width: 50rem">
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+    <Column class="w-24 !text-end">
+        <template #body="{ data }">
+            <Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
+        </template>
+    </Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+            <Column class="w-24 !text-end">
+                <template #body="{ data }">
+                    <Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
+                </template>
+            </Column>
+        </DataTable>
+        <Toast/>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    },
+    methods: {
+        selectRow(data) {
+            this.$toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+            <Column class="w-24 !text-end">
+                <template #body="{ data }">
+                    <Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
+                </template>
+            </Column>
+        </DataTable>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+const toast = useToast();
+const selectRow = (data) => {
+    toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
+};
+<\/script>
+`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        },
+        selectRow(data) {
+            this.$toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/doc/datatable/samples/ProductsDoc.vue b/apps/showcase/doc/datatable/samples/ProductsDoc.vue
index d66adcdde..667929a5e 100644
--- a/apps/showcase/doc/datatable/samples/ProductsDoc.vue
+++ b/apps/showcase/doc/datatable/samples/ProductsDoc.vue
@@ -6,13 +6,13 @@
         <div class="card">
             <Toolbar class="mb-6">
                 <template #start>
-                    <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
-                    <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+                    <Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
+                    <Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                 </template>
 
                 <template #end>
-                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
-                    <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
+                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
+                    <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
                 </template>
             </Toolbar>
 
@@ -183,13 +183,13 @@ export default {
                 basic: `
 <Toolbar class="mb-6">
     <template #start>
-        <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
-        <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+        <Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
+        <Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
     </template>
 
     <template #end>
-        <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
-        <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
+        <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
+        <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
     </template>
 </Toolbar>
 
@@ -255,13 +255,13 @@ export default {
         <div class="card">
             <Toolbar class="mb-6">
                 <template #start>
-                    <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
-                    <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+                    <Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
+                    <Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                 </template>
 
                 <template #end>
-                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
-                    <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
+                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
+                    <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
                 </template>
             </Toolbar>
 
@@ -547,13 +547,13 @@ export default {
         <div class="card">
             <Toolbar class="mb-6">
                 <template #start>
-                    <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
-                    <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+                    <Button label="New" icon="pi pi-plus" class="mr-2" @click="openNew" />
+                    <Button label="Delete" icon="pi pi-trash" severity="danger" outlined @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                 </template>
 
                 <template #end>
-                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
-                    <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
+                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" customUpload chooseLabel="Import" class="mr-2" auto :chooseButtonProps="{ severity: 'secondary' }" />
+                    <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
                 </template>
             </Toolbar>
 
diff --git a/apps/showcase/doc/dataview/BasicDoc.vue b/apps/showcase/doc/dataview/BasicDoc.vue
index cadfbde29..9a63c558d 100644
--- a/apps/showcase/doc/dataview/BasicDoc.vue
+++ b/apps/showcase/doc/dataview/BasicDoc.vue
@@ -7,12 +7,10 @@
             <template #list="slotProps">
                 <div class="flex flex-col">
                     <div v-for="(item, index) in slotProps.items" :key="index">
-                        <div class="flex flex-col sm:flex-row sm:items-center gap-4">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
-                                <img class="rounded w-36" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
-                                <div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
-                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                                </div>
+                                <img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
+                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -60,9 +58,7 @@ export default {
                 <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                     <div class="md:w-40 relative">
                         <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                        <div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
-                            <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                        </div>
+                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
                     </div>
                     <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                         <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -101,9 +97,7 @@ export default {
                         <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                                <div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
-                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                                </div>
+                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -176,9 +170,7 @@ export default {
                         <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
-                                <div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
-                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
-                                </div>
+                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
diff --git a/apps/showcase/doc/inputmask/DisabledDoc.vue b/apps/showcase/doc/inputmask/DisabledDoc.vue
index f7b247741..c0cbb1a6f 100644
--- a/apps/showcase/doc/inputmask/DisabledDoc.vue
+++ b/apps/showcase/doc/inputmask/DisabledDoc.vue
@@ -3,7 +3,7 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <InputMask mask="99-999999" placeholder="99-999999" disabled />
+        <InputMask mask="99-999999" placeholder="Disabled" disabled />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: '',
             code: {
                 basic: `
-<InputMask mask="99-999999" placeholder="99-999999" disabled />
+<InputMask mask="99-999999" placeholder="Disabled" disabled />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <InputMask mask="99-999999" placeholder="99-999999" disabled />
+        <InputMask mask="99-999999" placeholder="Disabled" disabled />
     </div>
 </template>
 
@@ -38,7 +38,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <InputMask mask="99-999999" placeholder="99-999999" disabled />
+        <InputMask mask="99-999999" placeholder="Disabled" disabled />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/message/LifeDoc.vue b/apps/showcase/doc/message/LifeDoc.vue
index 54a43f9df..7dfc36f2c 100644
--- a/apps/showcase/doc/message/LifeDoc.vue
+++ b/apps/showcase/doc/message/LifeDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Messages can disappear automatically by defined the <i>life</i> in milliseconds.</p>
     </DocSectionText>
-    <div class="card flex flex-col items-center justify-center gap-4">
-        <Button label="Show" @click="showMessage" :disabled="visible" />
+    <div class="card flex flex-col items-center justify-center">
+        <Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
         <Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
     </div>
     <DocSectionCode :code="code" />
@@ -16,13 +16,13 @@ export default {
             visible: false,
             code: {
                 basic: `
-<Button label="Show" @click="showMessage" :disabled="visible" />
+<Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
 <Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
 `,
                 options: `
 <template>
-    <div class="card flex flex-col items-center justify-center gap-4">
-        <Button label="Show" @click="showMessage" :disabled="visible" />
+    <div class="card flex flex-col items-center justify-center">
+        <Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
         <Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
     </div>
 </template>
@@ -48,8 +48,8 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-col items-center justify-center gap-4">
-        <Button label="Show" @click="showMessage" :disabled="visible" />
+    <div class="card flex flex-col items-center justify-center">
+        <Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
         <Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
     </div>
 </template>
diff --git a/apps/showcase/doc/panel/TemplateDoc.vue b/apps/showcase/doc/panel/TemplateDoc.vue
index 376603932..3ff207020 100644
--- a/apps/showcase/doc/panel/TemplateDoc.vue
+++ b/apps/showcase/doc/panel/TemplateDoc.vue
@@ -6,7 +6,7 @@
         <Panel toggleable>
             <template #header>
                 <div class="flex items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </div>
             </template>
@@ -58,7 +58,7 @@ export default {
 <Panel toggleable>
     <template #header>
         <div class="flex items-center gap-2">
-            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
             <span class="font-bold">Amy Elsner</span>
         </div>
     </template>
@@ -88,7 +88,7 @@ export default {
         <Panel toggleable>
             <template #header>
                 <div class="flex items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </div>
             </template>
@@ -154,7 +154,7 @@ export default {
         <Panel toggleable>
             <template #header>
                 <div class="flex items-center gap-2">
-                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </div>
             </template>
diff --git a/apps/showcase/doc/splitbutton/BasicDoc.vue b/apps/showcase/doc/splitbutton/BasicDoc.vue
index 2fce74fed..a2bfd80e4 100644
--- a/apps/showcase/doc/splitbutton/BasicDoc.vue
+++ b/apps/showcase/doc/splitbutton/BasicDoc.vue
@@ -26,12 +26,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -63,11 +65,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
+                }
                 { label: 'Upload', to: '/fileupload' }
             ]
         };
@@ -96,22 +101,24 @@ const items = [
     {
         label: 'Update',
         command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
         }
     },
     {
         label: 'Delete',
         command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
-        label: 'Vue Website',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/DisabledDoc.vue b/apps/showcase/doc/splitbutton/DisabledDoc.vue
index 8ab4deac8..bb1f6ce63 100644
--- a/apps/showcase/doc/splitbutton/DisabledDoc.vue
+++ b/apps/showcase/doc/splitbutton/DisabledDoc.vue
@@ -26,12 +26,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -63,12 +65,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -105,12 +109,14 @@ const items = [
         }
     },
     {
-        label: 'Vue Website',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/IconsDoc.vue b/apps/showcase/doc/splitbutton/IconsDoc.vue
index 6b4f8bd3a..0287d8e25 100644
--- a/apps/showcase/doc/splitbutton/IconsDoc.vue
+++ b/apps/showcase/doc/splitbutton/IconsDoc.vue
@@ -28,13 +28,15 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-power-off',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -68,13 +70,15 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-power-off',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -103,24 +107,26 @@ const items = [
         label: 'Update',
         icon: 'pi pi-refresh',
         command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
         }
     },
     {
         label: 'Delete',
         icon: 'pi pi-times',
         command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
+        separator: true
+    },
+    {
+        label: 'Quit',
+        icon: 'pi pi-power-off',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/NestedDoc.vue b/apps/showcase/doc/splitbutton/NestedDoc.vue
new file mode 100644
index 000000000..a6093104c
--- /dev/null
+++ b/apps/showcase/doc/splitbutton/NestedDoc.vue
@@ -0,0 +1,270 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Multi-level menus are supported with a nested menu hierarchy.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <SplitButton label="Save" @click="save" :model="items" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            items: [
+                                {
+                                    label: 'Document',
+                                    icon: 'pi pi-file'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Open',
+                            icon: 'pi pi-folder-open'
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-file-edit',
+                    items: [
+                        {
+                            label: 'Copy',
+                            icon: 'pi pi-copy'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times'
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack'
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<SplitButton label="Save" @click="save" :model="items" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <SplitButton label="Save" @click="save" :model="items" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus',
+                            items: [
+                                {
+                                    label: 'Document',
+                                    icon: 'pi pi-file'
+                                },
+                                {
+                                    label: 'Image',
+                                    icon: 'pi pi-image'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Open',
+                            icon: 'pi pi-folder-open'
+                        },
+                        {
+                            label: 'Print',
+                            icon: 'pi pi-print'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-file-edit',
+                    items: [
+                        {
+                            label: 'Copy',
+                            icon: 'pi pi-copy'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times'
+                        }
+                    ]
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Share',
+                    icon: 'pi pi-share-alt',
+                    items: [
+                        {
+                            label: 'Slack',
+                            icon: 'pi pi-slack'
+                        },
+                        {
+                            label: 'Whatsapp',
+                            icon: 'pi pi-whatsapp'
+                        }
+                    ]
+                }
+            ]
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <SplitButton label="Save" @click="save" :model="items" />
+    </div>
+</template>
+
+<script setup>
+const items = [
+    {
+        label: 'File',
+        icon: 'pi pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-plus',
+                items: [
+                    {
+                        label: 'Document',
+                        icon: 'pi pi-file'
+                    },
+                    {
+                        label: 'Image',
+                        icon: 'pi pi-image'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-video'
+                    }
+                ]
+            },
+            {
+                label: 'Open',
+                icon: 'pi pi-folder-open'
+            },
+            {
+                label: 'Print',
+                icon: 'pi pi-print'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-file-edit',
+        items: [
+            {
+                label: 'Copy',
+                icon: 'pi pi-copy'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-times'
+            }
+        ]
+    },
+    {
+        label: 'Search',
+        icon: 'pi pi-search'
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Share',
+        icon: 'pi pi-share-alt',
+        items: [
+            {
+                label: 'Slack',
+                icon: 'pi pi-slack'
+            },
+            {
+                label: 'Whatsapp',
+                icon: 'pi pi-whatsapp'
+            }
+        ]
+    }
+];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/doc/splitbutton/OutlinedDoc.vue b/apps/showcase/doc/splitbutton/OutlinedDoc.vue
index d66143de3..79651768c 100644
--- a/apps/showcase/doc/splitbutton/OutlinedDoc.vue
+++ b/apps/showcase/doc/splitbutton/OutlinedDoc.vue
@@ -33,12 +33,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -84,12 +86,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ]
         }
     },
@@ -124,22 +128,24 @@ const items = [
     {
         label: 'Update',
         command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
         }
     },
     {
         label: 'Delete',
         command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
-        label: 'Vue Website',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/RaisedDoc.vue b/apps/showcase/doc/splitbutton/RaisedDoc.vue
index 955540f7a..6e33f9865 100644
--- a/apps/showcase/doc/splitbutton/RaisedDoc.vue
+++ b/apps/showcase/doc/splitbutton/RaisedDoc.vue
@@ -33,12 +33,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -84,12 +86,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -134,12 +138,14 @@ const items = [
         }
     },
     {
-        label: 'Vue Website',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/RaisedTextDoc.vue b/apps/showcase/doc/splitbutton/RaisedTextDoc.vue
index 2df5f5b8c..c74f82479 100644
--- a/apps/showcase/doc/splitbutton/RaisedTextDoc.vue
+++ b/apps/showcase/doc/splitbutton/RaisedTextDoc.vue
@@ -32,12 +32,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -81,12 +83,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -130,12 +134,14 @@ const items = [
         }
     },
     {
-        label: 'Vue Website',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/RoundedDoc.vue b/apps/showcase/doc/splitbutton/RoundedDoc.vue
index 797c27a73..5b039dcb7 100644
--- a/apps/showcase/doc/splitbutton/RoundedDoc.vue
+++ b/apps/showcase/doc/splitbutton/RoundedDoc.vue
@@ -33,12 +33,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -84,12 +86,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -134,12 +138,14 @@ const items = [
         }
     },
     {
-        label: 'Vue Website',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/SeverityDoc.vue b/apps/showcase/doc/splitbutton/SeverityDoc.vue
index baa0c3f11..bc69f68d7 100644
--- a/apps/showcase/doc/splitbutton/SeverityDoc.vue
+++ b/apps/showcase/doc/splitbutton/SeverityDoc.vue
@@ -33,12 +33,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -84,12 +86,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -134,12 +138,14 @@ const items = [
         }
     },
     {
-        label: 'Vue Website',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/SizesDoc.vue b/apps/showcase/doc/splitbutton/SizesDoc.vue
index 4f163d6db..4e4811fcc 100644
--- a/apps/showcase/doc/splitbutton/SizesDoc.vue
+++ b/apps/showcase/doc/splitbutton/SizesDoc.vue
@@ -17,26 +17,25 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -61,26 +60,25 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -107,28 +105,28 @@ import { useToast } from "primevue/usetoast";
 const toast = useToast();
 
 const items = [
-{
-    label: 'Update',
-    icon: 'pi pi-refresh',
-    command: () => {
-        toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+    {
+        label: 'Update',
+        command: () => {
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        command: () => {
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        command: () => {
+            window.location.href = 'https://vuejs.org/';
+        }
     }
-},
-{
-    label: 'Delete',
-    icon: 'pi pi-times',
-    command: () => {
-        toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-    }
-},
-{
-    label: 'Vue Website',
-    icon: 'pi pi-external-link',
-    command: () => {
-        window.location.href = 'https://vuejs.org/';
-    }
-},
-{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }];
+];
 
 const save = () => {
     toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
diff --git a/apps/showcase/doc/splitbutton/TemplateDoc.vue b/apps/showcase/doc/splitbutton/TemplateDoc.vue
index 1493b44cd..673e1152b 100644
--- a/apps/showcase/doc/splitbutton/TemplateDoc.vue
+++ b/apps/showcase/doc/splitbutton/TemplateDoc.vue
@@ -20,26 +20,25 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -70,26 +69,25 @@ export default {
             items: [
                 {
                     label: 'Update',
-                    icon: 'pi pi-refresh',
                     command: () => {
                         this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
                     }
                 },
                 {
                     label: 'Delete',
-                    icon: 'pi pi-times',
                     command: () => {
                         this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
                     }
                 },
                 {
-                    label: 'Vue Website',
-                    icon: 'pi pi-external-link',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -121,26 +119,25 @@ const toast = useToast();
 const items = [
     {
         label: 'Update',
-        icon: 'pi pi-refresh',
         command: () => {
-            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
         }
     },
     {
         label: 'Delete',
-        icon: 'pi pi-times',
         command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
         }
     },
     {
-        label: 'Vue Website',
-        icon: 'pi pi-external-link',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/splitbutton/TextDoc.vue b/apps/showcase/doc/splitbutton/TextDoc.vue
index 2979f64f0..7f9084033 100644
--- a/apps/showcase/doc/splitbutton/TextDoc.vue
+++ b/apps/showcase/doc/splitbutton/TextDoc.vue
@@ -32,12 +32,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ],
             code: {
                 basic: `
@@ -81,12 +83,14 @@ export default {
                     }
                 },
                 {
-                    label: 'Vue Website',
+                    separator: true
+                },
+                {
+                    label: 'Quit',
                     command: () => {
                         window.location.href = 'https://vuejs.org/';
                     }
-                },
-                { label: 'Upload', to: '/fileupload' }
+                }
             ]
         };
     },
@@ -130,12 +134,14 @@ const items = [
         }
     },
     {
-        label: 'Vue Website',
+        separator: true
+    },
+    {
+        label: 'Quit',
         command: () => {
             window.location.href = 'https://vuejs.org/';
         }
-    },
-    { label: 'Upload', to: '/fileupload' }
+    }
 ];
 
 const save = () => {
diff --git a/apps/showcase/doc/tooltip/AutoHideDoc.vue b/apps/showcase/doc/tooltip/AutoHideDoc.vue
index 134d88567..ab27de8bb 100644
--- a/apps/showcase/doc/tooltip/AutoHideDoc.vue
+++ b/apps/showcase/doc/tooltip/AutoHideDoc.vue
@@ -1,10 +1,10 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Tooltip gets hidden when mouse leaves the target element by default, set <i>autoHide</i> to false to change this behavior.</p>
+        <p>Tooltip gets hidden when mouse leaves the target element by default, set <i>autoHide</i> to false to customize this behavior so that tooltip stays open when the cursor is on the tooltip.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-2">
-        <InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
-        <InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
+        <InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
+        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,22 +15,22 @@ export default {
         return {
             code: {
                 basic: `
-<InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
-<InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
+<InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
+<InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-2">
-        <InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
-        <InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
+        <InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
+        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
     </div>
 </template>
 `,
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-2">
-        <InputText v-tooltip="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
-        <InputText v-tooltip="'Enter your username'" type="text" placeholder="autoHide: true" />
+        <InputText v-tooltip.bottom="{ value: 'Enter your username', autoHide: false }" type="text" placeholder="autoHide: false" />
+        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="autoHide: true" />
     </div>
 </template>
 `
diff --git a/apps/showcase/doc/tree/BasicDoc.vue b/apps/showcase/doc/tree/BasicDoc.vue
index 673ca0726..325bd1d00 100644
--- a/apps/showcase/doc/tree/BasicDoc.vue
+++ b/apps/showcase/doc/tree/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Tree component requires an array of TreeNode objects as its <i>value</i>.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
     </div>
     <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
@@ -21,7 +21,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
@@ -43,7 +43,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
diff --git a/apps/showcase/doc/tree/ControlledDoc.vue b/apps/showcase/doc/tree/ControlledDoc.vue
index 55a4fab7e..dc31eb2db 100644
--- a/apps/showcase/doc/tree/ControlledDoc.vue
+++ b/apps/showcase/doc/tree/ControlledDoc.vue
@@ -5,7 +5,7 @@
             <i>expandedKeys</i> also supports two-way binding with the v-model directive.
         </p>
     </DocSectionText>
-    <div class="card flex flex-col items-center">
+    <div class="card">
         <div class="flex flex-wrap gap-2 mb-6">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
             <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
@@ -33,7 +33,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-col align-items-cente">
+    <div class="card">
         <div class="flex flex-wrap gap-2 mb-6">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
             <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
@@ -81,7 +81,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-col align-items-cente">
+    <div class="card">
         <div class="flex flex-wrap gap-2 mb-6">
             <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
             <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
diff --git a/apps/showcase/doc/tree/EventsDoc.vue b/apps/showcase/doc/tree/EventsDoc.vue
index 253f8f9a6..52517471b 100644
--- a/apps/showcase/doc/tree/EventsDoc.vue
+++ b/apps/showcase/doc/tree/EventsDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>An event is provided for each type of user interaction such as expand, collapse and selection.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree
             v-model:selectionKeys="selectedKey"
             :value="nodes"
@@ -27,12 +27,12 @@ export default {
             selectedKey: null,
             code: {
                 basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false" class="w-full md:w-[30rem]"
+<Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
     @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
             @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
@@ -62,7 +62,7 @@ export default {
             this.$toast.add({ severity: 'info', summary: 'Node Expanded', detail: node.label, life: 3000 });
         },
         onNodeCollapse(node) {
-            this.$toast.add({ severity: 'error', summary: 'Node Collapsed', detail: node.label, life: 3000 });
+            this.$toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
         }
     }
 }
@@ -70,7 +70,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
             @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse" class="w-full md:w-[30rem]"></Tree>
@@ -103,7 +103,7 @@ const onNodeExpand = (node) => {
 };
 
 const onNodeCollapse (node) => {
-    toast.add({ severity: 'error', summary: 'Node Collapsed', detail: node.label, life: 3000 });
+    toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
 };
 <\/script>
 `,
@@ -151,7 +151,7 @@ const onNodeCollapse (node) => {
             this.$toast.add({ severity: 'info', summary: 'Node Expanded', detail: node.label, life: 3000 });
         },
         onNodeCollapse(node) {
-            this.$toast.add({ severity: 'error', summary: 'Node Collapsed', detail: node.label, life: 3000 });
+            this.$toast.add({ severity: 'info', summary: 'Node Collapsed', detail: node.label, life: 3000 });
         }
     }
 };
diff --git a/apps/showcase/doc/tree/TemplateDoc.vue b/apps/showcase/doc/tree/TemplateDoc.vue
index 404b85c66..f89a4f43c 100644
--- a/apps/showcase/doc/tree/TemplateDoc.vue
+++ b/apps/showcase/doc/tree/TemplateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Each node can have a distinct template by matching the <i>type</i> property to the slot name.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree :value="nodes" class="w-full md:w-[30rem]">
             <template #default="slotProps">
                 <b>{{ slotProps.node.label }}</b>
@@ -54,7 +54,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree :value="nodes" class="w-full md:w-[30rem]">
             <template #default="slotProps">
                 <b>{{ slotProps.node.label }}</b>
@@ -99,7 +99,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree :value="nodes" class="w-full md:w-[30rem]">
             <template #default="slotProps">
                 <b>{{ slotProps.node.label }}</b>
diff --git a/apps/showcase/doc/tree/selection/CheckboxDoc.vue b/apps/showcase/doc/tree/selection/CheckboxDoc.vue
index f8474315c..ac69506d0 100644
--- a/apps/showcase/doc/tree/selection/CheckboxDoc.vue
+++ b/apps/showcase/doc/tree/selection/CheckboxDoc.vue
@@ -6,7 +6,7 @@
             selection.
         </p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
     </div>
     <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
@@ -26,7 +26,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
     </div>
@@ -58,7 +58,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" class="w-full md:w-[30rem]"></Tree>
     </div>
diff --git a/apps/showcase/doc/tree/selection/MultipleDoc.vue b/apps/showcase/doc/tree/selection/MultipleDoc.vue
index 764e4c582..e02fd4bc5 100644
--- a/apps/showcase/doc/tree/selection/MultipleDoc.vue
+++ b/apps/showcase/doc/tree/selection/MultipleDoc.vue
@@ -6,12 +6,12 @@
         </p>
         <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
     </DocSectionText>
-    <div class="card flex flex-col items-center justify-center">
+    <div class="card">
         <div class="flex items-center mb-6 gap-2">
             <ToggleSwitch v-model="checked" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-[30rem]" :metaKeySelection="checked"></Tree>
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
     </div>
     <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
 </template>
@@ -27,17 +27,17 @@ export default {
             selectedKey: null,
             code: {
                 basic: `
-<Tree v-model:selectionKeys="selectedKey" :value="nodes" class="w-full md:w-[30rem]"
+<Tree v-model:selectionKeys="selectedKey" :value="nodes"
     selectionMode="multiple" :metaKeySelection="checked"></Tree>
 `,
                 options: `
 <template>
-    <div class="card flex flex-col items-center justify-center">
+    <div class="card">
         <div class="flex items-center mb-6 gap-2">
             <ToggleSwitch v-model="checked" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-[30rem]" :metaKeySelection="checked"></Tree>
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
 
@@ -60,12 +60,12 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-col items-center justify-center">
+    <div class="card">
         <div class="flex items-center mb-6 gap-2">
             <ToggleSwitch v-model="checked" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
-        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" class="w-full md:w-[30rem]" :metaKeySelection="checked"></Tree>
+        <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="checked" class="w-full md:w-[30rem]"></Tree>
     </div>
 </template>
 
diff --git a/apps/showcase/doc/tree/selection/SingleDoc.vue b/apps/showcase/doc/tree/selection/SingleDoc.vue
index 7c3314605..6ebc73094 100644
--- a/apps/showcase/doc/tree/selection/SingleDoc.vue
+++ b/apps/showcase/doc/tree/selection/SingleDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Single node selection is configured by setting <i>selectionMode</i> as <i>single</i> along with <i>selectionKeys</i> property to manage the selection value binding.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card">
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
     </div>
     <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
@@ -21,7 +21,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
     </div>
@@ -53,7 +53,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card">
         <Toast />
         <Tree v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" class="w-full md:w-[30rem]"></Tree>
     </div>
diff --git a/apps/showcase/pages/datatable/index.vue b/apps/showcase/pages/datatable/index.vue
index 34eef58dd..ff4f75433 100755
--- a/apps/showcase/pages/datatable/index.vue
+++ b/apps/showcase/pages/datatable/index.vue
@@ -41,6 +41,7 @@ import ExpandableRowGroupDoc from '@/doc/datatable/rowgroup/ExpandableRowGroupDo
 import RowSpanRowGroupDoc from '@/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue';
 import SubHeaderRowGroupDoc from '@/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue';
 import CheckboxRowSelectionDoc from '@/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue';
+import ColumnRowSelectionDoc from '@/doc/datatable/rowselection/ColumnRowSelectionDoc.vue';
 import MultipleRowsSelectionDoc from '@/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue';
 import RadioButtonRowSelectionDoc from '@/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue';
 import RowSelectEventsDoc from '@/doc/datatable/rowselection/RowSelectEventsDoc.vue';
@@ -181,6 +182,11 @@ export default {
                             label: 'Checkbox',
                             component: CheckboxRowSelectionDoc
                         },
+                        {
+                            id: 'column_row_selection',
+                            label: 'Column',
+                            component: ColumnRowSelectionDoc
+                        },
                         {
                             id: 'row_selection_events',
                             label: 'Events',
diff --git a/apps/showcase/pages/splitbutton/index.vue b/apps/showcase/pages/splitbutton/index.vue
index 153206c5d..143795822 100755
--- a/apps/showcase/pages/splitbutton/index.vue
+++ b/apps/showcase/pages/splitbutton/index.vue
@@ -16,11 +16,13 @@ import BasicDoc from '@/doc/splitbutton/BasicDoc.vue';
 import DisabledDoc from '@/doc/splitbutton/DisabledDoc.vue';
 import IconsDoc from '@/doc/splitbutton/IconsDoc.vue';
 import ImportDoc from '@/doc/splitbutton/ImportDoc.vue';
+import NestedDoc from '@/doc/splitbutton/NestedDoc.vue';
 import OutlinedDoc from '@/doc/splitbutton/OutlinedDoc.vue';
 import RaisedDoc from '@/doc/splitbutton/RaisedDoc.vue';
 import RaisedTextDoc from '@/doc/splitbutton/RaisedTextDoc.vue';
 import RoundedDoc from '@/doc/splitbutton/RoundedDoc.vue';
 import SeverityDoc from '@/doc/splitbutton/SeverityDoc.vue';
+import SizesDoc from '@/doc/splitbutton/SizesDoc.vue';
 import TemplateDoc from '@/doc/splitbutton/TemplateDoc.vue';
 import TextDoc from '@/doc/splitbutton/TextDoc.vue';
 import PTComponent from '@/doc/splitbutton/pt/index.vue';
@@ -45,6 +47,11 @@ export default {
                     label: 'Icons',
                     component: IconsDoc
                 },
+                {
+                    id: 'nested',
+                    label: 'Nested',
+                    component: NestedDoc
+                },
                 {
                     id: 'severity',
                     label: 'Severity',
@@ -80,11 +87,11 @@ export default {
                     label: 'Outlined',
                     component: OutlinedDoc
                 },
-                /*{
+                {
                     id: 'sizes',
                     label: 'Sizes',
                     component: SizesDoc
-                },*/
+                },
                 {
                     id: 'template',
                     label: 'Template',