diff --git a/CHANGELOG.md b/CHANGELOG.md
index d907d515f..b432803bc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,22 @@
 # Changelog
 
+## [3.31.0](https://github.com/primefaces/primevue/tree/3.31.0) (2023-07-25)
+
+**Implemented New Features and Enhancements:**
+
+- Tailwind Theme for Unstyled Mode [\#4205](https://github.com/primefaces/primevue/issues/4205)
+- PT context improvements  [\#4196](https://github.com/primefaces/primevue/issues/4196)
+- Add item parameter to menuitem options for pt property [\#4190](https://github.com/primefaces/primevue/issues/4190)
+
+**Fixed bugs:**
+
+- Bootstrap: Breadcrumb icon fix [\#4195](https://github.com/primefaces/primevue/issues/4195)
+- CascadeSelect unstyled mode defect [\#4192](https://github.com/primefaces/primevue/issues/4192)
+- InputSwitch: pt prop has incorrect type [\#4187](https://github.com/primefaces/primevue/issues/4187)
+- TabView: ID used in aria-controls does not exist on panel content div [\#4181](https://github.com/primefaces/primevue/issues/4181)
+- Dropdown: default optionLabel and default optionValue are null \(but doc say, default to label and value\) [\#4174](https://github.com/primefaces/primevue/issues/4174)
+- Image: Preview not closing on escape click [\#4089](https://github.com/primefaces/primevue/issues/4089)
+
 ## [3.30.2](https://github.com/primefaces/primevue/tree/3.30.2) (2023-07-20)
 
 [Full Changelog](https://github.com/primefaces/primevue/compare/3.30.1...3.30.2)
diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss
index 24186eb9e..26a78bf11 100644
--- a/assets/styles/layout/_doc.scss
+++ b/assets/styles/layout/_doc.scss
@@ -1,10 +1,11 @@
 .doc-tabmenu {
     list-style: none;
     margin: 0 17rem 0 0;
-    padding: 0;
+    padding: 0 0 1px 0;
     display: flex;
     margin-bottom: 2rem;
     border-bottom: 1px solid var(--surface-border);
+    overflow: auto;
 
     li {
         margin-bottom: -1px;
@@ -13,7 +14,7 @@
             background-color: transparent;
             border: 0 none;
             display: block;
-            padding: 1rem 0;
+            padding: 1rem 2rem;
             min-width: 12rem;
             text-align: center;
             color: var(--text-color-secondary);
@@ -25,6 +26,7 @@
             border-bottom: 1px solid transparent;
             border-top-right-radius: var(--border-round);
             border-top-left-radius: var(--border-round);
+            white-space: nowrap;
 
             &:hover {
                 border-bottom-color: var(--text-color);
diff --git a/components/doc/DocComponent.vue b/components/doc/DocComponent.vue
index 3891826ba..a5bf8746c 100644
--- a/components/doc/DocComponent.vue
+++ b/components/doc/DocComponent.vue
@@ -12,8 +12,11 @@
             <li :class="{ 'doc-tabmenu-active': tab === 1 }">
                 <button type="button" @click="tab = 1">API</button>
             </li>
-            <li v-if="ptTabComponent" :class="{ 'doc-tabmenu-active': tab === 2 }">
-                <button type="button" @click="tab = 2">PASS THROUGH</button>
+            <li :class="{ 'doc-tabmenu-active': tab === 2 }">
+                <button type="button" @click="tab = 2">THEMING</button>
+            </li>
+            <li v-if="ptTabComponent" :class="{ 'doc-tabmenu-active': tab === 3 }">
+                <button type="button" @click="tab = 3">PASS THROUGH</button>
             </li>
         </ul>
 
@@ -34,6 +37,10 @@
             </div>
 
             <div v-if="tab === 2" class="doc-tabpanel">
+                <component :is="{ ...themingDocs }" />
+            </div>
+
+            <div v-if="tab === 3" class="doc-tabpanel">
                 <component :is="{ ...ptTabComponent }" />
             </div>
         </div>
@@ -42,14 +49,14 @@
 
 <script>
 export default {
-    props: ['title', 'header', 'description', 'componentDocs', 'apiDocs', 'className', 'ptTabComponent'],
+    props: ['title', 'header', 'description', 'componentDocs', 'apiDocs', 'className', 'ptTabComponent', 'themingDocs'],
     data() {
         return {
             tab: 0
         };
     },
     mounted() {
-        this.tab = this.$route.hash.includes('api') ? 1 : this.$route.hash.includes('pt') ? 2 : 0;
+        this.tab = this.$route.hash.includes('api') ? 1 : this.$route.hash.includes('pt') ? 3 : 0;
     }
 };
 </script>
diff --git a/components/doc/DocSectionCode.vue b/components/doc/DocSectionCode.vue
index 8c1245a4b..d8d436aa6 100644
--- a/components/doc/DocSectionCode.vue
+++ b/components/doc/DocSectionCode.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="relative doc-section-code">
+    <div v-if="!embedded" class="relative doc-section-code">
         <div class="flex surface-card align-items-center justify-content-end absolute z-1" :style="{ right: '.75rem', top: '.75rem', gap: '.75rem' }">
             <template v-if="codeMode !== 'basic' && !hideToggleCode">
                 <Button
@@ -111,6 +111,7 @@
 </code></pre>
         </template>
     </div>
+    <div v-else id="embed"></div>
 </template>
 
 <script>
@@ -154,6 +155,10 @@ export default {
         importCode: {
             type: Boolean,
             default: false
+        },
+        embedded: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -162,6 +167,9 @@ export default {
             codeLang: this.code['options'] ? 'composition' : 'basic'
         };
     },
+    mounted() {
+        this.embedded && useStackBlitz(this.codeLang, this.code['composition'], this.service, this.code.pages, this.dependencies, this.component, this.extFiles, this.embedded);
+    },
     methods: {
         toggleCodeMode(content) {
             this.codeMode = this.codeMode === 'basic' ? content : 'basic';
diff --git a/components/doc/codeeditor/index.js b/components/doc/codeeditor/index.js
index 160047c65..ee3523cae 100644
--- a/components/doc/codeeditor/index.js
+++ b/components/doc/codeeditor/index.js
@@ -28,9 +28,9 @@ const useCodeSandbox = (language, code, service, extPages, dependencies, compone
         .then((data) => window.open(`https://codesandbox.io/s/${data.sandbox_id}`, '_blank'));
 };
 
-const useStackBlitz = (language, code, service, extPages, dependencies, component, extFiles) => {
+const useStackBlitz = (language, code, service, extPages, dependencies, component, extFiles, embedded = false) => {
     const getStackBlitzParameters = (sourceType) => {
-        const { files, dependenciesDemo, sourceFileName } = getVueApp({ code, service, extPages, dependencies, component, extFiles }, sourceType);
+        const { files, dependenciesDemo, sourceFileName } = getVueApp({ code, service, extPages, dependencies, component, extFiles, embedded }, sourceType);
 
         return { files, dependenciesDemo, sourceFileName };
     };
@@ -41,20 +41,28 @@ const useStackBlitz = (language, code, service, extPages, dependencies, componen
 
     Object.entries(stackBlitzParameters.files).forEach(([k, v]) => (files[`${k}`] = typeof v.content === 'object' ? JSON.stringify(v.content, null, 2) : v.content));
 
-    sdk.openProject(
-        {
-            title: 'PrimeVue Demo',
-            template: 'node',
-            description:
-                '**\n PrimeVue is an open source UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.',
-            dependencies: stackBlitzParameters.dependencies,
-            files
-        },
-        {
+    const primevueproject = {
+        title: embedded ? 'PrimeVue Tailwind Demo' : 'PrimeVue Demo',
+        template: 'node',
+        description: embedded
+            ? "This example demonstrates how to style components with Tailwind CSS using PrimeVue's unstyled property. As mentioned in the PrimeVue documentation, components can be styled or have HTML attributes added using a global or inline pass through approach. In this example, we utilize the global PT approach with Tailwind CSS."
+            : '**\n PrimeVue is an open source UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.',
+        dependencies: stackBlitzParameters.dependencies,
+        files
+    };
+
+    if (embedded) {
+        sdk.embedProject('embed', primevueproject, {
+            openFile: 'src/main.js',
+            view: 'default',
+            height: '800px'
+        });
+    } else {
+        sdk.openProject(primevueproject, {
             newWindow: true,
             openFile: [stackBlitzParameters.sourceFileName]
-        }
-    );
+        });
+    }
 };
 
 export { useCodeSandbox, useStackBlitz };
diff --git a/components/doc/codeeditor/templates.js b/components/doc/codeeditor/templates.js
index 5ed910e7b..81697d2a1 100644
--- a/components/doc/codeeditor/templates.js
+++ b/components/doc/codeeditor/templates.js
@@ -2,7 +2,7 @@ import pkg from '../../../package.json';
 import { services } from './services';
 
 const PrimeVue = {
-    version: '^3.30.0',
+    version: '^3.31.0',
     description:
         'PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.'
 };
@@ -15,22 +15,24 @@ const core_dependencies = {
     '@vitejs/plugin-vue': '^4.0.0',
     vite: '^4.0.0',
     primevue: PrimeVue.version || 'latest',
-    primeflex: app_dependencies['primeflex'] || 'latest',
     primeicons: app_dependencies['primeicons'] || 'latest'
 };
 
 // create-vue -> https://github.com/vuejs/create-vue
 const getVueApp = (props = {}, sourceType) => {
     const path = 'src/';
-    const { code: sources, title = 'primevue_demo', description = '', service, extPages, dependencies: deps, component, extFiles } = props;
+    const { code: sources, title = 'primevue_demo', description = '', service, extPages, dependencies: deps, component, extFiles, embedded } = props;
     const dependencies = { ...core_dependencies, ...deps };
 
     const fileExtension = '.vue';
     const mainFileName = 'App';
     const sourceFileName = `${path}${mainFileName}${fileExtension}`;
-    let element = '';
-    let imports = '';
-    let routeFiles = {};
+    let element = '',
+        imports = '',
+        unstyled = '',
+        pvTheme = '',
+        themeSwitchCode = '',
+        routeFiles = {};
 
     sources.routeFiles &&
         Object.entries(sources.routeFiles).forEach(([key, value]) => {
@@ -52,6 +54,33 @@ const getVueApp = (props = {}, sourceType) => {
         element += `app.component('${component}', ${component});`;
     }
 
+    if (embedded) {
+        // main.js
+        unstyled += `, unstyled: true, pt: Tailwind`;
+        imports += `import Tailwind from 'primevue/tailwind';
+import ThemeSwitcher from './components/ThemeSwitcher.vue';`;
+        element += `app.component('ThemeSwitcher', ThemeSwitcher);`;
+
+        // package.json
+        dependencies['tailwindcss'] = '^3.3.2';
+        dependencies['postcss'] = '^8.4.27';
+        dependencies['autoprefixer'] = '^10.4.14';
+
+        // App.vue
+        themeSwitchCode = ''.concat(
+            `<template>
+    <ThemeSwitcher />`,
+            sources.split('<template>')[1]
+        );
+    } else {
+        // main.js
+        pvTheme += `import "primeflex/primeflex.css";
+import "primevue/resources/themes/lara-light-blue/theme.css";`;
+
+        // package.json
+        dependencies['primeflex'] = app_dependencies['primeflex'] || 'latest';
+    }
+
     const files = {
         'package.json': {
             content: {
@@ -102,11 +131,10 @@ export default defineConfig({
 </html>`
         },
         [`${path}main.js`]: {
-            content: `import "primeflex/primeflex.css";
-import "primevue/resources/themes/lara-light-blue/theme.css";
+            content: `${pvTheme}
 import "primevue/resources/primevue.min.css"; /* Deprecated */
 import "primeicons/primeicons.css";
-import "./index.css";
+import "./style.css";
 import "./flags.css";
 
 import { createApp } from "vue";
@@ -213,7 +241,7 @@ ${imports}
 
 const app = createApp(App);
 
-app.use(PrimeVue, { ripple: true });
+app.use(PrimeVue, { ripple: true ${unstyled} });
 app.use(ConfirmationService);
 app.use(ToastService);
 app.use(DialogService);
@@ -318,8 +346,8 @@ ${element}
 app.mount("#app");
 `
         },
-        [`${path}index.css`]: {
-            content: staticStyles.global
+        [`${path}style.css`]: {
+            content: embedded ? tailwindConfig : staticStyles.global
         },
         [`${path}flags.css`]: {
             content: staticStyles.flags
@@ -329,12 +357,12 @@ app.mount("#app");
 import ${mainFileName} from "./${mainFileName}${fileExtension}";
 
 export const router = createRouter({
-history: createWebHistory(),
-routes: [{ path: "/", component: ${mainFileName} }]
+    history: createWebHistory(),
+    routes: [{ path: "/", component: ${mainFileName} }]
 });`
         },
         [`${sourceFileName}`]: {
-            content: sources
+            content: embedded ? themeSwitchCode : sources
         },
         'public/logo.svg': {
             content: `
@@ -386,8 +414,8 @@ routes: [{ path: "/", component: ${mainFileName} }]
             content: `import { createRouter, createWebHistory } from "vue-router";
 ${viewImports}
 export const router = createRouter({
-history: createWebHistory(),
-routes: [ ${routePaths}]
+    history: createWebHistory(),
+    routes: [ ${routePaths}]
 });`
         };
     }
@@ -400,6 +428,55 @@ routes: [ ${routePaths}]
         });
     }
 
+    if (embedded) {
+        files['tailwind.config.js'] = {
+            content: `/** @type {import('tailwindcss').Config} */
+export default {
+    darkMode: 'class',
+    content: [
+        "./index.html",
+        "./src/**/*.{vue,js,ts,jsx,tsx}",
+        "./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}"
+    ],
+    theme: {
+        extend: {}
+    },
+    plugins: []
+}`
+        };
+
+        files['postcss.config.js'] = {
+            content: `module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {}
+    }
+}`
+        };
+
+        files[`${path}components/ThemeSwitcher.vue`] = {
+            content: `<template>
+    <div class="card flex justify-end p-2 mb-4">
+        <button type="button" class="flex border-1 w-2rem h-2rem p-0 align-center justify-center" @click="onThemeToggler">
+            <i :class="\`dark:text-white pi \${iconClass}\`" />
+        </button>
+    </div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+const iconClass = ref('pi-moon');
+
+const onThemeToggler = () => {
+    const root = document.getElementsByTagName('html')[0];
+
+    root.classList.toggle('dark');
+    iconClass.value = iconClass.value==='pi-moon' ? 'pi-sun': 'pi-moon';
+};
+</script>`
+        };
+    }
+
     return { files, dependencies, sourceFileName };
 };
 
@@ -424,7 +501,37 @@ body {
     border-radius: 10px;
     margin-bottom: 1rem;
 }
-    `
+    `,
+    flags: `span.flag{width:44px;height:30px;display:inline-block;}img.flag{width:30px}.flag{background:url(https://primefaces.org/cdn/primevue/images/flag/flags_responsive.png) no-repeat;background-size:100%;vertical-align: middle;}.flag-ad{background-position:0 .413223%}.flag-ae{background-position:0 .826446%}.flag-af{background-position:0 1.239669%}.flag-ag{background-position:0 1.652893%}.flag-ai{background-position:0 2.066116%}.flag-al{background-position:0 2.479339%}.flag-am{background-position:0 2.892562%}.flag-an{background-position:0 3.305785%}.flag-ao{background-position:0 3.719008%}.flag-aq{background-position:0 4.132231%}.flag-ar{background-position:0 4.545455%}.flag-as{background-position:0 4.958678%}.flag-at{background-position:0 5.371901%}.flag-au{background-position:0 5.785124%}.flag-aw{background-position:0 6.198347%}.flag-az{background-position:0 6.61157%}.flag-ba{background-position:0 7.024793%}.flag-bb{background-position:0 7.438017%}.flag-bd{background-position:0 7.85124%}.flag-be{background-position:0 8.264463%}.flag-bf{background-position:0 8.677686%}.flag-bg{background-position:0 9.090909%}.flag-bh{background-position:0 9.504132%}.flag-bi{background-position:0 9.917355%}.flag-bj{background-position:0 10.330579%}.flag-bm{background-position:0 10.743802%}.flag-bn{background-position:0 11.157025%}.flag-bo{background-position:0 11.570248%}.flag-br{background-position:0 11.983471%}.flag-bs{background-position:0 12.396694%}.flag-bt{background-position:0 12.809917%}.flag-bv{background-position:0 13.22314%}.flag-bw{background-position:0 13.636364%}.flag-by{background-position:0 14.049587%}.flag-bz{background-position:0 14.46281%}.flag-ca{background-position:0 14.876033%}.flag-cc{background-position:0 15.289256%}.flag-cd{background-position:0 15.702479%}.flag-cf{background-position:0 16.115702%}.flag-cg{background-position:0 16.528926%}.flag-ch{background-position:0 16.942149%}.flag-ci{background-position:0 17.355372%}.flag-ck{background-position:0 17.768595%}.flag-cl{background-position:0 18.181818%}.flag-cm{background-position:0 18.595041%}.flag-cn{background-position:0 19.008264%}.flag-co{background-position:0 19.421488%}.flag-cr{background-position:0 19.834711%}.flag-cu{background-position:0 20.247934%}.flag-cv{background-position:0 20.661157%}.flag-cx{background-position:0 21.07438%}.flag-cy{background-position:0 21.487603%}.flag-cz{background-position:0 21.900826%}.flag-de{background-position:0 22.31405%}.flag-dj{background-position:0 22.727273%}.flag-dk{background-position:0 23.140496%}.flag-dm{background-position:0 23.553719%}.flag-do{background-position:0 23.966942%}.flag-dz{background-position:0 24.380165%}.flag-ec{background-position:0 24.793388%}.flag-ee{background-position:0 25.206612%}.flag-eg{background-position:0 25.619835%}.flag-eh{background-position:0 26.033058%}.flag-er{background-position:0 26.446281%}.flag-es{background-position:0 26.859504%}.flag-et{background-position:0 27.272727%}.flag-fi{background-position:0 27.68595%}.flag-fj{background-position:0 28.099174%}.flag-fk{background-position:0 28.512397%}.flag-fm{background-position:0 28.92562%}.flag-fo{background-position:0 29.338843%}.flag-fr{background-position:0 29.752066%}.flag-ga{background-position:0 30.165289%}.flag-gd{background-position:0 30.578512%}.flag-ge{background-position:0 30.991736%}.flag-gf{background-position:0 31.404959%}.flag-gh{background-position:0 31.818182%}.flag-gi{background-position:0 32.231405%}.flag-gl{background-position:0 32.644628%}.flag-gm{background-position:0 33.057851%}.flag-gn{background-position:0 33.471074%}.flag-gp{background-position:0 33.884298%}.flag-gq{background-position:0 34.297521%}.flag-gr{background-position:0 34.710744%}.flag-gs{background-position:0 35.123967%}.flag-gt{background-position:0 35.53719%}.flag-gu{background-position:0 35.950413%}.flag-gw{background-position:0 36.363636%}.flag-gy{background-position:0 36.77686%}.flag-hk{background-position:0 37.190083%}.flag-hm{background-position:0 37.603306%}.flag-hn{background-position:0 38.016529%}.flag-hr{background-position:0 38.429752%}.flag-ht{background-position:0 38.842975%}.flag-hu{background-position:0 39.256198%}.flag-id{background-position:0 39.669421%}.flag-ie{background-position:0 40.082645%}.flag-il{background-position:0 40.495868%}.flag-in{background-position:0 40.909091%}.flag-io{background-position:0 41.322314%}.flag-iq{background-position:0 41.735537%}.flag-ir{background-position:0 42.14876%}.flag-is{background-position:0 42.561983%}.flag-it{background-position:0 42.975207%}.flag-jm{background-position:0 43.38843%}.flag-jo{background-position:0 43.801653%}.flag-jp{background-position:0 44.214876%}.flag-ke{background-position:0 44.628099%}.flag-kg{background-position:0 45.041322%}.flag-kh{background-position:0 45.454545%}.flag-ki{background-position:0 45.867769%}.flag-km{background-position:0 46.280992%}.flag-kn{background-position:0 46.694215%}.flag-kp{background-position:0 47.107438%}.flag-kr{background-position:0 47.520661%}.flag-kw{background-position:0 47.933884%}.flag-ky{background-position:0 48.347107%}.flag-kz{background-position:0 48.760331%}.flag-la{background-position:0 49.173554%}.flag-lb{background-position:0 49.586777%}.flag-lc{background-position:0 50%}.flag-li{background-position:0 50.413223%}.flag-lk{background-position:0 50.826446%}.flag-lr{background-position:0 51.239669%}.flag-ls{background-position:0 51.652893%}.flag-lt{background-position:0 52.066116%}.flag-lu{background-position:0 52.479339%}.flag-lv{background-position:0 52.892562%}.flag-ly{background-position:0 53.305785%}.flag-ma{background-position:0 53.719008%}.flag-mc{background-position:0 54.132231%}.flag-md{background-position:0 54.545455%}.flag-me{background-position:0 54.958678%}.flag-mg{background-position:0 55.371901%}.flag-mh{background-position:0 55.785124%}.flag-mk{background-position:0 56.198347%}.flag-ml{background-position:0 56.61157%}.flag-mm{background-position:0 57.024793%}.flag-mn{background-position:0 57.438017%}.flag-mo{background-position:0 57.85124%}.flag-mp{background-position:0 58.264463%}.flag-mq{background-position:0 58.677686%}.flag-mr{background-position:0 59.090909%}.flag-ms{background-position:0 59.504132%}.flag-mt{background-position:0 59.917355%}.flag-mu{background-position:0 60.330579%}.flag-mv{background-position:0 60.743802%}.flag-mw{background-position:0 61.157025%}.flag-mx{background-position:0 61.570248%}.flag-my{background-position:0 61.983471%}.flag-mz{background-position:0 62.396694%}.flag-na{background-position:0 62.809917%}.flag-nc{background-position:0 63.22314%}.flag-ne{background-position:0 63.636364%}.flag-nf{background-position:0 64.049587%}.flag-ng{background-position:0 64.46281%}.flag-ni{background-position:0 64.876033%}.flag-nl{background-position:0 65.289256%}.flag-no{background-position:0 65.702479%}.flag-np{background-position:0 66.115702%}.flag-nr{background-position:0 66.528926%}.flag-nu{background-position:0 66.942149%}.flag-nz{background-position:0 67.355372%}.flag-om{background-position:0 67.768595%}.flag-pa{background-position:0 68.181818%}.flag-pe{background-position:0 68.595041%}.flag-pf{background-position:0 69.008264%}.flag-pg{background-position:0 69.421488%}.flag-ph{background-position:0 69.834711%}.flag-pk{background-position:0 70.247934%}.flag-pl{background-position:0 70.661157%}.flag-pm{background-position:0 71.07438%}.flag-pn{background-position:0 71.487603%}.flag-pr{background-position:0 71.900826%}.flag-pt{background-position:0 72.31405%}.flag-pw{background-position:0 72.727273%}.flag-py{background-position:0 73.140496%}.flag-qa{background-position:0 73.553719%}.flag-re{background-position:0 73.966942%}.flag-ro{background-position:0 74.380165%}.flag-rs{background-position:0 74.793388%}.flag-ru{background-position:0 75.206612%}.flag-rw{background-position:0 75.619835%}.flag-sa{background-position:0 76.033058%}.flag-sb{background-position:0 76.446281%}.flag-sc{background-position:0 76.859504%}.flag-sd{background-position:0 77.272727%}.flag-se{background-position:0 77.68595%}.flag-sg{background-position:0 78.099174%}.flag-sh{background-position:0 78.512397%}.flag-si{background-position:0 78.92562%}.flag-sj{background-position:0 79.338843%}.flag-sk{background-position:0 79.752066%}.flag-sl{background-position:0 80.165289%}.flag-sm{background-position:0 80.578512%}.flag-sn{background-position:0 80.991736%}.flag-so{background-position:0 81.404959%}.flag-sr{background-position:0 81.818182%}.flag-ss{background-position:0 82.231405%}.flag-st{background-position:0 82.644628%}.flag-sv{background-position:0 83.057851%}.flag-sy{background-position:0 83.471074%}.flag-sz{background-position:0 83.884298%}.flag-tc{background-position:0 84.297521%}.flag-td{background-position:0 84.710744%}.flag-tf{background-position:0 85.123967%}.flag-tg{background-position:0 85.53719%}.flag-th{background-position:0 85.950413%}.flag-tj{background-position:0 86.363636%}.flag-tk{background-position:0 86.77686%}.flag-tl{background-position:0 87.190083%}.flag-tm{background-position:0 87.603306%}.flag-tn{background-position:0 88.016529%}.flag-to{background-position:0 88.429752%}.flag-tp{background-position:0 88.842975%}.flag-tr{background-position:0 89.256198%}.flag-tt{background-position:0 89.669421%}.flag-tv{background-position:0 90.082645%}.flag-tw{background-position:0 90.495868%}.flag-ty{background-position:0 90.909091%}.flag-tz{background-position:0 91.322314%}.flag-ua{background-position:0 91.735537%}.flag-ug{background-position:0 92.14876%}.flag-gb,.flag-uk{background-position:0 92.561983%}.flag-um{background-position:0 92.975207%}.flag-us{background-position:0 93.38843%}.flag-uy{background-position:0 93.801653%}.flag-uz{background-position:0 94.214876%}.flag-va{background-position:0 94.628099%}.flag-vc{background-position:0 95.041322%}.flag-ve{background-position:0 95.454545%}.flag-vg{background-position:0 95.867769%}.flag-vi{background-position:0 96.280992%}.flag-vn{background-position:0 96.694215%}.flag-vu{background-position:0 97.107438%}.flag-wf{background-position:0 97.520661%}.flag-ws{background-position:0 97.933884%}.flag-ye{background-position:0 98.347107%}.flag-za{background-position:0 98.760331%}.flag-zm{background-position:0 99.173554%}.flag-zr{background-position:0 99.586777%}.flag-zw{background-position:0 100%}`
 };
 
+const tailwindConfig = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+    font-size: 14px;
+}
+
+body {
+    background: #eff3f8;
+    padding: 1rem;
+}
+
+.card {
+    background: #ffffff;
+    padding: 2rem;
+    border-radius: 10px;
+    margin-bottom: 1rem;
+}
+
+html.dark body {
+    background: #040d19;
+}
+
+html.dark .card {
+    background: #071426;
+}
+`;
+
 export { getVueApp };
diff --git a/components/lib/dock/Dock.d.ts b/components/lib/dock/Dock.d.ts
index 289da96f8..ee0d7702c 100644
--- a/components/lib/dock/Dock.d.ts
+++ b/components/lib/dock/Dock.d.ts
@@ -104,6 +104,10 @@ export interface DockContext {
      * Current index of the menuitem.
      */
     index: number;
+    /**
+     * Current menuitem
+     */
+    item: any;
     /**
      * Current active state of menuitem as a boolean.
      * @defaultValue false
diff --git a/components/lib/dock/Dock.vue b/components/lib/dock/Dock.vue
index 2c3b8971d..9bad3baef 100644
--- a/components/lib/dock/Dock.vue
+++ b/components/lib/dock/Dock.vue
@@ -1,6 +1,18 @@
 <template>
     <div :class="cx('root')" :style="style" v-bind="ptm('root')" data-pc-name="dock">
-        <DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex" :pt="pt"></DockSub>
+        <DockSub
+            :model="model"
+            :templates="$slots"
+            :exact="exact"
+            :tooltipOptions="tooltipOptions"
+            :position="position"
+            :menuId="menuId"
+            :aria-label="ariaLabel"
+            :aria-labelledby="ariaLabelledby"
+            :tabindex="tabindex"
+            :pt="pt"
+            :unstyled="unstyled"
+        ></DockSub>
     </div>
 </template>
 
diff --git a/components/lib/dock/DockSub.vue b/components/lib/dock/DockSub.vue
index 96a9739ba..989264a51 100644
--- a/components/lib/dock/DockSub.vue
+++ b/components/lib/dock/DockSub.vue
@@ -25,11 +25,11 @@
                     :aria-disabled="disabled(processedItem)"
                     @click="onItemClick($event, processedItem)"
                     @mouseenter="onItemMouseEnter(index)"
-                    v-bind="getPTOptions('menuitem', index)"
+                    v-bind="getPTOptions('menuitem', processedItem, index)"
                     :data-p-focused="isItemActive(getItemId(index))"
                     :data-p-disabled="disabled(processedItem) || false"
                 >
-                    <div :class="cx('content')" v-bind="getPTOptions('content', index)">
+                    <div :class="cx('content')" v-bind="getPTOptions('content', processedItem, index)">
                         <template v-if="!templates['item']">
                             <router-link v-if="processedItem.to && !disabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="processedItem.to" custom>
                                 <a
@@ -40,10 +40,10 @@
                                     tabindex="-1"
                                     aria-hidden="true"
                                     @click="onItemActionClick($event, processedItem, navigate)"
-                                    v-bind="getPTOptions('action', index)"
+                                    v-bind="getPTOptions('action', processedItem, index)"
                                 >
                                     <template v-if="!templates['icon']">
-                                        <span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', index)"></span>
+                                        <span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', processedItem, index)"></span>
                                     </template>
                                     <component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
                                 </a>
@@ -56,10 +56,10 @@
                                 :target="processedItem.target"
                                 tabindex="-1"
                                 aria-hidden="true"
-                                v-bind="getPTOptions('action', index)"
+                                v-bind="getPTOptions('action', processedItem, index)"
                             >
                                 <template v-if="!templates['icon']">
-                                    <span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', index)"></span>
+                                    <span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', processedItem, index)"></span>
                                 </template>
                                 <component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
                             </a>
@@ -141,10 +141,11 @@ export default {
         getItemProp(processedItem, name) {
             return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
         },
-        getPTOptions(key, index) {
+        getPTOptions(key, item, index) {
             return this.ptm(key, {
                 context: {
                     index,
+                    item,
                     active: this.isItemActive(this.getItemId(index))
                 }
             });
diff --git a/components/lib/inputmask/InputMask.d.ts b/components/lib/inputmask/InputMask.d.ts
index 17933634d..d608e29bd 100755
--- a/components/lib/inputmask/InputMask.d.ts
+++ b/components/lib/inputmask/InputMask.d.ts
@@ -10,7 +10,16 @@
 import { ComponentHooks } from '../basecomponent';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export declare type InputMaskPassThroughOptionType = InputMaskPassThroughAttributes | null | undefined;
+export declare type InputMaskPassThroughOptionType = InputMaskPassThroughAttributes | ((options: InputMaskPassThroughMethodOptions) => InputMaskPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputMaskPassThroughMethodOptions {
+    instance: any;
+    props: InputMaskProps;
+    context: InputMaskContext;
+}
 
 /**
  * Custom passthrough(pt) options.
@@ -35,6 +44,22 @@ export interface InputMaskPassThroughAttributes {
     [key: string]: any;
 }
 
+/**
+ * Defines current options in InputMask component.
+ */
+export interface InputMaskContext {
+    /**
+     * Current filled state of the component as a boolean.
+     * @defaultValue false
+     */
+    filled: boolean;
+    /**
+     * Current disabled state of the component as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in InputMask component.
  */
@@ -79,6 +104,9 @@ export interface InputMaskProps {
     unstyled?: boolean;
 }
 
+/**
+ * Defines valid slots in InputMask component.
+ */
 export interface InputMaskSlots {}
 
 /**
diff --git a/components/lib/inputmask/InputMask.vue b/components/lib/inputmask/InputMask.vue
index 8080d745c..80e43c6e2 100755
--- a/components/lib/inputmask/InputMask.vue
+++ b/components/lib/inputmask/InputMask.vue
@@ -1,5 +1,5 @@
 <template>
-    <input :class="cx('root')" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptm('root')" data-pc-name="inputmask" />
+    <input :class="cx('root')" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptm('root', ptmParams)" data-pc-name="inputmask" />
 </template>
 
 <script>
@@ -496,6 +496,14 @@ export default {
     computed: {
         filled() {
             return this.modelValue != null && this.modelValue.toString().length > 0;
+        },
+        ptmParams() {
+            return {
+                context: {
+                    filled: this.filled,
+                    disabled: this.$attrs.disabled || this.$attrs.disabled === ''
+                }
+            };
         }
     }
 };
diff --git a/components/lib/megamenu/MegaMenu.d.ts b/components/lib/megamenu/MegaMenu.d.ts
index 248b41f06..05d9a8539 100755
--- a/components/lib/megamenu/MegaMenu.d.ts
+++ b/components/lib/megamenu/MegaMenu.d.ts
@@ -154,6 +154,14 @@ export interface MegaMenuState {
  * Defines current options in MegaMenu component.
  */
 export interface MegaMenuContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
+    /**
+     * Current index of the menuitem.
+     */
+    index: number;
     /**
      * Current active state of menuitem as a boolean.
      * @defaultValue false
diff --git a/components/lib/megamenu/MegaMenuSub.vue b/components/lib/megamenu/MegaMenuSub.vue
index d972626b1..12180acfd 100644
--- a/components/lib/megamenu/MegaMenuSub.vue
+++ b/components/lib/megamenu/MegaMenuSub.vue
@@ -15,27 +15,27 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
-                v-bind="getPTOptions(processedItem, 'menuitem')"
+                v-bind="getPTOptions(processedItem, index, 'menuitem')"
                 :data-p-highlight="isItemActive(processedItem)"
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, index, 'action')">
                                 <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                                <span :class="cx('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
+                                <span :class="cx('text')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
                             <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                            <span :class="cx('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
+                            <span :class="cx('text')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
                             <template v-if="isItemGroup(processedItem)">
-                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
-                                <component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
+                                <component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
                             </template>
                         </a>
                     </template>
@@ -58,6 +58,7 @@
                                 :exact="exact"
                                 :level="level + 1"
                                 :pt="pt"
+                                :unstyled="unstyled"
                                 @item-click="$emit('item-click', $event)"
                                 @item-mouseenter="$emit('item-mouseenter', $event)"
                             />
@@ -150,9 +151,11 @@ export default {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
-        getPTOptions(processedItem, key) {
+        getPTOptions(processedItem, index, key) {
             return this.ptm(key, {
                 context: {
+                    item: processedItem,
+                    index,
                     active: this.isItemActive(processedItem),
                     focused: this.isItemFocused(processedItem)
                 }
diff --git a/components/lib/menu/Menu.d.ts b/components/lib/menu/Menu.d.ts
index f2c997dfe..871456471 100755
--- a/components/lib/menu/Menu.d.ts
+++ b/components/lib/menu/Menu.d.ts
@@ -119,6 +119,14 @@ export interface MenuState {
  * Defines current options in Menu component.
  */
 export interface MenuContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
+    /**
+     * Current index of the menuitem.
+     */
+    index: number;
     /**
      * Current focused state of menuitem as a boolean.
      * @defaultValue false
diff --git a/components/lib/menu/Menu.vue b/components/lib/menu/Menu.vue
index 8d57cdf0d..bd23b71b9 100644
--- a/components/lib/menu/Menu.vue
+++ b/components/lib/menu/Menu.vue
@@ -30,7 +30,7 @@
                             </template>
                         </template>
                         <li v-else-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="[cx('separator'), item.class]" :style="item.style" role="separator" v-bind="ptm('separator')"></li>
-                        <PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" />
+                        <PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :index="i" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" />
                     </template>
                 </ul>
                 <div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
diff --git a/components/lib/menu/Menuitem.vue b/components/lib/menu/Menuitem.vue
index 241f6958d..cd355c357 100644
--- a/components/lib/menu/Menuitem.vue
+++ b/components/lib/menu/Menuitem.vue
@@ -47,7 +47,8 @@ export default {
         templates: null,
         exact: null,
         id: null,
-        focusedOptionId: null
+        focusedOptionId: null,
+        index: null
     },
     methods: {
         getItemProp(processedItem, name) {
@@ -56,6 +57,8 @@ export default {
         getPTOptions(key) {
             return this.ptm(key, {
                 context: {
+                    item: this.item,
+                    index: this.index,
                     focused: this.isItemFocused()
                 }
             });
diff --git a/components/lib/menubar/Menubar.d.ts b/components/lib/menubar/Menubar.d.ts
index abb5a2ef7..4f5ac4c1b 100755
--- a/components/lib/menubar/Menubar.d.ts
+++ b/components/lib/menubar/Menubar.d.ts
@@ -151,6 +151,14 @@ export interface MenubarState {
  * Defines current options in Menubar component.
  */
 export interface MenubarContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
+    /**
+     * Current index of the menuitem.
+     */
+    index: number;
     /**
      * Current active state of menuitem as a boolean.
      * @defaultValue false
diff --git a/components/lib/menubar/MenubarSub.vue b/components/lib/menubar/MenubarSub.vue
index 76dc2d737..f2a08d6d8 100755
--- a/components/lib/menubar/MenubarSub.vue
+++ b/components/lib/menubar/MenubarSub.vue
@@ -14,27 +14,27 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
-                v-bind="getPTOptions(processedItem, 'menuitem')"
+                v-bind="getPTOptions(processedItem, index, 'menuitem')"
                 :data-p-highlight="isItemActive(processedItem)"
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, index, 'action')">
                                 <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
+                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
                             <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                            <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
+                            <span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
                             <template v-if="getItemProp(processedItem, 'items')">
                                 <component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
-                                <component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
                             </template>
                         </a>
                     </template>
@@ -53,6 +53,7 @@
                     :exact="exact"
                     :level="level + 1"
                     :pt="pt"
+                    :unstyled="unstyled"
                     @item-click="$emit('item-click', $event)"
                     @item-mouseenter="$emit('item-mouseenter', $event)"
                 />
@@ -137,9 +138,11 @@ export default {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
-        getPTOptions(processedItem, key) {
+        getPTOptions(processedItem, index, key) {
             return this.ptm(key, {
                 context: {
+                    item: processedItem,
+                    index,
                     active: this.isItemActive(processedItem),
                     focused: this.isItemFocused(processedItem)
                 }
diff --git a/components/lib/panelmenu/PanelMenu.d.ts b/components/lib/panelmenu/PanelMenu.d.ts
index 00629c012..bb77806a0 100755
--- a/components/lib/panelmenu/PanelMenu.d.ts
+++ b/components/lib/panelmenu/PanelMenu.d.ts
@@ -134,6 +134,10 @@ export interface PanelMenuState {
  * Defines current options in PanelMenu component.
  */
 export interface PanelMenuContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
     /**
      * Index of the menuitem.
      */
diff --git a/components/lib/panelmenu/PanelMenuSub.vue b/components/lib/panelmenu/PanelMenuSub.vue
index 8e9abff6c..36289091b 100755
--- a/components/lib/panelmenu/PanelMenuSub.vue
+++ b/components/lib/panelmenu/PanelMenuSub.vue
@@ -130,6 +130,7 @@ export default {
         getPTOptions(key, processedItem, index) {
             return this.ptm(key, {
                 context: {
+                    item: processedItem,
                     index,
                     active: this.isItemActive(processedItem),
                     focused: this.isItemFocused(processedItem)
diff --git a/components/lib/speeddial/SpeedDial.d.ts b/components/lib/speeddial/SpeedDial.d.ts
index 91248b323..0fbe2516d 100644
--- a/components/lib/speeddial/SpeedDial.d.ts
+++ b/components/lib/speeddial/SpeedDial.d.ts
@@ -112,6 +112,11 @@ export interface SpeedDialContext {
      * @defaultValue false
      */
     active: boolean;
+    /**
+     * Current hidden state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    hidden: boolean;
 }
 
 /**
diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue
index f895ba05d..95e682e09 100644
--- a/components/lib/speeddial/SpeedDial.vue
+++ b/components/lib/speeddial/SpeedDial.vue
@@ -111,7 +111,8 @@ export default {
         getPTOptions(id, key) {
             return this.ptm(key, {
                 context: {
-                    active: this.isItemActive(id)
+                    active: this.isItemActive(id),
+                    hidden: !this.d_visible
                 }
             });
         },
diff --git a/components/lib/splitterpanel/SplitterPanel.d.ts b/components/lib/splitterpanel/SplitterPanel.d.ts
index bd3476113..0bdc308aa 100644
--- a/components/lib/splitterpanel/SplitterPanel.d.ts
+++ b/components/lib/splitterpanel/SplitterPanel.d.ts
@@ -19,6 +19,7 @@ export declare type SplitterPanelPassThroughOptionType = SplitterPanelPassThroug
 export interface SplitterPanelPassThroughMethodOptions {
     instance: any;
     props: SplitterPanelProps;
+    context: SplitterPanelContext;
 }
 
 /**
@@ -44,6 +45,16 @@ export interface SplitterPanelPassThroughAttributes {
     [key: string]: any;
 }
 
+/**
+ * Defines options in SplitterPanel component.
+ */
+export interface SplitterPanelContext {
+    /**
+     * Current nested state of the panel.
+     */
+    nested?: boolean;
+}
+
 /**
  * Defines valid properties in SplitterPanel component.
  */
diff --git a/components/lib/splitterpanel/SplitterPanel.vue b/components/lib/splitterpanel/SplitterPanel.vue
index cd8be8700..e970c8c84 100644
--- a/components/lib/splitterpanel/SplitterPanel.vue
+++ b/components/lib/splitterpanel/SplitterPanel.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="cx('root')" v-bind="ptm('root')" data-pc-name="splitterpanel">
+    <div ref="container" :class="cx('root')" v-bind="ptm('root', getPTOptions)" data-pc-name="splitterpanel">
         <slot></slot>
     </div>
 </template>
@@ -15,6 +15,13 @@ export default {
             return this.$slots.default().some((child) => {
                 return child.type.name === 'Splitter';
             });
+        },
+        getPTOptions() {
+            return {
+                context: {
+                    nested: this.isNested
+                }
+            };
         }
     }
 };
diff --git a/components/lib/steps/Steps.d.ts b/components/lib/steps/Steps.d.ts
index 9c5461334..87e7c8d3b 100755
--- a/components/lib/steps/Steps.d.ts
+++ b/components/lib/steps/Steps.d.ts
@@ -70,6 +70,10 @@ export interface StepsPassThroughAttributes {
  * Defines current options in Steps component.
  */
 export interface StepsContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
     /**
      * Index of the menuitem.
      */
diff --git a/components/lib/steps/Steps.vue b/components/lib/steps/Steps.vue
index fcdac9553..c32c160d3 100755
--- a/components/lib/steps/Steps.vue
+++ b/components/lib/steps/Steps.vue
@@ -46,6 +46,7 @@ export default {
         getPTOptions(key, item, index) {
             return this.ptm(key, {
                 context: {
+                    item,
                     index,
                     active: this.isActive(item),
                     disabled: this.isItemDisabled(item)
diff --git a/components/lib/tabmenu/TabMenu.d.ts b/components/lib/tabmenu/TabMenu.d.ts
index 76259c790..e109da770 100755
--- a/components/lib/tabmenu/TabMenu.d.ts
+++ b/components/lib/tabmenu/TabMenu.d.ts
@@ -86,6 +86,10 @@ export interface TabMenuState {
  * Defines current options in TabMenu component.
  */
 export interface TabMenuContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
     /**
      * Index of the menuitem
      */
diff --git a/components/lib/tabmenu/TabMenu.vue b/components/lib/tabmenu/TabMenu.vue
index b3bb13d26..7709e4db4 100755
--- a/components/lib/tabmenu/TabMenu.vue
+++ b/components/lib/tabmenu/TabMenu.vue
@@ -9,7 +9,7 @@
                         :class="[cx('menuitem', { item, isActive, isExactActive }), item.class]"
                         :style="item.style"
                         role="presentation"
-                        v-bind="getPTOptions('menuitem', i)"
+                        v-bind="getPTOptions('menuitem', item, i)"
                         :data-p-highlight="exact ? isExactActive : isActive"
                         :data-p-disabled="disabled(item)"
                     >
@@ -25,11 +25,11 @@
                                 :tabindex="-1"
                                 @click="onItemClick($event, item, i, navigate)"
                                 @keydown="onKeydownItem($event, item, i, navigate)"
-                                v-bind="getPTOptions('action', i)"
+                                v-bind="getPTOptions('action', item, i)"
                             >
                                 <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
-                                <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', i)" />
-                                <span :class="cx('label')" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
+                                <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', item, i)" />
+                                <span :class="cx('label')" v-bind="getPTOptions('label', item, i)">{{ label(item) }}</span>
                             </a>
                         </template>
                         <component v-else :is="$slots.item" :item="item" :index="i"></component>
@@ -42,15 +42,15 @@
                     role="presentation"
                     @click="onItemClick($event, item, i)"
                     @keydown="onKeydownItem($event, item, i)"
-                    v-bind="getPTOptions('menuitem', i)"
+                    v-bind="getPTOptions('menuitem', item, i)"
                     :data-p-highlight="d_activeIndex === i"
                     :data-p-disabled="disabled(item)"
                 >
                     <template v-if="!$slots.item">
-                        <a ref="tabLink" v-ripple role="menuitem" :href="item.url" :class="cx('action')" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="-1" v-bind="getPTOptions('action', i)">
+                        <a ref="tabLink" v-ripple role="menuitem" :href="item.url" :class="cx('action')" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="-1" v-bind="getPTOptions('action', item, i)">
                             <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
-                            <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', i)" />
-                            <span :class="cx('label')" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
+                            <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', item, i)" />
+                            <span :class="cx('label')" v-bind="getPTOptions('label', item, i)">{{ label(item) }}</span>
                         </a>
                     </template>
                     <component v-else :is="$slots.item" :item="item" :index="i"></component>
@@ -98,9 +98,10 @@ export default {
         clearTimeout(this.timeout);
     },
     methods: {
-        getPTOptions(key, index) {
+        getPTOptions(key, item, index) {
             return this.ptm(key, {
                 context: {
+                    item,
                     index
                 }
             });
diff --git a/components/lib/tailwind/Tailwind.d.ts b/components/lib/tailwind/Tailwind.d.ts
new file mode 100644
index 000000000..943112fec
--- /dev/null
+++ b/components/lib/tailwind/Tailwind.d.ts
@@ -0,0 +1,5 @@
+import { PrimeVuePTOptions } from '../config';
+
+interface Tailwind extends PrimeVuePTOptions {}
+
+export default Tailwind;
diff --git a/components/lib/tailwind/Tailwind.js b/components/lib/tailwind/Tailwind.js
new file mode 100644
index 000000000..f8a1a6d69
--- /dev/null
+++ b/components/lib/tailwind/Tailwind.js
@@ -0,0 +1,3150 @@
+export default {
+    directives: {
+        ripple: {
+            root: {
+                class: ['block absolute bg-white bg-opacity-50 rounded-full transform scale-0 pointer-events-none']
+            }
+        }
+    },
+    //PANELS
+    panel: {
+        header: ({ props }) => ({
+            class: [
+                'flex items-center justify-between', // flex and alignments
+                'border border-gray-300 bg-gray-100 text-gray-700 rounded-tl-lg rounded-tr-lg', // borders and colors
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80', // Dark mode
+                { 'p-5': !props.toggleable, 'py-3 px-5': props.toggleable } // condition
+            ]
+        }),
+        title: {
+            class: ['leading-none font-bold']
+        },
+        toggler: {
+            class: [
+                'inline-flex items-center justify-center overflow-hidden relative no-underline', // alignments
+                'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out', // widths, borders, and transitions
+                'hover:text-gray-900 hover:border-transparent hover:bg-gray-200 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // hover
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]' // focus
+            ]
+        },
+        togglerIcon: {
+            class: ['inline-block']
+        },
+        content: {
+            class: [
+                'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 last:rounded-br-lg last:rounded-bl-lg',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
+            ] // padding, borders, and colors
+        }
+    },
+    accordion: {
+        root: {
+            class: ['mb-1']
+        },
+        tab: {
+            header: ({ props }) => ({
+                class: [
+                    { 'select-none pointer-events-none cursor-default opacity-60': props?.disabled } // Condition
+                ]
+            }),
+            headerAction: ({ tab }) => ({
+                class: [
+                    'flex items-center cursor-pointer relative no-underline select-none', // Alignments
+                    'p-5 transition duration-200 ease-in-out rounded-t-md font-bold transition-shadow duration-200', // Padding and transition
+                    'border border-gray-300 bg-gray-100 text-gray-600', // Borders and colors
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Dark mode
+                    'hover:border-gray-300 hover:bg-gray-200 hover:text-gray-800', // Hover
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus
+                    { 'rounded-br-md rounded-bl-md': !tab.context.active, 'rounded-br-0 rounded-bl-0 text-gray-800': tab.context.active } // Condition
+                ]
+            }),
+            headerIcon: {
+                class: ['inline-block mr-2']
+            },
+            headerTitle: {
+                class: ['leading-none']
+            },
+            content: {
+                class: [
+                    'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 rounded-tl-none rounded-tr-none rounded-br-lg rounded-bl-lg',
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
+                ]
+            }
+        }
+    },
+    card: {
+        root: {
+            class: [
+                'bg-white text-gray-700 shadow-md rounded-md', // Background, text color, box shadow, and border radius.
+                'dark:bg-gray-900 dark:text-white ' //dark
+            ]
+        },
+        body: {
+            class: 'p-5' // Padding.
+        },
+        title: {
+            class: 'text-2xl font-bold mb-2' // Font size, font weight, and margin bottom.
+        },
+        subtitle: {
+            class: [
+                'font-normal mb-2 text-gray-600', // Font weight, margin bottom, and text color.
+                'dark:text-white/60 ' //dark
+            ]
+        },
+        content: {
+            class: 'py-5' // Vertical padding.
+        },
+        footer: {
+            class: 'pt-5' // Top padding.
+        }
+    },
+    divider: {
+        root: ({ props }) => ({
+            class: [
+                'flex relative', // alignments.
+                {
+                    'w-full my-5 mx-0 py-0 px-5 before:block before:left-0 before:absolute before:top-1/2 before:w-full before:border-t before:border-gray-300 before:dark:border-blue-900/40': props.layout == 'horizontal', // Padding and borders for horizontal layout.
+                    'justify-center min-h-full mx-4 md:mx-5 py-5 before:block before:min-h-full before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2 before:border-l before:border-gray-300 before:dark:border-blue-900/40':
+                        props.layout == 'vertical' // Padding and borders for vertical layout.
+                },
+                { 'before:border-solid': props.type == 'solid', 'before:border-dotted': props.type == 'dotted', 'before:border-dashed': props.type == 'dashed' }, // Border type condition.
+                {
+                    'justify-center items-center': props.align == 'center' || props.align == null, // Alignment condition for center or default alignment.
+                    'justify-end items-center': props.align == 'right', // Alignment condition for right alignment.
+                    'justify-start items-center': props.align == 'left', // Alignment condition for left alignment.
+                    'items-start': props.align == 'top', // Alignment condition for top alignment.
+                    'items-end': props.align == 'bottom' // Alignment condition for bottom alignment.
+                }
+            ]
+        }),
+        content: {
+            class: 'px-1 bg-white z-10 dark:bg-gray-900' // Padding and background color.
+        }
+    },
+    fieldset: {
+        root: {
+            class: [
+                'border border-gray-300 bg-white text-gray-700 rounded-md block mx-2 my-0.5 pl-4 pr-5 inline-size-min', // Borders, background, text color, spacing, and inline size.
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' //dark
+            ]
+        },
+        legend: ({ props }) => ({
+            class: [
+                'border border-gray-300 text-gray-700 bg-gray-50 font-bold rounded-md',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ', //dark
+                {
+                    'p-0 transition-none hover:bg-gray-100 hover:border-gray-300 hover:text-gray-900 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': props.toggleable,
+                    'p-5': !props.toggleable
+                }
+            ]
+        }),
+        toggler: ({ props }) => ({
+            class: [
+                'flex items-center justify-center',
+                {
+                    'p-5 text-gray-700 rounded-md transition-none cursor-pointer overflow-hidden relative select-none hover:text-gray-900 focus:focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:text-white/80 dark:hover:text-white/80 dark:hover:bg-gray-800/60 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]':
+                        props.toggleable
+                }
+            ]
+        }),
+        togglerIcon: {
+            class: 'mr-2 inline-block' // Margin and display style.
+        },
+        legendTitle: {
+            class: 'flex items-center justify-center leading-none' // alignments, and leading style.
+        },
+        content: {
+            class: 'p-5' // Padding.
+        }
+    },
+    scrollpanel: {
+        wrapper: {
+            class: 'float-left h-full overflow-hidden relative w-full z-10'
+        },
+        content: {
+            class: 'box-border h-[calc(100% + 18px)] overflow-scroll pr-18 pb-18 relative scrollbar-none w-[calc(100% + 18px)] [&::-webkit-scrollbar]:hidden'
+        },
+        barX: {
+            class: 'bg-gray-50 border-0 transition-none invisible absolute bottom-0 h-3 z-2 rounded cursor-pointer opacity-0 relative'
+        },
+        barY: {
+            class: 'bg-gray-50 border-0 transition-none top-0 w-3 h-full z-2 rounded cursor-pointer opacity-0 relative'
+        }
+    },
+    tabview: {
+        navContainer: ({ props, context, parent }) => ({
+            class: [
+                'relative', // Relative positioning.
+                { 'overflow-hidden': props.scrollable } // Overflow condition.
+            ]
+        }),
+        navContent: {
+            class: ['overflow-y-hidden overscroll-contain overscroll-auto scroll-smooth [&::-webkit-scrollbar]:hidden'] // Overflow and scrollbar styles.
+        },
+        previousButton: {
+            class: ['h-full flex items-center justify-center absolute top-0 z-20', 'left-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ]'] // Flex and absolute positioning styles.
+        },
+        nextButton: {
+            class: ['h-full flex items-center justify-center absolute top-0 z-20', 'right-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 '] // Flex and absolute positioning styles.
+        },
+        nav: {
+            class: ['flex flex-1 list-none m-0 p-0', 'bg-white border border-gray-300 border-0 border-b-2', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 '] // Flex, list, margin, padding, and border styles.
+        },
+        tab: {
+            header: ({ tab }) => ({
+                class: ['mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': tab.props?.disabled }] // Margin and condition-based styles.
+            }),
+            headerAction: ({ tab }) => ({
+                class: [
+                    'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles.
+                    'border-b-2 p-5 font-bold rounded-t-lg transition-shadow duration-200 m-0', // Border, padding, font, and transition styles.
+                    'transition-colors duration-200', // Transition duration style.
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Focus styles.
+                    {
+                        'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80':
+                            tab.parent.state.d_activeIndex !== tab.context.index, // Condition-based hover styles.
+                        'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': tab.parent.state.d_activeIndex === tab.context.index // Condition-based active styles.
+                    }
+                ],
+                style: 'margin-bottom:-2px' // Negative margin style.
+            }),
+            headerTitle: {
+                class: ['leading-none whitespace-nowrap'] // Leading and whitespace styles.
+            },
+            content: {
+                class: ['bg-white p-5 border-0 text-gray-700 rounded-bl-2xl rounded-br-2xl', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80'] // Background, padding, border, and text styles.
+            }
+        }
+    },
+    splitter: {
+        root: {
+            class: ['border border-solid border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 rounded-lg text-gray-700 dark:text-white/80']
+        },
+
+        gutter: ({ props }) => ({
+            class: ['flex items-center justify-center  flex-shrink-0', 'transition-all duration-200 bg-gray-100 dark:bg-gray-800', { 'cursor-col-resize': props.layout == 'horizontal', 'cursor-row-resize': props.layout !== 'horizontal' }]
+        }),
+        gutterhandler: ({ props }) => ({
+            class: ['bg-gray-300 dark:bg-gray-600 transition-all duration-200', { 'h-7': props.layout == 'horizontal', 'w-7 h-2': props.layout !== 'horizontal' }]
+        })
+    },
+    splitterpanel: {
+        root: ({ props }) => ({
+            class: ['flex-grow', 'flex justify-center items-center']
+        })
+    },
+    dialog: {
+        root: ({ props, state }) => ({
+            class: ['rounded-lg shadow-lg border-0', 'flex flex-col max-h-90 transform scale-100', 'm-0  w-[50vw] z-40 relative', '', 'dark:border dark:border-blue-900/40']
+        }),
+        header: {
+            class: ['flex items-center justify-between flex-shrink-0', 'bg-white text-gray-800 border-t-0  rounded-tl-lg rounded-tr-lg p-6', 'dark:bg-gray-900  dark:text-white/80']
+        },
+        headerTitle: {
+            class: ['font-bold text-lg']
+        },
+        headerIcons: {
+            class: ['flex items-center']
+        },
+        closeButton: {
+            class: [
+                'flex items-center justify-center overflow-hidden relative',
+                'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0',
+                'hover:text-gray-700 hover:border-transparent hover:bg-gray-200',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // focus
+                'dark:hover:text-white/80 dark:hover:border-transparent dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        closeButtonIcon: {
+            class: ['w-4 h-4 inline-block']
+        },
+        content: {
+            class: ['overflow-y-auto', 'bg-white text-gray-700 px-6 pb-8 pt-0', 'rounded-bl-lg rounded-br-lg', 'dark:bg-gray-900  dark:text-white/80 ']
+        },
+        footer: {
+            class: ['flex-shrink-0 ', 'border-t-0 bg-white text-gray-700 px-6 pb-6 text-right rounded-b-lg', 'dark:bg-gray-900  dark:text-white/80']
+        },
+        mask: {
+            class: ['fixed top-0 left-0 w-full h-full flex items-center justify-center pointer-events-auto', 'bg-black bg-opacity-40 transition duration-200 z-20']
+        }
+    },
+    confirmpopup: {
+        root: ({ props, state }) => ({
+            class: [
+                'bg-white text-gray-700 border-0 rounded-md shadow-lg',
+                'z-40 transform origin-center',
+                'mt-10 absolute left-0 top-0 ',
+                // 'before:absolute before:bottom-0 before:left-1/2 before:transform before:-translate-x-1/2 before:w-0 before:h-0 before:border-t-[10px] before:border-l-[5px] before:border-r-[5px] before:border-transparent before:border-b-[10px] before:border-t-[0] before:border-l-[5px] before:border-r-[5px] before:border-b-[0] before:border-red-500',
+                'dark:border dark:border-blue-900/40 dark:bg-gray-900  dark:text-white/80'
+            ]
+        }),
+        content: {
+            class: ['p-5 items-center flex']
+        },
+        icon: {
+            class: ['text-2xl']
+        },
+        message: {
+            class: ['ml-4']
+        },
+        footer: {
+            class: ['text-right px-5 py-5 pt-0 ']
+        }
+        // rejectButton: {
+        //     class: ['bg-transparent text-blue-500 border-transparent', 'text-sm px-2 py-1.5 ml-0 mr-2 w-auto', 'flex items-center cursor-pointer inline-flex overflow-hidden relative text-center select-none user-select-none align-bottom']
+        // },
+        // acceptButton: {
+        //     class: ['text-white bg-blue-500 border-2 border-blue-500', 'text-sm px-2 py-1.5 ml-0 mr-2 w-auto', 'flex items-center cursor-pointer inline-flex overflow-hidden relative text-center select-none user-select-none align-bottom']
+        // }
+    },
+    overlaypanel: {
+        root: ({ props, state }) => ({
+            class: [
+                'bg-white text-gray-700 border-0 rounded-md shadow-lg',
+                'z-40 transform origin-center',
+                'mt-10 absolute left-0 top-0 ',
+                // 'before:absolute before:bottom-0 before:left-1/2 before:transform before:-translate-x-1/2 before:w-0 before:h-0 before:border-t-[10px] before:border-l-[5px] before:border-r-[5px] before:border-transparent before:border-b-[10px] before:border-t-[0] before:border-l-[5px] before:border-r-[5px] before:border-b-[0] before:border-red-500',
+                'dark:border dark:border-blue-900/40 dark:bg-gray-900  dark:text-white/80'
+            ]
+        }),
+        content: {
+            class: ['p-5 items-center flex']
+        }
+    },
+    sidebar: {
+        root: ({ props, state }) => ({
+            class: [
+                'flex flex-col pointer-events-auto relative transform translate-x-0 translate-y-0 translate-z-0 relative transition-transform duration-300',
+                'bg-white text-gray-700 border-0 shadow-lg',
+                { 'h-full w-80': props.position == 'left' || props.position == 'right', 'h-40 w-full': props.position == 'top' || props.position == 'bottom' },
+                'dark:border dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80'
+            ]
+        }),
+        header: {
+            class: ['flex items-center justify-end', 'p-5']
+        },
+        closeButton: {
+            class: [
+                'flex items-center justify-center overflow-hidden relative',
+                'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0',
+                'hover:text-gray-700 hover:border-transparent hover:bg-gray-200',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // focus
+                'dark:hover:text-white/80 dark:hover:text-white/80 dark:hover:border-transparent dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        closeButtonIcon: {
+            class: ['w-4 h-4 inline-block']
+        },
+        content: {
+            class: ['p-5 pt-0 h-full w-full', 'flex-grow overflow-y-auto']
+        },
+        mask: ({ props, state }) => ({
+            class: [
+                'fixed top-0 left-0 w-full h-full flex  pointer-events-auto',
+                'bg-black bg-opacity-40 transition duration-200 z-20 transition-colors',
+                { 'justify-end': props.position == 'right', 'items-start': props.position == 'top', 'items-end': props.position == 'bottom' }
+            ]
+        })
+    },
+    toolbar: {
+        root: {
+            class: ['flex items-center justify-between flex-wrap', 'bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-blue-900/40  p-5 rounded-md gap-2']
+        },
+        start: {
+            class: ['flex items-center']
+        },
+        center: {
+            class: ['flex items-center']
+        },
+        end: {
+            class: ['flex items-center']
+        }
+    },
+
+    //UPLOAD
+
+    fileupload: {
+        input: {
+            class: ['hidden']
+        },
+        buttonbar: {
+            class: ['flex flex-wrap', 'bg-gray-50 dark:bg-gray-800 p-5 border border-solid border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 rounded-tr-lg rounded-tl-lg gap-2 border-b-0']
+        },
+        chooseButton: {
+            class: ['text-white bg-blue-500 border border-blue-500 p-3 px-5 rounded-md text-base', 'overflow-hidden relative']
+        },
+        chooseIcon: {
+            class: ['mr-2 inline-block']
+        },
+        chooseButtonLabel: {
+            class: ['flex-1 font-bold']
+        },
+        content: ({ props }) => ({
+            class: ['relative', 'bg-white dark:bg-gray-900 p-8 border border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 rounded-b-lg']
+        }),
+        file: {
+            class: ['flex items-center flex-wrap', 'p-4 border border-gray-300 dark:border-blue-900/40 rounded gap-2 mb-2', 'last:mb-0']
+        },
+        thumbnail: {
+            class: ['flex-shrink-0']
+        },
+        fileName: {
+            class: ['mb-2']
+        },
+        fileSize: {
+            class: ['mr-2']
+        }
+    },
+
+    //Messages
+
+    message: {
+        root: ({ props, context }) => ({
+            class: [
+                'my-4 rounded-md',
+                {
+                    'bg-blue-100 border-solid border-0 border-l-4 border-blue-500 text-blue-700': props.severity == 'info',
+                    'bg-green-100 border-solid border-0 border-l-4 border-green-500 text-green-700': props.severity == 'success',
+                    'bg-orange-100 border-solid border-0 border-l-4 border-orange-500 text-orange-700': props.severity == 'warn',
+                    'bg-red-100 border-solid border-0 border-l-4 border-red-500 text-red-700': props.severity == 'error'
+                }
+            ]
+        }),
+        wrapper: {
+            class: ['flex items-center py-5 px-7']
+        },
+        icon: {
+            class: ['w-6 h-6', 'text-lg mr-2']
+        },
+        text: {
+            class: ['text-base font-normal']
+        },
+        button: {
+            class: ['w-8 h-8 rounded-full bg-transparent transition duration-200 ease-in-out', 'ml-auto overflow-hidden relative', 'flex items-center justify-center', 'hover:bg-white/30']
+        }
+    },
+    inlinemessage: {
+        root: ({ props, context }) => ({
+            class: [
+                'inline-flex items-center justify-center align-top',
+                'p-3 m-0 rounded-md',
+                {
+                    'bg-blue-100 border-0 text-blue-700': props.severity == 'info',
+                    'bg-green-100 border-0 text-green-700': props.severity == 'success',
+                    'bg-orange-100 border-0 text-orange-700': props.severity == 'warn',
+                    'bg-red-100 border-0 text-red-700': props.severity == 'error'
+                }
+            ]
+        }),
+        icon: {
+            class: ['text-base mr-2']
+        }
+    },
+    toast: {
+        root: ({ props, context }) => ({
+            class: ['w-96', 'opacity-90']
+        }),
+        container: ({ props, context }) => ({
+            class: [
+                'my-4 rounded-md w-full',
+                {
+                    'bg-blue-100 border-solid border-0 border-l-4 border-blue-500 text-blue-700': props.message.severity == 'info',
+                    'bg-green-100 border-solid border-0 border-l-4 border-green-500 text-green-700': props.message.severity == 'success',
+                    'bg-orange-100 border-solid border-0 border-l-4 border-orange-500 text-orange-700': props.message.severity == 'warn',
+                    'bg-red-100 border-solid border-0 border-l-4 border-red-500 text-red-700': props.message.severity == 'error'
+                }
+            ]
+        }),
+        content: {
+            class: ['flex items-center py-5 px-7']
+        },
+        icon: {
+            class: ['w-6 h-6', 'text-lg mr-2']
+        },
+        text: {
+            class: ['text-base font-normal flex flex-col flex-1 flex-grow-1 flex-shrink-1 ml-4']
+        },
+        summary: {
+            class: ['font-bold block']
+        },
+        detail: {
+            class: ['mt-1 block']
+        },
+        closebutton: {
+            class: ['w-8 h-8 rounded-full bg-transparent transition duration-200 ease-in-out', 'ml-auto overflow-hidden relative', 'flex items-center justify-center', 'hover:bg-white/30']
+        }
+    },
+    //BUTTONS
+    button: {
+        root: ({ props, context }) => ({
+            class: [
+                'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom',
+                'transition duration-200 ease-in-out',
+                {
+                    'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': !props.link && props.severity == null && !props.text && !props.outlined && !props.plain,
+                    'text-blue-600 bg-transparent border-transparent': props.link
+                },
+                {
+                    'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.severity == 'secondary' && !props.text && !props.outlined && !props.plain,
+                    'text-white bg-green-500 border border-green-500 hover:bg-green-600 hover:border-green-600': props.severity == 'success' && !props.text && !props.outlined && !props.plain,
+                    'text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600': props.severity == 'info' && !props.text && !props.outlined && !props.plain,
+                    'text-white bg-orange-500 border border-orange-500 hover:bg-orange-600 hover:border-orange-600': props.severity == 'warning' && !props.text && !props.outlined && !props.plain,
+                    'text-white bg-purple-500 border border-purple-500 hover:bg-purple-600 hover:border-purple-600': props.severity == 'help' && !props.text && !props.outlined && !props.plain,
+                    'text-white bg-red-500 border border-red-500 hover:bg-red-600 hover:border-red-600': props.severity == 'danger' && !props.text && !props.outlined && !props.plain
+                },
+                { 'shadow-lg': props.raised },
+                { 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
+                {
+                    'bg-transparent border-transparent': props.text && !props.plain,
+                    'text-blue-500 hover:bg-blue-300/20': props.text && props.severity == null && !props.plain,
+                    'text-gray-500 hover:bg-gray-300/20': props.text && props.severity == 'secondary' && !props.plain,
+                    'text-green-500 hover:bg-green-300/20': props.text && props.severity == 'success' && !props.plain,
+                    'text-blue-500 hover:bg-blue-300/20': props.text && props.severity == 'info' && !props.plain,
+                    'text-orange-500 hover:bg-orange-300/20': props.text && props.severity == 'warning' && !props.plain,
+                    'text-purple-500 hover:bg-purple-300/20': props.text && props.severity == 'help' && !props.plain,
+                    'text-red-500 hover:bg-red-300/20': props.text && props.severity == 'danger' && !props.plain
+                },
+                { 'shadow-lg': props.raised && props.text },
+                {
+                    'text-gray-500 hover:bg-gray-300/20': props.plain & props.text,
+                    'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain & props.outlined,
+                    'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain & !props.outlined & !props.text
+                },
+                {
+                    'bg-transparent border': props.outlined && !props.plain,
+                    'text-blue-500 border border-blue-500 hover:bg-blue-300/20': props.outlined && props.severity == null && !props.plain,
+                    'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.outlined && props.severity == 'secondary' && !props.plain,
+                    'text-green-500 border border-green-500 hover:bg-green-300/20': props.outlined && props.severity == 'success' && !props.plain,
+                    'text-blue-500 border border-blue-500 hover:bg-blue-300/20': props.outlined && props.severity == 'info' && !props.plain,
+                    'text-orange-500 border border-orange-500 hover:bg-orange-300/20': props.outlined && props.severity == 'warning' && !props.plain,
+                    'text-purple-500 border border-purple-500 hover:bg-purple-300/20': props.outlined && props.severity == 'help' && !props.plain,
+                    'text-red-500 border border-red-500 hover:bg-red-300/20': props.outlined && props.severity == 'danger' && !props.plain
+                },
+                { 'px-4 py-3 text-base': props.size == null, 'text-xs py-2 px-3': props.size == 'small', 'text-xl py-3 px-4': props.size == 'large' }
+            ]
+        }),
+        label: ({ props }) => ({
+            class: ['flex-1', 'duration-200', 'font-bold', { 'hover:underline': props.link }]
+        }),
+        icon: ({ props }) => ({
+            class: [
+                'mx-0',
+                { 'mr-2': props.iconPos == 'left' && props.label != null, 'ml-2': props.iconPos == 'right' && props.label != null, 'mb-2': props.iconPos == 'top' && props.label != null, 'mt-2': props.iconPos == 'bottom' && props.label != null }
+            ]
+        }),
+        badge: ({ props }) => ({
+            class: [{ 'ml-2 w-4 h-4 leading-none': props.badge }]
+        })
+    },
+    speeddial: {
+        root: ({ props, state }) => ({
+            class: [
+                'absolute flex',
+                {
+                    'items-center flex-col-reverse': props.direction == 'up',
+                    'items-center flex-col': props.direction == 'down',
+                    'justify-center flex-row-reverse': props.direction == 'left',
+                    'justify-center flex-row': props.direction == 'right'
+                }
+            ]
+        }),
+        button: {
+            root: {
+                class: ['w-16 h-16']
+            }
+        },
+        menu: ({ props, context }) => ({
+            class: [
+                'm-0 p-0 list-none flex items-center justify-center transition delay-200 pointer-events-none z-2',
+                {
+                    'flex-col-reverse': props.direction == 'up',
+                    'flex-col': props.direction == 'down',
+                    'flex-row-reverse': props.direction == 'left',
+                    'flex-row': props.direction == 'right'
+                }
+            ]
+        }),
+        menuitem: ({ props, context }) => ({
+            class: [
+                'transform scale-0 opacity-0 transition-transform duration-200 ease-out delay-0 transition-opacity duration-800',
+                {
+                    'my-1 first:mb-2': props.direction == 'up',
+                    'my-1 first:mt-2': props.direction == 'down',
+                    'mx-1 first:mr-2': props.direction == 'left',
+                    'mx-1 first:ml-2': props.direction == 'right'
+                }
+            ]
+        }),
+        action: {
+            class: ['flex items-center justify-center rounded-full relative overflow-hidden', 'w-12 h-12 bg-gray-700 text-white']
+        }
+    },
+    splitbutton: {
+        root: {
+            class: ['inline-flex relative', 'rounded-md']
+        },
+        button: ({ props, context }) => ({
+            root: {
+                class: ['first:flex-1 first:rounded-r-none first:border-r-0', 'border-r-0']
+            }
+        })
+    },
+    //FORMS
+
+    inputtext: {
+        root: ({ props, context }) => ({
+            class: [
+                'm-0',
+                'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                {
+                    'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+                },
+                { 'text-lg px-4 py-4': props.size == 'large', 'text-xs px-2 py-2': props.size == 'small', 'p-3 text-base': props.size == null }
+            ]
+        })
+    },
+    knob: {
+        root: ({ props }) => ({
+            class: ['focus:outline-none focus:outline-offset-0 focus:shadow-0', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+        }),
+        range: {
+            class: ['stroke-current transition duration-100 ease-in stroke-gray-200 dark:stroke-gray-700 fill-none']
+        },
+        value: {
+            class: ['animate-dash-frame  stroke-blue-500 fill-none']
+        },
+        label: {
+            class: ['text-center text-xl']
+        }
+    },
+    inputswitch: {
+        root: ({ props }) => ({
+            class: ['inline-block relative', 'w-12 h-7', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+        }),
+        slider: ({ props }) => ({
+            class: [
+                'absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent',
+                'transition-colors duration-200 rounded-2xl',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                "before:absolute before:content-'' before:top-1/2 before:bg-white before:dark:bg-gray-900 before:w-5 before:h-5 before:left-1 before:-mt-2.5 before:rounded-full before:transition-duration-200",
+                { 'bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 hover:dark:bg-gray-700 ': !props.modelValue, 'bg-blue-500 before:transform before:translate-x-5': props.modelValue }
+            ]
+        })
+    },
+    rating: {
+        root: ({ props }) => ({
+            class: ['relative flex items-center', 'gap-2', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+        }),
+        cancelitem: {
+            class: ['inline-flex items-center cursor-pointer']
+        },
+        cancelicon: {
+            class: ['text-red-500', 'w-5 h-5', 'transition duration-200 ease-in']
+        },
+        item: ({ props }) => ({
+            class: ['inline-flex items-center', { 'cursor-pointer': !props.readonly, 'cursor-default': props.readonly }]
+        }),
+        officon: {
+            class: ['text-gray-700 hover:text-blue-400', 'w-5 h-5', 'transition duration-200 ease-in']
+        },
+        onicon: {
+            class: ['text-blue-500', 'w-5 h-5', 'transition duration-200 ease-in']
+        }
+    },
+    selectbutton: {
+        root: ({ props }) => ({
+            class: [{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+        }),
+        button: ({ context, props }) => ({
+            class: [
+                'inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative',
+                'px-4 py-3',
+                'transition duration-200 border border-r-0',
+                'first:rounded-l-md first:rounded-tr-none first:rounded-br-none last:border-r last:rounded-tl-none last:rounded-bl-none last:rounded-r-md',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-gray-300 dark:border-blue-900/40 hover:bg-gray-50 dark:hover:bg-gray-800/80 ': !context.active,
+                    'bg-blue-500 border-blue-500 text-white hover:bg-blue-600': context.active,
+                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+                }
+            ]
+        }),
+        label: {
+            class: ['font-bold']
+        }
+    },
+    slider: {
+        root: ({ props }) => ({
+            class: [
+                'relative',
+                'bg-gray-100 dark:bg-gray-800 border-0 rounded-6',
+                { 'h-1 w-56': props.orientation == 'horizontal', 'w-1 h-56': props.orientation == 'vertical' },
+                { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+            ]
+        }),
+        range: ({ props }) => ({
+            class: ['bg-blue-500', 'block absolute', { 'top-0 left-0 h-full': props.orientation == 'horizontal', 'bottom-0 left-0 w-full': props.orientation == 'vertical' }]
+        }),
+        handle: ({ props }) => ({
+            class: [
+                'h-4 w-4 bg-white dark:bg-gray-600 border-2 border-blue-500 rounded-full transition duration-200',
+                'cursor-grab touch-action-none block',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                'hover:bg-blue-500 hover:border hover:border-blue-500',
+                { 'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal', 'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical' }
+            ]
+        }),
+        starthandler: ({ props }) => ({
+            class: [
+                'h-4 w-4 bg-white dark:bg-gray-600 border-2 border-blue-500 rounded-full transition duration-200',
+                'cursor-grab touch-action-none block',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                'hover:bg-blue-500 hover:border hover:border-blue-500',
+                { 'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal', 'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical' }
+            ]
+        }),
+        endhandler: ({ props }) => ({
+            class: [
+                'h-4 w-4 bg-white dark:bg-gray-600 border-2 border-blue-500 rounded-full transition duration-200',
+                'cursor-grab touch-action-none block',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                'hover:bg-blue-500 hover:border hover:border-blue-500',
+                { 'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal', 'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical' }
+            ]
+        })
+    },
+    password: {
+        root: ({ props }) => ({
+            class: ['inline-flex relative', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+        }),
+        panel: {
+            class: ['p-5 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 shadow-md rounded-md']
+        },
+        meter: {
+            class: ['mb-2 bg-gray-300 dark:bg-gray-700 h-3']
+        },
+        meterlabel: ({ instance, props }) => ({
+            class: [
+                'transition-width duration-1000 ease-in-out h-full',
+                { 'bg-red-500': instance?.meter?.strength == 'weak', 'bg-orange-500': instance?.meter?.strength == 'medium', 'bg-green-500': instance?.meter?.strength == 'strong' },
+                { 'pr-[2.5rem] ': props.toggleMask }
+            ]
+        }),
+        showicon: {
+            class: ['absolute top-1/2 -mt-2', 'right-3 text-gray-600 dark:text-white/70']
+        },
+        hideicon: {
+            class: ['absolute top-1/2 -mt-2', 'right-3 text-gray-600 dark:text-white/70']
+        }
+    },
+    togglebutton: {
+        root: ({ props }) => ({
+            class: [
+                'inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative',
+                'px-4 py-3 rounded-md text-base w-36',
+                'border transition duration-200 ease-in-out',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 hover:bg-gray-100 dark:hover:bg-gray-800/80 hover:border-gray-300 dark:hover:bg-gray-800/70 hover:text-gray-700 dark:hover:text-white/80':
+                        !props.modelValue,
+                    'bg-blue-500 border-blue-500 text-white hover:bg-blue-600 hover:border-blue-600': props.modelValue
+                },
+                { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+            ]
+        }),
+        label: {
+            class: ['font-bold text-center w-full']
+        },
+        icon: ({ props }) => ({
+            class: [' mr-2', { 'text-gray-600 dark:text-white/70': !props.modelValue, 'text-white': props.modelValue }]
+        })
+    },
+    tristatecheckbox: {
+        root: {
+            class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
+        },
+        checkbox: ({ props }) => ({
+            class: [
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 rounded-lg transition-colors duration-200',
+                {
+                    'border-blue-500 bg-blue-500 text-white dark:border-blue-400 dark:bg-blue-400': props.modelValue || !props.modelValue,
+                    'border-gray-300 text-gray-600 bg-white dark:border-blue-900/40 dark:bg-gray-900': props.modelValue == null
+                },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            ]
+        })
+    },
+    checkbox: {
+        root: ({ props }) => ({
+            class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
+        }),
+        input: ({ props, context }) => ({
+            class: [
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
+                { 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked, 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            ]
+        }),
+        icon: {
+            class: ['w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900']
+        }
+    },
+    radiobutton: {
+        root: ({ props }) => ({
+            class: ['relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6']
+        }),
+        input: ({ props }) => ({
+            class: [
+                'flex justify-center items-center',
+                'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out',
+                { 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': props.value !== props.modelValue, 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': props.value == props.modelValue },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            ]
+        }),
+        icon: ({ props }) => ({
+            class: [
+                'transform rounded-full',
+                'block w-3 h-3 transition duration-200 bg-white dark:bg-gray-900',
+                { 'backface-hidden scale-10 invisible': props.value !== props.modelValue, 'transform scale-100 visible': props.value == props.modelValue }
+            ]
+        })
+    },
+    dropdown: {
+        root: ({ props }) => ({
+            class: [
+                'cursor-pointer inline-flex relative select-none',
+                'bg-white border border-gray-400 transition-colors duration-200 ease-in-out rounded-md',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300',
+                'w-full md:w-56',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+            ]
+        }),
+        input: ({ props }) => ({
+            class: [
+                'cursor-pointer block flex flex-auto overflow-hidden overflow-ellipsis whitespace-nowrap relative',
+                'bg-transparent border-0 text-gray-800',
+                'dark:text-white/80',
+                'p-3 transition duration-200 bg-transparent rounded appearance-none font-sans text-base',
+                'focus:outline-none focus:shadow-none',
+                { 'pr-7': props.showClear }
+            ]
+        }),
+        trigger: {
+            class: ['flex items-center justify-center flex-shrink-0', 'bg-transparent text-gray-500 w-12 rounded-tr-lg rounded-br-lg']
+        },
+        wrapper: {
+            class: ['max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80']
+        },
+        list: {
+            class: ['py-3 list-none m-0']
+        },
+        item: ({ context }) => ({
+            class: [
+                'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
+                'm-0 p-3 border-0  transition-shadow duration-200 rounded-none',
+                'dark:text-white/80 dark:hover:bg-gray-800',
+                'hover:text-gray-700 hover:bg-gray-200',
+                { 'text-gray-700 bg-transparent': !context.selected, 'text-blue-600 bg-blue-50 hover:text-blue-600 hover:bg-blue-100 dark:text-white dark:bg-gray-700 dark:hover:bg-gray-700': context.selected }
+            ]
+        }),
+        itemgroup: {
+            class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto']
+        },
+        header: {
+            class: ['p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40']
+        },
+        filtercontainer: {
+            class: ['relative']
+        },
+        filterinput: {
+            class: [
+                'pr-7 -mr-7',
+                'w-full',
+                'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        filtericon: {
+            class: ['-mt-2 absolute top-1/2']
+        },
+        clearicon: {
+            class: ['text-gray-500 right-12 -mt-2 absolute top-1/2']
+        }
+    },
+    calendar: {
+        root: {
+            class: ['inline-flex max-w-full relative']
+        },
+        input: {
+            class: ['font-sans text-base text-gray-600 bg-white p-3 border border-gray-300 transition-colors duration-200 appearance-none rounded-lg', 'hover:border-blue-500 ']
+        },
+        panel: {
+            class: ['bg-white border-0 shadow-md', 'absolute min-w-[350px]']
+        },
+        header: {
+            class: ['flex items-center justify-between', 'p-2 text-gray-700 bg-white font-semibold m-0 border-b border-gray-300 rounded-t-lg']
+        },
+        previousbutton: {
+            class: [
+                'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                'hover:text-gray-700 hover:border-transparent hover:bg-gray-200'
+            ]
+        },
+        title: {
+            class: ['leading-8 mx-auto']
+        },
+        monthTitle: {
+            class: ['text-gray-700 transition duration-200 font-semibold p-2', 'mr-2', 'hover:text-blue-500']
+        },
+        yearTitle: {
+            class: ['text-gray-700 transition duration-200 font-semibold p-2', 'hover:text-blue-500']
+        },
+        nextbutton: {
+            class: [
+                'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                'hover:text-gray-700 hover:border-transparent hover:bg-gray-200'
+            ]
+        },
+        table: {
+            class: ['border-collapse w-full', 'my-2']
+        },
+        tableheadercell: {
+            class: ['p-2']
+        },
+        day: {
+            class: ['p-2']
+        },
+        daylabel: {
+            class: ['w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border', 'flex items-center cursor-pointer justify-center mx-auto overflow-hidden relative']
+        }
+    },
+    listbox: {
+        root: ({ props }) => ({
+            class: ['bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-56']
+        }),
+        wrapper: {
+            class: ['overflow-auto']
+        },
+        list: {
+            class: ['py-3 list-none m-0']
+        },
+        item: ({ context }) => ({
+            class: [
+                'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
+                'm-0 p-3 border-0  transition-shadow duration-200 rounded-none',
+                'dark:text-white/80 dark:hover:bg-gray-800',
+                'hover:text-gray-700 hover:bg-gray-200',
+                { 'text-gray-700 bg-transparent': !context.selected, 'text-blue-600 bg-blue-50 hover:text-blue-600 hover:bg-blue-100 dark:text-white dark:bg-gray-700 dark:hover:bg-gray-700': context.selected }
+            ]
+        }),
+        itemgroup: {
+            class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto']
+        },
+        header: {
+            class: ['p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40']
+        },
+        filtercontainer: {
+            class: ['relative']
+        },
+        filterinput: {
+            class: [
+                'pr-7 -mr-7',
+                'w-full',
+                'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        filtericon: {
+            class: ['-mt-2 absolute top-1/2']
+        }
+    },
+    multiselect: {
+        root: ({ props }) => ({
+            class: [
+                'inline-flex cursor-pointer select-none',
+                'bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40  transition-colors duration-200 ease-in-out rounded-md',
+                'w-full md:w-80',
+                { 'opacity-60 select-none pointer-events-none cursor-default': props?.disabled }
+            ]
+        }),
+        labelContainer: {
+            class: ['overflow-hidden flex flex-auto cursor-pointer']
+        },
+        label: ({ props, parent, context }) => ({
+            class: [
+                'block overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis',
+                'text-gray-800 dark:text-white/80',
+                'p-3 transition duration-200',
+                {
+                    '!p-3': props.display !== 'chip' && (props?.modelValue == null || props?.modelValue == undefined),
+                    '!py-1.5 px-3': props.display == 'chip' && props?.modelValue !== null,
+                    '!p-3': props.display == 'chip' && props?.modelValue == null
+                }
+            ]
+        }),
+        token: {
+            class: ['py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center']
+        },
+        removeTokenIcon: {
+            class: ['ml-2']
+        },
+        trigger: {
+            class: ['flex items-center justify-center flex-shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg']
+        },
+        panel: {
+            class: ['bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg']
+        },
+        header: {
+            class: ['p-3 border-b border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 bg-gray-100 dark:bg-gray-800 rounded-t-lg', 'flex items-center justify-between']
+        },
+        headerCheckboxContainer: {
+            class: ['inline-flex cursor-pointer select-none align-bottom relative', 'mr-2', 'w-6 h-6']
+        },
+        headerCheckbox: ({ props, context }) => ({
+            class: [
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 text-gray-600 dark:text-white/70 rounded-lg transition-colors duration-200',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context?.selected, 'border-blue-500 bg-blue-500': context?.selected }
+            ]
+        }),
+        headercheckboxicon: {
+            class: ['w-4 h-4 transition-all duration-200 text-white text-base']
+        },
+        closeButton: {
+            class: [
+                'flex items-center justify-center overflow-hidden relative',
+                'w-8 h-8 text-gray-500 dark:text-white/70 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        closeButtonIcon: {
+            class: ['w-4 h-4 inline-block']
+        },
+        wrapper: {
+            class: ['max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80']
+        },
+        list: {
+            class: ['py-3 list-none m-0']
+        },
+        item: ({ context }) => ({
+            class: [
+                'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
+                'm-0 p-3 border-0  transition-shadow duration-200 rounded-none',
+                'dark:text-white/80 dark:hover:bg-gray-800',
+                'hover:text-gray-700 hover:bg-gray-200',
+                { 'text-gray-700 bg-transparent': !context.selected, 'text-blue-600 bg-blue-50 hover:text-blue-600 hover:bg-blue-100 dark:text-white dark:bg-gray-700 dark:hover:bg-gray-700': context.selected }
+            ]
+        }),
+        checkboxContainer: {
+            class: ['inline-flex cursor-pointer select-none align-bottom relative', 'mr-2', 'w-6 h-6']
+        },
+        checkbox: ({ context }) => ({
+            class: [
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 text-gray-600 dark:text-white/80 rounded-lg transition-colors duration-200',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'border-gray-300 dark:border-blue-900/40  bg-white dark:bg-gray-900': !context?.selected, 'border-blue-500 bg-blue-500': context?.selected }
+            ]
+        }),
+        checkboxicon: {
+            class: ['w-4 h-4 transition-all duration-200 text-white text-base']
+        },
+        itemgroup: {
+            class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto']
+        },
+        filtercontainer: {
+            class: ['relative']
+        },
+        filterinput: {
+            class: [
+                'pr-7 -mr-7',
+                'w-full',
+                'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        filtericon: {
+            class: ['-mt-2 absolute top-1/2']
+        },
+        clearicon: {
+            class: ['text-gray-500 right-12 -mt-2 absolute top-1/2']
+        }
+    },
+    textarea: {
+        root: ({ context }) => ({
+            class: [
+                'm-0',
+                'font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'opacity-60 select-none pointer-events-none cursor-default': context.disabled }
+            ]
+        })
+    },
+    treeselect: {
+        root: ({ props }) => ({
+            class: [
+                'inline-flex cursor-pointer select-none',
+                'bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40  transition-colors duration-200 ease-in-out rounded-md',
+                'w-full md:w-80',
+                { 'opacity-60 select-none pointer-events-none cursor-default': props?.disabled }
+            ]
+        }),
+        labelContainer: {
+            class: ['overflow-hidden flex flex-auto cursor-pointer']
+        },
+        label: ({ props }) => ({
+            class: ['block overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis', 'text-gray-800 dark:text-white/80', 'p-3 transition duration-200']
+        }),
+        trigger: {
+            class: ['flex items-center justify-center flex-shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg']
+        },
+        panel: {
+            class: ['bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg']
+        },
+        wrapper: {
+            class: ['max-h-[200px] overflow-auto', 'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg']
+        }
+    },
+    autocomplete: {
+        root: ({ props }) => ({
+            class: ['relative inline-flex', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }, { 'w-full': props.multiple }]
+        }),
+        container: {
+            class: [
+                'm-0 list-none cursor-text overflow-hidden flex items-center flex-wrap w-full',
+                'px-3 py-2 gap-2',
+                'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40  transition duration-200 ease-in-out appearance-none rounded-md',
+                'focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] hover:border-blue-500 focus:outline-none dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        inputtoken: {
+            class: ['py-0.375rem px-0', 'flex-1 inline-flex']
+        },
+        input: ({ props }) => ({
+            class: [
+                'm-0',
+                ' transition-colors duration-200 appearance-none rounded-lg',
+                ' ',
+                { 'rounded-tr-none rounded-br-none': props.dropdown },
+                {
+                    'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] hover:border-blue-500 focus:outline-none':
+                        !props.multiple,
+                    'font-sans text-base text-gray-700 dark:text-white/80 border-0 outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full': props.multiple
+                }
+            ]
+        }),
+        token: {
+            class: ['py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center']
+        },
+        dropdownbutton: {
+            root: {
+                class: ['rounded-tl-none rounded-bl-none']
+            }
+        },
+        panel: {
+            class: ['bg-white text-gray-700 border-0 rounded-md shadow-lg', 'max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80']
+        },
+        list: {
+            class: ['py-3 list-none m-0']
+        },
+        item: ({ context }) => ({
+            class: [
+                'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
+                'm-0 p-3 border-0  transition-shadow duration-200 rounded-none',
+                'dark:text-white/80 dark:hover:bg-gray-800',
+                'hover:text-gray-700 hover:bg-gray-200',
+                { 'text-gray-700 bg-transparent': !context.selected, 'text-blue-600 bg-blue-50 hover:text-blue-600 hover:bg-blue-100 dark:text-white dark:bg-gray-700 dark:hover:bg-gray-700': context.selected }
+            ]
+        }),
+        itemgroup: {
+            class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto']
+        }
+    },
+    chips: {
+        root: ({ props }) => ({
+            class: ['flex', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+        }),
+        container: {
+            class: [
+                'm-0 py-1.5 px-3 list-none cursor-text overflow-hidden flex items-center flex-wrap',
+                'w-full',
+                'm-0',
+                'font-sans text-base text-gray-600 dark:text-white/70 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+
+        inputtoken: {
+            class: ['py-1.5 px-0', 'flex flex-1 inline-flex']
+        },
+        input: {
+            class: ['font-sans text-base text-gray-700 dark:text-white/80 p-0 m-0', 'border-0 outline-none bg-transparent shadow-none rounded-none w-full']
+        },
+        token: {
+            class: ['py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center']
+        },
+        removeTokenIcon: {
+            class: ['ml-2']
+        }
+    },
+    colorpicker: {
+        root: ({ props }) => ({
+            class: ['inline-block', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+        }),
+        input: {
+            class: [
+                'm-0',
+                'font-sans text-base text-gray-600 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 rounded-lg cursor-pointer',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                'w-8 h-8'
+            ]
+        },
+        panel: ({ props }) => ({
+            class: ['shadow-md', 'bg-gray-800 border-gray-900', { 'relative h-48 w-52': props.inline, 'absolute h-48 w-52': !props.inline }]
+        }),
+        selector: {
+            class: ['absolute h-44 w-40 top-2 left-2']
+        },
+        color: {
+            class: ['h-44 w-40'],
+            style: 'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)'
+        },
+        colorhandle: {
+            class: ['rounded-full border border-solid cursor-pointer h-3 w-3 absolute  opacity-85', 'border-white']
+        },
+        hue: {
+            class: ['h-44 w-6 absolute top-2 left-44 opacity-85'],
+            style: 'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)'
+        },
+        huehandle: {
+            class: ['border-solid border-2 cursor-pointer h-2 w-8 left-0 -ml-1 -mt-1 opacity-85 absolute']
+        }
+    },
+    editor: {
+        toolbar: {
+            class: ['bg-gray-100 rounded-tr-md rounded-tl-md', 'border border-gray-300 box-border font-sans px-2 py-1']
+        },
+        formats: {
+            class: ['inline-block align-middle', 'mr-4']
+        },
+        header: {
+            class: ['text-gray-700 inline-block float-left text-base font-medium h-6 relative align-middle', 'w-28', 'border-0 text-gray-600']
+        }
+    },
+    //MISC
+
+    badge: {
+        root: ({ props }) => ({
+            class: [
+                'rounded-full p-0 text-center inline-block',
+                'bg-blue-500 text-white font-bold',
+                {
+                    'bg-gray-500 ': props.severity == 'secondary',
+                    'bg-green-500 ': props.severity == 'success',
+                    'bg-blue-500 ': props.severity == 'info',
+                    'bg-orange-500 ': props.severity == 'warning',
+                    'bg-purple-500 ': props.severity == 'help',
+                    'bg-red-500 ': props.severity == 'danger'
+                },
+                { 'text-xs min-w-[1.5rem] h-[1.5rem] leading-[1.5rem]': props.size == null, 'text-lg min-w-[2.25rem] h-[2.25rem] leading-[2.25rem]': props.size == 'large', 'text-2xl min-w-[3rem] h-[3rem] leading-[3rem]': props.size == 'xlarge' }
+            ]
+        })
+    },
+    avatar: {
+        root: ({ props, parent }) => ({
+            class: [
+                'flex items-center justify-center',
+                'bg-gray-300 dark:bg-gray-800',
+                { 'rounded-lg': props.shape == 'square', 'rounded-full': props.shape == 'circle' },
+                { 'text-base h-8 w-8': props.size == null || props.size == 'normal', 'w-12 h-12 text-xl': props.size == 'large', 'w-16 h-16 text-2xl': props.size == 'xlarge' },
+                { '-ml-4 border-2 border-white dark:border-gray-900': parent.instance.$css !== undefined, '': !(parent.instance.$css !== undefined) }
+            ]
+        }),
+        image: {
+            class: ['h-full w-full']
+        }
+    },
+    avatargroup: {
+        root: {
+            class: ['flex items-center']
+        }
+    },
+    chip: {
+        root: {
+            class: ['inline-flex items-center', 'bg-gray-200 text-gray-800 rounded-[16px] px-3 dark:text-white/80 dark:bg-gray-900']
+        },
+        label: {
+            class: ['leading-6 mt-1.5 mb-1.5']
+        },
+        icon: {
+            class: ['leading-6 mr-2']
+        },
+        image: {
+            class: ['w-9 h-9 ml-[-0.75rem] mr-2', 'rounded-full']
+        },
+        removeIcon: {
+            class: ['ml-2 rounded-md transition duration-200 ease-in-out', 'cursor-pointer leading-6']
+        }
+    },
+    progressbar: {
+        root: ({ props }) => ({
+            class: ['overflow-hidden relative', 'border-0 h-6 bg-gray-200 rounded-md dark:bg-gray-800']
+        }),
+        value: ({ props }) => ({
+            class: [
+                'transition-width duration-1000 ease-in-out',
+                'items-center border-0 flex h-full justify-center overflow-hidden absolute w-0',
+                'border-0 m-0 bg-blue-500',
+                { 'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit': props.mode == 'indeterminate' }
+            ]
+        }),
+        label: {
+            class: ['inline-flex', 'text-white leading-6']
+        }
+    },
+    progressspinner: {
+        root: {
+            class: ['relative mx-auto w-28 h-28 inline-block', 'before:block before:pt-full']
+        },
+        spinner: {
+            class: ['absolute top-0 bottom-0 left-0 right-0 m-auto w-full h-full transform origin-center animate-spin']
+        },
+        circle: {
+            class: ['text-red-500 stroke-current']
+        }
+    },
+    skeleton: {
+        root: ({ props }) => ({
+            class: [
+                'overflow-hidden',
+                '!mb-2',
+                'bg-gray-300 dark:bg-gray-800',
+                'after:absolute after:top-0 after:left-0 after:right-0 after:bottom-0 after:content after:w-full after:h-full after:bg-blue-400 after:left-full after:transform after:translate-x-full after:z-10 after:bg-gradient-to-r after:from-transparent after:via-white after:to-transparent animate-pulse',
+                { 'rounded-md': props.shape !== 'circle', 'rounded-full': props.shape == 'circle' }
+            ]
+        })
+    },
+    tag: {
+        root: ({ props }) => ({
+            class: [
+                'inline-flex items-center justify-center',
+                'bg-blue-500 text-white text-xs font-semibold px-2 py-1 ',
+                {
+                    'bg-gray-500 ': props.severity == 'secondary',
+                    'bg-green-500 ': props.severity == 'success',
+                    'bg-blue-500 ': props.severity == 'info',
+                    'bg-orange-500 ': props.severity == 'warning',
+                    'bg-purple-500 ': props.severity == 'help',
+                    'bg-red-500 ': props.severity == 'danger'
+                },
+                { 'rounded-md': !props.rounded, 'rounded-full': props.rounded }
+            ]
+        }),
+        value: {
+            class: ['leading-6']
+        },
+        icon: {
+            class: ['mr-1 text-sm']
+        }
+    },
+    inplace: {
+        display: ({ props }) => ({
+            class: ['p-3 rounded-md transition duration-200 ', 'inline cursor-pointer', 'hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-800/80 dark:hover:text-white/80']
+        })
+    },
+    scrolltop: {
+        root: ({ props }) => ({
+            class: ['fixed bottom-20 right-20 flex items-center justify-center', 'bg-blue-500 text-white rounded-md h-8 w-8', 'ml-auto']
+        })
+    },
+    terminal: {
+        root: ({ props }) => ({
+            class: ['border border-gray-300 p-5', 'bg-gray-900 text-white dark:border-blue-900/40 ', 'h-72 overflow-auto']
+        }),
+        container: {
+            class: ['flex items-center']
+        },
+        prompt: {
+            class: ['text-yellow-400']
+        },
+        commandtext: {
+            class: ['flex-1 flex-shrink-1 flex-grow-0 border-0 bg-transparent text-inherit p-0 outline-none']
+        }
+    },
+
+    //MENU
+    breadcrumb: {
+        root: {
+            class: ['overflow-x-auto', 'bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md p-4']
+        },
+        menu: {
+            class: ['m-0 p-0 list-none flex items-center flex-nowrap']
+        },
+        action: {
+            class: [
+                'text-decoration-none flex items-center',
+                'transition-shadow duration-200 rounded-md text-gray-600 dark:text-white/70',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        icon: {
+            class: ['text-gray-600 dark:text-white/70']
+        },
+        separator: {
+            class: ['mx-2 text-gray-600 dark:text-white/70', 'flex items-center']
+        }
+    },
+    contextmenu: {
+        root: {
+            class: ['py-1 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-none shadow-md rounded-lg w-52']
+        },
+        menu: {
+            class: ['m-0 p-0 list-none', 'outline-none']
+        },
+        menuitem: {
+            class: ['relative']
+        },
+        content: {
+            class: ['text-gray-700 dark:text-white/80 transition-shadow duration-200 rounded-none', 'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80']
+        },
+        action: {
+            class: ['cursor-pointer flex items-center no-underline overflow-hidden relative', 'text-gray-700 dark:text-white/80 py-3 px-5 select-none']
+        },
+        icon: {
+            class: ['text-gray-600 dark:text-white/70 mr-2']
+        },
+        label: {
+            class: ['text-gray-600 dark:text-white/70']
+        }
+    },
+    dock: {
+        root: ({ props }) => ({
+            class: [
+                'absolute z-1 flex justify-center items-center pointer-events-none',
+                { 'left-0 bottom-0 w-full': props.position == 'bottom', 'left-0 top-0 w-full': props.position == 'top', 'left-0 top-0 h-full': props.position == 'left', 'right-0 top-0 h-full': props.position == 'right' }
+            ]
+        }),
+        container: {
+            class: ['flex pointer-events-auto', 'bg-white/10 border-white/20 p-2 border rounded-md']
+        },
+        menu: ({ props }) => ({
+            class: [
+                'm-0 p-0 list-none flex items-center justify-center',
+                'outline-none',
+                {
+                    'flex-col': props.position == 'left' || props.position == 'right'
+                }
+            ]
+        }),
+        menuitem: ({ props, context, instance }) => ({
+            class: [
+                'p-2 rounded-md',
+                'transition-all duration-200 ease-cubic-bezier-will-change-transform transform ',
+                {
+                    'origin-bottom hover:mx-6': props.position == 'bottom',
+                    'origin-top hover:mx-6': props.position == 'top',
+                    'origin-left hover:my-6': props.position == 'left',
+                    'origin-right hover:my-6': props.position == 'right'
+                },
+                {
+                    'hover:scale-150': instance.currentIndex === context.index,
+                    'scale-125': instance.currentIndex - 1 === context.index || instance.currentIndex + 1 === context.index,
+                    'scale-110': instance.currentIndex - 2 === context.index || instance.currentIndex + 2 === context.index
+                }
+            ]
+        }),
+        action: {
+            class: ['flex flex-col items-center justify-center relative overflow-hidden cursor-default', 'w-16 h-16']
+        }
+    },
+
+    menu: {
+        root: {
+            class: ['py-1 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40 rounded-md w-48']
+        },
+        menu: {
+            class: ['m-0 p-0 list-none', 'outline-none']
+        },
+        content: {
+            class: ['text-gray-700 dark:text-white/80 transition-shadow duration-200 rounded-none', 'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80']
+        },
+        action: {
+            class: ['text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative']
+        },
+        icon: {
+            class: ['text-gray-600 dark:text-white/70 mr-2"']
+        },
+        submenuheader: {
+            class: ['m-0 p-3 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-bold rounded-tl-none rounded-tr-none']
+        }
+    },
+
+    menubar: {
+        root: {
+            class: ['p-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40 rounded-md', 'flex items-center relative']
+        },
+        menu: ({ props, context }) => ({
+            class: [
+                'm-0 sm:p-0 list-none',
+                'outline-none',
+                'sm:flex items-center flex-wrap sm:flex-row sm:top-auto sm:left-auto sm:relative sm:bg-transparent sm:shadow-none sm:w-auto',
+                'flex-col top-full left-0',
+                'absolute py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-full',
+
+                { 'hidden ': !props?.mobileActive, 'flex ': props?.mobileActive }
+            ]
+        }),
+        menuitem: ({ props, context }) => ({
+            class: ['sm:relative sm:w-auto', 'w-full static']
+        }),
+        content: ({ props, context }) => ({
+            class: [
+                ' transition-shadow duration-200',
+                { 'rounded-md': props.root, '': !props.root },
+                { 'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active, 'text-blue-600 bg-blue-100': context.active }
+            ]
+        }),
+        action: ({ props, context }) => ({
+            class: ['select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none']
+        }),
+        icon: ({ props, context }) => ({
+            class: ['mr-2', { 'text-gray-600 dark:text-white/70': !context.active, 'text-blue-600': context.active }]
+        }),
+        submenuicon: ({ props, context }) => ({
+            class: [
+                { 'text-gray-600 dark:text-white/70': !context.active, 'text-blue-600': context.active },
+                { 'ml-2': props.root, 'ml-auto': !props.root }
+            ]
+        }),
+        submenu: ({ props, context }) => ({
+            class: ['py-1 bg-white dark:bg-gray-900 border-0  sm:shadow-md sm:w-48', 'w-full static shadow-none', 'sm:absolute z-10', 'm-0 list-none', { 'sm:absolute sm:left-full sm:top-0': props.level > 1 }]
+        }),
+        separator: {
+            class: ['border-t border-gray-300 dark:border-blue-900/40 my-1']
+        },
+        button: {
+            class: [
+                'flex sm:hidden w-8 h-8 rounded-full text-gray-600 dark:text-white/80 transition duration-200 ease-in-out',
+                'cursor-pointer flex items-center justify-center no-underline',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80 ',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        }
+    },
+    megamenu: {
+        root: ({ props, context }) => ({
+            class: [
+                'bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40  rounded-md',
+                'flex relative',
+                { 'p-2 items-center': props.orientation == 'horizontal', 'flex-col w-48 p-0 py-1': props.orientation !== 'horizontal' }
+            ]
+        }),
+        menu: ({ props, context }) => ({
+            class: ['m-0 sm:p-0 list-none relative', 'outline-none', 'flex items-center flex-wrap flex-row top-auto left-auto relative bg-transparent shadow-none w-auto']
+        }),
+        menuitem: ({ props, context }) => ({
+            class: ['relative', { 'w-auto': props.horizontal, 'w-full': !props.horizontal }]
+        }),
+        content: ({ props, context }) => ({
+            class: [
+                'transition-shadow duration-200',
+                { 'rounded-md': props.level < 1 && props.horizontal },
+                { 'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active, 'text-blue-600 bg-blue-100': context.active }
+            ]
+        }),
+        action: ({ props, context }) => ({
+            class: ['select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none']
+        }),
+        icon: ({ props, context }) => ({
+            class: ['mr-2', { 'text-gray-600 dark:text-white/70': !context.active, 'text-blue-600': context.active }]
+        }),
+        submenuicon: ({ props, context }) => ({
+            class: [{ 'ml-2': props.horizontal, 'ml-auto': !props.horizontal }]
+        }),
+        panel: ({ props, context }) => ({
+            class: ['py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-auto', 'absolute z-10', { 'left-full top-0': !props.horizontal }]
+        }),
+        grid: {
+            class: ['flex']
+        },
+        column: {
+            class: ['w-1/2']
+        },
+        submenu: {
+            class: ['m-0 list-none', 'py-1 w-48']
+        },
+        submenuheader: {
+            class: ['m-0 py-3 px-5 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold rounded-tr-md rounded-tl-md']
+        }
+    },
+    panelmenu: {
+        root: ({ props, instance }) => ({
+            class: ['w-full md:w-[25rem]']
+        }),
+        panel: {
+            class: ['mb-1']
+        },
+        header: {
+            class: ['outline-none']
+        },
+        headercontent: {
+            class: [
+                'border border-solid border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 bg-gray-100 dark:bg-gray-900 rounded-md transition-shadow duration-200',
+                'hover:bg-gray-200 dark:hover:bg-gray-800/80  hover:text-gray-700 dark:hover:text-white/80',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        headeraction: {
+            class: ['flex items-center select-none cursor-pointer relative no-underline', 'text-gray-700 dark:text-white/80 p-5 font-bold']
+        },
+        submenuicon: {
+            class: ['mr-2']
+        },
+        headericon: {
+            class: ['mr-2']
+        },
+        menucontent: {
+            class: ['py-1 border border-t-0 border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 rounded-t-none rounded-br-md rounded-bl-md']
+        },
+        menu: {
+            class: ['outline-none', 'm-0 p-0 list-none']
+        },
+        content: {
+            class: ['text-gray-700 dark:text-white/80 transition-shadow duration-200 border-none rounded-none', 'hover:bg-gray-200 dark:hover:bg-gray-800/80  hover:text-gray-700 dark:hover:text-white/80']
+        },
+        action: {
+            class: ['text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'flex items-center cursor-pointer no-underline relative overflow-hidden']
+        },
+        icon: {
+            class: ['mr-2']
+        },
+        submenu: {
+            class: ['p-0 pl-4 m-0 list-none']
+        }
+    },
+    steps: {
+        root: {
+            class: ['relative']
+        },
+        menu: {
+            class: ['p-0 m-0 list-none flex']
+        },
+        menuitem: ({ props }) => ({
+            class: ['relative flex justify-center flex-1 overflow-hidden', 'before:border-t before:border-gray-300 before:dark:border-blue-900/40 before:w-full before:absolute before:top-1/4 before:left-0 before:transform before:-translate-y-1/2']
+        }),
+        action: {
+            class: [
+                'inline-flex flex-col items-center overflow-hidden',
+                'transition-shadow rounded-md bg-white dark:bg-transparent',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        step: {
+            class: ['flex items-center justify-center', 'text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40  bg-white dark:bg-gray-900 w-[2rem] h-[2rem] leading-2rem text-sm z-10 rounded-full']
+        },
+        label: {
+            class: ['block', 'whitespace-nowrap overflow-hidden overflow-ellipsis max-w-full', 'mt-2 text-gray-500 dark:text-white/60']
+        }
+    },
+    tabmenu: {
+        root: {
+            class: ['overflow-x-auto']
+        },
+        menu: {
+            class: ['flex m-0 p-0 list-none flex-nowrap', 'bg-white border-solid border-gray-300 border-b-2', 'outline-none no-underline text-base list-none']
+        },
+        menuitem: {
+            class: ['mr-0']
+        },
+        action: ({ props, context }) => ({
+            class: ['cursor-pointer select-none flex items-center relative no-underline overflow-hidden', 'border-b-2 border-gray-300 bg-white text-gray-600 p-5 font-bold rounded-t-lg ', 'hover:bg-white  hover:border-gray-400 hover:text-gray-600'],
+            style: 'top:2px'
+        }),
+        icon: {
+            class: ['mr-2']
+        }
+    },
+    tieredmenu: {
+        root: {
+            class: ['py-1 bg-white border border-gray-300 rounded-lg w-[12.5rem]', 'dark:border-blue-900/40 dark:bg-gray-900']
+        },
+        menu: {
+            class: ['outline-none', 'm-0 p-0 list-none']
+        },
+        menuitem: {
+            class: ['relative']
+        },
+        content: ({ props, context }) => ({
+            class: ['transition-shadow duration-200 border-none rounded-none', 'hover:bg-gray-200 hover:text-gray-700 dark:hover:text-white/80 dark:hover:bg-gray-800/80']
+        }),
+        action: ({ props, context }) => ({
+            class: [
+                'py-3 px-5 select-none',
+                'flex items-center cursor-pointer no-underline relative overflow-hidden',
+                { 'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active, 'text-blue-600 bg-blue-100': context.active }
+            ]
+        }),
+        icon: {
+            class: ['mr-2']
+        },
+        submenuicon: {
+            class: ['ml-auto']
+        },
+        separator: {
+            class: ['border-t border-gray-300 my-1 dark:border-blue-900/40']
+        },
+        submenu: {
+            class: ['py-1 bg-white dark:bg-gray-900 border-0 shadow-md min-w-full', 'absolute z-10', 'left-full top-0']
+        }
+    },
+    //MEDIA
+
+    image: {
+        root: {
+            class: ['relative inline-block']
+        },
+        button: {
+            class: ['absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300', 'bg-transparent text-gray-100', 'hover:opacity-100 hover:cursor-pointer hover:bg-black hover:bg-opacity-50']
+        },
+        mask: {
+            class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90']
+        },
+        toolbar: {
+            class: ['absolute top-0 right-0 flex', 'p-4']
+        },
+        rotaterightbutton: {
+            class: [
+                'flex justify-center items-center',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            ]
+        },
+        rotaterighticon: {
+            class: ['w-6 h-6']
+        },
+        rotateleftbutton: {
+            class: [
+                'flex justify-center items-center',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            ]
+        },
+        rotatelefticon: {
+            class: ['w-6 h-6']
+        },
+        zoomoutbutton: {
+            class: [
+                'flex justify-center items-center',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            ]
+        },
+        zoomouticon: {
+            class: ['w-6 h-6']
+        },
+        zoominbutton: {
+            class: [
+                'flex justify-center items-center',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            ]
+        },
+        zoominicon: {
+            class: ['w-6 h-6']
+        },
+        closebutton: {
+            class: [
+                'flex justify-center items-center',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            ]
+        },
+        closeicon: {
+            class: ['w-6 h-6']
+        }
+    },
+    galleria: {
+        root: ({ instance, props }) => ({
+            class: ['flex flex-col']
+        }),
+        content: {
+            class: ['flex flex-col']
+        },
+        itemwrapper: {
+            class: ['flex flex-col relative']
+        },
+        itemcontainer: {
+            class: ['relative flex h-full']
+        },
+        item: {
+            class: ['flex justify-center items-center h-full w-full']
+        },
+        thumbnailwrapper: {
+            class: ['flex flex-col overflow-auto flex-shrink-0']
+        },
+        thumbnailcontainer: {
+            class: ['flex flex-row', 'bg-black/90 p-4']
+        },
+        previousthumbnailbutton: {
+            class: [
+                'self-center flex flex-shrink-0 justify-center items-center overflow-hidden relative',
+                'm-2 bg-transparent text-white w-8 h-8 transition duration-200 ease-in-out rounded-full',
+                'hover:bg-white/10 hover:text-white',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            ]
+        },
+        thumbnailitemscontainer: {
+            class: ['overflow-hidden w-full']
+        },
+        thumbnailitems: {
+            class: ['flex']
+        },
+        thumbnailitem: {
+            class: ['overflow-auto flex items-center justify-center cursor-pointer opacity-50', 'flex-1 flex-grow-0 flex-shrink-0 w-20', 'hover:opacity-100 hover:transition-opacity hover:duration-300']
+        },
+        nextthumbnailbutton: {
+            class: [
+                'self-center flex flex-shrink-0 justify-center items-center overflow-hidden relative',
+                'm-2 bg-transparent text-white w-8 h-8 transition duration-200 ease-in-out rounded-full',
+                'hover:bg-white/10 hover:text-white',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            ]
+        },
+        indicators: {
+            class: ['flex items-center justify-center', 'p-4']
+        },
+        indicator: {
+            class: ['mr-2']
+        },
+        mask: {
+            class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90']
+        },
+        closebutton: {
+            class: [
+                'absolute top-0 right-0 flex justify-center items-center overflow-hidden m-2',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            ]
+        },
+        closeicon: {
+            class: ['w-6 h-6']
+        },
+        previousitembutton: {
+            class: [
+                'inline-flex justify-center items-center overflow-hidden',
+                'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md mx-2',
+                'fixed top-1/2 mt-[-0.5rem]',
+                'left-0',
+                'hover:bg-white/10 hover:text-white',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            ]
+        },
+        nextitembutton: {
+            class: [
+                'inline-flex justify-center items-center overflow-hidden',
+                'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md mx-2',
+                'fixed top-1/2 mt-[-0.5rem]',
+                'right-0',
+                'hover:bg-white/10 hover:text-white',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            ]
+        },
+        caption: {
+            class: ['absolute bottom-0 left-0 w-full', 'bg-black/50 text-white p-4']
+        }
+    },
+    carousel: {
+        root: {
+            class: ['flex flex-col']
+        },
+        content: {
+            class: ['flex flex-col overflow-auto']
+        },
+        container: {
+            class: ['flex flex-row']
+        },
+        previousbutton: ({ props, context }) => ({
+            class: ['flex justify-center items-center self-center overflow-hidden relative flex-shrink-0 flex-grow-0', 'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mx-2']
+        }),
+        itemscontent: {
+            class: ['overflow-hidden w-full']
+        },
+        itemscontainer: {
+            class: ['flex flex-row']
+        },
+        item: {
+            class: ['flex-1']
+        }
+    },
+    tree: {
+        root: {
+            class: ['max-w-[30rem] md:w-full', 'border border-solid border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 p-5 rounded-md']
+        },
+        wrapper: {
+            class: ['overflow-auto']
+        },
+        container: {
+            class: ['m-0 p-0 list-none overflow-auto']
+        },
+        node: {
+            class: ['p-1 outline-none']
+        },
+        content: ({ context, props }) => ({
+            class: [
+                'flex items-center',
+                'rounded-lg transition-shadow duration-200 p-2',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'bg-blue-50 text-blue-600': context.selected },
+                { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' }
+            ]
+        }),
+        toggler: ({ context }) => ({
+            class: [
+                'cursor-pointer select-none inline-flex items-center justify-center overflow-hidden relative flex-shrink-0',
+                'mr-2 w-8 h-8 border-0 bg-transparent rounded-full transition duration-200',
+                'hover:border-transparent focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'text-gray-500 dark:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80  hover:text-gray-800 dark:hover:text-white/80': !context.selected, 'text-blue-600 hover:bg-white/30': context.selected }
+            ]
+        }),
+        checkboxcontainer: {
+            class: ['mr-2']
+        },
+        checkbox: ({ context, props }) => ({
+            class: [
+                'cursor-pointer inline-flex relative select-none align-bottom',
+                'w-6 h-6',
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 rounded-lg transition-colors duration-200 text-white text-base dark:text-gray-900',
+                { 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked, 'border-blue-500 text-white bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            ]
+        }),
+        nodeicon: {
+            class: ['mr-2 text-gray-600 dark:text-white/70']
+        },
+        subgroup: {
+            class: ['m-0 list-none', 'p-0 pl-4']
+        },
+        filtercontainer: {
+            class: ['mb-2', 'relative block w-full']
+        },
+        input: {
+            class: [
+                'm-0 p-3 text-base w-full pr-7',
+                'font-sans text-gray-600 dark:text-white/70 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        searchicon: {
+            class: ['absolute top-1/2 -mt-2 right-3 text-gray-600 dark:hover:text-white/70']
+        }
+    },
+    // DATA
+    timeline: {
+        root: ({ props }) => ({
+            class: [
+                'flex flex-grow',
+                {
+                    'flex-col': props.layout === 'vertical',
+                    'flex-row flex-1': props.layout === 'horizontal'
+                }
+            ]
+        }),
+        event: ({ props, context }) => ({
+            class: [
+                'flex relative min-h-[70px]',
+                {
+                    'flex-row-reverse': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1),
+                    'flex-col flex-1': props.layout === 'horizontal',
+                    'flex-col-reverse ': props.align === 'bottom' || (props.layout === 'horizontal' && props.align === 'alternate' && context.index % 2 === 1)
+                }
+            ]
+        }),
+        opposite: ({ props, context }) => ({
+            class: [
+                'flex-1',
+                {
+                    'px-4': props.layout === 'vertical',
+                    'py-4': props.layout === 'horizontal'
+                },
+                {
+                    'text-right': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
+                    'text-left': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
+                }
+            ]
+        }),
+        separator: ({ props }) => ({
+            class: [
+                'flex items-center flex-initial',
+                {
+                    'flex-col': props.layout === 'vertical',
+                    'flex-row': props.layout === 'horizontal'
+                }
+            ]
+        }),
+        marker: {
+            class: ['flex self-baseline w-4 h-4 rounded-full border-2 border-blue-500 bg-white dark:border-blue-300 dark:bg-blue-900/40']
+        },
+        connector: ({ props }) => ({
+            class: [
+                'flex-grow bg-gray-300 dark:bg-blue-900/40',
+                {
+                    'w-[2px]': props.layout === 'vertical',
+                    'w-full h-[2px]': props.layout === 'horizontal'
+                }
+            ]
+        }),
+        content: ({ props, context }) => ({
+            class: [
+                'flex-1',
+                {
+                    'px-4': props.layout === 'vertical',
+                    'py-4': props.layout === 'horizontal'
+                },
+                {
+                    'text-left': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
+                    'text-right': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
+                },
+                {
+                    'min-h-0': props.layout === 'vertical' && context.index === context.count,
+                    'flex-grow-0': props.layout === 'horizontal' && context.index === context.count
+                }
+            ]
+        })
+    },
+    dataview: {
+        content: {
+            class: [
+                'bg-white blue-gray-700 border-0 p-0',
+                'bg-gray-900 dark:text-white/80' // Dark Mode
+            ]
+        },
+        grid: {
+            class: 'flex flex-wrap ml-0 mr-0 mt-0'
+        },
+        header: {
+            class: 'bg-gray-100 text-blue-gray-800 border-gray-200 border-t border-b p-4 font-bold'
+        }
+    },
+    dataviewlayoutoptions: {
+        listbutton: ({ props }) => ({
+            class: [
+                'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom justify-center border',
+                'transition duration-200',
+                'w-12 pt-3 pb-3 rounded-lg rounded-r-none',
+                props.modelValue === 'list' ? 'bg-blue-500 border-blue-500 text-white dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' : 'bg-white border-gray-300 text-blue-gray-700 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // highlighted state
+            ]
+        }),
+        gridbutton: ({ props }) => ({
+            class: [
+                'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom justify-center border',
+                'transition duration-200',
+                'w-12 pt-3 pb-3 rounded-lg rounded-l-none',
+                props.modelValue === 'grid' ? 'bg-blue-500 border-blue-500 text-white dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' : 'bg-white border-gray-300 text-blue-gray-700 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // highlighted state
+            ]
+        })
+    },
+    organizationchart: {
+        table: {
+            class: 'mx-auto my-0 border-spacing-0 border-separate'
+        },
+        cell: {
+            class: 'text-center align-top py-0 px-3'
+        },
+        node: {
+            class: [
+                'relative inline-block bg-white border border-gray-300 text-gray-600 p-5',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' // Dark Mode
+            ]
+        },
+        linecell: {
+            class: 'text-center align-top py-0 px-3'
+        },
+        linedown: {
+            class: [
+                'mx-auto my-0 w-px h-[20px] bg-gray-300',
+                'dark:bg-blue-900/40' //Dark Mode
+            ]
+        },
+        lineleft: ({ context }) => ({
+            class: [
+                'text-center align-top py-0 px-3 rounded-none border-r border-gray-300',
+                {
+                    'border-t': context.lineTop
+                },
+                'dark:border-blue-900/40' //Dark Mode
+            ]
+        }),
+        lineright: ({ context }) => ({
+            class: [
+                'text-center align-top py-0 px-3 rounded-none',
+                {
+                    'border-t border-gray-300': context.lineTop
+                },
+                'dark:border-blue-900/40' //Dark Mode
+            ]
+        }),
+        nodecell: {
+            class: 'text-center align-top py-0 px-3'
+        },
+        nodetoggler: {
+            class: [
+                'absolute bottom-[-0.75rem] left-2/4 -ml-3 w-6 h-6 bg-inherit text-inherit rounded-full z-2 cursor-pointer no-underline select-none',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]' // Focus styles
+            ]
+        },
+        nodetogglericon: {
+            class: 'relative inline-block w-4 h-4'
+        }
+    },
+    orderlist: {
+        root: {
+            class: 'flex'
+        },
+        controls: {
+            class: 'flex flex-col justify-center p-5'
+        },
+        moveupbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            })
+        },
+        movetopbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            })
+        },
+        movedownbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            })
+        },
+        movebottombutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            })
+        },
+        container: {
+            class: 'flex-auto'
+        },
+        header: {
+            class: [
+                'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
+                'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+            ]
+        },
+        list: {
+            class: [
+                'list-none m-0 p-0 overflow-auto min-h-[12rem] max-h-[24rem]',
+                'border border-gray-300 bg-white text-gray-600 py-3 px-0 rounded-b-md outline-none',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' //Dark Mode
+            ]
+        },
+        item: ({ context }) => ({
+            class: [
+                'relative cursor-pointer overflow-hidden',
+                'py-3 px-5 m-0 border-none text-gray-600 dark:text-white/80',
+                'transition duration-200',
+                {
+                    'text-blue-700 bg-blue-500/20 dark:bg-blue-300/20': context.active && !context.focused,
+                    'text-blue-700 bg-blue-500/30 dark:bg-blue-300/30': context.active && context.focused,
+                    'text-gray-600 bg-gray-300 dark:bg-blue-900/40': !context.active && context.focused
+                }
+            ]
+        })
+    },
+    picklist: {
+        root: {
+            class: 'flex'
+        },
+        sourcecontrols: {
+            class: 'flex flex-col justify-center p-5'
+        },
+        sourcemoveupbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            })
+        },
+        sourcemovetopbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            })
+        },
+        sourcemovedownbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            })
+        },
+        sourcemovebottombutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            })
+        },
+        sourcewrapper: {
+            class: 'grow shrink basis-2/4'
+        },
+        sourceheader: {
+            class: [
+                'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
+                'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+            ]
+        },
+        sourcelist: {
+            class: [
+                'list-none m-0 p-0 overflow-auto min-h-[12rem] max-h-[24rem]',
+                'border border-gray-300 bg-white text-gray-600 py-3 px-0 rounded-b-md outline-none',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' //Dark Mode
+            ]
+        },
+        item: ({ context }) => ({
+            class: [
+                'relative cursor-pointer overflow-hidden',
+                'py-3 px-5 m-0 border-none text-gray-600 dark:text-white/80',
+                'transition duration-200',
+                {
+                    'text-blue-700 bg-blue-500/20 dark:bg-blue-300/20': context.active && !context.focused,
+                    'text-blue-700 bg-blue-500/30 dark:bg-blue-300/30': context.active && context.focused,
+                    'text-gray-600 bg-gray-300 dark:bg-blue-900/40': !context.active && context.focused
+                }
+            ]
+        }),
+        buttons: {
+            class: 'flex flex-col justify-center p-5'
+        },
+        movetotargetbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            })
+        },
+        movealltotargetbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            })
+        },
+        movetosourcebutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            })
+        },
+        movealltosourcebutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            })
+        },
+        targetcontrols: {
+            class: 'flex flex-col justify-center p-5'
+        },
+        targetmoveupbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            })
+        },
+        targetmovetopbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            })
+        },
+        targetmovedownbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            })
+        },
+        targetmovebottombutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            })
+        },
+        targetwrapper: {
+            class: 'grow shrink basis-2/4'
+        },
+        targetheader: {
+            class: [
+                'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
+                'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+            ]
+        },
+        targetlist: {
+            class: [
+                'list-none m-0 p-0 overflow-auto min-h-[12rem] max-h-[24rem]',
+                'border border-gray-300 bg-white text-gray-600 py-3 px-0 rounded-b-md outline-none',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' //Dark Mode
+            ]
+        }
+    },
+    paginator: {
+        root: {
+            class: [
+                'flex items-center justify-center flex-wrap',
+                'bg-white text-gray-500 border-0 px-4 py-2 rounded-md',
+                'dark:bg-gray-900 dark:text-white/60 dark:border-blue-900/40' // Dark Mode
+            ]
+        },
+        firstpagebutton: ({ context }) => ({
+            class: [
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500  min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:text-white', //Dark Mode
+                {
+                    'cursor-default pointer-events-none opacity-60': context.disabled,
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
+                }
+            ]
+        }),
+        previouspagebutton: ({ context }) => ({
+            class: [
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:text-white', //Dark Mode
+                {
+                    'cursor-default pointer-events-none opacity-60': context.disabled,
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
+                }
+            ]
+        }),
+        nextpagebutton: ({ context }) => ({
+            class: [
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:text-white', //Dark Mode
+                {
+                    'cursor-default pointer-events-none opacity-60': context.disabled,
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
+                }
+            ]
+        }),
+        lastpagebutton: ({ context }) => ({
+            class: [
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:text-white', //Dark Mode
+                {
+                    'cursor-default pointer-events-none opacity-60': context.disabled,
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
+                }
+            ]
+        }),
+        pagebutton: ({ context }) => ({
+            class: [
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:border-blue-300 dark:text-white', // Dark Mode
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus
+                {
+                    'bg-blue-50 border-blue-50 text-blue-700 dark:bg-blue-300': context.active
+                }
+            ]
+        }),
+        rowperpagedropdown: {
+            root: ({ props, state }) => ({
+                class: [
+                    'inline-flex relative cursor-pointer user-none',
+                    'bg-white border rounded-md',
+                    'transition duration-200',
+                    'h-12 mx-2',
+                    'dark:bg-gray-950 dark:border-blue-900/40', //DarkMode
+                    {
+                        'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] border-blue-500': state.focused && !props.disabled, //Focus
+                        'border-gray-300': !state.focused,
+                        'hover:border-blue-500': !props.disabled //Hover
+                    }
+                ]
+            }),
+            input: {
+                class: [
+                    'font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none',
+                    'block whitespace-nowrap overflow-hidden flex-auto w-[1%] cursor-pointer text-ellipsis border-0 pr-0',
+                    'focus:outline-none focus:outline-offset-0',
+                    'dark:text-white' //Dark Mode
+                ]
+            },
+            trigger: {
+                class: ['flex items-center justify-center shrink-0', 'text-gray-500 dark:text-white w-12 rounded-r-md']
+            },
+            panel: {
+                class: [
+                    'bg-white text-gray-600 border-0 rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.1)]',
+                    'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+                ]
+            },
+            wrapper: {
+                class: 'overflow-auto'
+            },
+            list: {
+                class: 'm-0 p-0 py-3 list-none'
+            },
+            item: ({ context }) => ({
+                class: [
+                    'relative font-normal cursor-pointer space-nowrap overflow-hidden',
+                    'm-0 py-3 px-5 border-none text-gray-600 rounded-none',
+                    'transition duration-200',
+                    'dark:text-white/80', // Dark Mode
+                    {
+                        'text-blue-700 bg-blue-50 dark:text-white/80 dark:bg-blue-300': !context.focused && context.selected,
+                        'bg-blue-300/40': context.focused && context.selected,
+                        'text-gray-600 bg-gray-300 dark:text-white/80 dark:bg-blue-900/40': context.focused && !context.selected
+                    }
+                ]
+            })
+        },
+        jumptopageinput: {
+            root: {
+                class: 'inline-flex mx-2'
+            },
+            input: {
+                class: [
+                    'font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none',
+                    'block whitespace-nowrap overflow-hidden flex-auto w-[1%] cursor-pointer text-ellipsis border border-gray-300 pr-0',
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] focus:border-blue-300',
+                    'dark:text-white dark:bg-gray-950 dark:border-blue-900/40', //Dark Mode
+                    'm-0 flex-auto max-w-[3rem]'
+                ]
+            }
+        },
+        jumptopagedropdown: {
+            root: ({ props, state }) => ({
+                class: [
+                    'inline-flex relative cursor-pointer user-none',
+                    'bg-white border rounded-md',
+                    'transition duration-200',
+                    'h-12 mx-2',
+                    'dark:bg-gray-950 dark:border-blue-900/40', //DarkMode
+                    {
+                        'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] border-blue-500': state.focused && !props.disabled, //Focus
+                        'border-gray-300': !state.focused,
+                        'hover:border-blue-500': !props.disabled //Hover
+                    }
+                ]
+            }),
+            input: {
+                class: [
+                    'font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none',
+                    'block whitespace-nowrap overflow-hidden flex-auto w-[1%] cursor-pointer text-ellipsis border-0 pr-0',
+                    'focus:outline-none focus:outline-offset-0',
+                    'dark:text-white' //Dark Mode
+                ]
+            },
+            trigger: {
+                class: ['flex items-center justify-center shrink-0', 'text-gray-500 dark:text-white w-12 rounded-r-md']
+            },
+            panel: {
+                class: [
+                    'bg-white text-gray-600 border-0 rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.1)]',
+                    'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+                ]
+            },
+            wrapper: {
+                class: 'overflow-auto'
+            },
+            list: {
+                class: 'm-0 p-0 py-3 list-none'
+            },
+            item: ({ context }) => ({
+                class: [
+                    'relative font-normal cursor-pointer space-nowrap overflow-hidden',
+                    'm-0 py-3 px-5 border-none text-gray-600 rounded-none',
+                    'transition duration-200',
+                    'dark:text-white/80', // Dark Mode
+                    {
+                        'text-blue-700 bg-blue-50 dark:text-white/80 dark:bg-blue-300': !context.focused && context.selected,
+                        'bg-blue-300/40': context.focused && context.selected,
+                        'text-gray-600 bg-gray-300 dark:text-white/80 dark:bg-blue-900/40': context.focused && !context.selected
+                    }
+                ]
+            })
+        }
+    },
+    treetable: {
+        root: ({ props }) => ({
+            class: [
+                'relative',
+                {
+                    'flex flex-col h-full': props.scrollHeight === 'flex'
+                }
+            ]
+        }),
+        loadingoverlay: {
+            class: [
+                'fixed w-full h-full t-0 l-0 bg-gray-100/40',
+                'transition duration-200',
+                'absolute flex items-center justify-center z-2',
+                'dark:bg-gray-950/40' // Dark Mode
+            ]
+        },
+        loadingicon: {
+            class: 'w-8 h-8'
+        },
+        header: {
+            class: [
+                'bg-slate-50 text-slate-700 border border-x-0 border-t-0 border-gray-300 p-4 font-bold',
+                'dark:bg-gray-900 dark:text-white/70 dark:border-blue-900/40' // Dark Mode
+            ]
+        },
+        wrapper: ({ props }) => ({
+            class: [
+                {
+                    'relative overflow-auto': props.scrollable,
+                    'overflow-x-auto': props.resizableColumns
+                }
+            ]
+        }),
+        footer: {
+            class: [
+                'bg-slate-50 text-slate-700 border border-x-0 border-t-0 border-gray-300 p-4 font-bold',
+                'dark:bg-gray-900 dark:text-white/70 dark:border-blue-900/40' // Dark Mode
+            ]
+        },
+        table: {
+            class: 'border-collapse table-fixed w-full'
+        },
+        thead: ({ props }) => ({
+            class: [
+                {
+                    'block sticky top-0 z-[1]': props.scrollable
+                }
+            ]
+        }),
+        tbody: ({ props }) => ({
+            class: [
+                {
+                    block: props.scrollable
+                }
+            ]
+        }),
+        tfoot: ({ props }) => ({
+            class: [
+                {
+                    block: props.scrollable
+                }
+            ]
+        }),
+        headerrow: ({ props }) => ({
+            class: [
+                {
+                    'flex flex-nowrap w-full': props.scrollable
+                }
+            ]
+        }),
+        row: ({ context }) => ({
+            class: [
+                'transition duration-200',
+                'focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]', // Focus
+                context.selected ? 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80' : 'bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80',
+                {
+                    'hover:bg-gray-300/20 hover:text-gray-600 dark:hover:bg-gray-950': context.selectable && !context.selected, // Hover
+                    'flex flex-nowrap w-full': context.scrollable
+                }
+            ]
+        }),
+        column: {
+            headercell: ({ context }) => ({
+                class: [
+                    'text-left border-gray-300 border font-bold',
+                    'transition duration-200',
+                    context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-slate-50',
+                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900', //Dark Mode
+                    {
+                        'flex flex-1 items-center': context.scrollable,
+                        'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen,
+                        'sticky z-[1]': context.scrollable && context.scrollDirection === 'both' && context.frozen,
+                        'border-x-0 border-l-0 border-t-0': !context.showGridlines,
+                        'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen
+                    }
+                ]
+            }),
+            bodycell: ({ context }) => ({
+                class: [
+                    'text-left border-gray-300 border',
+                    'transition duration-200',
+                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    'dark:border-blue-900/40', //Dark Mode
+                    {
+                        'cursor-pointer': context.selectable,
+                        'flex flex-1 items-center': context.scrollable,
+                        'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen,
+                        sticky: context.scrollable && context.scrollDirection === 'both' && context.frozen,
+                        'border-x-0 border-l-0': !context.showGridlines
+                    }
+                ]
+            }),
+            rowtoggler: ({ context }) => ({
+                class: [
+                    'relative inline-flex items-center justify-center align-center cursor-pointer select-none overflow-hidden bg-transparent',
+                    'w-8 h-8 border-0 rounded mr-0.5',
+                    context.selected ? 'text-blue-700' : 'text-gray-500',
+                    'dark:text-white/70' //Dark Mode
+                ]
+            }),
+            sorticon: ({ context }) => ({
+                class: ['ml-2', context.sorted ? 'text-blue-700 dark:text-white/80' : 'text-slate-700 dark:text-white/70']
+            }),
+            sortbadge: {
+                class: [
+                    'h-[1.143rem] min-w-[1.143rem] leading-[1.143rem] text-blue-700 bg-blue-50 ml-2 rounded-[50%]',
+                    'dark:text-white/80 dark:bg-blue-500/40' // Dark Mode
+                ]
+            },
+            columnresizer: {
+                class: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent'
+            },
+            checkboxwrapper: {
+                class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6 mr-2']
+            },
+            checkbox: ({ context }) => ({
+                class: [
+                    'flex items-center justify-center',
+                    'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
+                    context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
+                    {
+                        'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled
+                    }
+                ]
+            }),
+            checkboxicon: ({ context }) => ({
+                class: [
+                    'w-4 h-4 transition-all duration-200 text-base dark:text-gray-900',
+                    {
+                        'text-white': context.checked
+                    }
+                ]
+            })
+        },
+        resizehelper: {
+            class: ['absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300']
+        }
+    },
+    datatable: {
+        root: ({ props }) => ({
+            class: [
+                'relative',
+                {
+                    'flex flex-col h-full': props.scrollable && props.scrollHeight === 'flex'
+                }
+            ]
+        }),
+        loadingoverlay: {
+            class: [
+                'fixed w-full h-full t-0 l-0 bg-gray-100/40',
+                'transition duration-200',
+                'absolute flex items-center justify-center z-2',
+                'dark:bg-gray-950/40' // Dark Mode
+            ]
+        },
+        loadingicon: {
+            class: 'w-8 h-8'
+        },
+        wrapper: ({ props }) => ({
+            class: [
+                {
+                    relative: props.scrollable,
+                    'flex flex-col grow h-full': props.scrollable && props.scrollHeight === 'flex'
+                }
+            ]
+        }),
+        header: ({ props }) => ({
+            class: [
+                'bg-slate-50 text-slate-700 border-gray-300 font-bold p-4',
+                'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900', // Dark Mode
+                props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0'
+            ]
+        }),
+        table: {
+            class: 'w-full border-spacing-0'
+        },
+        thead: ({ context }) => ({
+            class: [
+                {
+                    'bg-slate-50 top-0 z-[1]': context.scrollable
+                }
+            ]
+        }),
+        tbody: ({ instance, context }) => ({
+            class: [
+                {
+                    'sticky z-[1]': instance.frozenRow && context.scrollable
+                }
+            ]
+        }),
+        tfoot: ({ context }) => ({
+            class: [
+                {
+                    'bg-slate-50 bottom-0 z-[1]': context.scrollable
+                }
+            ]
+        }),
+        footer: {
+            class: [
+                'bg-slate-50 text-slate-700 border-t-0 border-b border-x-0 border-gray-300 font-bold p-4',
+                'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900' // Dark Mode
+            ]
+        },
+        column: {
+            headercell: ({ context, props }) => ({
+                class: [
+                    'text-left border-0 border-b border-solid border-gray-300 dark:border-blue-900/40 font-bold',
+                    'transition duration-200',
+                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-slate-50 text-slate-700', // Sort
+                    context.sorted ? 'dark:text-white/80 dark:bg-blue-300' : 'dark:text-white/80 dark:bg-gray-900', // Dark Mode
+                    {
+                        'sticky z-[1]': props.frozen || props.frozen === '', // Frozen Columns
+                        'border-x border-y': context?.showGridlines,
+                        'overflow-hidden space-nowrap border-y relative bg-clip-padding': context.resizable // Resizable
+                    }
+                ]
+            }),
+            headercontent: {
+                class: 'flex items-center'
+            },
+            bodycell: ({ props, context }) => ({
+                class: [
+                    'text-left border-0 border-b border-solid border-gray-300',
+                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    'dark:text-white/80 dark:border-blue-900/40', // Dark Mode
+                    {
+                        'sticky bg-inherit': props.frozen || props.frozen === '', // Frozen Columns
+                        'border-x border-y': context?.showGridlines
+                    }
+                ]
+            }),
+            footercell: ({ context }) => ({
+                class: [
+                    'text-left border-0 border-b border-solid border-gray-300 font-bold',
+                    'bg-slate-50 text-slate-700',
+                    'transition duration-200',
+                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    'dark:text-white/80 dark:bg-gray-900 dark:border-blue-900/40', // Dark Mode
+                    {
+                        'border-x border-y': context?.showGridlines
+                    }
+                ]
+            }),
+            sorticon: ({ context }) => ({
+                class: ['ml-2', context.sorted ? 'text-blue-700 dark:text-white/80' : 'text-slate-700 dark:text-white/70']
+            }),
+            sortbadge: {
+                class: [
+                    'flex items-center justify-center align-middle',
+                    'rounded-[50%] w-[1.143rem] leading-[1.143rem] ml-2',
+                    'text-blue-700 bg-blue-50',
+                    'dark:text-white/80 dark:bg-blue-400' // Dark Mode
+                ]
+            },
+            columnfilter: {
+                class: 'inline-flex items-center ml-auto'
+            },
+            filteroverlay: {
+                class: [
+                    'bg-white text-gray-600 border-0 rounded-md min-w-[12.5rem]',
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' //Dark Mode
+                ]
+            },
+            filtermatchmodedropdown: {
+                root: {
+                    class: 'min-[0px]:flex mb-2'
+                }
+            },
+            filterrowitems: {
+                class: 'm-0 p-0 py-3 list-none '
+            },
+            filterrowitem: ({ context }) => ({
+                class: ['m-0 py-3 px-5 bg-transparent', 'transition duration-200', context?.highlighted ? 'text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300' : 'text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent']
+            }),
+            filteroperator: {
+                class: [
+                    'px-5 py-3 border-b border-solid border-gray-300 text-slate-700 bg-slate-50 rounded-t-md',
+                    'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900' // Dark Mode
+                ]
+            },
+            filteroperatordropdown: {
+                root: {
+                    class: 'min-[0px]:flex'
+                }
+            },
+            filterconstraint: {
+                class: 'p-5 border-b border-solid border-gray-300 dark:border-blue-900/40'
+            },
+            filteraddrule: {
+                class: 'py-3 px-5'
+            },
+            filteraddrulebutton: {
+                root: {
+                    class: 'justify-center w-full min-[0px]:text-sm'
+                },
+                label: {
+                    class: 'flex-auto grow-0'
+                },
+                icon: {
+                    class: 'mr-2'
+                }
+            },
+            filterremovebutton: {
+                root: {
+                    class: 'ml-2'
+                },
+                label: {
+                    class: 'grow-0'
+                }
+            },
+            filterbuttonbar: {
+                class: 'flex items-center justify-between p-5'
+            },
+            filterclearbutton: {
+                root: {
+                    class: 'w-auto min-[0px]:text-sm border-blue-500 text-blue-500 px-4 py-3'
+                }
+            },
+            filterapplybutton: {
+                root: {
+                    class: 'w-auto min-[0px]:text-sm px-4 py-3'
+                }
+            },
+            filtermenubutton: ({ context }) => ({
+                class: [
+                    'inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative ml-2',
+                    'w-8 h-8 rounded-[50%]',
+                    'transition duration-200',
+                    'hover:text-slate-700 hover:bg-gray-300/20', // Hover
+                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus
+                    'dark:text-white/70 dark:hover:text-white/80 dark:bg-gray-900', // Dark Mode
+                    {
+                        'bg-blue-50 text-blue-700': context.active
+                    }
+                ]
+            }),
+            headerfilterclearbutton: ({ context }) => ({
+                class: [
+                    'inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative',
+                    'text-left bg-transparent m-0 p-0 border-none select-none ml-2',
+                    {
+                        invisible: !context.hidden
+                    }
+                ]
+            }),
+            columnresizer: {
+                class: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent'
+            },
+            rowreordericon: {
+                class: 'cursor-move'
+            },
+            roweditorinitbutton: {
+                class: [
+                    'inline-flex items-center justify-center overflow-hidden relative',
+                    'text-left cursor-pointer select-none',
+                    'w-8 h-8 border-0 rounded-[50%]',
+                    'transition duration-200',
+                    'text-slate-700 border-transparent',
+                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', //Focus
+                    'hover:text-slate-700 hover:bg-gray-300/20', //Hover
+                    'dark:text-white/70' // Dark Mode
+                ]
+            },
+            roweditorsavebutton: {
+                class: [
+                    'inline-flex items-center justify-center overflow-hidden relative',
+                    'text-left cursor-pointer select-none',
+                    'w-8 h-8 border-0 rounded-[50%]',
+                    'transition duration-200',
+                    'text-slate-700 border-transparent',
+                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', //Focus
+                    'hover:text-slate-700 hover:bg-gray-300/20', //Hover
+                    'dark:text-white/70' // Dark Mode
+                ]
+            },
+            roweditorcancelbutton: {
+                class: [
+                    'inline-flex items-center justify-center overflow-hidden relative',
+                    'text-left cursor-pointer select-none',
+                    'w-8 h-8 border-0 rounded-[50%]',
+                    'transition duration-200',
+                    'text-slate-700 border-transparent',
+                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', //Focus
+                    'hover:text-slate-700 hover:bg-gray-300/20', //Hover
+                    'dark:text-white/70' // Dark Mode
+                ]
+            },
+            radiobuttonwrapper: {
+                class: ['relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6']
+            },
+            radiobutton: ({ context }) => ({
+                class: [
+                    'flex justify-center items-center',
+                    'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out',
+                    context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
+                    {
+                        'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                        'cursor-default opacity-60': context.disabled
+                    }
+                ]
+            }),
+            radiobuttonicon: ({ context }) => ({
+                class: ['transform rounded-full', 'block w-3 h-3 transition duration-200 bg-white dark:bg-gray-900', { 'backface-hidden scale-10 invisible': context.checked === false, 'transform scale-100 visible': context.checked === true }]
+            }),
+            headercheckboxwrapper: {
+                class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
+            },
+            headercheckbox: ({ context }) => ({
+                class: [
+                    'flex items-center justify-center',
+                    'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
+                    context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
+                    {
+                        'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                        'cursor-default opacity-60': context.disabled
+                    }
+                ]
+            }),
+            headercheckboxicon: {
+                class: ['w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900']
+            },
+            checkboxwrapper: {
+                class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
+            },
+            checkbox: ({ context }) => ({
+                class: [
+                    'flex items-center justify-center',
+                    'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
+                    context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
+                    {
+                        'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                        'cursor-default opacity-60': context.disabled
+                    }
+                ]
+            }),
+            checkboxicon: {
+                class: ['w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900']
+            }
+        },
+        bodyrow: ({ context }) => ({
+            class: [
+                context.selected ? 'bg-blue-50 text-blue-700 dark:bg-blue-300' : 'bg-white text-gray-600 dark:bg-gray-900',
+                context.stripedRows ? (context.index % 2 === 0 ? 'bg-white text-gray-600 dark:bg-gray-900' : 'bg-blue-50/50 text-gray-600 dark:bg-gray-950') : '',
+                'transition duration-200',
+                'focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]', // Focus
+                'dark:text-white/80 dark:focus:outline dark:focus:outline-[0.15rem] dark:focus:outline-blue-300 dark:focus:outline-offset-[-0.15rem]', // Dark Mode
+                {
+                    'cursor-pointer': context.selectable,
+                    'hover:bg-gray-300/20 hover:text-gray-600': context.selectable && !context.selected // Hover
+                }
+            ]
+        }),
+        rowexpansion: {
+            class: 'bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80'
+        },
+        rowgroupheader: {
+            class: ['sticky z-[1]', 'bg-white text-gray-600', 'transition duration-200']
+        },
+        rowgroupfooter: {
+            class: ['sticky z-[1]', 'bg-white text-gray-600', 'transition duration-200']
+        },
+        rowgrouptoggler: {
+            class: [
+                'text-left m-0 p-0 cursor-pointer select-none',
+                'inline-flex items-center justify-center overflow-hidden relative',
+                'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-[50%]',
+                'transition duration-200',
+                'dark:text-white/70' // Dark Mode
+            ]
+        },
+        rowgrouptogglericon: {
+            class: 'inline-block w-4 h-4'
+        },
+        resizehelper: {
+            class: ['absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300']
+        }
+    }
+};
diff --git a/components/lib/tailwind/package.json b/components/lib/tailwind/package.json
new file mode 100644
index 000000000..342a90638
--- /dev/null
+++ b/components/lib/tailwind/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./tailwind.cjs.js",
+    "module": "./tailwind.esm.js",
+    "unpkg": "./tailwind.min.js",
+    "types": "./Tailwind.d.ts"
+}
\ No newline at end of file
diff --git a/components/lib/tieredmenu/TieredMenu.d.ts b/components/lib/tieredmenu/TieredMenu.d.ts
index 90da29753..6b935a5c3 100755
--- a/components/lib/tieredmenu/TieredMenu.d.ts
+++ b/components/lib/tieredmenu/TieredMenu.d.ts
@@ -135,6 +135,14 @@ export interface TieredMenuState {
  * Defines current options in TieredMenu component.
  */
 export interface TieredMenuContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
+    /**
+     * Index of the menuitem.
+     */
+    index: number;
     /**
      * Current active state of menuitem as a boolean.
      * @defaultValue false
diff --git a/components/lib/tieredmenu/TieredMenuSub.vue b/components/lib/tieredmenu/TieredMenuSub.vue
index 0c85a83c8..a7173748a 100755
--- a/components/lib/tieredmenu/TieredMenuSub.vue
+++ b/components/lib/tieredmenu/TieredMenuSub.vue
@@ -14,27 +14,27 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
-                v-bind="getPTOptions(processedItem, 'menuitem')"
+                v-bind="getPTOptions(processedItem, index, 'menuitem')"
                 :data-p-highlight="isItemActive(processedItem)"
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, index, 'action')">
                                 <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
+                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
                             <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                            <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
+                            <span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
                             <template v-if="getItemProp(processedItem, 'items')">
-                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
-                                <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
+                                <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
                             </template>
                         </a>
                     </template>
@@ -127,9 +127,11 @@ export default {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
-        getPTOptions(processedItem, key) {
+        getPTOptions(processedItem, index, key) {
             return this.ptm(key, {
                 context: {
+                    item: processedItem,
+                    index,
                     active: this.isItemActive(processedItem),
                     focused: this.isItemFocused(processedItem)
                 }
diff --git a/components/lib/toolbar/Toolbar.vue b/components/lib/toolbar/Toolbar.vue
index bd9f36d40..a5b038413 100755
--- a/components/lib/toolbar/Toolbar.vue
+++ b/components/lib/toolbar/Toolbar.vue
@@ -1,12 +1,12 @@
 <template>
     <div :class="cx('root')" role="toolbar" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')" data-pc-name="toolbar">
-        <div :class="cx('start')" data-pc-section="start" v-bind="ptm('start')">
+        <div :class="cx('start')" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
-        <div :class="cx('center')" data-pc-section="center" v-bind="ptm('center')">
+        <div :class="cx('center')" v-bind="ptm('center')">
             <slot name="center"></slot>
         </div>
-        <div :class="cx('end')" data-pc-section="end" v-bind="ptm('end')">
+        <div :class="cx('end')" v-bind="ptm('end')">
             <slot name="end"></slot>
         </div>
     </div>
diff --git a/doc/accordion/StyleDoc.vue b/doc/accordion/theming/StyledDoc.vue
similarity index 77%
rename from doc/accordion/StyleDoc.vue
rename to doc/accordion/theming/StyledDoc.vue
index 24146f575..83d3a8d50 100644
--- a/doc/accordion/StyleDoc.vue
+++ b/doc/accordion/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/accordion/theming/UnstyledDoc.vue b/doc/accordion/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..d2df41e77
--- /dev/null
+++ b/doc/accordion/theming/UnstyledDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <Accordion :activeIndex="0">
+            <AccordionTab header="Header I">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </AccordionTab>
+            <AccordionTab header="Header II">
+                <p>
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                </p>
+            </AccordionTab>
+            <AccordionTab header="Header III">
+                <p>
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                </p>
+            </AccordionTab>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/accordion/theming/index.vue b/doc/accordion/theming/index.vue
new file mode 100644
index 000000000..f17ff8833
--- /dev/null
+++ b/doc/accordion/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Accordion Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/autocomplete/StyleDoc.vue b/doc/autocomplete/theming/StyledDoc.vue
similarity index 89%
rename from doc/autocomplete/StyleDoc.vue
rename to doc/autocomplete/theming/StyledDoc.vue
index 2a4eb9307..dcaf97c18 100644
--- a/doc/autocomplete/StyleDoc.vue
+++ b/doc/autocomplete/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/autocomplete/theming/UnstyledDoc.vue b/doc/autocomplete/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..76153e026
--- /dev/null
+++ b/doc/autocomplete/theming/UnstyledDoc.vue
@@ -0,0 +1,41 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: [],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref("");
+const items = ref([]);
+
+const search = (event) => {
+    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+}
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+</script>
diff --git a/doc/autocomplete/theming/index.vue b/doc/autocomplete/theming/index.vue
new file mode 100644
index 000000000..65913fac5
--- /dev/null
+++ b/doc/autocomplete/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>AutoComplete Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/avatar/StylingAvatarDoc.vue b/doc/avatar/theming/StyledDoc.vue
similarity index 70%
rename from doc/avatar/StylingAvatarDoc.vue
rename to doc/avatar/theming/StyledDoc.vue
index 293f48884..668784c18 100644
--- a/doc/avatar/StylingAvatarDoc.vue
+++ b/doc/avatar/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText id="stylingofavatar" label="Styling of Avatar" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
@@ -42,4 +42,21 @@
             </tbody>
         </table>
     </div>
+    <DocSectionText id="stylingofavatargroup" label="Styling of AvatarGroup" v-bind="$attrs"> </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-avatar-group</td>
+                    <td>Container element.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 </template>
diff --git a/doc/avatar/theming/UnstyledDoc.vue b/doc/avatar/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..c8bc39c13
--- /dev/null
+++ b/doc/avatar/theming/UnstyledDoc.vue
@@ -0,0 +1,56 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-5">
+            <div>
+                <h5>Image</h5>
+                <div class="flex">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                </div>
+            </div>
+
+            <div>
+                <h5>Badge</h5>
+                <Avatar v-badge.danger="4" class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+            </div>
+
+            <div>
+                <h5>Gravatar</h5>
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
+            </div>
+        </div>
+    </div>
+    <div class="card flex justify-content-center">
+        <AvatarGroup>
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" />
+            <Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
+        </AvatarGroup>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/avatar/theming/index.vue b/doc/avatar/theming/index.vue
new file mode 100644
index 000000000..48605b3be
--- /dev/null
+++ b/doc/avatar/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Avatar Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/badge/StyleDoc.vue b/doc/badge/theming/StyledDoc.vue
similarity index 88%
rename from doc/badge/StyleDoc.vue
rename to doc/badge/theming/StyledDoc.vue
index a33d721cb..4e12d532e 100644
--- a/doc/badge/StyleDoc.vue
+++ b/doc/badge/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/badge/theming/UnstyledDoc.vue b/doc/badge/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..11626cb71
--- /dev/null
+++ b/doc/badge/theming/UnstyledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-content-center gap-2">
+        <Badge value="2"></Badge>
+        <Badge value="8" severity="success"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="12" severity="warning"></Badge>
+        <Badge value="3" severity="danger"></Badge>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/badge/theming/index.vue b/doc/badge/theming/index.vue
new file mode 100644
index 000000000..9d9d18a7b
--- /dev/null
+++ b/doc/badge/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Badge Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/blockui/StyleDoc.vue b/doc/blockui/theming/StyledDoc.vue
similarity index 73%
rename from doc/blockui/StyleDoc.vue
rename to doc/blockui/theming/StyledDoc.vue
index aab0e80a7..0facdf4f8 100644
--- a/doc/blockui/StyleDoc.vue
+++ b/doc/blockui/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/blockui/theming/UnstyledDoc.vue b/doc/blockui/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..117961fa0
--- /dev/null
+++ b/doc/blockui/theming/UnstyledDoc.vue
@@ -0,0 +1,40 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <div class="mb-3">
+            <Button label="Block" @click="blocked = true" class="mr-2"></Button>
+            <Button label="Unblock" @click="blocked = false"></Button>
+        </div>
+        <BlockUI :blocked="blocked">
+            <Panel header="Basic">
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Panel>
+        </BlockUI>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const blocked = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/blockui/theming/index.vue b/doc/blockui/theming/index.vue
new file mode 100644
index 000000000..096831471
--- /dev/null
+++ b/doc/blockui/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>BlockUI Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/breadcrumb/StyleDoc.vue b/doc/breadcrumb/theming/StyledDoc.vue
similarity index 85%
rename from doc/breadcrumb/StyleDoc.vue
rename to doc/breadcrumb/theming/StyledDoc.vue
index 4d29116bd..b2cc04e61 100644
--- a/doc/breadcrumb/StyleDoc.vue
+++ b/doc/breadcrumb/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/breadcrumb/theming/UnstyledDoc.vue b/doc/breadcrumb/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..7788f6923
--- /dev/null
+++ b/doc/breadcrumb/theming/UnstyledDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Breadcrumb requires a collection of menuitems as its <i>model</i>.</p>
+    </DocSectionText>
+
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            home: {
+                icon: 'pi pi-home',
+                to: '/'
+            },
+            items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Breadcrumb :home="home" :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const home = ref({
+    icon: 'pi pi-home',
+    to: '/',
+});
+const items = ref([
+    {label: 'Computer'},
+    {label: 'Notebook'},
+    {label: 'Accessories'},
+    {label: 'Backpacks'},
+    {label: 'Item'}
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/breadcrumb/theming/index.vue b/doc/breadcrumb/theming/index.vue
new file mode 100644
index 000000000..8bbb93133
--- /dev/null
+++ b/doc/breadcrumb/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Breadcrumb Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/button/StyleDoc.vue b/doc/button/theming/StyledDoc.vue
similarity index 82%
rename from doc/button/StyleDoc.vue
rename to doc/button/theming/StyledDoc.vue
index 99562fb5d..4a5e5ab95 100644
--- a/doc/button/StyleDoc.vue
+++ b/doc/button/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/button/theming/UnstyledDoc.vue b/doc/button/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..4c9aae96c
--- /dev/null
+++ b/doc/button/theming/UnstyledDoc.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap gap-3">
+        <Button label="Primary" />
+        <Button label="Secondary" severity="secondary" />
+        <Button label="Success" severity="success" />
+        <Button label="Info" severity="info" />
+        <Button label="Warning" severity="warning" />
+        <Button label="Help" severity="help" />
+        <Button label="Danger" severity="danger" />
+    </div>
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/button/theming/index.vue b/doc/button/theming/index.vue
new file mode 100644
index 000000000..17966d1f7
--- /dev/null
+++ b/doc/button/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Button Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/calendar/StyleDoc.vue b/doc/calendar/theming/StyledDoc.vue
similarity index 90%
rename from doc/calendar/StyleDoc.vue
rename to doc/calendar/theming/StyledDoc.vue
index 02c89f95b..41d7a8d76 100644
--- a/doc/calendar/StyleDoc.vue
+++ b/doc/calendar/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/calendar/theming/UnstyledDoc.vue b/doc/calendar/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..268385e22
--- /dev/null
+++ b/doc/calendar/theming/UnstyledDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Calendar v-model="date" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date = ref();
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/calendar/theming/index.vue b/doc/calendar/theming/index.vue
new file mode 100644
index 000000000..fc293b5e4
--- /dev/null
+++ b/doc/calendar/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Calendar Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/card/StyleDoc.vue b/doc/card/theming/StyledDoc.vue
similarity index 82%
rename from doc/card/StyleDoc.vue
rename to doc/card/theming/StyledDoc.vue
index de2b2ab56..b9707f894 100644
--- a/doc/card/StyleDoc.vue
+++ b/doc/card/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/card/theming/UnstyledDoc.vue b/doc/card/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..aa6fcced8
--- /dev/null
+++ b/doc/card/theming/UnstyledDoc.vue
@@ -0,0 +1,42 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card flex align-items-center justify-content-center">
+        <Card style="width: 25em">
+            <template #header>
+                <img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
+            </template>
+            <template #title> Advanced Card </template>
+            <template #subtitle> Card subtitle </template>
+            <template #content>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
+            </template>
+            <template #footer>
+                <Button icon="pi pi-check" label="Save" />
+                <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
+            </template>
+        </Card>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/card/theming/index.vue b/doc/card/theming/index.vue
new file mode 100644
index 000000000..90927b98f
--- /dev/null
+++ b/doc/card/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Card Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/carousel/StyleDoc.vue b/doc/carousel/theming/StyledDoc.vue
similarity index 87%
rename from doc/carousel/StyleDoc.vue
rename to doc/carousel/theming/StyledDoc.vue
index 6e39730e8..3d75621f8 100644
--- a/doc/carousel/StyleDoc.vue
+++ b/doc/carousel/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/carousel/theming/UnstyledDoc.vue b/doc/carousel/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..70fb5fc31
--- /dev/null
+++ b/doc/carousel/theming/UnstyledDoc.vue
@@ -0,0 +1,85 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
+            <template #item="slotProps">
+                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                    <div class="mb-3">
+                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
+                    </div>
+                    <div>
+                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
+                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
+                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
+                        <div class="mt-5">
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </Carousel>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
+})
+
+const products = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '1199px',
+        numVisible: 3,
+        numScroll: 3
+    },
+    {
+        breakpoint: '991px',
+        numVisible: 2,
+        numScroll: 2
+    },
+    {
+        breakpoint: '767px',
+        numVisible: 1,
+        numScroll: 1
+    }
+]);
+
+const getSeverity = (status) => {
+    switch (status) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warning';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/carousel/theming/index.vue b/doc/carousel/theming/index.vue
new file mode 100644
index 000000000..1765d2e66
--- /dev/null
+++ b/doc/carousel/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Carousel Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/cascadeselect/StyleDoc.vue b/doc/cascadeselect/theming/StyledDoc.vue
similarity index 87%
rename from doc/cascadeselect/StyleDoc.vue
rename to doc/cascadeselect/theming/StyledDoc.vue
index c771fb0e1..e61c41881 100644
--- a/doc/cascadeselect/StyleDoc.vue
+++ b/doc/cascadeselect/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/cascadeselect/theming/UnstyledDoc.vue b/doc/cascadeselect/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..ffef0ec89
--- /dev/null
+++ b/doc/cascadeselect/theming/UnstyledDoc.vue
@@ -0,0 +1,179 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/cascadeselect/theming/index.vue b/doc/cascadeselect/theming/index.vue
new file mode 100644
index 000000000..bef24603b
--- /dev/null
+++ b/doc/cascadeselect/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>CascadeSelect Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/chart/StyleDoc.vue b/doc/chart/StyleDoc.vue
index ef700a3e5..8016b31f5 100644
--- a/doc/chart/StyleDoc.vue
+++ b/doc/chart/StyleDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/checkbox/StyleDoc.vue b/doc/checkbox/theming/StyledDoc.vue
similarity index 77%
rename from doc/checkbox/StyleDoc.vue
rename to doc/checkbox/theming/StyledDoc.vue
index ca599aebb..ef0f50b3f 100644
--- a/doc/checkbox/StyleDoc.vue
+++ b/doc/checkbox/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/checkbox/theming/UnstyledDoc.vue b/doc/checkbox/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..6a6bd351c
--- /dev/null
+++ b/doc/checkbox/theming/UnstyledDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" :binary="true" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const checked = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/checkbox/theming/index.vue b/doc/checkbox/theming/index.vue
new file mode 100644
index 000000000..562ab5a93
--- /dev/null
+++ b/doc/checkbox/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Checkbox Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/chip/StyleDoc.vue b/doc/chip/StyleDoc.vue
index ad0749ba3..bb20d0b9d 100644
--- a/doc/chip/StyleDoc.vue
+++ b/doc/chip/StyleDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/chip/theming/StyledDoc.vue b/doc/chip/theming/StyledDoc.vue
new file mode 100644
index 000000000..bb20d0b9d
--- /dev/null
+++ b/doc/chip/theming/StyledDoc.vue
@@ -0,0 +1,33 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
+    </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-chip</td>
+                    <td>Container element.</td>
+                </tr>
+                <tr>
+                    <td>p-chip-image</td>
+                    <td>Container element in image mode.</td>
+                </tr>
+                <tr>
+                    <td>p-chip-text</td>
+                    <td>Text of the chip.</td>
+                </tr>
+                <tr>
+                    <td>pi-chip-remove-icon</td>
+                    <td>Remove icon.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
diff --git a/doc/chip/theming/UnstyledDoc.vue b/doc/chip/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..f65d0b0a0
--- /dev/null
+++ b/doc/chip/theming/UnstyledDoc.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-2">
+        <Chip label="Apple" icon="pi pi-apple" />
+        <Chip label="Facebook" icon="pi pi-facebook" />
+        <Chip label="Google" icon="pi pi-google" />
+        <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+    </div>
+</template>
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/chip/theming/index.vue b/doc/chip/theming/index.vue
new file mode 100644
index 000000000..b75ca6a48
--- /dev/null
+++ b/doc/chip/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Chip Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/chips/StyleDoc.vue b/doc/chips/theming/StyledDoc.vue
similarity index 82%
rename from doc/chips/StyleDoc.vue
rename to doc/chips/theming/StyledDoc.vue
index 64aa32cd1..d5f249936 100644
--- a/doc/chips/StyleDoc.vue
+++ b/doc/chips/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/chips/theming/UnstyledDoc.vue b/doc/chips/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..ea3039506
--- /dev/null
+++ b/doc/chips/theming/UnstyledDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <Chips v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref();
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/chips/theming/index.vue b/doc/chips/theming/index.vue
new file mode 100644
index 000000000..c241271b6
--- /dev/null
+++ b/doc/chips/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Chips Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/colorpicker/StyleDoc.vue b/doc/colorpicker/theming/StyledDoc.vue
similarity index 89%
rename from doc/colorpicker/StyleDoc.vue
rename to doc/colorpicker/theming/StyledDoc.vue
index 34a032064..691afacdf 100644
--- a/doc/colorpicker/StyleDoc.vue
+++ b/doc/colorpicker/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/colorpicker/theming/UnstyledDoc.vue b/doc/colorpicker/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..3e3e63501
--- /dev/null
+++ b/doc/colorpicker/theming/UnstyledDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            color: null,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ColorPicker v-model="color" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const color = ref();
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/colorpicker/theming/index.vue b/doc/colorpicker/theming/index.vue
new file mode 100644
index 000000000..54723caa5
--- /dev/null
+++ b/doc/colorpicker/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ColorPicker Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 6ecb5fc9f..3bfdb23ce 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -12408,7 +12408,8 @@
                             "default": ""
                         }
                     ],
-                    "methods": []
+                    "methods": [],
+                    "extendedBy": "default"
                 },
                 "PrimeVueLocaleAriaOptions": {
                     "relatedProp": "",
@@ -19093,6 +19094,14 @@
                             "default": "",
                             "description": "Current index of the menuitem."
                         },
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current menuitem"
+                        },
                         {
                             "name": "active",
                             "optional": false,
@@ -24170,6 +24179,34 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "InputMaskPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": ""
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputMaskProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputMaskContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "InputMaskPassThroughOptions": {
                     "description": "Custom passthrough(pt) options.",
                     "relatedProp": "InputMaskProps.pt",
@@ -24206,6 +24243,29 @@
                     ],
                     "methods": []
                 },
+                "InputMaskContext": {
+                    "description": "Defines current options in InputMask component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "filled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current filled state of the component as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current disabled state of the component as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "InputMaskProps": {
                     "description": "Defines valid properties in InputMask component.",
                     "relatedProp": "",
@@ -24278,6 +24338,7 @@
                     "methods": []
                 },
                 "InputMaskSlots": {
+                    "description": "Defines valid slots in InputMask component.",
                     "relatedProp": "",
                     "props": [],
                     "methods": []
@@ -24366,7 +24427,7 @@
             "description": "Defines the custom types used by the module.",
             "values": {
                 "InputMaskPassThroughOptionType": {
-                    "values": "InputMaskPassThroughAttributes | null | undefined"
+                    "values": "InputMaskPassThroughAttributes | (options: InputMaskPassThroughMethodOptions) => undefined | string | null | undefined"
                 }
             }
         }
@@ -26808,6 +26869,22 @@
                     "description": "Defines current options in MegaMenu component.",
                     "relatedProp": "",
                     "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current menuitem"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current index of the menuitem."
+                        },
                         {
                             "name": "active",
                             "optional": false,
@@ -27262,6 +27339,22 @@
                     "description": "Defines current options in Menu component.",
                     "relatedProp": "",
                     "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current menuitem"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current index of the menuitem."
+                        },
                         {
                             "name": "focused",
                             "optional": false,
@@ -27731,6 +27824,22 @@
                     "description": "Defines current options in Menubar component.",
                     "relatedProp": "",
                     "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current menuitem"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current index of the menuitem."
+                        },
                         {
                             "name": "active",
                             "optional": false,
@@ -32126,6 +32235,14 @@
                     "description": "Defines current options in PanelMenu component.",
                     "relatedProp": "",
                     "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current menuitem"
+                        },
                         {
                             "name": "index",
                             "optional": false,
@@ -36956,6 +37073,14 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "Current active state of menuitem as a boolean."
+                        },
+                        {
+                            "name": "hidden",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current hidden state of menuitem as a boolean."
                         }
                     ],
                     "methods": []
@@ -37966,6 +38091,13 @@
                             "readonly": false,
                             "type": "SplitterPanelProps",
                             "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SplitterPanelContext",
+                            "default": ""
                         }
                     ],
                     "methods": []
@@ -38006,6 +38138,21 @@
                     ],
                     "methods": []
                 },
+                "SplitterPanelContext": {
+                    "description": "Defines options in SplitterPanel component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "nested",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Current nested state of the panel."
+                        }
+                    ],
+                    "methods": []
+                },
                 "SplitterPanelProps": {
                     "description": "Defines valid properties in SplitterPanel component.",
                     "relatedProp": "",
@@ -38200,6 +38347,14 @@
                     "description": "Defines current options in Steps component.",
                     "relatedProp": "",
                     "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current menuitem"
+                        },
                         {
                             "name": "index",
                             "optional": false,
@@ -38603,6 +38758,14 @@
                     "description": "Defines current options in TabMenu component.",
                     "relatedProp": "",
                     "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current menuitem"
+                        },
                         {
                             "name": "index",
                             "optional": false,
@@ -39647,6 +39810,660 @@
             }
         }
     },
+    "tailwind/Tailwind": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "default": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "accordion",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<AccordionPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "accordiontab",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<AccordionTabPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "autocomplete",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<AutoCompletePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "avatar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<AvatarPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "avatargroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<AvatarGroupPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "badge",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<BadgePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "blockui",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<BlockUIPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "breadcrumb",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<BreadcrumbPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ButtonPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "calendar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<CalendarPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "card",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<CardPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "carousel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<CarouselPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "cascadeselect",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<CascadeSelectPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "chart",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ChartPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "checkbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<CheckboxPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "chip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ChipPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "chips",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ChipsPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "colorpicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ColorPickerPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "column",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ColumnPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "columngroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ColumnGroupPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "confirmdialog",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ConfirmDialogPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "confirmpopup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ConfirmPopupPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "contextmenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ContextMenuPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "datatable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DataTablePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "dataview",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DataViewPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "dataviewlayoutoptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DataViewLayoutOptionsPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "deferredcontent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DeferredContentPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "divider",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DividerPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "dialog",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DialogPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "dock",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DockPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "dropdown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DropdownPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "dynamicdialog",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<DialogPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "editor",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<EditorPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "fieldset",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<FieldsetPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "fileupload",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<FileUploadPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "galleria",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<GalleriaPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "image",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ImagePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "inlinemessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<InlineMessagePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "inplace",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<InplacePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "inputmask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<InputMaskPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "inputnumber",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<InputNumberPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "inputswitch",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<InputSwitchPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "inputtext",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<InputTextPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "knob",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<KnobPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "listbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ListboxPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "megamenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<MegaMenuPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<MenuPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "menubar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<MenubarPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "message",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<MessagePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "multiselect",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<MultiSelectPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "orderlist",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<OrderListPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "organizationchart",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<OrganizationChartPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "overlaypanel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<OverlayPanelPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "paginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<PaginatorPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<PanelPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "panelmenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<PanelMenuPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "password",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<PasswordPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "picklist",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<PickListPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "progressbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ProgressBarPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "progressspinner",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ProgressSpinnerPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "radiobutton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<RadioButtonPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "rating",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<RatingPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "row",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<RowPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "scrollpanel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ScrollPanelPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "scrolltop",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ScrollTopPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "sidebar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<SidebarPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "skeleton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<SkeletonPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "slider",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<SliderPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "speeddial",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<SpeedDialPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "selectbutton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<SelectButtonPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "splitbutton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<SplitButtonPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "splitter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<SplitterPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "splitterpanel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<SplitterPanelPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "steps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<StepsPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "tabmenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TabMenuPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "tabpanel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TabPanelPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "tabview",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TabViewPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "tag",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TagPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "terminal",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TerminalPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "textarea",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TextareaPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "tieredmenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TieredMenuPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "timeline",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TimelinePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "toast",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ToastPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "togglebutton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ToggleButtonPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "toolbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<ToolbarPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "tree",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TreePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "treeselect",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TreeSelectPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "tristatecheckbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TriStateCheckboxPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "treetable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<TreeTablePassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "virtualscroller",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DefaultPTOptions<VirtualScrollerPassThroughOptions>",
+                            "default": ""
+                        },
+                        {
+                            "name": "directives",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Object",
+                            "default": ""
+                        }
+                    ],
+                    "methods": [],
+                    "extendedTypes": "PrimeVuePTOptions"
+                }
+            }
+        }
+    },
     "terminal": {
         "description": "Terminal is a text based user interface.\n\n[Live Demo](https://www.primevue.org/terminal)",
         "components": {
@@ -40369,6 +41186,22 @@
                     "description": "Defines current options in TieredMenu component.",
                     "relatedProp": "",
                     "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current menuitem"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the menuitem."
+                        },
                         {
                             "name": "active",
                             "optional": false,
diff --git a/doc/confirmdialog/StyleDoc.vue b/doc/confirmdialog/StyleDoc.vue
deleted file mode 100644
index 549cc0ae6..000000000
--- a/doc/confirmdialog/StyleDoc.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
-    </DocSectionText>
-    <div class="doc-tablewrapper">
-        <table class="doc-table">
-            <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Element</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td>p-confirm-dialog</td>
-                    <td>Container element.</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>
diff --git a/doc/avatar/StylingAvatarGroupDoc.vue b/doc/confirmdialog/theming/StyledDoc.vue
similarity index 71%
rename from doc/avatar/StylingAvatarGroupDoc.vue
rename to doc/confirmdialog/theming/StyledDoc.vue
index 9827d6e56..27983f8de 100644
--- a/doc/avatar/StylingAvatarGroupDoc.vue
+++ b/doc/confirmdialog/theming/StyledDoc.vue
@@ -1,5 +1,7 @@
 <template>
-    <DocSectionText id="stylingofavatargroup" label="Styling of AvatarGroup" v-bind="$attrs"> </DocSectionText>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
+    </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
             <thead>
@@ -10,7 +12,7 @@
             </thead>
             <tbody>
                 <tr>
-                    <td>p-avatar-group</td>
+                    <td>p-confirm-dialog</td>
                     <td>Container element.</td>
                 </tr>
             </tbody>
diff --git a/doc/confirmdialog/theming/UnstyledDoc.vue b/doc/confirmdialog/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..facdb0cad
--- /dev/null
+++ b/doc/confirmdialog/theming/UnstyledDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <Toast />
+    <ConfirmDialog></ConfirmDialog>
+    <div class="card flex flex-wrap gap-2 justify-center">
+        <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
+    </div>
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const confirm1 = () => {
+    confirm.require({
+        message: 'Are you sure you want to proceed?',
+        header: 'Confirmation',
+        icon: 'pi pi-exclamation-triangle',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+
+const confirm2 = () => {
+    confirm.require({
+        message: 'Do you want to delete this record?',
+        header: 'Delete Confirmation',
+        icon: 'pi pi-info-circle',
+        acceptClass: 'p-button-danger',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/confirmdialog/theming/index.vue b/doc/confirmdialog/theming/index.vue
new file mode 100644
index 000000000..c0be5f500
--- /dev/null
+++ b/doc/confirmdialog/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ConfirmDialog Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/confirmpopup/StyleDoc.vue b/doc/confirmpopup/theming/StyledDoc.vue
similarity index 82%
rename from doc/confirmpopup/StyleDoc.vue
rename to doc/confirmpopup/theming/StyledDoc.vue
index 3a5023883..1c9fd846d 100644
--- a/doc/confirmpopup/StyleDoc.vue
+++ b/doc/confirmpopup/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/confirmpopup/theming/UnstyledDoc.vue b/doc/confirmpopup/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..6b7fc4ed3
--- /dev/null
+++ b/doc/confirmpopup/theming/UnstyledDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <Toast />
+    <ConfirmPopup></ConfirmPopup>
+    <div class="card flex flex-wrap gap-2 justify-center">
+        <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
+    </div>
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const confirm1 = (event) => {
+    confirm.require({
+        target: event.currentTarget,
+        message: 'Are you sure you want to proceed?',
+        icon: 'pi pi-exclamation-triangle',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+
+const confirm2 = (event) => {
+    confirm.require({
+        target: event.currentTarget,
+        message: 'Do you want to delete this record?',
+        icon: 'pi pi-info-circle',
+        acceptClass: 'p-button-danger',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/confirmpopup/theming/index.vue b/doc/confirmpopup/theming/index.vue
new file mode 100644
index 000000000..5aee86f44
--- /dev/null
+++ b/doc/confirmpopup/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ConfirmPopup Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/contextmenu/StyleDoc.vue b/doc/contextmenu/theming/StyledDoc.vue
similarity index 88%
rename from doc/contextmenu/StyleDoc.vue
rename to doc/contextmenu/theming/StyledDoc.vue
index 7696af655..0d9b0819c 100644
--- a/doc/contextmenu/StyleDoc.vue
+++ b/doc/contextmenu/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/contextmenu/theming/UnstyledDoc.vue b/doc/contextmenu/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..a828ea05a
--- /dev/null
+++ b/doc/contextmenu/theming/UnstyledDoc.vue
@@ -0,0 +1,48 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ContextMenu requires a collection of menuitems as its <i>model</i> and the <i>show</i> method needs to be called explicity using the <i>contextmenu</i> event of the target to display the menu.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { label: 'View', icon: 'pi pi-fw pi-search' },
+                { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
+        <ContextMenu ref="menu" :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const menu = ref();
+const items = ref([
+    { label: 'View', icon: 'pi pi-fw pi-search' },
+    { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+]);
+
+const onImageRightClick = (event) => {
+    menu.value.show(event);
+};
+
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        onImageRightClick(event) {
+            this.$refs.menu.show(event);
+        }
+    }
+};
+</script>
diff --git a/doc/contextmenu/theming/index.vue b/doc/contextmenu/theming/index.vue
new file mode 100644
index 000000000..108e1077b
--- /dev/null
+++ b/doc/contextmenu/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ContextMenu Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/datatable/StyleDoc.vue b/doc/datatable/theming/StyledDoc.vue
similarity index 93%
rename from doc/datatable/StyleDoc.vue
rename to doc/datatable/theming/StyledDoc.vue
index 3d70e405e..8135c309b 100644
--- a/doc/datatable/StyleDoc.vue
+++ b/doc/datatable/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/datatable/theming/UnstyledDoc.vue b/doc/datatable/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..ac8850fa0
--- /dev/null
+++ b/doc/datatable/theming/UnstyledDoc.vue
@@ -0,0 +1,298 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" :service="['CustomerService']" embedded />
+</template>
+
+<script>
+import { CustomerService } from '@/service/CustomerService';
+import { FilterMatchMode, FilterOperator } from 'primevue/api';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            filters: null,
+            representatives: [
+                { name: 'Amy Elsner', image: 'amyelsner.png' },
+                { name: 'Anna Fali', image: 'annafali.png' },
+                { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+                { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+                { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+                { name: 'Onyama Limba', image: 'onyamalimba.png' },
+                { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+                { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+            ],
+            statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
+            loading: true,
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
+                filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
+            <template #header>
+                <div class="flex justify-between">
+                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
+                    <span class="p-input-icon-left">
+                        <i class="pi pi-search" />
+                        <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+                    </span>
+                </div>
+            </template>
+            <template #empty> No customers found. </template>
+            <template #loading> Loading customers data. Please wait. </template>
+            <Column field="name" header="Name" style="min-width: 12rem">
+                <template #body="{ data }">
+                    {{ data.name }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
+                </template>
+            </Column>
+            <Column header="Country" filterField="country.name" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                        <span>{{ data.country.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
+                </template>
+                <template #filterclear="{ filterCallback }">
+                    <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
+                </template>
+                <template #filterapply="{ filterCallback }">
+                    <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
+                </template>
+                <template #filterfooter>
+                    <div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
+                </template>
+            </Column>
+            <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                        <span>{{ data.representative.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+                        <template #option="slotProps">
+                            <div class="flex items-center gap-2">
+                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
+                                <span>{{ slotProps.option.name }}</span>
+                            </div>
+                        </template>
+                    </MultiSelect>
+                </template>
+            </Column>
+            <Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
+                <template #body="{ data }">
+                    {{ formatDate(data.date) }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />
+                </template>
+            </Column>
+            <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
+                <template #body="{ data }">
+                    {{ formatCurrency(data.balance) }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
+                </template>
+            </Column>
+            <Column header="Status" field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
+                </template>
+                <template #filter="{ filterModel }">
+                    <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                        <template #option="slotProps">
+                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                        </template>
+                    </Dropdown>
+                </template>
+            </Column>
+            <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
+                </template>
+                <template #filter="{ filterModel }">
+                    <Slider v-model="filterModel.value" range class="m-3"></Slider>
+                    <div class="flex items-center justify-between px-2">
+                        <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
+                        <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
+                <template #body="{ data }">
+                    <i class="pi" :class="{ 'pi-check-circle text-green-500 ': data.verified, 'pi-times-circle text-red-500': !data.verified }"></i>
+                </template>
+                <template #filter="{ filterModel }">
+                    <label for="verified-filter" class="font-bold"> Verified </label>
+                    <TriStateCheckbox v-model="filterModel.value" inputId="verified-filter" />
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+import { FilterMatchMode, FilterOperator } from 'primevue/api';
+
+const customers = ref();
+const filters = ref();
+const representatives = ref([
+    { name: 'Amy Elsner', image: 'amyelsner.png' },
+    { name: 'Anna Fali', image: 'annafali.png' },
+    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+    { name: 'Onyama Limba', image: 'onyamalimba.png' },
+    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+]);
+const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
+const loading = ref(true);
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => {
+        customers.value = getCustomers(data);
+        loading.value = false;
+    });
+});
+
+
+const initFilters = () => {
+    filters.value = {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    };
+};
+
+initFilters();
+
+const formatDate = (value) => {
+    return value.toLocaleDateString('en-US', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+    });
+};
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+const clearFilter = () => {
+    initFilters();
+};
+const getCustomers = (data) => {
+    return [...(data || [])].map((d) => {
+        d.date = new Date(d.date);
+
+        return d;
+    });
+};
+const getSeverity = (status) => {
+    switch (status) {
+        case 'unqualified':
+            return 'danger';
+
+        case 'qualified':
+            return 'success';
+
+        case 'new':
+            return 'info';
+
+        case 'negotiation':
+            return 'warning';
+
+        case 'renewal':
+            return null;
+    }
+};
+<\/script>`
+            }
+        };
+    },
+    created() {
+        this.initFilters();
+    },
+    mounted() {
+        CustomerService.getCustomersMedium().then((data) => {
+            this.customers = this.getCustomers(data);
+            this.loading = false;
+        });
+    },
+    methods: {
+        formatDate(value) {
+            return value.toLocaleDateString('en-US', {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric'
+            });
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+        },
+        clearFilter() {
+            this.initFilters();
+        },
+        initFilters() {
+            this.filters = {
+                global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+                name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+                'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+                representative: { value: null, matchMode: FilterMatchMode.IN },
+                date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+                balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+                status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+                activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
+                verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+            };
+        },
+        getCustomers(data) {
+            return [...(data || [])].map((d) => {
+                d.date = new Date(d.date);
+
+                return d;
+            });
+        },
+        getSeverity(status) {
+            switch (status) {
+                case 'unqualified':
+                    return 'danger';
+
+                case 'qualified':
+                    return 'success';
+
+                case 'new':
+                    return 'info';
+
+                case 'negotiation':
+                    return 'warning';
+
+                case 'renewal':
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/doc/datatable/theming/index.vue b/doc/datatable/theming/index.vue
new file mode 100644
index 000000000..4417e7dc0
--- /dev/null
+++ b/doc/datatable/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>DataTable Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/dataview/StyleDoc.vue b/doc/dataview/theming/StyledDoc.vue
similarity index 86%
rename from doc/dataview/StyleDoc.vue
rename to doc/dataview/theming/StyledDoc.vue
index 7adc44324..3cb9b97e6 100644
--- a/doc/dataview/StyleDoc.vue
+++ b/doc/dataview/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/dataview/theming/UnstyledDoc.vue b/doc/dataview/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..7147f4a26
--- /dev/null
+++ b/doc/dataview/theming/UnstyledDoc.vue
@@ -0,0 +1,148 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" :service="['ProductService']" embedded />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            layout: 'grid',
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <DataView :value="products" :layout="layout">
+            <template #header>
+                <div class="flex justify-end">
+                    <DataViewLayoutOptions v-model="layout" />
+                </div>
+            </template>
+
+            <template #list="slotProps">
+                <div class="flex-initial shrink-0 w-full">
+                    <div class="flex flex-col xl:flex-row xl:items-start p-4 gap-4">
+                        <img class="w-3/4 sm:w-64 xl:w-40 shadow-md block xl:block mx-auto rounded" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
+                        <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-4">
+                            <div class="flex flex-col items-center sm:items-start gap-3">
+                                <div class="text-2xl font-bold text-900">
+                                    {{ slotProps.data.name }}
+                                </div>
+                                <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating>
+                                <div class="flex items-center gap-3">
+                                    <span class="flex items-center gap-2">
+                                        <i class="pi pi-tag"></i>
+                                        <span class="font-semibold">{{ slotProps.data.category }}</span>
+                                    </span>
+                                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
+                                </div>
+                            </div>
+                            <div class="flex sm:flex-col items-center sm:align-end gap-3 sm:gap-2">
+                                <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template #grid="slotProps">
+                <div class="flex-initial shrink-0 w-full sm:w-1/2 lg:w-full xl:w-1/3 p-2">
+                    <div class="p-4 border surface-border surface-card rounded">
+                        <div class="flex flex-wrap items-center justify-between gap-2">
+                            <div class="flex items-center gap-2">
+                                <i class="pi pi-tag"></i>
+                                <span class="font-semibold">{{ slotProps.data.category }}</span>
+                            </div>
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
+                        </div>
+                        <div class="flex flex-col items-center gap-3 py-5">
+                            <img class="w-3/4 shadow-md rounded" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
+                            <div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
+                            <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
+                            <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProducts().then((data) => (products.value = data.slice(0, 12)));
+});
+
+const products = ref();
+const layout = ref('grid');
+
+const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warning';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+}
+
+<\/script>`,
+                data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProducts().then((data) => (this.products = data.slice(0, 12)));
+    },
+    methods: {
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warning';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/doc/dataview/theming/index.vue b/doc/dataview/theming/index.vue
new file mode 100644
index 000000000..0333a0c6c
--- /dev/null
+++ b/doc/dataview/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>DataView Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/deferredcontent/StyleDoc.vue b/doc/deferredcontent/StyleDoc.vue
index ca0a35725..e09e42c80 100644
--- a/doc/deferredcontent/StyleDoc.vue
+++ b/doc/deferredcontent/StyleDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
+    <DocSectionText v-bind="$attrs">
         <p>Component does not apply any styling.</p>
     </DocSectionText>
 </template>
diff --git a/doc/dialog/StyleDoc.vue b/doc/dialog/theming/StyledDoc.vue
similarity index 85%
rename from doc/dialog/StyleDoc.vue
rename to doc/dialog/theming/StyledDoc.vue
index 7f0a215ca..2be5c302e 100644
--- a/doc/dialog/StyleDoc.vue
+++ b/doc/dialog/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/dialog/theming/UnstyledDoc.vue b/doc/dialog/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..247fa2e6c
--- /dev/null
+++ b/doc/dialog/theming/UnstyledDoc.vue
@@ -0,0 +1,36 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/dialog/theming/index.vue b/doc/dialog/theming/index.vue
new file mode 100644
index 000000000..96292b7f7
--- /dev/null
+++ b/doc/dialog/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Dialog Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/divider/StyleDoc.vue b/doc/divider/theming/StyledDoc.vue
similarity index 91%
rename from doc/divider/StyleDoc.vue
rename to doc/divider/theming/StyledDoc.vue
index 98e7bb8f7..ab0d87065 100644
--- a/doc/divider/StyleDoc.vue
+++ b/doc/divider/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/divider/theming/UnstyledDoc.vue b/doc/divider/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..0cb326da0
--- /dev/null
+++ b/doc/divider/theming/UnstyledDoc.vue
@@ -0,0 +1,56 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <Divider align="left" type="solid">
+            <b>Left</b>
+        </Divider>
+
+        <p>
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+
+        <Divider align="center" type="dotted">
+            <b>Center</b>
+        </Divider>
+
+        <p>
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
+            deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+
+        <Divider align="right" type="dashed">
+            <b>Right</b>
+        </Divider>
+
+        <p>
+            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+            maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+        </p>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/divider/theming/index.vue b/doc/divider/theming/index.vue
new file mode 100644
index 000000000..d48264f02
--- /dev/null
+++ b/doc/divider/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Divider Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/dock/StyleDoc.vue b/doc/dock/theming/StyledDoc.vue
similarity index 86%
rename from doc/dock/StyleDoc.vue
rename to doc/dock/theming/StyledDoc.vue
index 5e98aca1d..bbeaa17d7 100644
--- a/doc/dock/StyleDoc.vue
+++ b/doc/dock/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/dock/theming/UnstyledDoc.vue b/doc/dock/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..fd983ca2b
--- /dev/null
+++ b/doc/dock/theming/UnstyledDoc.vue
@@ -0,0 +1,131 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Menu requires a collection of menuitems as its <i>model</i>. Default location is <i>bottom</i> and other sides are also available when defined with the <i>position</i> property.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Finder',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
+                },
+                {
+                    label: 'App Store',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
+                },
+                {
+                    label: 'Photos',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
+                },
+                {
+                    label: 'Trash',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
+                }
+            ],
+            position: 'bottom',
+            positions: [
+                {
+                    label: 'Bottom',
+                    value: 'bottom'
+                },
+                {
+                    label: 'Top',
+                    value: 'top'
+                },
+                {
+                    label: 'Left',
+                    value: 'left'
+                },
+                {
+                    label: 'Right',
+                    value: 'right'
+                }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card dock-demo">
+        <div class="flex flex-wrap gap-3 mb-5">
+            <div v-for="pos of positions" :key="pos.label" class="flex items-center">
+                <RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
+                <label :for="pos.label" class="ml-2"> {{ pos.label }} </label>
+            </div>
+        </div>
+        <div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
+            <Dock :model="items" :position="position">
+                <template #icon="{ item }">
+                    <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                </template>
+            </Dock>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Finder',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
+    },
+    {
+        label: 'App Store',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
+    },
+    {
+        label: 'Photos',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
+    },
+    {
+        label: 'Trash',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
+    }
+]);
+const position = ref('bottom');
+const positions = ref([
+    {
+        label: 'Bottom',
+        value: 'bottom'
+    },
+    {
+        label: 'Top',
+        value: 'top'
+    },
+    {
+        label: 'Left',
+        value: 'left'
+    },
+    {
+        label: 'Right',
+        value: 'right'
+    }
+]);
+
+<\/script>
+
+<style scoped>
+.dock-demo > .dock-window {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    z-index: 1;
+}
+
+.dock-demo > .p-dock {
+    z-index: 1000;
+}
+</style>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/dock/theming/index.vue b/doc/dock/theming/index.vue
new file mode 100644
index 000000000..196fc49f8
--- /dev/null
+++ b/doc/dock/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Dock Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/dropdown/StyleDoc.vue b/doc/dropdown/theming/StyledDoc.vue
similarity index 89%
rename from doc/dropdown/StyleDoc.vue
rename to doc/dropdown/theming/StyledDoc.vue
index 53d0a2908..83a2bb3c8 100644
--- a/doc/dropdown/StyleDoc.vue
+++ b/doc/dropdown/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/dropdown/theming/UnstyledDoc.vue b/doc/dropdown/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..95db1767e
--- /dev/null
+++ b/doc/dropdown/theming/UnstyledDoc.vue
@@ -0,0 +1,44 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/dropdown/theming/index.vue b/doc/dropdown/theming/index.vue
new file mode 100644
index 000000000..548ebcc5d
--- /dev/null
+++ b/doc/dropdown/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Dropdown Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/editor/StyleDoc.vue b/doc/editor/StyleDoc.vue
index c912161d9..c0abfb84c 100644
--- a/doc/editor/StyleDoc.vue
+++ b/doc/editor/StyleDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/fieldset/StyleDoc.vue b/doc/fieldset/theming/StyledDoc.vue
similarity index 83%
rename from doc/fieldset/StyleDoc.vue
rename to doc/fieldset/theming/StyledDoc.vue
index 1c7040737..63bb378f1 100644
--- a/doc/fieldset/StyleDoc.vue
+++ b/doc/fieldset/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
         <div class="doc-tablewrapper">
             <table class="doc-table">
                 <thead>
diff --git a/doc/fieldset/theming/UnstyledDoc.vue b/doc/fieldset/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..70f282a4f
--- /dev/null
+++ b/doc/fieldset/theming/UnstyledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <Fieldset legend="Header" :toggleable="true">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Fieldset>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/fieldset/theming/index.vue b/doc/fieldset/theming/index.vue
new file mode 100644
index 000000000..8ec6137a9
--- /dev/null
+++ b/doc/fieldset/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Fieldset Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/fileupload/StyleDoc.vue b/doc/fileupload/theming/StyledDoc.vue
similarity index 92%
rename from doc/fileupload/StyleDoc.vue
rename to doc/fileupload/theming/StyledDoc.vue
index e122ff3f3..16fb1a4e2 100644
--- a/doc/fileupload/StyleDoc.vue
+++ b/doc/fileupload/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/fileupload/theming/UnstyledDoc.vue b/doc/fileupload/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..9ff5c8e65
--- /dev/null
+++ b/doc/fileupload/theming/UnstyledDoc.vue
@@ -0,0 +1,37 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <Toast />
+        <FileUpload name="demo[]" url="./upload.php" @upload="onAdvancedUpload($event)" :multiple="true" accept="image/*" :maxFileSize="1000000">
+            <template #empty>
+                <p>Drag and drop files to here to upload.</p>
+            </template>
+        </FileUpload>
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const onAdvancedUpload = () => {
+    toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+};
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/fileupload/theming/index.vue b/doc/fileupload/theming/index.vue
new file mode 100644
index 000000000..ed10bdbd7
--- /dev/null
+++ b/doc/fileupload/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>FileUpload Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/galleria/StyleDoc.vue b/doc/galleria/theming/StyledDoc.vue
similarity index 90%
rename from doc/galleria/StyleDoc.vue
rename to doc/galleria/theming/StyledDoc.vue
index 5329e6f75..5e5d00123 100644
--- a/doc/galleria/StyleDoc.vue
+++ b/doc/galleria/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/galleria/theming/UnstyledDoc.vue b/doc/galleria/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..a3e8019dc
--- /dev/null
+++ b/doc/galleria/theming/UnstyledDoc.vue
@@ -0,0 +1,65 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card md:flex md:justify-content-center">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+
+const images = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '991px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '767px',
+        numVisible: 3
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1
+    }
+]);
+<\/script>`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/galleria/theming/index.vue b/doc/galleria/theming/index.vue
new file mode 100644
index 000000000..96d4147fd
--- /dev/null
+++ b/doc/galleria/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Galleria Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/image/StyleDoc.vue b/doc/image/theming/StyledDoc.vue
similarity index 88%
rename from doc/image/StyleDoc.vue
rename to doc/image/theming/StyledDoc.vue
index c2c8f92a1..5e50753a3 100644
--- a/doc/image/StyleDoc.vue
+++ b/doc/image/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/image/theming/UnstyledDoc.vue b/doc/image/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..013121aa8
--- /dev/null
+++ b/doc/image/theming/UnstyledDoc.vue
@@ -0,0 +1,23 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
+    </div>
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/image/theming/index.vue b/doc/image/theming/index.vue
new file mode 100644
index 000000000..a97e8d97a
--- /dev/null
+++ b/doc/image/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Image Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/inlinemessage/StyleDoc.vue b/doc/inlinemessage/StyleDoc.vue
index cd9869cfa..d84456a39 100644
--- a/doc/inlinemessage/StyleDoc.vue
+++ b/doc/inlinemessage/StyleDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/inplace/StyleDoc.vue b/doc/inplace/theming/StyledDoc.vue
similarity index 78%
rename from doc/inplace/StyleDoc.vue
rename to doc/inplace/theming/StyledDoc.vue
index d3309210a..48817cbc0 100644
--- a/doc/inplace/StyleDoc.vue
+++ b/doc/inplace/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/inplace/theming/UnstyledDoc.vue b/doc/inplace/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..26dd6f833
--- /dev/null
+++ b/doc/inplace/theming/UnstyledDoc.vue
@@ -0,0 +1,35 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <Inplace>
+            <template #display> View Content </template>
+            <template #content>
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </template>
+        </Inplace>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inplace/theming/index.vue b/doc/inplace/theming/index.vue
new file mode 100644
index 000000000..ad5db59e5
--- /dev/null
+++ b/doc/inplace/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Inplace Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/inputmask/StyleDoc.vue b/doc/inputmask/theming/StyledDoc.vue
similarity index 69%
rename from doc/inputmask/StyleDoc.vue
rename to doc/inputmask/theming/StyledDoc.vue
index a2047ca0b..4258e7c75 100644
--- a/doc/inputmask/StyleDoc.vue
+++ b/doc/inputmask/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/inputmask/theming/UnstyledDoc.vue b/doc/inputmask/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..4c3921d8c
--- /dev/null
+++ b/doc/inputmask/theming/UnstyledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputmask/theming/index.vue b/doc/inputmask/theming/index.vue
new file mode 100644
index 000000000..ab2517610
--- /dev/null
+++ b/doc/inputmask/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>InputMask Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/inputnumber/StyleDoc.vue b/doc/inputnumber/theming/StyledDoc.vue
similarity index 89%
rename from doc/inputnumber/StyleDoc.vue
rename to doc/inputnumber/theming/StyledDoc.vue
index f3bacabd6..e78fc68b3 100644
--- a/doc/inputnumber/StyleDoc.vue
+++ b/doc/inputnumber/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/inputnumber/theming/UnstyledDoc.vue b/doc/inputnumber/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..a89fb5606
--- /dev/null
+++ b/doc/inputnumber/theming/UnstyledDoc.vue
@@ -0,0 +1,51 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: 42723,
+            value2: 58151,
+            value3: 2351.35,
+            value4: 50,
+            code: {
+                composition: `
+<template>
+    <div class="card flex flex-wrap">
+        <div class="flex-auto">
+            <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
+            <InputNumber v-model="value1" inputId="integeronly" />
+        </div>
+        <div class="flex-auto">
+            <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
+            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
+        </div>
+        <div class="flex-auto">
+            <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
+            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
+        </div>
+        <div class="flex-auto">
+            <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
+            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref(42723);
+const value2 = ref(58151);
+const value3 = ref(2351.35);
+const value4 = ref(50);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputnumber/theming/index.vue b/doc/inputnumber/theming/index.vue
new file mode 100644
index 000000000..c2a77914c
--- /dev/null
+++ b/doc/inputnumber/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>InputNumber Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/inputswitch/StyleDoc.vue b/doc/inputswitch/theming/StyledDoc.vue
similarity index 79%
rename from doc/inputswitch/StyleDoc.vue
rename to doc/inputswitch/theming/StyledDoc.vue
index 916a48a61..5df2ea33a 100644
--- a/doc/inputswitch/StyleDoc.vue
+++ b/doc/inputswitch/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/inputswitch/theming/UnstyledDoc.vue b/doc/inputswitch/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..9975bc1fe
--- /dev/null
+++ b/doc/inputswitch/theming/UnstyledDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputSwitch v-model="checked" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputswitch/theming/index.vue b/doc/inputswitch/theming/index.vue
new file mode 100644
index 000000000..3e273a03b
--- /dev/null
+++ b/doc/inputswitch/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>InputSwitch Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/inputtext/StyleDoc.vue b/doc/inputtext/theming/StyledDoc.vue
similarity index 68%
rename from doc/inputtext/StyleDoc.vue
rename to doc/inputtext/theming/StyledDoc.vue
index 59bdc5bfa..e14458bae 100644
--- a/doc/inputtext/StyleDoc.vue
+++ b/doc/inputtext/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/inputtext/theming/UnstyledDoc.vue b/doc/inputtext/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..82122f095
--- /dev/null
+++ b/doc/inputtext/theming/UnstyledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputText type="text" v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputtext/theming/index.vue b/doc/inputtext/theming/index.vue
new file mode 100644
index 000000000..2a6315b16
--- /dev/null
+++ b/doc/inputtext/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>InputText Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/knob/StyleDoc.vue b/doc/knob/theming/StyledDoc.vue
similarity index 80%
rename from doc/knob/StyleDoc.vue
rename to doc/knob/theming/StyledDoc.vue
index ad39aa03d..8c0a3da21 100644
--- a/doc/knob/StyleDoc.vue
+++ b/doc/knob/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/knob/theming/UnstyledDoc.vue b/doc/knob/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..e88f1d960
--- /dev/null
+++ b/doc/knob/theming/UnstyledDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 0,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Knob v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(0);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/knob/theming/index.vue b/doc/knob/theming/index.vue
new file mode 100644
index 000000000..18188acbf
--- /dev/null
+++ b/doc/knob/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Knob Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/listbox/StyleDoc.vue b/doc/listbox/theming/StyledDoc.vue
similarity index 83%
rename from doc/listbox/StyleDoc.vue
rename to doc/listbox/theming/StyledDoc.vue
index f970f2202..b59027dc2 100644
--- a/doc/listbox/StyleDoc.vue
+++ b/doc/listbox/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/listbox/theming/UnstyledDoc.vue b/doc/listbox/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..895b4ff41
--- /dev/null
+++ b/doc/listbox/theming/UnstyledDoc.vue
@@ -0,0 +1,44 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/listbox/theming/index.vue b/doc/listbox/theming/index.vue
new file mode 100644
index 000000000..8d12b25da
--- /dev/null
+++ b/doc/listbox/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Listbox Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/megamenu/StyleDoc.vue b/doc/megamenu/theming/StyledDoc.vue
similarity index 91%
rename from doc/megamenu/StyleDoc.vue
rename to doc/megamenu/theming/StyledDoc.vue
index deb798973..0cbcdf1d6 100644
--- a/doc/megamenu/StyleDoc.vue
+++ b/doc/megamenu/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/megamenu/theming/UnstyledDoc.vue b/doc/megamenu/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..19fc81a2a
--- /dev/null
+++ b/doc/megamenu/theming/UnstyledDoc.vue
@@ -0,0 +1,260 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Videos',
+                    icon: 'pi pi-fw pi-video',
+                    items: [
+                        [
+                            {
+                                label: 'Video 1',
+                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
+                            },
+                            {
+                                label: 'Video 2',
+                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Video 3',
+                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
+                            },
+                            {
+                                label: 'Video 4',
+                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Users',
+                    icon: 'pi pi-fw pi-users',
+                    items: [
+                        [
+                            {
+                                label: 'User 1',
+                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
+                            },
+                            {
+                                label: 'User 2',
+                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'User 3',
+                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
+                            },
+                            {
+                                label: 'User 4',
+                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'User 5',
+                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
+                            },
+                            {
+                                label: 'User 6',
+                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        [
+                            {
+                                label: 'Event 1',
+                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
+                            },
+                            {
+                                label: 'Event 2',
+                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Event 3',
+                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
+                            },
+                            {
+                                label: 'Event 4',
+                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-fw pi-cog',
+                    items: [
+                        [
+                            {
+                                label: 'Setting 1',
+                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
+                            },
+                            {
+                                label: 'Setting 2',
+                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
+                            },
+                            {
+                                label: 'Setting 3',
+                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Technology 4',
+                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
+                            }
+                        ]
+                    ]
+                }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <MegaMenu :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Videos',
+        icon: 'pi pi-fw pi-video',
+        items: [
+            [
+                {
+                    label: 'Video 1',
+                    items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
+                },
+                {
+                    label: 'Video 2',
+                    items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                }
+            ],
+            [
+                {
+                    label: 'Video 3',
+                    items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
+                },
+                {
+                    label: 'Video 4',
+                    items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                }
+            ]
+        ]
+    },
+    {
+        label: 'Users',
+        icon: 'pi pi-fw pi-users',
+        items: [
+            [
+                {
+                    label: 'User 1',
+                    items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
+                },
+                {
+                    label: 'User 2',
+                    items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
+                }
+            ],
+            [
+                {
+                    label: 'User 3',
+                    items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
+                },
+                {
+                    label: 'User 4',
+                    items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
+                }
+            ],
+            [
+                {
+                    label: 'User 5',
+                    items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
+                },
+                {
+                    label: 'User 6',
+                    items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
+                }
+            ]
+        ]
+    },
+    {
+        label: 'Events',
+        icon: 'pi pi-fw pi-calendar',
+        items: [
+            [
+                {
+                    label: 'Event 1',
+                    items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
+                },
+                {
+                    label: 'Event 2',
+                    items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
+                }
+            ],
+            [
+                {
+                    label: 'Event 3',
+                    items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
+                },
+                {
+                    label: 'Event 4',
+                    items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
+                }
+            ]
+        ]
+    },
+    {
+        label: 'Settings',
+        icon: 'pi pi-fw pi-cog',
+        items: [
+            [
+                {
+                    label: 'Setting 1',
+                    items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
+                },
+                {
+                    label: 'Setting 2',
+                    items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
+                },
+                {
+                    label: 'Setting 3',
+                    items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
+                }
+            ],
+            [
+                {
+                    label: 'Technology 4',
+                    items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
+                }
+            ]
+        ]
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/megamenu/theming/index.vue b/doc/megamenu/theming/index.vue
new file mode 100644
index 000000000..fa100ff41
--- /dev/null
+++ b/doc/megamenu/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>MegaMenu Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/menu/StyleDoc.vue b/doc/menu/theming/StyledDoc.vue
similarity index 90%
rename from doc/menu/StyleDoc.vue
rename to doc/menu/theming/StyledDoc.vue
index 2af01b953..7c9ce86dd 100644
--- a/doc/menu/StyleDoc.vue
+++ b/doc/menu/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/menu/theming/UnstyledDoc.vue b/doc/menu/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..48dad8726
--- /dev/null
+++ b/doc/menu/theming/UnstyledDoc.vue
@@ -0,0 +1,36 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { label: 'New', icon: 'pi pi-fw pi-plus' },
+                { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Menu :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    { label: 'New', icon: 'pi pi-fw pi-plus' },
+    { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/menu/theming/index.vue b/doc/menu/theming/index.vue
new file mode 100644
index 000000000..01428e385
--- /dev/null
+++ b/doc/menu/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Menu Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/menubar/StyleDoc.vue b/doc/menubar/theming/StyledDoc.vue
similarity index 91%
rename from doc/menubar/StyleDoc.vue
rename to doc/menubar/theming/StyledDoc.vue
index 9dd6a4485..4abcdb93c 100644
--- a/doc/menubar/StyleDoc.vue
+++ b/doc/menubar/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/menubar/theming/UnstyledDoc.vue b/doc/menubar/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..bf9c94290
--- /dev/null
+++ b/doc/menubar/theming/UnstyledDoc.vue
@@ -0,0 +1,274 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-fw pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator: true
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    label: 'Users',
+                    icon: 'pi pi-fw pi-user',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-user-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-user-minus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-fw pi-users',
+                            items: [
+                                {
+                                    label: 'Filter',
+                                    icon: 'pi pi-fw pi-filter',
+                                    items: [
+                                        {
+                                            label: 'Print',
+                                            icon: 'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon: 'pi pi-fw pi-bars',
+                                    label: 'List'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archieve',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-fw pi-power-off'
+                }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card relative z-2">
+        <Menubar :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-fw pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-plus',
+                items: [
+                    {
+                        label: 'Bookmark',
+                        icon: 'pi pi-fw pi-bookmark'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-fw pi-video'
+                    }
+                ]
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-trash'
+            },
+            {
+                separator: true
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-fw pi-external-link'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-fw pi-pencil',
+        items: [
+            {
+                label: 'Left',
+                icon: 'pi pi-fw pi-align-left'
+            },
+            {
+                label: 'Right',
+                icon: 'pi pi-fw pi-align-right'
+            },
+            {
+                label: 'Center',
+                icon: 'pi pi-fw pi-align-center'
+            },
+            {
+                label: 'Justify',
+                icon: 'pi pi-fw pi-align-justify'
+            }
+        ]
+    },
+    {
+        label: 'Users',
+        icon: 'pi pi-fw pi-user',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-user-plus'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-user-minus'
+            },
+            {
+                label: 'Search',
+                icon: 'pi pi-fw pi-users',
+                items: [
+                    {
+                        label: 'Filter',
+                        icon: 'pi pi-fw pi-filter',
+                        items: [
+                            {
+                                label: 'Print',
+                                icon: 'pi pi-fw pi-print'
+                            }
+                        ]
+                    },
+                    {
+                        icon: 'pi pi-fw pi-bars',
+                        label: 'List'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Events',
+        icon: 'pi pi-fw pi-calendar',
+        items: [
+            {
+                label: 'Edit',
+                icon: 'pi pi-fw pi-pencil',
+                items: [
+                    {
+                        label: 'Save',
+                        icon: 'pi pi-fw pi-calendar-plus'
+                    },
+                    {
+                        label: 'Delete',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            },
+            {
+                label: 'Archieve',
+                icon: 'pi pi-fw pi-calendar-times',
+                items: [
+                    {
+                        label: 'Remove',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Quit',
+        icon: 'pi pi-fw pi-power-off'
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/menubar/theming/index.vue b/doc/menubar/theming/index.vue
new file mode 100644
index 000000000..40c247d9e
--- /dev/null
+++ b/doc/menubar/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Menubar Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/message/StyleDoc.vue b/doc/message/theming/StyledDoc.vue
similarity index 88%
rename from doc/message/StyleDoc.vue
rename to doc/message/theming/StyledDoc.vue
index 753f14b09..b59fd891c 100644
--- a/doc/message/StyleDoc.vue
+++ b/doc/message/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/message/theming/UnstyledDoc.vue b/doc/message/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..2299cdce2
--- /dev/null
+++ b/doc/message/theming/UnstyledDoc.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <Message severity="success">Success Message Content</Message>
+        <Message severity="info">Info Message Content</Message>
+        <Message severity="warn">Warning Message Content</Message>
+        <Message severity="error">Error Message Content</Message>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/message/theming/index.vue b/doc/message/theming/index.vue
new file mode 100644
index 000000000..c9eace36b
--- /dev/null
+++ b/doc/message/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Message Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/multiselect/StyleDoc.vue b/doc/multiselect/theming/StyledDoc.vue
similarity index 89%
rename from doc/multiselect/StyleDoc.vue
rename to doc/multiselect/theming/StyledDoc.vue
index fc603825b..57ef6e358 100644
--- a/doc/multiselect/StyleDoc.vue
+++ b/doc/multiselect/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/multiselect/theming/UnstyledDoc.vue b/doc/multiselect/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..f0e6f8bbe
--- /dev/null
+++ b/doc/multiselect/theming/UnstyledDoc.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
+            :maxSelectedLabels="3" class="w-full md:w-20rem" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCities = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/multiselect/theming/index.vue b/doc/multiselect/theming/index.vue
new file mode 100644
index 000000000..fad2515bf
--- /dev/null
+++ b/doc/multiselect/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>MultiSelect Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/orderlist/BasicDoc.vue b/doc/orderlist/BasicDoc.vue
index 4306ced83..fdc77fba3 100644
--- a/doc/orderlist/BasicDoc.vue
+++ b/doc/orderlist/BasicDoc.vue
@@ -111,7 +111,7 @@ import { ProductService } from '@/service/ProductService'
 const products = ref(null);
 
 onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (this.products = data));
+    ProductService.getProductsSmall().then((data) => (products.value = data));
 });
 <\/script>`,
                 data: `
diff --git a/doc/orderlist/StyleDoc.vue b/doc/orderlist/theming/StyledDoc.vue
similarity index 78%
rename from doc/orderlist/StyleDoc.vue
rename to doc/orderlist/theming/StyledDoc.vue
index d1824d0ce..e67bf7a98 100644
--- a/doc/orderlist/StyleDoc.vue
+++ b/doc/orderlist/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming">theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/orderlist/theming/UnstyledDoc.vue b/doc/orderlist/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..6fe4f50f2
--- /dev/null
+++ b/doc/orderlist/theming/UnstyledDoc.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" :service="['ProductService']" embedded />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                composition: `
+<template>
+    <div class="card xl:flex xl:justify-center">
+        <OrderList v-model="products" listStyle="height:auto" dataKey="id">
+            <template #header> List of Products </template>
+            <template #item="slotProps">
+                <div class="flex flex-wrap p-2 items-center gap-3">
+                    <img class="w-16 shadow-md shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <div class="flex-1 flex flex-col gap-2">
+                        <span class="font-bold">{{ slotProps.item.name }}</span>
+                        <div class="flex items-center gap-2">
+                            <i class="pi pi-tag text-sm"></i>
+                            <span>{{ slotProps.item.category }}</span>
+                        </div>
+                    </div>
+                    <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
+                </div>
+            </template>
+        </OrderList>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService'
+
+const products = ref(null);
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data));
+});
+<\/script>`,
+                data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data));
+    }
+};
+</script>
diff --git a/doc/orderlist/theming/index.vue b/doc/orderlist/theming/index.vue
new file mode 100644
index 000000000..d0e0c12d3
--- /dev/null
+++ b/doc/orderlist/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>OrderList Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/organizationchart/StyleDoc.vue b/doc/organizationchart/theming/StyledDoc.vue
similarity index 87%
rename from doc/organizationchart/StyleDoc.vue
rename to doc/organizationchart/theming/StyledDoc.vue
index fc2e20ef4..3cf4cc489 100644
--- a/doc/organizationchart/StyleDoc.vue
+++ b/doc/organizationchart/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/organizationchart/theming/UnstyledDoc.vue b/doc/organizationchart/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..7b9d27973
--- /dev/null
+++ b/doc/organizationchart/theming/UnstyledDoc.vue
@@ -0,0 +1,134 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            data: {
+                key: '0',
+                type: 'country',
+                label: 'Argentina',
+                data: 'ar',
+                children: [
+                    {
+                        key: '0_0',
+                        type: 'country',
+                        label: 'Argentina',
+                        data: 'ar',
+                        children: [
+                            {
+                                key: '0_0_0',
+                                type: 'country',
+                                label: 'Argentina',
+                                data: 'ar'
+                            },
+                            {
+                                key: '0_0_1',
+                                type: 'country',
+                                label: 'Croatia',
+                                data: 'hr'
+                            }
+                        ]
+                    },
+                    {
+                        key: '0_1',
+                        type: 'country',
+                        label: 'France',
+                        data: 'fr',
+                        children: [
+                            {
+                                key: '0_1_0',
+                                type: 'country',
+                                label: 'France',
+                                data: 'fr'
+                            },
+                            {
+                                key: '0_1_1',
+                                type: 'country',
+                                label: 'Morocco',
+                                data: 'ma'
+                            }
+                        ]
+                    }
+                ]
+            },
+            code: {
+                composition: `
+<template>
+    <div class="card overflow-x-auto">
+        <OrganizationChart :value="data" collapsible>
+            <template #country="slotProps">
+                <div class="flex flex-col items-center">
+                    <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-8 shadow-md flag flag-\${slotProps.node.data}\`" />
+                    <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
+                </div>
+            </template>
+            <template #default="slotProps">
+                <span>{{slotProps.node.data.label}}</span>
+            </template>
+        </OrganizationChart>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const data = ref({
+    key: '0',
+    type: 'country',
+    label: 'Argentina',
+    data: 'ar',
+    children: [
+        {
+            key: '0_0',
+            type: 'country',
+            label: 'Argentina',
+            data: 'ar',
+            children: [
+                {
+                    key: '0_0_0',
+                    type: 'country',
+                    label: 'Argentina',
+                    data: 'ar'
+                },
+                {
+                    key: '0_0_1',
+                    type: 'country',
+                    label: 'Croatia',
+                    data: 'hr'
+                }
+            ]
+        },
+        {
+            key: '0_1',
+            type: 'country',
+            label: 'France',
+            data: 'fr',
+            children: [
+                {
+                    key: '0_1_0',
+                    type: 'country',
+                    label: 'France',
+                    data: 'fr'
+                },
+                {
+                    key: '0_1_1',
+                    type: 'country',
+                    label: 'Morocco',
+                    data: 'ma'
+                }
+            ]
+        }
+    ]
+});
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/organizationchart/theming/index.vue b/doc/organizationchart/theming/index.vue
new file mode 100644
index 000000000..02fa383fc
--- /dev/null
+++ b/doc/organizationchart/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>OrganizationChart Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/overlaypanel/StyleDoc.vue b/doc/overlaypanel/theming/StyledDoc.vue
similarity index 78%
rename from doc/overlaypanel/StyleDoc.vue
rename to doc/overlaypanel/theming/StyledDoc.vue
index c70ace219..242e0a875 100644
--- a/doc/overlaypanel/StyleDoc.vue
+++ b/doc/overlaypanel/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <NuxtLink to="/theming"> theming</NuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/overlaypanel/theming/UnstyledDoc.vue b/doc/overlaypanel/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..a00fa480e
--- /dev/null
+++ b/doc/overlaypanel/theming/UnstyledDoc.vue
@@ -0,0 +1,36 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
+
+        <OverlayPanel ref="op">
+            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+        </OverlayPanel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const op = ref();
+const toggle = (event) => {
+    op.value.toggle(event);
+}
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/overlaypanel/theming/index.vue b/doc/overlaypanel/theming/index.vue
new file mode 100644
index 000000000..4863ad01f
--- /dev/null
+++ b/doc/overlaypanel/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>OverlayPanel Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/paginator/StyleDoc.vue b/doc/paginator/theming/StyledDoc.vue
similarity index 86%
rename from doc/paginator/StyleDoc.vue
rename to doc/paginator/theming/StyledDoc.vue
index 9eedaa25f..0752a9e4e 100644
--- a/doc/paginator/StyleDoc.vue
+++ b/doc/paginator/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/paginator/theming/UnstyledDoc.vue b/doc/paginator/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..0902a0df4
--- /dev/null
+++ b/doc/paginator/theming/UnstyledDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/paginator/theming/index.vue b/doc/paginator/theming/index.vue
new file mode 100644
index 000000000..970950eca
--- /dev/null
+++ b/doc/paginator/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Paginator Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/panel/StyleDoc.vue b/doc/panel/theming/StyledDoc.vue
similarity index 83%
rename from doc/panel/StyleDoc.vue
rename to doc/panel/theming/StyledDoc.vue
index 0f7c0069f..6b086a206 100644
--- a/doc/panel/StyleDoc.vue
+++ b/doc/panel/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/panel/theming/UnstyledDoc.vue b/doc/panel/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..3062d8448
--- /dev/null
+++ b/doc/panel/theming/UnstyledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <Panel header="Header">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/panel/theming/index.vue b/doc/panel/theming/index.vue
new file mode 100644
index 000000000..939c937bc
--- /dev/null
+++ b/doc/panel/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Panel Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/panelmenu/StyleDoc.vue b/doc/panelmenu/theming/StyledDoc.vue
similarity index 89%
rename from doc/panelmenu/StyleDoc.vue
rename to doc/panelmenu/theming/StyledDoc.vue
index c29e94759..605a1bee5 100644
--- a/doc/panelmenu/StyleDoc.vue
+++ b/doc/panelmenu/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/panelmenu/theming/UnstyledDoc.vue b/doc/panelmenu/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..4367ad057
--- /dev/null
+++ b/doc/panelmenu/theming/UnstyledDoc.vue
@@ -0,0 +1,260 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-fw pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    label: 'Users',
+                    icon: 'pi pi-fw pi-user',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-user-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-user-minus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-fw pi-users',
+                            items: [
+                                {
+                                    label: 'Filter',
+                                    icon: 'pi pi-fw pi-filter',
+                                    items: [
+                                        {
+                                            label: 'Print',
+                                            icon: 'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon: 'pi pi-fw pi-bars',
+                                    label: 'List'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archieve',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <PanelMenu :model="items" class="w-full md:w-96" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-fw pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-plus',
+                items: [
+                    {
+                        label: 'Bookmark',
+                        icon: 'pi pi-fw pi-bookmark'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-fw pi-video'
+                    }
+                ]
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-trash'
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-fw pi-external-link'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-fw pi-pencil',
+        items: [
+            {
+                label: 'Left',
+                icon: 'pi pi-fw pi-align-left'
+            },
+            {
+                label: 'Right',
+                icon: 'pi pi-fw pi-align-right'
+            },
+            {
+                label: 'Center',
+                icon: 'pi pi-fw pi-align-center'
+            },
+            {
+                label: 'Justify',
+                icon: 'pi pi-fw pi-align-justify'
+            }
+        ]
+    },
+    {
+        label: 'Users',
+        icon: 'pi pi-fw pi-user',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-user-plus'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-user-minus'
+            },
+            {
+                label: 'Search',
+                icon: 'pi pi-fw pi-users',
+                items: [
+                    {
+                        label: 'Filter',
+                        icon: 'pi pi-fw pi-filter',
+                        items: [
+                            {
+                                label: 'Print',
+                                icon: 'pi pi-fw pi-print'
+                            }
+                        ]
+                    },
+                    {
+                        icon: 'pi pi-fw pi-bars',
+                        label: 'List'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Events',
+        icon: 'pi pi-fw pi-calendar',
+        items: [
+            {
+                label: 'Edit',
+                icon: 'pi pi-fw pi-pencil',
+                items: [
+                    {
+                        label: 'Save',
+                        icon: 'pi pi-fw pi-calendar-plus'
+                    },
+                    {
+                        label: 'Delete',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            },
+            {
+                label: 'Archieve',
+                icon: 'pi pi-fw pi-calendar-times',
+                items: [
+                    {
+                        label: 'Remove',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/panelmenu/theming/index.vue b/doc/panelmenu/theming/index.vue
new file mode 100644
index 000000000..ee4c4d6e1
--- /dev/null
+++ b/doc/panelmenu/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>PanelMenu Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/password/StyleDoc.vue b/doc/password/theming/StyledDoc.vue
similarity index 78%
rename from doc/password/StyleDoc.vue
rename to doc/password/theming/StyledDoc.vue
index 9f25c4b46..09c9f8be4 100644
--- a/doc/password/StyleDoc.vue
+++ b/doc/password/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/password/theming/UnstyledDoc.vue b/doc/password/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..30f0c96bb
--- /dev/null
+++ b/doc/password/theming/UnstyledDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Password v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/password/theming/index.vue b/doc/password/theming/index.vue
new file mode 100644
index 000000000..53bc230be
--- /dev/null
+++ b/doc/password/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Password Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/picklist/StyleDoc.vue b/doc/picklist/theming/StyledDoc.vue
similarity index 86%
rename from doc/picklist/StyleDoc.vue
rename to doc/picklist/theming/StyledDoc.vue
index 8273334d8..22d38fe26 100644
--- a/doc/picklist/StyleDoc.vue
+++ b/doc/picklist/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/picklist/theming/UnstyledDoc.vue b/doc/picklist/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..f9e89aea1
--- /dev/null
+++ b/doc/picklist/theming/UnstyledDoc.vue
@@ -0,0 +1,72 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" :service="['ProductService']" embedded />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <PickList v-model="products" listStyle="height:342px" dataKey="id">
+            <template #sourceheader> Available </template>
+            <template #targetheader> Selected </template>
+            <template #item="slotProps">
+                <div class="flex flex-wrap p-2 items-center gap-3">
+                    <img class="w-16 shadow-md shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <div class="flex-1 flex flex-col gap-2">
+                        <span class="font-bold">{{ slotProps.item.name }}</span>
+                        <div class="flex items-center gap-2">
+                            <i class="pi pi-tag text-sm"></i>
+                            <span>{{ slotProps.item.category }}</span>
+                        </div>
+                    </div>
+                    <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
+                </div>
+            </template>
+        </PickList>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService'
+
+const products = ref(null);
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = [data, []]));
+});
+<\/script>`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: '/bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
+    }
+};
+</script>
diff --git a/doc/picklist/theming/index.vue b/doc/picklist/theming/index.vue
new file mode 100644
index 000000000..76e634c67
--- /dev/null
+++ b/doc/picklist/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>PickList Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/progressbar/StyleDoc.vue b/doc/progressbar/theming/StyledDoc.vue
similarity index 84%
rename from doc/progressbar/StyleDoc.vue
rename to doc/progressbar/theming/StyledDoc.vue
index 45b8e58ea..816a66eb5 100644
--- a/doc/progressbar/StyleDoc.vue
+++ b/doc/progressbar/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/progressbar/theming/UnstyledDoc.vue b/doc/progressbar/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..13e33b890
--- /dev/null
+++ b/doc/progressbar/theming/UnstyledDoc.vue
@@ -0,0 +1,58 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <ProgressBar :value="50"></ProgressBar>
+    </div>
+    <div class="card">
+        <Toast></Toast>
+        <ProgressBar :value="value1" />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { useToast } from "primevue/usetoast";
+
+onMounted(() => {
+    startProgress();
+});
+
+onBeforeUnmount(() => {
+    endProgress();
+});
+
+const toast = useToast();
+const value1 = ref(0);
+const interval = ref();
+const startProgress = () => {
+    interval.value = setInterval(() => {
+        let newValue = value1.value + Math.floor(Math.random() * 10) + 1;
+        if (newValue >= 100) {
+            newValue = 100;
+            toast.add({ severity: 'info', summary: 'Success', detail: 'Process Completed', life: 1000 });
+        }
+        value1.value = newValue;
+    }, 2000);
+};
+const endProgress = () => {
+    clearInterval(interval.value);
+    interval.value = null;
+};
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/progressbar/theming/index.vue b/doc/progressbar/theming/index.vue
new file mode 100644
index 000000000..2c90a4a9a
--- /dev/null
+++ b/doc/progressbar/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Progressbar Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/progressspinner/StyleDoc.vue b/doc/progressspinner/StyleDoc.vue
index 867b8fe50..10800d3d7 100644
--- a/doc/progressspinner/StyleDoc.vue
+++ b/doc/progressspinner/StyleDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/radiobutton/StyleDoc.vue b/doc/radiobutton/theming/StyledDoc.vue
similarity index 77%
rename from doc/radiobutton/StyleDoc.vue
rename to doc/radiobutton/theming/StyledDoc.vue
index 238b03163..9f14e0192 100644
--- a/doc/radiobutton/StyleDoc.vue
+++ b/doc/radiobutton/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/radiobutton/theming/UnstyledDoc.vue b/doc/radiobutton/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..f82fe2608
--- /dev/null
+++ b/doc/radiobutton/theming/UnstyledDoc.vue
@@ -0,0 +1,47 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            ingredient: '',
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-3">
+            <div class="flex align-items-center">
+                <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
+                <label for="ingredient1" class="ml-2">Cheese</label>
+            </div>
+            <div class="flex align-items-center">
+                <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
+                <label for="ingredient2" class="ml-2">Mushroom</label>
+            </div>
+            <div class="flex align-items-center">
+                <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
+                <label for="ingredient3" class="ml-2">Pepper</label>
+            </div>
+            <div class="flex align-items-center">
+                <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
+                <label for="ingredient4" class="ml-2">Onion</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const ingredient = ref('');
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/radiobutton/theming/index.vue b/doc/radiobutton/theming/index.vue
new file mode 100644
index 000000000..a8a1a2dc4
--- /dev/null
+++ b/doc/radiobutton/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>RadioButton Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/rating/StyleDoc.vue b/doc/rating/theming/StyledDoc.vue
similarity index 80%
rename from doc/rating/StyleDoc.vue
rename to doc/rating/theming/StyledDoc.vue
index 29daea0b0..699809a10 100644
--- a/doc/rating/StyleDoc.vue
+++ b/doc/rating/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/rating/theming/UnstyledDoc.vue b/doc/rating/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..a2ac2ea97
--- /dev/null
+++ b/doc/rating/theming/UnstyledDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/rating/theming/index.vue b/doc/rating/theming/index.vue
new file mode 100644
index 000000000..bb127c40b
--- /dev/null
+++ b/doc/rating/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Rating Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/ripple/StyleDoc.vue b/doc/ripple/StyleDoc.vue
index 48c044501..538922e0b 100644
--- a/doc/ripple/StyleDoc.vue
+++ b/doc/ripple/StyleDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/scrollpanel/StyleDoc.vue b/doc/scrollpanel/StyleDoc.vue
index 698ad831d..3492cfda7 100644
--- a/doc/scrollpanel/StyleDoc.vue
+++ b/doc/scrollpanel/StyleDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/scrolltop/StyleDoc.vue b/doc/scrolltop/StyleDoc.vue
index dc782c3d6..eacb4b8b5 100644
--- a/doc/scrolltop/StyleDoc.vue
+++ b/doc/scrolltop/StyleDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/selectbutton/theming/StyledDoc.vue b/doc/selectbutton/theming/StyledDoc.vue
new file mode 100644
index 000000000..95322026d
--- /dev/null
+++ b/doc/selectbutton/theming/StyledDoc.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
+    </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-select-button</td>
+                    <td>SelectButton element</td>
+                </tr>
+                <tr>
+                    <td>p-button</td>
+                    <td>Button element</td>
+                </tr>
+                <tr>
+                    <td>p-button-label</td>
+                    <td>Label element of the button</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
diff --git a/doc/selectbutton/theming/UnstyledDoc.vue b/doc/selectbutton/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..e8edcf170
--- /dev/null
+++ b/doc/selectbutton/theming/UnstyledDoc.vue
@@ -0,0 +1,32 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 'Off',
+            options: ['Off', 'On'],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('off');
+const options = ref(['Off', 'On']);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/selectbutton/theming/index.vue b/doc/selectbutton/theming/index.vue
new file mode 100644
index 000000000..5794035d3
--- /dev/null
+++ b/doc/selectbutton/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>SelectButton Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/sidebar/StyleDoc.vue b/doc/sidebar/theming/StyledDoc.vue
similarity index 90%
rename from doc/sidebar/StyleDoc.vue
rename to doc/sidebar/theming/StyledDoc.vue
index 9d0296ddd..01d68fc52 100644
--- a/doc/sidebar/StyleDoc.vue
+++ b/doc/sidebar/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/sidebar/theming/UnstyledDoc.vue b/doc/sidebar/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..6eccade75
--- /dev/null
+++ b/doc/sidebar/theming/UnstyledDoc.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <div class="flex gap-2 justify-content-center">
+            <Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
+            <Button icon="pi pi-arrow-left" @click="visibleRight = true" />
+            <Button icon="pi pi-arrow-down" @click="visibleTop = true" />
+            <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
+        </div>
+
+        <Sidebar v-model:visible="visibleLeft">
+            <h2>Left Sidebar</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Sidebar>
+
+        <Sidebar v-model:visible="visibleRight" position="right">
+            <h2>Right Sidebar</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Sidebar>
+
+        <Sidebar v-model:visible="visibleTop" position="top">
+            <h2>Top Sidebar</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Sidebar>
+
+        <Sidebar v-model:visible="visibleBottom" position="bottom">
+            <h2>Bottom Sidebar</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Sidebar>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visibleLeft = ref(false);
+const visibleRight = ref(false);
+const visibleTop = ref(false);
+const visibleBottom = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/sidebar/theming/index.vue b/doc/sidebar/theming/index.vue
new file mode 100644
index 000000000..13d9d21cf
--- /dev/null
+++ b/doc/sidebar/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Sidebar Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/skeleton/StyleDoc.vue b/doc/skeleton/theming/StyledDoc.vue
similarity index 78%
rename from doc/skeleton/StyleDoc.vue
rename to doc/skeleton/theming/StyledDoc.vue
index ff2fd2aa0..12b91ac6d 100644
--- a/doc/skeleton/StyleDoc.vue
+++ b/doc/skeleton/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/skeleton/theming/UnstyledDoc.vue b/doc/skeleton/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..52fb81e61
--- /dev/null
+++ b/doc/skeleton/theming/UnstyledDoc.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <div class="">
+            <div class="w-full">
+                <h5>Rectangle</h5>
+                <Skeleton class="mb-2"></Skeleton>
+                <Skeleton width="10rem" class="mb-2"></Skeleton>
+                <Skeleton width="5rem" class="mb-2"></Skeleton>
+                <Skeleton height="2rem" class="mb-2"></Skeleton>
+                <Skeleton width="10rem" height="4rem"></Skeleton>
+            </div>
+            <div class="w-full">
+                <h5>Rounded</h5>
+                <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
+                <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+            </div>
+            <div class="w-full">
+                <h5 class="mt-3">Square</h5>
+                <div class="flex items-end">
+                    <Skeleton size="2rem" class="mr-2"></Skeleton>
+                    <Skeleton size="3rem" class="mr-2"></Skeleton>
+                    <Skeleton size="4rem" class="mr-2"></Skeleton>
+                    <Skeleton size="5rem"></Skeleton>
+                </div>
+            </div>
+            <div class="w-full">
+                <h5 class="mt-3">Circle</h5>
+                <div class="flex items-end">
+                    <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="5rem"></Skeleton>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/skeleton/theming/index.vue b/doc/skeleton/theming/index.vue
new file mode 100644
index 000000000..58029b5e7
--- /dev/null
+++ b/doc/skeleton/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Skeleton Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/slider/StyleDoc.vue b/doc/slider/theming/StyledDoc.vue
similarity index 73%
rename from doc/slider/StyleDoc.vue
rename to doc/slider/theming/StyledDoc.vue
index 8a7c9c511..f266185f3 100644
--- a/doc/slider/StyleDoc.vue
+++ b/doc/slider/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/slider/theming/UnstyledDoc.vue b/doc/slider/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..8d295d8f0
--- /dev/null
+++ b/doc/slider/theming/UnstyledDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Slider v-model="value" class="w-14rem" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/slider/theming/index.vue b/doc/slider/theming/index.vue
new file mode 100644
index 000000000..e3c307a47
--- /dev/null
+++ b/doc/slider/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Slider Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/speeddial/StyleDoc.vue b/doc/speeddial/theming/StyledDoc.vue
similarity index 82%
rename from doc/speeddial/StyleDoc.vue
rename to doc/speeddial/theming/StyledDoc.vue
index f9e68efd9..a43899d4b 100644
--- a/doc/speeddial/StyleDoc.vue
+++ b/doc/speeddial/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/speeddial/theming/UnstyledDoc.vue b/doc/speeddial/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..b05001227
--- /dev/null
+++ b/doc/speeddial/theming/UnstyledDoc.vue
@@ -0,0 +1,112 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <div :style="{ position: 'relative', height: '500px' }">
+            <SpeedDial :model="items" direction="up" :style="{ left: 'calc(50% - 2rem)', bottom: 0 }" />
+            <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }" />
+            <SpeedDial :model="items" direction="left" :style="{ top: 'calc(50% - 2rem)', right: 0 }" />
+            <SpeedDial :model="items" direction="right" :style="{ top: 'calc(50% - 2rem)', left: 0 }" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useRouter } from 'vue-router';
+
+const toast = useToast();
+const router = useRouter();
+
+const items = ref([
+    {
+        label: 'Add',
+        icon: 'pi pi-pencil',
+        command: () => {
+            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+        }
+    },
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+        }
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-trash',
+        command: () => {
+            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+        }
+    },
+    {
+        label: 'Upload',
+        icon: 'pi pi-upload',
+        command: () => {
+            router.push('/fileupload');
+        }
+    },
+    {
+        label: 'Vue Website',
+        icon: 'pi pi-external-link',
+        command: () => {
+            window.location.href = 'https://vuejs.org/'
+        }
+    }
+])
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/speeddial/theming/index.vue b/doc/speeddial/theming/index.vue
new file mode 100644
index 000000000..5854f28b8
--- /dev/null
+++ b/doc/speeddial/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>SpeedDial Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/splitbutton/StyleDoc.vue b/doc/splitbutton/theming/StyledDoc.vue
similarity index 80%
rename from doc/splitbutton/StyleDoc.vue
rename to doc/splitbutton/theming/StyledDoc.vue
index 16999531f..27ca9a7ff 100644
--- a/doc/splitbutton/StyleDoc.vue
+++ b/doc/splitbutton/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/splitbutton/theming/UnstyledDoc.vue b/doc/splitbutton/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..fa8ba7bff
--- /dev/null
+++ b/doc/splitbutton/theming/UnstyledDoc.vue
@@ -0,0 +1,93 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            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',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                },
+                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center flex-wrap">
+        <Toast />
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>
+    </div>
+</template>
+
+<script setup>
+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: '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 });
+};
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/doc/splitbutton/theming/index.vue b/doc/splitbutton/theming/index.vue
new file mode 100644
index 000000000..63804e153
--- /dev/null
+++ b/doc/splitbutton/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>SplitButton Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/splitter/StyleDoc.vue b/doc/splitter/theming/StyledDoc.vue
similarity index 87%
rename from doc/splitter/StyleDoc.vue
rename to doc/splitter/theming/StyledDoc.vue
index 303534925..7a492774c 100644
--- a/doc/splitter/StyleDoc.vue
+++ b/doc/splitter/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
         <div class="doc-tablewrapper">
             <table class="doc-table">
                 <thead>
diff --git a/doc/splitter/theming/UnstyledDoc.vue b/doc/splitter/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..71e73ac75
--- /dev/null
+++ b/doc/splitter/theming/UnstyledDoc.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <Splitter style="height: 300px" class="mb-5">
+            <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
+            <SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
+        </Splitter>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/splitter/theming/index.vue b/doc/splitter/theming/index.vue
new file mode 100644
index 000000000..58533266e
--- /dev/null
+++ b/doc/splitter/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Splitter Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/steps/StyleDoc.vue b/doc/steps/theming/StyledDoc.vue
similarity index 85%
rename from doc/steps/StyleDoc.vue
rename to doc/steps/theming/StyledDoc.vue
index f363e29e5..059a1eeda 100644
--- a/doc/steps/StyleDoc.vue
+++ b/doc/steps/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/steps/theming/UnstyledDoc.vue b/doc/steps/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..41d8eccb2
--- /dev/null
+++ b/doc/steps/theming/UnstyledDoc.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Personal',
+                    to: '/steps'
+                },
+                {
+                    label: 'Seat',
+                    to: '/steps/seat'
+                },
+                {
+                    label: 'Payment',
+                    to: '/steps/payment'
+                },
+                {
+                    label: 'Confirmation',
+                    to: '/steps/confirmation'
+                }
+            ],
+            code: {
+                composition: `
+<template>
+    <div>
+        <div class="card">
+            <Steps :model="items" :readonly="false" aria-label="Form Steps" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Personal',
+        to: "/"
+    },
+    {
+        label: 'Seat',
+        to: "/seat",
+    },
+    {
+        label: 'Payment',
+        to: "/payment",
+    },
+    {
+        label: 'Confirmation',
+        to: "/confirmation",
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/steps/theming/index.vue b/doc/steps/theming/index.vue
new file mode 100644
index 000000000..dc4c76b5e
--- /dev/null
+++ b/doc/steps/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Steps Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/tabmenu/StyleDoc.vue b/doc/tabmenu/theming/StyledDoc.vue
similarity index 83%
rename from doc/tabmenu/StyleDoc.vue
rename to doc/tabmenu/theming/StyledDoc.vue
index e7dadc60a..eb8e2ffae 100644
--- a/doc/tabmenu/StyleDoc.vue
+++ b/doc/tabmenu/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/tabmenu/theming/UnstyledDoc.vue b/doc/tabmenu/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..1578dc598
--- /dev/null
+++ b/doc/tabmenu/theming/UnstyledDoc.vue
@@ -0,0 +1,145 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu' },
+                { label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar' },
+                { label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit' },
+                { label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation' },
+                { label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings' }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <TabMenu :model="items" />
+        <router-view />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Home',
+        icon: 'pi pi-fw pi-home',
+        to: '/'
+    },
+    {
+        label: 'Calendar',
+        icon: 'pi pi-fw pi-calendar',
+        to: '/calendar'
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-fw pi-pencil',
+        to: '/edit'
+    },
+    {
+        label: 'Documentation',
+        icon: 'pi pi-fw pi-file',
+        to: '/documentation'
+    },
+    {
+        label: 'Settings',
+        icon: 'pi pi-fw pi-cog',
+        to: '/settings'
+    }
+]);
+
+<\/script>`,
+                pages: [
+                    {
+                        tabName: 'HomeDemo',
+                        content: `
+<template>
+    <div class="tabmenudemo-content">
+        <h5>Home Component Content</h5>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+<\/script>
+`
+                    },
+                    {
+                        tabName: 'CalendarDemo',
+                        content: `
+<template>
+    <div class="tabmenudemo-content">
+        <h5>Calendar Component Content</h5>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+<\/script>
+`
+                    },
+                    {
+                        tabName: 'EditDemo',
+                        content: `
+<template>
+    <div class="tabmenudemo-content">
+        <h5>Edit Component Content</h5>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+<\/script>
+`
+                    },
+                    {
+                        tabName: 'DocumentationDemo',
+                        content: `
+<template>
+    <div class="tabmenudemo-content">
+        <h5>Documentation Component Content</h5>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+<\/script>
+`
+                    },
+                    {
+                        tabName: 'SettingsDemo',
+                        content: `
+<template>
+    <div class="tabmenudemo-content">
+        <h5>Settings Component Content</h5>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+<\/script>`
+                    }
+                ]
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tabmenu/theming/index.vue b/doc/tabmenu/theming/index.vue
new file mode 100644
index 000000000..096b92de1
--- /dev/null
+++ b/doc/tabmenu/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>TabMenu Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/tabview/StyleDoc.vue b/doc/tabview/theming/StyledDoc.vue
similarity index 82%
rename from doc/tabview/StyleDoc.vue
rename to doc/tabview/theming/StyledDoc.vue
index 7b5197dc5..f8edab294 100644
--- a/doc/tabview/StyleDoc.vue
+++ b/doc/tabview/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/tabview/theming/UnstyledDoc.vue b/doc/tabview/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..613337656
--- /dev/null
+++ b/doc/tabview/theming/UnstyledDoc.vue
@@ -0,0 +1,46 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <TabView>
+            <TabPanel header="Header I">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </TabPanel>
+            <TabPanel header="Header II">
+                <p>
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                </p>
+            </TabPanel>
+            <TabPanel header="Header III">
+                <p>
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                </p>
+            </TabPanel>
+            <TabPanel header="Header IV" :disabled="true"></TabPanel>
+        </TabView>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tabview/theming/index.vue b/doc/tabview/theming/index.vue
new file mode 100644
index 000000000..1bc51c636
--- /dev/null
+++ b/doc/tabview/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Tabview Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/tag/StyleDoc.vue b/doc/tag/theming/StyledDoc.vue
similarity index 79%
rename from doc/tag/StyleDoc.vue
rename to doc/tag/theming/StyledDoc.vue
index 540b3f379..d6bed5456 100644
--- a/doc/tag/StyleDoc.vue
+++ b/doc/tag/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/tag/theming/UnstyledDoc.vue b/doc/tag/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..7fd0c5762
--- /dev/null
+++ b/doc/tag/theming/UnstyledDoc.vue
@@ -0,0 +1,32 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="flex flex-wrap justify-content-center gap-2">
+        <Tag value="Primary"></Tag>
+        <Tag severity="success" value="Success"></Tag>
+        <Tag severity="info" value="Info"></Tag>
+        <Tag severity="warning" value="Warning"></Tag>
+        <Tag severity="danger" value="Danger"></Tag>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tag/theming/index.vue b/doc/tag/theming/index.vue
new file mode 100644
index 000000000..5498d1dc9
--- /dev/null
+++ b/doc/tag/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Tag Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/terminal/StyleDoc.vue b/doc/terminal/theming/StyledDoc.vue
similarity index 82%
rename from doc/terminal/StyleDoc.vue
rename to doc/terminal/theming/StyledDoc.vue
index ade801fbb..bdd65c98b 100644
--- a/doc/terminal/StyleDoc.vue
+++ b/doc/terminal/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/terminal/theming/UnstyledDoc.vue b/doc/terminal/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..83035c5fb
--- /dev/null
+++ b/doc/terminal/theming/UnstyledDoc.vue
@@ -0,0 +1,84 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div>
+        <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
+        <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
+    </div>
+</template>
+
+<script setup>
+import { onMounted, onBeforeUnmount } from 'vue';
+import TerminalService from "primevue/terminalservice";
+
+onMounted(() => {
+    TerminalService.on('command', commandHandler);
+})
+
+onBeforeUnmount(() => {
+    TerminalService.off('command', commandHandler);
+})
+
+const commandHandler = (text) => {
+    let response;
+    let argsIndex = text.indexOf(' ');
+    let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+    switch(command) {
+        case "date":
+            response = 'Today is ' + new Date().toDateString();
+            break;
+
+        case "greet":
+            response = 'Hola ' + text.substring(argsIndex + 1);
+            break;
+
+        case "random":
+            response = Math.floor(Math.random() * 100);
+            break;
+
+        default:
+            response = "Unknown command: " + command;
+    }
+    
+    TerminalService.emit('response', response);
+}
+<\/script>
+
+<style scoped>
+p {
+    margin-top: 0;
+}
+::v-deep(.dark-demo-terminal) {
+    background-color: #212121;
+    color: #ffffff;
+}
+
+::v-deep(.dark-demo-terminal .p-terminal-command) {
+    color: #80cbc4;
+}
+
+::v-deep(.dark-demo-terminal .p-terminal-prompt) {
+    color: #ffd54f;
+}
+
+::v-deep(.dark-demo-terminal .p-terminal-response) {
+    color: #9fa8da;
+}
+</style>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/terminal/theming/index.vue b/doc/terminal/theming/index.vue
new file mode 100644
index 000000000..0cbc0eeb5
--- /dev/null
+++ b/doc/terminal/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Terminal Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/textarea/StyleDoc.vue b/doc/textarea/theming/StyledDoc.vue
similarity index 68%
rename from doc/textarea/StyleDoc.vue
rename to doc/textarea/theming/StyledDoc.vue
index e422b1c1d..dfd12cfbc 100644
--- a/doc/textarea/StyleDoc.vue
+++ b/doc/textarea/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/textarea/theming/UnstyledDoc.vue b/doc/textarea/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..ddf0d4ea6
--- /dev/null
+++ b/doc/textarea/theming/UnstyledDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" rows="5" cols="30" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/textarea/theming/index.vue b/doc/textarea/theming/index.vue
new file mode 100644
index 000000000..ac7964d8f
--- /dev/null
+++ b/doc/textarea/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Textarea Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/tieredmenu/StyleDoc.vue b/doc/tieredmenu/theming/StyledDoc.vue
similarity index 88%
rename from doc/tieredmenu/StyleDoc.vue
rename to doc/tieredmenu/theming/StyledDoc.vue
index 618a8320e..9e4d37f68 100644
--- a/doc/tieredmenu/StyleDoc.vue
+++ b/doc/tieredmenu/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/tieredmenu/theming/UnstyledDoc.vue b/doc/tieredmenu/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..332994ca6
--- /dev/null
+++ b/doc/tieredmenu/theming/UnstyledDoc.vue
@@ -0,0 +1,280 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-fw pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator: true
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    label: 'Users',
+                    icon: 'pi pi-fw pi-user',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-user-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-user-minus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-fw pi-users',
+                            items: [
+                                {
+                                    label: 'Filter',
+                                    icon: 'pi pi-fw pi-filter',
+                                    items: [
+                                        {
+                                            label: 'Print',
+                                            icon: 'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon: 'pi pi-fw pi-bars',
+                                    label: 'List'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archieve',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-fw pi-power-off'
+                }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <TieredMenu :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+            
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-fw pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-plus',
+                items: [
+                    {
+                        label: 'Bookmark',
+                        icon: 'pi pi-fw pi-bookmark'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-fw pi-video'
+                    }
+                ]
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-trash'
+            },
+            {
+                separator: true
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-fw pi-external-link'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-fw pi-pencil',
+        items: [
+            {
+                label: 'Left',
+                icon: 'pi pi-fw pi-align-left'
+            },
+            {
+                label: 'Right',
+                icon: 'pi pi-fw pi-align-right'
+            },
+            {
+                label: 'Center',
+                icon: 'pi pi-fw pi-align-center'
+            },
+            {
+                label: 'Justify',
+                icon: 'pi pi-fw pi-align-justify'
+            }
+        ]
+    },
+    {
+        label: 'Users',
+        icon: 'pi pi-fw pi-user',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-user-plus'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-user-minus'
+            },
+            {
+                label: 'Search',
+                icon: 'pi pi-fw pi-users',
+                items: [
+                    {
+                        label: 'Filter',
+                        icon: 'pi pi-fw pi-filter',
+                        items: [
+                            {
+                                label: 'Print',
+                                icon: 'pi pi-fw pi-print'
+                            }
+                        ]
+                    },
+                    {
+                        icon: 'pi pi-fw pi-bars',
+                        label: 'List'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Events',
+        icon: 'pi pi-fw pi-calendar',
+        items: [
+            {
+                label: 'Edit',
+                icon: 'pi pi-fw pi-pencil',
+                items: [
+                    {
+                        label: 'Save',
+                        icon: 'pi pi-fw pi-calendar-plus'
+                    },
+                    {
+                        label: 'Delete',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            },
+            {
+                label: 'Archieve',
+                icon: 'pi pi-fw pi-calendar-times',
+                items: [
+                    {
+                        label: 'Remove',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        icon: 'pi pi-fw pi-power-off'
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tieredmenu/theming/index.vue b/doc/tieredmenu/theming/index.vue
new file mode 100644
index 000000000..928b251bd
--- /dev/null
+++ b/doc/tieredmenu/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>TieredMenu Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/timeline/StyleDoc.vue b/doc/timeline/theming/StyledDoc.vue
similarity index 91%
rename from doc/timeline/StyleDoc.vue
rename to doc/timeline/theming/StyledDoc.vue
index 2faed823f..60cfd345c 100644
--- a/doc/timeline/StyleDoc.vue
+++ b/doc/timeline/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/timeline/theming/UnstyledDoc.vue b/doc/timeline/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..abbbaa8b9
--- /dev/null
+++ b/doc/timeline/theming/UnstyledDoc.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            events: [
+                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
+                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-6">
+        <Timeline :value="events" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" align="right" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" align="alternate" class="w-full md:w-80">
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const events = ref([
+    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
+    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+]);
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/timeline/theming/index.vue b/doc/timeline/theming/index.vue
new file mode 100644
index 000000000..60f7b1375
--- /dev/null
+++ b/doc/timeline/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Timeline Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/toast/StyleDoc.vue b/doc/toast/StyleDoc.vue
index 86917e5a0..faa73d72e 100644
--- a/doc/toast/StyleDoc.vue
+++ b/doc/toast/StyleDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/togglebutton/StyleDoc.vue b/doc/togglebutton/theming/StyledDoc.vue
similarity index 76%
rename from doc/togglebutton/StyleDoc.vue
rename to doc/togglebutton/theming/StyledDoc.vue
index ea647e9d6..09373ab85 100644
--- a/doc/togglebutton/StyleDoc.vue
+++ b/doc/togglebutton/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/togglebutton/theming/UnstyledDoc.vue b/doc/togglebutton/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..6cc6cbe15
--- /dev/null
+++ b/doc/togglebutton/theming/UnstyledDoc.vue
@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" class="w-8rem" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/togglebutton/theming/index.vue b/doc/togglebutton/theming/index.vue
new file mode 100644
index 000000000..ccbb78066
--- /dev/null
+++ b/doc/togglebutton/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ToggleButton Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/toolbar/StyleDoc.vue b/doc/toolbar/theming/StyledDoc.vue
similarity index 80%
rename from doc/toolbar/StyleDoc.vue
rename to doc/toolbar/theming/StyledDoc.vue
index 5b136cd90..28424bce2 100644
--- a/doc/toolbar/StyleDoc.vue
+++ b/doc/toolbar/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/toolbar/theming/UnstyledDoc.vue b/doc/toolbar/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..a83f34469
--- /dev/null
+++ b/doc/toolbar/theming/UnstyledDoc.vue
@@ -0,0 +1,65 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <Toolbar>
+            <template #start>
+                <Button label="New" icon="pi pi-plus" class="mr-2" />
+                <Button label="Upload" icon="pi pi-upload" severity="success" class="mr-2" />
+                <i class="pi pi-bars p-toolbar-separator mr-2" />
+                <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
+            </template>
+
+            <template #end>
+                <Button icon="pi pi-search" class="mr-2" />
+                <Button icon="pi pi-calendar" severity="success" class="mr-2" />
+                <Button icon="pi pi-times" severity="danger" />
+            </template>
+        </Toolbar>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = ref([
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh'
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-times'
+    },
+    {
+        label: 'Vue Website',
+        icon: 'pi pi-external-link',
+        command: () => {
+            window.location.href = 'https://vuejs.org/';
+        }
+    },
+    {
+        label: 'Upload',
+        icon: 'pi pi-upload',
+        command: () => {
+            this.$router.push('fileupload');
+        }
+    }
+])
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/toolbar/theming/index.vue b/doc/toolbar/theming/index.vue
new file mode 100644
index 000000000..524b50f26
--- /dev/null
+++ b/doc/toolbar/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Toolbar Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/tooltip/StyleDoc.vue b/doc/tooltip/StyleDoc.vue
index 32de5b631..dc7383b4a 100644
--- a/doc/tooltip/StyleDoc.vue
+++ b/doc/tooltip/StyleDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/tree/StyleDoc.vue b/doc/tree/theming/StyledDoc.vue
similarity index 88%
rename from doc/tree/StyleDoc.vue
rename to doc/tree/theming/StyledDoc.vue
index 52b410e62..a624f39aa 100644
--- a/doc/tree/StyleDoc.vue
+++ b/doc/tree/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/tree/theming/UnstyledDoc.vue b/doc/tree/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..4aa8c20a5
--- /dev/null
+++ b/doc/tree/theming/UnstyledDoc.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" :service="['NodeService']" embedded />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+const nodes = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/doc/tree/theming/index.vue b/doc/tree/theming/index.vue
new file mode 100644
index 000000000..41d3880a4
--- /dev/null
+++ b/doc/tree/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Tree Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/treeselect/StyleDoc.vue b/doc/treeselect/theming/StyledDoc.vue
similarity index 85%
rename from doc/treeselect/StyleDoc.vue
rename to doc/treeselect/theming/StyledDoc.vue
index 6ad1299ff..af801f717 100644
--- a/doc/treeselect/StyleDoc.vue
+++ b/doc/treeselect/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/treeselect/theming/UnstyledDoc.vue b/doc/treeselect/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..a853929b2
--- /dev/null
+++ b/doc/treeselect/theming/UnstyledDoc.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" :service="['NodeService']" embedded />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+    </div> 
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const nodes = ref(null);
+const selectedValue = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/doc/treeselect/theming/index.vue b/doc/treeselect/theming/index.vue
new file mode 100644
index 000000000..e464c4aa6
--- /dev/null
+++ b/doc/treeselect/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>TreeSelect Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/treetable/StyleDoc.vue b/doc/treetable/theming/StyledDoc.vue
similarity index 91%
rename from doc/treetable/StyleDoc.vue
rename to doc/treetable/theming/StyledDoc.vue
index c0bc110e3..5c15f5b0d 100644
--- a/doc/treetable/StyleDoc.vue
+++ b/doc/treetable/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming"> theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/doc/treetable/theming/UnstyledDoc.vue b/doc/treetable/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..0019a6c12
--- /dev/null
+++ b/doc/treetable/theming/UnstyledDoc.vue
@@ -0,0 +1,72 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" :service="['NodeService']" embedded />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes">
+            <Column field="name" header="Name" sortable expander></Column>
+            <Column field="size" header="Size" sortable></Column>
+            <Column field="type" header="Type" sortable></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+<\/script>`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/doc/treetable/theming/index.vue b/doc/treetable/theming/index.vue
new file mode 100644
index 000000000..ecd8c45ce
--- /dev/null
+++ b/doc/treetable/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>TreeTable Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/tristatecheckbox/StyleDoc.vue b/doc/tristatecheckbox/theming/StyledDoc.vue
similarity index 79%
rename from doc/tristatecheckbox/StyleDoc.vue
rename to doc/tristatecheckbox/theming/StyledDoc.vue
index 855aca72d..0d9c102e5 100644
--- a/doc/tristatecheckbox/StyleDoc.vue
+++ b/doc/tristatecheckbox/theming/StyledDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
     <div class="doc-tablewrapper">
         <table class="doc-table">
diff --git a/doc/tristatecheckbox/theming/UnstyledDoc.vue b/doc/tristatecheckbox/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..9cf057f27
--- /dev/null
+++ b/doc/tristatecheckbox/theming/UnstyledDoc.vue
@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                composition: `
+<template>
+    <div class="card flex flex-column align-center">
+        <TriStateCheckbox v-model="value" />
+        <label for="checkbox">{{ value == null ? 'null' : value }}</label>
+    </div>  
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tristatecheckbox/theming/index.vue b/doc/tristatecheckbox/theming/index.vue
new file mode 100644
index 000000000..47ae356ef
--- /dev/null
+++ b/doc/tristatecheckbox/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>TriStateCheckbox Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/virtualscroller/StyleDoc.vue b/doc/virtualscroller/StyleDoc.vue
index 86cc35b1e..43c694825 100644
--- a/doc/virtualscroller/StyleDoc.vue
+++ b/doc/virtualscroller/StyleDoc.vue
@@ -1,6 +1,6 @@
 <template>
-    <DocSectionText id="style" label="Style" v-bind="$attrs">
-        <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
     </DocSectionText>
 
     <div class="doc-tablewrapper">
diff --git a/package-build.json b/package-build.json
index c0012511e..084a895f4 100644
--- a/package-build.json
+++ b/package-build.json
@@ -1,6 +1,6 @@
 {
     "name": "primevue",
-    "version": "3.30.2",
+    "version": "3.31.0",
     "homepage": "https://primevue.org/",
     "repository": {
       "type": "git",
diff --git a/package-lock.json b/package-lock.json
index 4cc1fc119..a672641b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "primevue",
-    "version": "3.30.2",
+    "version": "3.31.0",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "primevue",
-            "version": "3.30.2",
+            "version": "3.31.0",
             "hasInstallScript": true,
             "license": "MIT",
             "dependencies": {
@@ -100,118 +100,118 @@
             }
         },
         "node_modules/@algolia/cache-browser-local-storage": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.19.0.tgz",
-            "integrity": "sha512-G2NxUr3+gFMFwrEsjy7DwZJYXIxBQC5DeRZVKVEpTxW8AkBI2Y7MF+VUs4C8qqE3lHuioym4rvDipzH1xk3DKw==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.19.1.tgz",
+            "integrity": "sha512-FYAZWcGsFTTaSAwj9Std8UML3Bu8dyWDncM7Ls8g+58UOe4XYdlgzXWbrIgjaguP63pCCbMoExKr61B+ztK3tw==",
             "dependencies": {
-                "@algolia/cache-common": "4.19.0"
+                "@algolia/cache-common": "4.19.1"
             }
         },
         "node_modules/@algolia/cache-common": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.19.0.tgz",
-            "integrity": "sha512-4zFZCC0vYTvfoFSyAXEXDtQFamMibtMPjARirfvRlfgK+5YXW9qJIV+V7O/4qb1mH6RjngvHOo3GDE1xDoIzKA=="
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.19.1.tgz",
+            "integrity": "sha512-XGghi3l0qA38HiqdoUY+wvGyBsGvKZ6U3vTiMBT4hArhP3fOGLXpIINgMiiGjTe4FVlTa5a/7Zf2bwlIHfRqqg=="
         },
         "node_modules/@algolia/cache-in-memory": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.19.0.tgz",
-            "integrity": "sha512-Q6z2p4MaiWs4PXB4NQ5l/ZE1j54mF1xlnqOLw0TKKXBhlNM5pOl5XKSvr/t/KHfrkO1/ua/f/YW71iA/lPGn+A==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.19.1.tgz",
+            "integrity": "sha512-+PDWL+XALGvIginigzu8oU6eWw+o76Z8zHbBovWYcrtWOEtinbl7a7UTt3x3lthv+wNuFr/YD1Gf+B+A9V8n5w==",
             "dependencies": {
-                "@algolia/cache-common": "4.19.0"
+                "@algolia/cache-common": "4.19.1"
             }
         },
         "node_modules/@algolia/client-account": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.19.0.tgz",
-            "integrity": "sha512-/0ZASb3ErYjM9GJijaF6JDDhDiyGYwp2FQ2QInUzH0mq/+a5s1PMI3r/8NV1DmlX+p93d2QplnLpjgNTn4eafw==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.19.1.tgz",
+            "integrity": "sha512-Oy0ritA2k7AMxQ2JwNpfaEcgXEDgeyKu0V7E7xt/ZJRdXfEpZcwp9TOg4TJHC7Ia62gIeT2Y/ynzsxccPw92GA==",
             "dependencies": {
-                "@algolia/client-common": "4.19.0",
-                "@algolia/client-search": "4.19.0",
-                "@algolia/transporter": "4.19.0"
+                "@algolia/client-common": "4.19.1",
+                "@algolia/client-search": "4.19.1",
+                "@algolia/transporter": "4.19.1"
             }
         },
         "node_modules/@algolia/client-analytics": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.19.0.tgz",
-            "integrity": "sha512-tB9L0YJ86a1e/ibNdnbFw+yOKooQlmh95Ld6Qyj4GQ1vFmzBpd4x4ilhyFFXbOjsvNGgALu8+44gp5h2ynxrwg==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.19.1.tgz",
+            "integrity": "sha512-5QCq2zmgdZLIQhHqwl55ZvKVpLM3DNWjFI4T+bHr3rGu23ew2bLO4YtyxaZeChmDb85jUdPDouDlCumGfk6wOg==",
             "dependencies": {
-                "@algolia/client-common": "4.19.0",
-                "@algolia/client-search": "4.19.0",
-                "@algolia/requester-common": "4.19.0",
-                "@algolia/transporter": "4.19.0"
+                "@algolia/client-common": "4.19.1",
+                "@algolia/client-search": "4.19.1",
+                "@algolia/requester-common": "4.19.1",
+                "@algolia/transporter": "4.19.1"
             }
         },
         "node_modules/@algolia/client-common": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.19.0.tgz",
-            "integrity": "sha512-tiEyCKkkG5Ig04ATYlt1v41UJb/lS4RmJVXEAsaTkoyB5iUCOChE5WEVPPuJbO/5tSTCbIF4P+g5BjQDb7aGBA==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.19.1.tgz",
+            "integrity": "sha512-3kAIVqTcPrjfS389KQvKzliC559x+BDRxtWamVJt8IVp7LGnjq+aVAXg4Xogkur1MUrScTZ59/AaUd5EdpyXgA==",
             "dependencies": {
-                "@algolia/requester-common": "4.19.0",
-                "@algolia/transporter": "4.19.0"
+                "@algolia/requester-common": "4.19.1",
+                "@algolia/transporter": "4.19.1"
             }
         },
         "node_modules/@algolia/client-personalization": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.19.0.tgz",
-            "integrity": "sha512-nG56w0dphlStCOgB80q0ug0SHYM+tQosL4Qprc+cy8ckFhTgC3hRtyRYHYGPk9txow5pPKDtyb5rnr3oviKP1Q==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.19.1.tgz",
+            "integrity": "sha512-8CWz4/H5FA+krm9HMw2HUQenizC/DxUtsI5oYC0Jxxyce1vsr8cb1aEiSJArQT6IzMynrERif1RVWLac1m36xw==",
             "dependencies": {
-                "@algolia/client-common": "4.19.0",
-                "@algolia/requester-common": "4.19.0",
-                "@algolia/transporter": "4.19.0"
+                "@algolia/client-common": "4.19.1",
+                "@algolia/requester-common": "4.19.1",
+                "@algolia/transporter": "4.19.1"
             }
         },
         "node_modules/@algolia/client-search": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.19.0.tgz",
-            "integrity": "sha512-kkqvljLIBYFv+GMefIq0wv2cRP30NG5/INyL1OKr8Qk4Nk0FciFF3wdxIgv6fm156x1q4V0fLw5zwMMWMPOsLQ==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.19.1.tgz",
+            "integrity": "sha512-mBecfMFS4N+yK/p0ZbK53vrZbL6OtWMk8YmnOv1i0LXx4pelY8TFhqKoTit3NPVPwoSNN0vdSN9dTu1xr1XOVw==",
             "dependencies": {
-                "@algolia/client-common": "4.19.0",
-                "@algolia/requester-common": "4.19.0",
-                "@algolia/transporter": "4.19.0"
+                "@algolia/client-common": "4.19.1",
+                "@algolia/requester-common": "4.19.1",
+                "@algolia/transporter": "4.19.1"
             }
         },
         "node_modules/@algolia/logger-common": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.19.0.tgz",
-            "integrity": "sha512-2YdIHiQwlUCdhFFK1rE53VCEc8scTUcQLWJgpzi1amvP/ffUog4h5VXdGhyhHzYeAexMsaELX2/sEJa4lgOzng=="
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.19.1.tgz",
+            "integrity": "sha512-i6pLPZW/+/YXKis8gpmSiNk1lOmYCmRI6+x6d2Qk1OdfvX051nRVdalRbEcVTpSQX6FQAoyeaui0cUfLYW5Elw=="
         },
         "node_modules/@algolia/logger-console": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.19.0.tgz",
-            "integrity": "sha512-JjbFPW35gm1RswkB3sgIAS/TjXoqG3FR8Gvsg8lPIB2oh8mcpybyJOUcq56sAfbIQ6n0aFuG4lgqES5TqlWzXw==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.19.1.tgz",
+            "integrity": "sha512-jj72k9GKb9W0c7TyC3cuZtTr0CngLBLmc8trzZlXdfvQiigpUdvTi1KoWIb2ZMcRBG7Tl8hSb81zEY3zI2RlXg==",
             "dependencies": {
-                "@algolia/logger-common": "4.19.0"
+                "@algolia/logger-common": "4.19.1"
             }
         },
         "node_modules/@algolia/requester-browser-xhr": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.19.0.tgz",
-            "integrity": "sha512-5c3FlK7ZJ6oiLuZHe0iSpPzWlHCzeunQS7nlBsB4sEecVcvRJfXOklLh2vZfouQdaT14gXJ+Hwb2SuyRQLU6Ug==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.19.1.tgz",
+            "integrity": "sha512-09K/+t7lptsweRTueHnSnmPqIxbHMowejAkn9XIcJMLdseS3zl8ObnS5GWea86mu3vy4+8H+ZBKkUN82Zsq/zg==",
             "dependencies": {
-                "@algolia/requester-common": "4.19.0"
+                "@algolia/requester-common": "4.19.1"
             }
         },
         "node_modules/@algolia/requester-common": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.19.0.tgz",
-            "integrity": "sha512-oBsoYDNx09L163N9aQM/FrGfLoU/sLvvzcHw1fdJg5eysTAXCvdMNXk29ocy0rhq2deQ8ccdU/Z9Qu0RfLGUmA=="
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.19.1.tgz",
+            "integrity": "sha512-BisRkcWVxrDzF1YPhAckmi2CFYK+jdMT60q10d7z3PX+w6fPPukxHRnZwooiTUrzFe50UBmLItGizWHP5bDzVQ=="
         },
         "node_modules/@algolia/requester-node-http": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.19.0.tgz",
-            "integrity": "sha512-UkTZEg5q9VTqfa8cPJbeDpu0Ff50aPx2MxGoYP2v25NFFcTlYRufiPBtux0ZKSyXTaoNPm/OBldWlDi9bTx1jA==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.19.1.tgz",
+            "integrity": "sha512-6DK52DHviBHTG2BK/Vv2GIlEw7i+vxm7ypZW0Z7vybGCNDeWzADx+/TmxjkES2h15+FZOqVf/Ja677gePsVItA==",
             "dependencies": {
-                "@algolia/requester-common": "4.19.0"
+                "@algolia/requester-common": "4.19.1"
             }
         },
         "node_modules/@algolia/transporter": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.19.0.tgz",
-            "integrity": "sha512-xgpU6eTzHJ8rqEvhVW9DdyIC+rsRYovIGpCz8k9JjwpLHNltu8wTQik0hasb1z16mFaIQDzgJTxo/C4ciMMr6w==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.19.1.tgz",
+            "integrity": "sha512-nkpvPWbpuzxo1flEYqNIbGz7xhfhGOKGAZS7tzC+TELgEmi7z99qRyTfNSUlW7LZmB3ACdnqAo+9A9KFBENviQ==",
             "dependencies": {
-                "@algolia/cache-common": "4.19.0",
-                "@algolia/logger-common": "4.19.0",
-                "@algolia/requester-common": "4.19.0"
+                "@algolia/cache-common": "4.19.1",
+                "@algolia/logger-common": "4.19.1",
+                "@algolia/requester-common": "4.19.1"
             }
         },
         "node_modules/@ampproject/remapping": {
@@ -395,9 +395,9 @@
             }
         },
         "node_modules/@babel/helper-define-polyfill-provider": {
-            "version": "0.4.1",
-            "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.1.tgz",
-            "integrity": "sha512-kX4oXixDxG197yhX+J3Wp+NpL2wuCFjWQAr6yX2jtCnflK9ulMI51ULFGIrWiX1jGfvAxdHp+XQCcP2bZGPs9A==",
+            "version": "0.4.2",
+            "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.2.tgz",
+            "integrity": "sha512-k0qnnOqHn5dK9pZpfD5XXZ9SojAITdCKRn2Lp6rnDGzIbaP0rHyMPk/4wsSxVBVz4RfN0q6VpXWP2pDGIoQ7hw==",
             "dev": true,
             "dependencies": {
                 "@babel/helper-compilation-targets": "^7.22.6",
@@ -407,7 +407,7 @@
                 "resolve": "^1.14.2"
             },
             "peerDependencies": {
-                "@babel/core": "^7.4.0-0"
+                "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
             }
         },
         "node_modules/@babel/helper-environment-visitor": {
@@ -1868,9 +1868,9 @@
             }
         },
         "node_modules/@babel/preset-modules": {
-            "version": "0.1.5",
-            "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz",
-            "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==",
+            "version": "0.1.6",
+            "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6.tgz",
+            "integrity": "sha512-ID2yj6K/4lKfhuU3+EX4UvNbIt7eACFbHmNUjzA+ep+B5971CknnA/9DEWKbRokfbbtblxxxXFJJrH47UEAMVg==",
             "dev": true,
             "dependencies": {
                 "@babel/helper-plugin-utils": "^7.0.0",
@@ -1880,7 +1880,7 @@
                 "esutils": "^2.0.2"
             },
             "peerDependencies": {
-                "@babel/core": "^7.0.0-0"
+                "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
             }
         },
         "node_modules/@babel/regjsgen": {
@@ -2389,9 +2389,9 @@
             }
         },
         "node_modules/@eslint-community/regexpp": {
-            "version": "4.5.1",
-            "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz",
-            "integrity": "sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==",
+            "version": "4.6.1",
+            "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.6.1.tgz",
+            "integrity": "sha512-O7x6dMstWLn2ktjcoiNLDkAGG2EjveHL+Vvc+n0fXumkJYAcSqcVYKtwDU+hDZ0uDUsnUagSYaZrOLAYE8un1A==",
             "dev": true,
             "engines": {
                 "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
@@ -2698,15 +2698,6 @@
                 "eslint-scope": "5.1.1"
             }
         },
-        "node_modules/@nicolo-ribaudo/semver-v6": {
-            "version": "6.3.3",
-            "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",
-            "integrity": "sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==",
-            "dev": true,
-            "bin": {
-                "semver": "bin/semver.js"
-            }
-        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2835,15 +2826,15 @@
             }
         },
         "node_modules/@nuxt/telemetry": {
-            "version": "2.3.1",
-            "resolved": "https://registry.npmjs.org/@nuxt/telemetry/-/telemetry-2.3.1.tgz",
-            "integrity": "sha512-7kr2VDirYIXqyTHqaiWCrfQLgUjAa4qAHzykJOspMCFJWalHU9SVfnv+cTOKGqoXQ4TWOCd09tEd7sLlMFTEqw==",
+            "version": "2.3.2",
+            "resolved": "https://registry.npmjs.org/@nuxt/telemetry/-/telemetry-2.3.2.tgz",
+            "integrity": "sha512-S2sF4hLQWS48lWPpRT8xqVUFuwFGTgeKvojp8vL/iP79fWxudua2DWXR15T8C2zpauYwNgEpEWJmy6vxY2ZQeg==",
             "dev": true,
             "dependencies": {
-                "@nuxt/kit": "^3.6.1",
+                "@nuxt/kit": "^3.6.5",
                 "chalk": "^5.3.0",
                 "ci-info": "^3.8.0",
-                "consola": "^3.2.2",
+                "consola": "^3.2.3",
                 "create-require": "^1.1.1",
                 "defu": "^6.1.2",
                 "destr": "^2.0.0",
@@ -3258,6 +3249,12 @@
                 }
             }
         },
+        "node_modules/@one-ini/wasm": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
+            "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
+            "dev": true
+        },
         "node_modules/@rollup/plugin-alias": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.0.0.tgz",
@@ -3554,9 +3551,9 @@
             }
         },
         "node_modules/@types/eslint": {
-            "version": "8.44.0",
-            "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.0.tgz",
-            "integrity": "sha512-gsF+c/0XOguWgaOgvFs+xnnRqt9GwgTvIks36WpE6ueeI4KCEHHd8K/CKHqhOqrJKsYH8m27kRzQEvWXAwXUTw==",
+            "version": "8.44.1",
+            "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.1.tgz",
+            "integrity": "sha512-XpNDc4Z5Tb4x+SW1MriMVeIsMoONHCkWFMkR/aPJbzEsxqHy+4Glu/BqTdPrApfDeMaXbtNh6bseNgl5KaWrSg==",
             "dev": true,
             "peer": true,
             "dependencies": {
@@ -3588,9 +3585,9 @@
             "dev": true
         },
         "node_modules/@types/node": {
-            "version": "20.4.2",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.2.tgz",
-            "integrity": "sha512-Dd0BYtWgnWJKwO1jkmTrzofjK2QXXcai0dmtzvIBhcA+RsG5h8R3xlyta0kGOZRNfL9GuRtb1knmPEhQrePCEw==",
+            "version": "20.4.4",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.4.tgz",
+            "integrity": "sha512-CukZhumInROvLq3+b5gLev+vgpsIqC2D0deQr/yS1WnxvmYLlJXZpaQrQiseMY+6xusl79E04UjWoqyr+t1/Ew==",
             "dev": true
         },
         "node_modules/@types/resolve": {
@@ -4048,23 +4045,19 @@
             "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
         },
         "node_modules/@vue/test-utils": {
-            "version": "2.4.0",
-            "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.0.tgz",
-            "integrity": "sha512-BKB9aj1yky63/I3IwSr1FjUeHYsKXI7D6S9F378AHt7a5vC0dLkOBtSsFXoRGC/7BfHmiB9HRhT+i9xrUHoAKw==",
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.1.tgz",
+            "integrity": "sha512-VO8nragneNzUZUah6kOjiFmD/gwRjUauG9DROh6oaOeFwX1cZRUNHhdeogE8635cISigXFTtGLUQWx5KCb0xeg==",
             "dev": true,
             "dependencies": {
-                "js-beautify": "1.14.6",
-                "vue-component-type-helpers": "1.6.5"
+                "js-beautify": "1.14.9",
+                "vue-component-type-helpers": "1.8.4"
             },
             "peerDependencies": {
-                "@vue/compiler-dom": "^3.0.1",
                 "@vue/server-renderer": "^3.0.1",
                 "vue": "^3.0.1"
             },
             "peerDependenciesMeta": {
-                "@vue/compiler-dom": {
-                    "optional": true
-                },
                 "@vue/server-renderer": {
                     "optional": true
                 }
@@ -4357,24 +4350,24 @@
             }
         },
         "node_modules/algoliasearch": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.19.0.tgz",
-            "integrity": "sha512-UIzLHOkprUFzwFxqgw+TOhEG2usLv8q9l4V/Ul82IgNNO+g5RjENd5Sl/J6BU4BlRdMLy/OvPfbSc7Y1dOdwgA==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.19.1.tgz",
+            "integrity": "sha512-IJF5b93b2MgAzcE/tuzW0yOPnuUyRgGAtaPv5UUywXM8kzqfdwZTO4sPJBzoGz1eOy6H9uEchsJsBFTELZSu+g==",
             "dependencies": {
-                "@algolia/cache-browser-local-storage": "4.19.0",
-                "@algolia/cache-common": "4.19.0",
-                "@algolia/cache-in-memory": "4.19.0",
-                "@algolia/client-account": "4.19.0",
-                "@algolia/client-analytics": "4.19.0",
-                "@algolia/client-common": "4.19.0",
-                "@algolia/client-personalization": "4.19.0",
-                "@algolia/client-search": "4.19.0",
-                "@algolia/logger-common": "4.19.0",
-                "@algolia/logger-console": "4.19.0",
-                "@algolia/requester-browser-xhr": "4.19.0",
-                "@algolia/requester-common": "4.19.0",
-                "@algolia/requester-node-http": "4.19.0",
-                "@algolia/transporter": "4.19.0"
+                "@algolia/cache-browser-local-storage": "4.19.1",
+                "@algolia/cache-common": "4.19.1",
+                "@algolia/cache-in-memory": "4.19.1",
+                "@algolia/client-account": "4.19.1",
+                "@algolia/client-analytics": "4.19.1",
+                "@algolia/client-common": "4.19.1",
+                "@algolia/client-personalization": "4.19.1",
+                "@algolia/client-search": "4.19.1",
+                "@algolia/logger-common": "4.19.1",
+                "@algolia/logger-console": "4.19.1",
+                "@algolia/requester-browser-xhr": "4.19.1",
+                "@algolia/requester-common": "4.19.1",
+                "@algolia/requester-node-http": "4.19.1",
+                "@algolia/transporter": "4.19.1"
             }
         },
         "node_modules/ansi-colors": {
@@ -4910,42 +4903,42 @@
             }
         },
         "node_modules/babel-plugin-polyfill-corejs2": {
-            "version": "0.4.4",
-            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.4.tgz",
-            "integrity": "sha512-9WeK9snM1BfxB38goUEv2FLnA6ja07UMfazFHzCXUb3NyDZAwfXvQiURQ6guTTMeHcOsdknULm1PDhs4uWtKyA==",
+            "version": "0.4.5",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.5.tgz",
+            "integrity": "sha512-19hwUH5FKl49JEsvyTcoHakh6BE0wgXLLptIyKZ3PijHc/Ci521wygORCUCCred+E/twuqRyAkE02BAWPmsHOg==",
             "dev": true,
             "dependencies": {
                 "@babel/compat-data": "^7.22.6",
-                "@babel/helper-define-polyfill-provider": "^0.4.1",
-                "@nicolo-ribaudo/semver-v6": "^6.3.3"
+                "@babel/helper-define-polyfill-provider": "^0.4.2",
+                "semver": "^6.3.1"
             },
             "peerDependencies": {
-                "@babel/core": "^7.0.0-0"
+                "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
             }
         },
         "node_modules/babel-plugin-polyfill-corejs3": {
-            "version": "0.8.2",
-            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.2.tgz",
-            "integrity": "sha512-Cid+Jv1BrY9ReW9lIfNlNpsI53N+FN7gE+f73zLAUbr9C52W4gKLWSByx47pfDJsEysojKArqOtOKZSVIIUTuQ==",
+            "version": "0.8.3",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.3.tgz",
+            "integrity": "sha512-z41XaniZL26WLrvjy7soabMXrfPWARN25PZoriDEiLMxAp50AUW3t35BGQUMg5xK3UrpVTtagIDklxYa+MhiNA==",
             "dev": true,
             "dependencies": {
-                "@babel/helper-define-polyfill-provider": "^0.4.1",
+                "@babel/helper-define-polyfill-provider": "^0.4.2",
                 "core-js-compat": "^3.31.0"
             },
             "peerDependencies": {
-                "@babel/core": "^7.0.0-0"
+                "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
             }
         },
         "node_modules/babel-plugin-polyfill-regenerator": {
-            "version": "0.5.1",
-            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.1.tgz",
-            "integrity": "sha512-L8OyySuI6OSQ5hFy9O+7zFjyr4WhAfRjLIOkhQGYl+emwJkd/S4XXT1JpfrgR1jrQ1NcGiOh+yAdGlF8pnC3Jw==",
+            "version": "0.5.2",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.2.tgz",
+            "integrity": "sha512-tAlOptU0Xj34V1Y2PNTL4Y0FOJMDB6bZmoW39FeCQIhigGLkqu3Fj6uiXpxIf6Ij274ENdYx64y6Au+ZKlb1IA==",
             "dev": true,
             "dependencies": {
-                "@babel/helper-define-polyfill-provider": "^0.4.1"
+                "@babel/helper-define-polyfill-provider": "^0.4.2"
             },
             "peerDependencies": {
-                "@babel/core": "^7.0.0-0"
+                "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
             }
         },
         "node_modules/bach": {
@@ -6034,10 +6027,13 @@
             }
         },
         "node_modules/commander": {
-            "version": "2.20.3",
-            "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-            "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-            "dev": true
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+            "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+            "dev": true,
+            "engines": {
+                "node": ">=14"
+            }
         },
         "node_modules/commondir": {
             "version": "1.0.1",
@@ -6866,43 +6862,78 @@
             "dev": true
         },
         "node_modules/editorconfig": {
-            "version": "0.15.3",
-            "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
-            "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==",
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz",
+            "integrity": "sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==",
             "dev": true,
             "dependencies": {
-                "commander": "^2.19.0",
-                "lru-cache": "^4.1.5",
-                "semver": "^5.6.0",
-                "sigmund": "^1.0.1"
+                "@one-ini/wasm": "0.1.1",
+                "commander": "^10.0.0",
+                "minimatch": "9.0.1",
+                "semver": "^7.5.3"
             },
             "bin": {
                 "editorconfig": "bin/editorconfig"
+            },
+            "engines": {
+                "node": ">=14"
+            }
+        },
+        "node_modules/editorconfig/node_modules/brace-expansion": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+            "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+            "dev": true,
+            "dependencies": {
+                "balanced-match": "^1.0.0"
             }
         },
         "node_modules/editorconfig/node_modules/lru-cache": {
-            "version": "4.1.5",
-            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-            "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
             "dev": true,
             "dependencies": {
-                "pseudomap": "^1.0.2",
-                "yallist": "^2.1.2"
+                "yallist": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/editorconfig/node_modules/minimatch": {
+            "version": "9.0.1",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.1.tgz",
+            "integrity": "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==",
+            "dev": true,
+            "dependencies": {
+                "brace-expansion": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=16 || 14 >=14.17"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
             }
         },
         "node_modules/editorconfig/node_modules/semver": {
-            "version": "5.7.2",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-            "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+            "version": "7.5.4",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+            "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
             "dev": true,
+            "dependencies": {
+                "lru-cache": "^6.0.0"
+            },
             "bin": {
-                "semver": "bin/semver"
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
             }
         },
         "node_modules/editorconfig/node_modules/yallist": {
-            "version": "2.1.2",
-            "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-            "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
             "dev": true
         },
         "node_modules/ee-first": {
@@ -6912,9 +6943,9 @@
             "dev": true
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.466",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.466.tgz",
-            "integrity": "sha512-TSkRvbXRXD8BwhcGlZXDsbI2lRoP8dvqR7LQnqQNk9KxXBc4tG8O+rTuXgTyIpEdiqSGKEBSqrxdqEntnjNncA==",
+            "version": "1.4.470",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.470.tgz",
+            "integrity": "sha512-zZM48Lmy2FKWgqyvsX9XK+J6FfP7aCDUFLmgooLJzA7v1agCs/sxSoBpTIwDLhmbhpx9yJIxj2INig/ncjJRqg==",
             "dev": true
         },
         "node_modules/emoji-regex": {
@@ -7870,9 +7901,9 @@
             "dev": true
         },
         "node_modules/fast-glob": {
-            "version": "3.3.0",
-            "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz",
-            "integrity": "sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==",
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+            "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
             "dev": true,
             "dependencies": {
                 "@nodelib/fs.stat": "^2.0.2",
@@ -10012,14 +10043,14 @@
             }
         },
         "node_modules/js-beautify": {
-            "version": "1.14.6",
-            "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.6.tgz",
-            "integrity": "sha512-GfofQY5zDp+cuHc+gsEXKPpNw2KbPddreEo35O6jT6i0RVK6LhsoYBhq5TvK4/n74wnA0QbK8gGd+jUZwTMKJw==",
+            "version": "1.14.9",
+            "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.9.tgz",
+            "integrity": "sha512-coM7xq1syLcMyuVGyToxcj2AlzhkDjmfklL8r0JgJ7A76wyGMpJ1oA35mr4APdYNO/o/4YY8H54NQIJzhMbhBg==",
             "dev": true,
             "dependencies": {
                 "config-chain": "^1.1.13",
-                "editorconfig": "^0.15.3",
-                "glob": "^8.0.3",
+                "editorconfig": "^1.0.3",
+                "glob": "^8.1.0",
                 "nopt": "^6.0.0"
             },
             "bin": {
@@ -10028,7 +10059,7 @@
                 "js-beautify": "js/bin/js-beautify.js"
             },
             "engines": {
-                "node": ">=10"
+                "node": ">=12"
             }
         },
         "node_modules/js-tokens": {
@@ -11368,9 +11399,9 @@
             }
         },
         "node_modules/node-fetch": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.1.tgz",
-            "integrity": "sha512-cRVc/kyto/7E5shrWca1Wsea4y6tL9iYJE5FBCius3JQfb/4P4I295PfhgbJQBLTx6lATE4z+wK0rPM4VS2uow==",
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+            "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
             "dev": true,
             "dependencies": {
                 "data-uri-to-buffer": "^4.0.0",
@@ -12530,9 +12561,9 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.4.26",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.26.tgz",
-            "integrity": "sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==",
+            "version": "8.4.27",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
+            "integrity": "sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -13332,12 +13363,6 @@
             "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
             "dev": true
         },
-        "node_modules/pseudomap": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-            "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==",
-            "dev": true
-        },
         "node_modules/psl": {
             "version": "1.9.0",
             "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -14408,9 +14433,9 @@
             "dev": true
         },
         "node_modules/sass": {
-            "version": "1.64.0",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.64.0.tgz",
-            "integrity": "sha512-m7YtAGmQta9uANIUJwXesAJMSncqH+3INc8kdVXs6eV6GUC8Qu2IYKQSN8PRLgiQfpca697G94klm2leYMxSHw==",
+            "version": "1.64.1",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.64.1.tgz",
+            "integrity": "sha512-16rRACSOFEE8VN7SCgBu1MpYCyN7urj9At898tyzdXFhC+a+yOX5dXwAR7L8/IdPJ1NB8OYoXmD55DM30B2kEQ==",
             "dev": true,
             "dependencies": {
                 "chokidar": ">=3.0.0 <4.0.0",
@@ -14885,12 +14910,6 @@
             "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
             "dev": true
         },
-        "node_modules/sigmund": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-            "integrity": "sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==",
-            "dev": true
-        },
         "node_modules/signal-exit": {
             "version": "3.0.7",
             "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -15655,9 +15674,9 @@
             "dev": true
         },
         "node_modules/terser": {
-            "version": "5.19.1",
-            "resolved": "https://registry.npmjs.org/terser/-/terser-5.19.1.tgz",
-            "integrity": "sha512-27hxBUVdV6GoNg1pKQ7Z5cbR6V9txPVyBA+FQw3BaZ1Wuzvztce5p156DaP0NVZNrMZZ+6iG9Syf7WgMNKDg2Q==",
+            "version": "5.19.2",
+            "resolved": "https://registry.npmjs.org/terser/-/terser-5.19.2.tgz",
+            "integrity": "sha512-qC5+dmecKJA4cpYxRa5aVkKehYsQKc+AHeKl0Oe62aYjBL8ZA33tTljktDHJSaxxMnbI5ZYw+o/S2DxxLu8OfA==",
             "dev": true,
             "dependencies": {
                 "@jridgewell/source-map": "^0.3.3",
@@ -15767,6 +15786,12 @@
                 "url": "https://github.com/chalk/supports-color?sponsor=1"
             }
         },
+        "node_modules/terser/node_modules/commander": {
+            "version": "2.20.3",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+            "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+            "dev": true
+        },
         "node_modules/test-exclude": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
@@ -16311,22 +16336,22 @@
             }
         },
         "node_modules/unimport": {
-            "version": "3.0.14",
-            "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.0.14.tgz",
-            "integrity": "sha512-67Rh/sGpEuVqdHWkXaZ6NOq+I7sKt86o+DUtKeGB6dh4Hk1A8AQrzyVGg2+LaVEYotStH7HwvV9YSaRjyT7Uqg==",
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.1.0.tgz",
+            "integrity": "sha512-ybK3NVWh30MdiqSyqakrrQOeiXyu5507tDA0tUf7VJHrsq4DM6S43gR7oAsZaFojM32hzX982Lqw02D3yf2aiA==",
             "dev": true,
             "dependencies": {
                 "@rollup/pluginutils": "^5.0.2",
                 "escape-string-regexp": "^5.0.0",
                 "fast-glob": "^3.3.0",
                 "local-pkg": "^0.4.3",
-                "magic-string": "^0.30.0",
+                "magic-string": "^0.30.1",
                 "mlly": "^1.4.0",
                 "pathe": "^1.1.1",
                 "pkg-types": "^1.0.3",
                 "scule": "^1.0.0",
                 "strip-literal": "^1.0.1",
-                "unplugin": "^1.3.1"
+                "unplugin": "^1.4.0"
             }
         },
         "node_modules/unimport/node_modules/escape-string-regexp": {
@@ -16937,23 +16962,23 @@
             }
         },
         "node_modules/vee-validate": {
-            "version": "4.10.7",
-            "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.10.7.tgz",
-            "integrity": "sha512-LvJ2vAMyeJBoDnm+Ic37qvQRVsLirLynaBKW2mYCo05V6fOz7yFhMGECzW2fLsNmaHgRaaxivF/ky91dLx4efw==",
+            "version": "4.10.8",
+            "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.10.8.tgz",
+            "integrity": "sha512-4VWziid3tdlIMGWr0D24YG/e+Q+M6TMK2DQg8dMvufgNyHFIpKxkMKwWoSMuQS0Pi0wKJEo5F5Kok8pXlei4vA==",
             "dependencies": {
                 "@vue/devtools-api": "^6.5.0",
-                "type-fest": "^3.13.0"
+                "type-fest": "^4.0.0"
             },
             "peerDependencies": {
                 "vue": "^3.3.4"
             }
         },
         "node_modules/vee-validate/node_modules/type-fest": {
-            "version": "3.13.1",
-            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
-            "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.0.0.tgz",
+            "integrity": "sha512-d/oYtUnPM9zar2fqqGLYPzgcY0qUlYK0evgNVti93xpzfjGkMgZHu9Lvgrkn0rqGXTgsFRxFamzjGoD9Uo+dgw==",
             "engines": {
-                "node": ">=14.16"
+                "node": ">=16"
             },
             "funding": {
                 "url": "https://github.com/sponsors/sindresorhus"
@@ -17053,13 +17078,13 @@
             }
         },
         "node_modules/vite": {
-            "version": "4.4.4",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.4.tgz",
-            "integrity": "sha512-4mvsTxjkveWrKDJI70QmelfVqTm+ihFAb6+xf4sjEU2TmUCTlVX87tmg/QooPEMQb/lM9qGHT99ebqPziEd3wg==",
+            "version": "4.4.7",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz",
+            "integrity": "sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==",
             "dev": true,
             "dependencies": {
                 "esbuild": "^0.18.10",
-                "postcss": "^8.4.25",
+                "postcss": "^8.4.26",
                 "rollup": "^3.25.2"
             },
             "bin": {
@@ -17418,9 +17443,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/android-arm": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.14.tgz",
-            "integrity": "sha512-blODaaL+lngG5bdK/t4qZcQvq2BBqrABmYwqPPcS5VRxrCSGHb9R/rA3fqxh7R18I7WU4KKv+NYkt22FDfalcg==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.16.tgz",
+            "integrity": "sha512-gCHjjQmA8L0soklKbLKA6pgsLk1byULuHe94lkZDzcO3/Ta+bbeewJioEn1Fr7kgy9NWNFy/C+MrBwC6I/WCug==",
             "cpu": [
                 "arm"
             ],
@@ -17434,9 +17459,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/android-arm64": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.14.tgz",
-            "integrity": "sha512-rZ2v+Luba5/3D6l8kofWgTnqE+qsC/L5MleKIKFyllHTKHrNBMqeRCnZI1BtRx8B24xMYxeU32iIddRQqMsOsg==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.16.tgz",
+            "integrity": "sha512-wsCqSPqLz+6Ov+OM4EthU43DyYVVyfn15S4j1bJzylDpc1r1jZFFfJQNfDuT8SlgwuqpmpJXK4uPlHGw6ve7eA==",
             "cpu": [
                 "arm64"
             ],
@@ -17450,9 +17475,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/android-x64": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.14.tgz",
-            "integrity": "sha512-qSwh8y38QKl+1Iqg+YhvCVYlSk3dVLk9N88VO71U4FUjtiSFylMWK3Ugr8GC6eTkkP4Tc83dVppt2n8vIdlSGg==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.16.tgz",
+            "integrity": "sha512-ldsTXolyA3eTQ1//4DS+E15xl0H/3DTRJaRL0/0PgkqDsI0fV/FlOtD+h0u/AUJr+eOTlZv4aC9gvfppo3C4sw==",
             "cpu": [
                 "x64"
             ],
@@ -17466,9 +17491,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/darwin-arm64": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.14.tgz",
-            "integrity": "sha512-9Hl2D2PBeDYZiNbnRKRWuxwHa9v5ssWBBjisXFkVcSP5cZqzZRFBUWEQuqBHO4+PKx4q4wgHoWtfQ1S7rUqJ2Q==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.16.tgz",
+            "integrity": "sha512-aBxruWCII+OtluORR/KvisEw0ALuw/qDQWvkoosA+c/ngC/Kwk0lLaZ+B++LLS481/VdydB2u6tYpWxUfnLAIw==",
             "cpu": [
                 "arm64"
             ],
@@ -17482,9 +17507,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/darwin-x64": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.14.tgz",
-            "integrity": "sha512-ZnI3Dg4ElQ6tlv82qLc/UNHtFsgZSKZ7KjsUNAo1BF1SoYDjkGKHJyCrYyWjFecmXpvvG/KJ9A/oe0H12odPLQ==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.16.tgz",
+            "integrity": "sha512-6w4Dbue280+rp3LnkgmriS1icOUZDyPuZo/9VsuMUTns7SYEiOaJ7Ca1cbhu9KVObAWfmdjUl4gwy9TIgiO5eA==",
             "cpu": [
                 "x64"
             ],
@@ -17498,9 +17523,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.14.tgz",
-            "integrity": "sha512-h3OqR80Da4oQCIa37zl8tU5MwHQ7qgPV0oVScPfKJK21fSRZEhLE4IIVpmcOxfAVmqjU6NDxcxhYaM8aDIGRLw==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.16.tgz",
+            "integrity": "sha512-x35fCebhe9s979DGKbVAwXUOcTmCIE32AIqB9CB1GralMIvxdnMLAw5CnID17ipEw9/3MvDsusj/cspYt2ZLNQ==",
             "cpu": [
                 "arm64"
             ],
@@ -17514,9 +17539,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/freebsd-x64": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.14.tgz",
-            "integrity": "sha512-ha4BX+S6CZG4BoH9tOZTrFIYC1DH13UTCRHzFc3GWX74nz3h/N6MPF3tuR3XlsNjMFUazGgm35MPW5tHkn2lzQ==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.16.tgz",
+            "integrity": "sha512-YM98f+PeNXF3GbxIJlUsj+McUWG1irguBHkszCIwfr3BXtXZsXo0vqybjUDFfu9a8Wr7uUD/YSmHib+EeGAFlg==",
             "cpu": [
                 "x64"
             ],
@@ -17530,9 +17555,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/linux-arm": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.14.tgz",
-            "integrity": "sha512-5+7vehI1iqru5WRtJyU2XvTOvTGURw3OZxe3YTdE9muNNIdmKAVmSHpB3Vw2LazJk2ifEdIMt/wTWnVe5V98Kg==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.16.tgz",
+            "integrity": "sha512-b5ABb+5Ha2C9JkeZXV+b+OruR1tJ33ePmv9ZwMeETSEKlmu/WJ45XTTG+l6a2KDsQtJJ66qo/hbSGBtk0XVLHw==",
             "cpu": [
                 "arm"
             ],
@@ -17546,9 +17571,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/linux-arm64": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.14.tgz",
-            "integrity": "sha512-IXORRe22In7U65NZCzjwAUc03nn8SDIzWCnfzJ6t/8AvGx5zBkcLfknI+0P+hhuftufJBmIXxdSTbzWc8X/V4w==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.16.tgz",
+            "integrity": "sha512-XIqhNUxJiuy+zsR77+H5Z2f7s4YRlriSJKtvx99nJuG5ATuJPjmZ9n0ANgnGlPCpXGSReFpgcJ7O3SMtzIFeiQ==",
             "cpu": [
                 "arm64"
             ],
@@ -17562,9 +17587,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/linux-ia32": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.14.tgz",
-            "integrity": "sha512-BfHlMa0nibwpjG+VXbOoqJDmFde4UK2gnW351SQ2Zd4t1N3zNdmUEqRkw/srC1Sa1DRBE88Dbwg4JgWCbNz/FQ==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.16.tgz",
+            "integrity": "sha512-no+pfEpwnRvIyH+txbBAWtjxPU9grslmTBfsmDndj7bnBmr55rOo/PfQmRfz7Qg9isswt1FP5hBbWb23fRWnow==",
             "cpu": [
                 "ia32"
             ],
@@ -17578,9 +17603,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/linux-loong64": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.14.tgz",
-            "integrity": "sha512-j2/Ex++DRUWIAaUDprXd3JevzGtZ4/d7VKz+AYDoHZ3HjJzCyYBub9CU1wwIXN+viOP0b4VR3RhGClsvyt/xSw==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.16.tgz",
+            "integrity": "sha512-Zbnczs9ZXjmo0oZSS0zbNlJbcwKXa/fcNhYQjahDs4Xg18UumpXG/lwM2lcSvHS3mTrRyCYZvJbmzYc4laRI1g==",
             "cpu": [
                 "loong64"
             ],
@@ -17594,9 +17619,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/linux-mips64el": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.14.tgz",
-            "integrity": "sha512-qn2+nc+ZCrJmiicoAnJXJJkZWt8Nwswgu1crY7N+PBR8ChBHh89XRxj38UU6Dkthl2yCVO9jWuafZ24muzDC/A==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.16.tgz",
+            "integrity": "sha512-YMF7hih1HVR/hQVa/ot4UVffc5ZlrzEb3k2ip0nZr1w6fnYypll9td2qcoMLvd3o8j3y6EbJM3MyIcXIVzXvQQ==",
             "cpu": [
                 "mips64el"
             ],
@@ -17610,9 +17635,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/linux-ppc64": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.14.tgz",
-            "integrity": "sha512-aGzXzd+djqeEC5IRkDKt3kWzvXoXC6K6GyYKxd+wsFJ2VQYnOWE954qV2tvy5/aaNrmgPTb52cSCHFE+Z7Z0yg==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.16.tgz",
+            "integrity": "sha512-Wkz++LZ29lDwUyTSEnzDaaP5OveOgTU69q9IyIw9WqLRxM4BjTBjz9un4G6TOvehWpf/J3gYVFN96TjGHrbcNQ==",
             "cpu": [
                 "ppc64"
             ],
@@ -17626,9 +17651,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/linux-riscv64": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.14.tgz",
-            "integrity": "sha512-8C6vWbfr0ygbAiMFLS6OPz0BHvApkT2gCboOGV76YrYw+sD/MQJzyITNsjZWDXJwPu9tjrFQOVG7zijRzBCnLw==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.16.tgz",
+            "integrity": "sha512-LFMKZ30tk78/mUv1ygvIP+568bwf4oN6reG/uczXnz6SvFn4e2QUFpUpZY9iSJT6Qpgstrhef/nMykIXZtZWGQ==",
             "cpu": [
                 "riscv64"
             ],
@@ -17642,9 +17667,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/linux-s390x": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.14.tgz",
-            "integrity": "sha512-G/Lf9iu8sRMM60OVGOh94ZW2nIStksEcITkXdkD09/T6QFD/o+g0+9WVyR/jajIb3A0LvBJ670tBnGe1GgXMgw==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.16.tgz",
+            "integrity": "sha512-3ZC0BgyYHYKfZo3AV2/66TD/I9tlSBaW7eWTEIkrQQKfJIifKMMttXl9FrAg+UT0SGYsCRLI35Gwdmm96vlOjg==",
             "cpu": [
                 "s390x"
             ],
@@ -17658,9 +17683,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/linux-x64": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.14.tgz",
-            "integrity": "sha512-TBgStYBQaa3EGhgqIDM+ECnkreb0wkcKqL7H6m+XPcGUoU4dO7dqewfbm0mWEQYH3kzFHrzjOFNpSAVzDZRSJw==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.16.tgz",
+            "integrity": "sha512-xu86B3647DihHJHv/wx3NCz2Dg1gjQ8bbf9cVYZzWKY+gsvxYmn/lnVlqDRazObc3UMwoHpUhNYaZset4X8IPA==",
             "cpu": [
                 "x64"
             ],
@@ -17674,9 +17699,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/netbsd-x64": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.14.tgz",
-            "integrity": "sha512-stvCcjyCQR2lMTroqNhAbvROqRjxPEq0oQ380YdXxA81TaRJEucH/PzJ/qsEtsHgXlWFW6Ryr/X15vxQiyRXVg==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.16.tgz",
+            "integrity": "sha512-uVAgpimx9Ffw3xowtg/7qQPwHFx94yCje+DoBx+LNm2ePDpQXHrzE+Sb0Si2VBObYz+LcRps15cq+95YM7gkUw==",
             "cpu": [
                 "x64"
             ],
@@ -17690,9 +17715,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/openbsd-x64": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.14.tgz",
-            "integrity": "sha512-apAOJF14CIsN5ht1PA57PboEMsNV70j3FUdxLmA2liZ20gEQnfTG5QU0FhENo5nwbTqCB2O3WDsXAihfODjHYw==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.16.tgz",
+            "integrity": "sha512-6OjCQM9wf7z8/MBi6BOWaTL2AS/SZudsZtBziXMtNI8r/U41AxS9x7jn0ATOwVy08OotwkPqGRMkpPR2wcTJXA==",
             "cpu": [
                 "x64"
             ],
@@ -17706,9 +17731,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/sunos-x64": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.14.tgz",
-            "integrity": "sha512-fYRaaS8mDgZcGybPn2MQbn1ZNZx+UXFSUoS5Hd2oEnlsyUcr/l3c6RnXf1bLDRKKdLRSabTmyCy7VLQ7VhGdOQ==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.16.tgz",
+            "integrity": "sha512-ZoNkruFYJp9d1LbUYCh8awgQDvB9uOMZqlQ+gGEZR7v6C+N6u7vPr86c+Chih8niBR81Q/bHOSKGBK3brJyvkQ==",
             "cpu": [
                 "x64"
             ],
@@ -17722,9 +17747,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/win32-arm64": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.14.tgz",
-            "integrity": "sha512-1c44RcxKEJPrVj62XdmYhxXaU/V7auELCmnD+Ri+UCt+AGxTvzxl9uauQhrFso8gj6ZV1DaORV0sT9XSHOAk8Q==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.16.tgz",
+            "integrity": "sha512-+j4anzQ9hrs+iqO+/wa8UE6TVkKua1pXUb0XWFOx0FiAj6R9INJ+WE//1/Xo6FG1vB5EpH3ko+XcgwiDXTxcdw==",
             "cpu": [
                 "arm64"
             ],
@@ -17738,9 +17763,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/win32-ia32": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.14.tgz",
-            "integrity": "sha512-EXAFttrdAxZkFQmpvcAQ2bywlWUsONp/9c2lcfvPUhu8vXBBenCXpoq9YkUvVP639ld3YGiYx0YUQ6/VQz3Maw==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.16.tgz",
+            "integrity": "sha512-5PFPmq3sSKTp9cT9dzvI67WNfRZGvEVctcZa1KGjDDu4n3H8k59Inbk0du1fz0KrAbKKNpJbdFXQMDUz7BG4rQ==",
             "cpu": [
                 "ia32"
             ],
@@ -17754,9 +17779,9 @@
             }
         },
         "node_modules/vite/node_modules/@esbuild/win32-x64": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.14.tgz",
-            "integrity": "sha512-K0QjGbcskx+gY+qp3v4/940qg8JitpXbdxFhRDA1aYoNaPff88+aEwoq45aqJ+ogpxQxmU0ZTjgnrQD/w8iiUg==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.16.tgz",
+            "integrity": "sha512-sCIVrrtcWN5Ua7jYXNG1xD199IalrbfV2+0k/2Zf2OyV2FtnQnMgdzgpRAbi4AWlKJj1jkX+M+fEGPQj6BQB4w==",
             "cpu": [
                 "x64"
             ],
@@ -17770,9 +17795,9 @@
             }
         },
         "node_modules/vite/node_modules/esbuild": {
-            "version": "0.18.14",
-            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.14.tgz",
-            "integrity": "sha512-uNPj5oHPYmj+ZhSQeYQVFZ+hAlJZbAGOmmILWIqrGvPVlNLbyOvU5Bu6Woi8G8nskcx0vwY0iFoMPrzT86Ko+w==",
+            "version": "0.18.16",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.16.tgz",
+            "integrity": "sha512-1xLsOXrDqwdHxyXb/x/SOyg59jpf/SH7YMvU5RNSU7z3TInaASNJWNFJ6iRvLvLETZMasF3d1DdZLg7sgRimRQ==",
             "dev": true,
             "hasInstallScript": true,
             "bin": {
@@ -17782,28 +17807,28 @@
                 "node": ">=12"
             },
             "optionalDependencies": {
-                "@esbuild/android-arm": "0.18.14",
-                "@esbuild/android-arm64": "0.18.14",
-                "@esbuild/android-x64": "0.18.14",
-                "@esbuild/darwin-arm64": "0.18.14",
-                "@esbuild/darwin-x64": "0.18.14",
-                "@esbuild/freebsd-arm64": "0.18.14",
-                "@esbuild/freebsd-x64": "0.18.14",
-                "@esbuild/linux-arm": "0.18.14",
-                "@esbuild/linux-arm64": "0.18.14",
-                "@esbuild/linux-ia32": "0.18.14",
-                "@esbuild/linux-loong64": "0.18.14",
-                "@esbuild/linux-mips64el": "0.18.14",
-                "@esbuild/linux-ppc64": "0.18.14",
-                "@esbuild/linux-riscv64": "0.18.14",
-                "@esbuild/linux-s390x": "0.18.14",
-                "@esbuild/linux-x64": "0.18.14",
-                "@esbuild/netbsd-x64": "0.18.14",
-                "@esbuild/openbsd-x64": "0.18.14",
-                "@esbuild/sunos-x64": "0.18.14",
-                "@esbuild/win32-arm64": "0.18.14",
-                "@esbuild/win32-ia32": "0.18.14",
-                "@esbuild/win32-x64": "0.18.14"
+                "@esbuild/android-arm": "0.18.16",
+                "@esbuild/android-arm64": "0.18.16",
+                "@esbuild/android-x64": "0.18.16",
+                "@esbuild/darwin-arm64": "0.18.16",
+                "@esbuild/darwin-x64": "0.18.16",
+                "@esbuild/freebsd-arm64": "0.18.16",
+                "@esbuild/freebsd-x64": "0.18.16",
+                "@esbuild/linux-arm": "0.18.16",
+                "@esbuild/linux-arm64": "0.18.16",
+                "@esbuild/linux-ia32": "0.18.16",
+                "@esbuild/linux-loong64": "0.18.16",
+                "@esbuild/linux-mips64el": "0.18.16",
+                "@esbuild/linux-ppc64": "0.18.16",
+                "@esbuild/linux-riscv64": "0.18.16",
+                "@esbuild/linux-s390x": "0.18.16",
+                "@esbuild/linux-x64": "0.18.16",
+                "@esbuild/netbsd-x64": "0.18.16",
+                "@esbuild/openbsd-x64": "0.18.16",
+                "@esbuild/sunos-x64": "0.18.16",
+                "@esbuild/win32-arm64": "0.18.16",
+                "@esbuild/win32-ia32": "0.18.16",
+                "@esbuild/win32-x64": "0.18.16"
             }
         },
         "node_modules/vite/node_modules/fsevents": {
@@ -18052,9 +18077,9 @@
             }
         },
         "node_modules/vue-component-type-helpers": {
-            "version": "1.6.5",
-            "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-1.6.5.tgz",
-            "integrity": "sha512-iGdlqtajmiqed8ptURKPJ/Olz0/mwripVZszg6tygfZSIL9kYFPJTNY6+Q6OjWGznl2L06vxG5HvNvAnWrnzbg==",
+            "version": "1.8.4",
+            "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-1.8.4.tgz",
+            "integrity": "sha512-6bnLkn8O0JJyiFSIF0EfCogzeqNXpnjJ0vW/SZzNHfe6sPx30lTtTXlE5TFs2qhJlAtDFybStVNpL73cPe3OMQ==",
             "dev": true
         },
         "node_modules/vue-devtools-stub": {
@@ -18638,9 +18663,9 @@
             }
         },
         "node_modules/zhead": {
-            "version": "2.0.9",
-            "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.0.9.tgz",
-            "integrity": "sha512-Y3g6EegQc6PVrYXPq2OS7/s27UGVS5Y6NY6SY3XGH4Hg+yQWbQTtWsjCgmpR8kZnYrv8auB54sz+x5FEDrvqzQ==",
+            "version": "2.0.10",
+            "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.0.10.tgz",
+            "integrity": "sha512-irug8fXNKjqazkA27cFQs7C6/ZD3qNiEzLC56kDyzQART/Z9GMGfg8h2i6fb9c8ZWnIx/QgOgFJxK3A/CYHG0g==",
             "dev": true,
             "funding": {
                 "url": "https://github.com/sponsors/harlan-zw"
@@ -18714,118 +18739,118 @@
             "requires": {}
         },
         "@algolia/cache-browser-local-storage": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.19.0.tgz",
-            "integrity": "sha512-G2NxUr3+gFMFwrEsjy7DwZJYXIxBQC5DeRZVKVEpTxW8AkBI2Y7MF+VUs4C8qqE3lHuioym4rvDipzH1xk3DKw==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.19.1.tgz",
+            "integrity": "sha512-FYAZWcGsFTTaSAwj9Std8UML3Bu8dyWDncM7Ls8g+58UOe4XYdlgzXWbrIgjaguP63pCCbMoExKr61B+ztK3tw==",
             "requires": {
-                "@algolia/cache-common": "4.19.0"
+                "@algolia/cache-common": "4.19.1"
             }
         },
         "@algolia/cache-common": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.19.0.tgz",
-            "integrity": "sha512-4zFZCC0vYTvfoFSyAXEXDtQFamMibtMPjARirfvRlfgK+5YXW9qJIV+V7O/4qb1mH6RjngvHOo3GDE1xDoIzKA=="
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.19.1.tgz",
+            "integrity": "sha512-XGghi3l0qA38HiqdoUY+wvGyBsGvKZ6U3vTiMBT4hArhP3fOGLXpIINgMiiGjTe4FVlTa5a/7Zf2bwlIHfRqqg=="
         },
         "@algolia/cache-in-memory": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.19.0.tgz",
-            "integrity": "sha512-Q6z2p4MaiWs4PXB4NQ5l/ZE1j54mF1xlnqOLw0TKKXBhlNM5pOl5XKSvr/t/KHfrkO1/ua/f/YW71iA/lPGn+A==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.19.1.tgz",
+            "integrity": "sha512-+PDWL+XALGvIginigzu8oU6eWw+o76Z8zHbBovWYcrtWOEtinbl7a7UTt3x3lthv+wNuFr/YD1Gf+B+A9V8n5w==",
             "requires": {
-                "@algolia/cache-common": "4.19.0"
+                "@algolia/cache-common": "4.19.1"
             }
         },
         "@algolia/client-account": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.19.0.tgz",
-            "integrity": "sha512-/0ZASb3ErYjM9GJijaF6JDDhDiyGYwp2FQ2QInUzH0mq/+a5s1PMI3r/8NV1DmlX+p93d2QplnLpjgNTn4eafw==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.19.1.tgz",
+            "integrity": "sha512-Oy0ritA2k7AMxQ2JwNpfaEcgXEDgeyKu0V7E7xt/ZJRdXfEpZcwp9TOg4TJHC7Ia62gIeT2Y/ynzsxccPw92GA==",
             "requires": {
-                "@algolia/client-common": "4.19.0",
-                "@algolia/client-search": "4.19.0",
-                "@algolia/transporter": "4.19.0"
+                "@algolia/client-common": "4.19.1",
+                "@algolia/client-search": "4.19.1",
+                "@algolia/transporter": "4.19.1"
             }
         },
         "@algolia/client-analytics": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.19.0.tgz",
-            "integrity": "sha512-tB9L0YJ86a1e/ibNdnbFw+yOKooQlmh95Ld6Qyj4GQ1vFmzBpd4x4ilhyFFXbOjsvNGgALu8+44gp5h2ynxrwg==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.19.1.tgz",
+            "integrity": "sha512-5QCq2zmgdZLIQhHqwl55ZvKVpLM3DNWjFI4T+bHr3rGu23ew2bLO4YtyxaZeChmDb85jUdPDouDlCumGfk6wOg==",
             "requires": {
-                "@algolia/client-common": "4.19.0",
-                "@algolia/client-search": "4.19.0",
-                "@algolia/requester-common": "4.19.0",
-                "@algolia/transporter": "4.19.0"
+                "@algolia/client-common": "4.19.1",
+                "@algolia/client-search": "4.19.1",
+                "@algolia/requester-common": "4.19.1",
+                "@algolia/transporter": "4.19.1"
             }
         },
         "@algolia/client-common": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.19.0.tgz",
-            "integrity": "sha512-tiEyCKkkG5Ig04ATYlt1v41UJb/lS4RmJVXEAsaTkoyB5iUCOChE5WEVPPuJbO/5tSTCbIF4P+g5BjQDb7aGBA==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.19.1.tgz",
+            "integrity": "sha512-3kAIVqTcPrjfS389KQvKzliC559x+BDRxtWamVJt8IVp7LGnjq+aVAXg4Xogkur1MUrScTZ59/AaUd5EdpyXgA==",
             "requires": {
-                "@algolia/requester-common": "4.19.0",
-                "@algolia/transporter": "4.19.0"
+                "@algolia/requester-common": "4.19.1",
+                "@algolia/transporter": "4.19.1"
             }
         },
         "@algolia/client-personalization": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.19.0.tgz",
-            "integrity": "sha512-nG56w0dphlStCOgB80q0ug0SHYM+tQosL4Qprc+cy8ckFhTgC3hRtyRYHYGPk9txow5pPKDtyb5rnr3oviKP1Q==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.19.1.tgz",
+            "integrity": "sha512-8CWz4/H5FA+krm9HMw2HUQenizC/DxUtsI5oYC0Jxxyce1vsr8cb1aEiSJArQT6IzMynrERif1RVWLac1m36xw==",
             "requires": {
-                "@algolia/client-common": "4.19.0",
-                "@algolia/requester-common": "4.19.0",
-                "@algolia/transporter": "4.19.0"
+                "@algolia/client-common": "4.19.1",
+                "@algolia/requester-common": "4.19.1",
+                "@algolia/transporter": "4.19.1"
             }
         },
         "@algolia/client-search": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.19.0.tgz",
-            "integrity": "sha512-kkqvljLIBYFv+GMefIq0wv2cRP30NG5/INyL1OKr8Qk4Nk0FciFF3wdxIgv6fm156x1q4V0fLw5zwMMWMPOsLQ==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.19.1.tgz",
+            "integrity": "sha512-mBecfMFS4N+yK/p0ZbK53vrZbL6OtWMk8YmnOv1i0LXx4pelY8TFhqKoTit3NPVPwoSNN0vdSN9dTu1xr1XOVw==",
             "requires": {
-                "@algolia/client-common": "4.19.0",
-                "@algolia/requester-common": "4.19.0",
-                "@algolia/transporter": "4.19.0"
+                "@algolia/client-common": "4.19.1",
+                "@algolia/requester-common": "4.19.1",
+                "@algolia/transporter": "4.19.1"
             }
         },
         "@algolia/logger-common": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.19.0.tgz",
-            "integrity": "sha512-2YdIHiQwlUCdhFFK1rE53VCEc8scTUcQLWJgpzi1amvP/ffUog4h5VXdGhyhHzYeAexMsaELX2/sEJa4lgOzng=="
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.19.1.tgz",
+            "integrity": "sha512-i6pLPZW/+/YXKis8gpmSiNk1lOmYCmRI6+x6d2Qk1OdfvX051nRVdalRbEcVTpSQX6FQAoyeaui0cUfLYW5Elw=="
         },
         "@algolia/logger-console": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.19.0.tgz",
-            "integrity": "sha512-JjbFPW35gm1RswkB3sgIAS/TjXoqG3FR8Gvsg8lPIB2oh8mcpybyJOUcq56sAfbIQ6n0aFuG4lgqES5TqlWzXw==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.19.1.tgz",
+            "integrity": "sha512-jj72k9GKb9W0c7TyC3cuZtTr0CngLBLmc8trzZlXdfvQiigpUdvTi1KoWIb2ZMcRBG7Tl8hSb81zEY3zI2RlXg==",
             "requires": {
-                "@algolia/logger-common": "4.19.0"
+                "@algolia/logger-common": "4.19.1"
             }
         },
         "@algolia/requester-browser-xhr": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.19.0.tgz",
-            "integrity": "sha512-5c3FlK7ZJ6oiLuZHe0iSpPzWlHCzeunQS7nlBsB4sEecVcvRJfXOklLh2vZfouQdaT14gXJ+Hwb2SuyRQLU6Ug==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.19.1.tgz",
+            "integrity": "sha512-09K/+t7lptsweRTueHnSnmPqIxbHMowejAkn9XIcJMLdseS3zl8ObnS5GWea86mu3vy4+8H+ZBKkUN82Zsq/zg==",
             "requires": {
-                "@algolia/requester-common": "4.19.0"
+                "@algolia/requester-common": "4.19.1"
             }
         },
         "@algolia/requester-common": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.19.0.tgz",
-            "integrity": "sha512-oBsoYDNx09L163N9aQM/FrGfLoU/sLvvzcHw1fdJg5eysTAXCvdMNXk29ocy0rhq2deQ8ccdU/Z9Qu0RfLGUmA=="
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.19.1.tgz",
+            "integrity": "sha512-BisRkcWVxrDzF1YPhAckmi2CFYK+jdMT60q10d7z3PX+w6fPPukxHRnZwooiTUrzFe50UBmLItGizWHP5bDzVQ=="
         },
         "@algolia/requester-node-http": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.19.0.tgz",
-            "integrity": "sha512-UkTZEg5q9VTqfa8cPJbeDpu0Ff50aPx2MxGoYP2v25NFFcTlYRufiPBtux0ZKSyXTaoNPm/OBldWlDi9bTx1jA==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.19.1.tgz",
+            "integrity": "sha512-6DK52DHviBHTG2BK/Vv2GIlEw7i+vxm7ypZW0Z7vybGCNDeWzADx+/TmxjkES2h15+FZOqVf/Ja677gePsVItA==",
             "requires": {
-                "@algolia/requester-common": "4.19.0"
+                "@algolia/requester-common": "4.19.1"
             }
         },
         "@algolia/transporter": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.19.0.tgz",
-            "integrity": "sha512-xgpU6eTzHJ8rqEvhVW9DdyIC+rsRYovIGpCz8k9JjwpLHNltu8wTQik0hasb1z16mFaIQDzgJTxo/C4ciMMr6w==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.19.1.tgz",
+            "integrity": "sha512-nkpvPWbpuzxo1flEYqNIbGz7xhfhGOKGAZS7tzC+TELgEmi7z99qRyTfNSUlW7LZmB3ACdnqAo+9A9KFBENviQ==",
             "requires": {
-                "@algolia/cache-common": "4.19.0",
-                "@algolia/logger-common": "4.19.0",
-                "@algolia/requester-common": "4.19.0"
+                "@algolia/cache-common": "4.19.1",
+                "@algolia/logger-common": "4.19.1",
+                "@algolia/requester-common": "4.19.1"
             }
         },
         "@ampproject/remapping": {
@@ -18959,9 +18984,9 @@
             }
         },
         "@babel/helper-define-polyfill-provider": {
-            "version": "0.4.1",
-            "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.1.tgz",
-            "integrity": "sha512-kX4oXixDxG197yhX+J3Wp+NpL2wuCFjWQAr6yX2jtCnflK9ulMI51ULFGIrWiX1jGfvAxdHp+XQCcP2bZGPs9A==",
+            "version": "0.4.2",
+            "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.2.tgz",
+            "integrity": "sha512-k0qnnOqHn5dK9pZpfD5XXZ9SojAITdCKRn2Lp6rnDGzIbaP0rHyMPk/4wsSxVBVz4RfN0q6VpXWP2pDGIoQ7hw==",
             "dev": true,
             "requires": {
                 "@babel/helper-compilation-targets": "^7.22.6",
@@ -19950,9 +19975,9 @@
             }
         },
         "@babel/preset-modules": {
-            "version": "0.1.5",
-            "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz",
-            "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==",
+            "version": "0.1.6",
+            "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6.tgz",
+            "integrity": "sha512-ID2yj6K/4lKfhuU3+EX4UvNbIt7eACFbHmNUjzA+ep+B5971CknnA/9DEWKbRokfbbtblxxxXFJJrH47UEAMVg==",
             "dev": true,
             "requires": {
                 "@babel/helper-plugin-utils": "^7.0.0",
@@ -20229,9 +20254,9 @@
             }
         },
         "@eslint-community/regexpp": {
-            "version": "4.5.1",
-            "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz",
-            "integrity": "sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==",
+            "version": "4.6.1",
+            "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.6.1.tgz",
+            "integrity": "sha512-O7x6dMstWLn2ktjcoiNLDkAGG2EjveHL+Vvc+n0fXumkJYAcSqcVYKtwDU+hDZ0uDUsnUagSYaZrOLAYE8un1A==",
             "dev": true
         },
         "@eslint/eslintrc": {
@@ -20466,12 +20491,6 @@
                 "eslint-scope": "5.1.1"
             }
         },
-        "@nicolo-ribaudo/semver-v6": {
-            "version": "6.3.3",
-            "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",
-            "integrity": "sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==",
-            "dev": true
-        },
         "@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -20578,15 +20597,15 @@
             }
         },
         "@nuxt/telemetry": {
-            "version": "2.3.1",
-            "resolved": "https://registry.npmjs.org/@nuxt/telemetry/-/telemetry-2.3.1.tgz",
-            "integrity": "sha512-7kr2VDirYIXqyTHqaiWCrfQLgUjAa4qAHzykJOspMCFJWalHU9SVfnv+cTOKGqoXQ4TWOCd09tEd7sLlMFTEqw==",
+            "version": "2.3.2",
+            "resolved": "https://registry.npmjs.org/@nuxt/telemetry/-/telemetry-2.3.2.tgz",
+            "integrity": "sha512-S2sF4hLQWS48lWPpRT8xqVUFuwFGTgeKvojp8vL/iP79fWxudua2DWXR15T8C2zpauYwNgEpEWJmy6vxY2ZQeg==",
             "dev": true,
             "requires": {
-                "@nuxt/kit": "^3.6.1",
+                "@nuxt/kit": "^3.6.5",
                 "chalk": "^5.3.0",
                 "ci-info": "^3.8.0",
-                "consola": "^3.2.2",
+                "consola": "^3.2.3",
                 "create-require": "^1.1.1",
                 "defu": "^6.1.2",
                 "destr": "^2.0.0",
@@ -20878,6 +20897,12 @@
                 }
             }
         },
+        "@one-ini/wasm": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
+            "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
+            "dev": true
+        },
         "@rollup/plugin-alias": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.0.0.tgz",
@@ -21051,9 +21076,9 @@
             }
         },
         "@types/eslint": {
-            "version": "8.44.0",
-            "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.0.tgz",
-            "integrity": "sha512-gsF+c/0XOguWgaOgvFs+xnnRqt9GwgTvIks36WpE6ueeI4KCEHHd8K/CKHqhOqrJKsYH8m27kRzQEvWXAwXUTw==",
+            "version": "8.44.1",
+            "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.1.tgz",
+            "integrity": "sha512-XpNDc4Z5Tb4x+SW1MriMVeIsMoONHCkWFMkR/aPJbzEsxqHy+4Glu/BqTdPrApfDeMaXbtNh6bseNgl5KaWrSg==",
             "dev": true,
             "peer": true,
             "requires": {
@@ -21085,9 +21110,9 @@
             "dev": true
         },
         "@types/node": {
-            "version": "20.4.2",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.2.tgz",
-            "integrity": "sha512-Dd0BYtWgnWJKwO1jkmTrzofjK2QXXcai0dmtzvIBhcA+RsG5h8R3xlyta0kGOZRNfL9GuRtb1knmPEhQrePCEw==",
+            "version": "20.4.4",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.4.tgz",
+            "integrity": "sha512-CukZhumInROvLq3+b5gLev+vgpsIqC2D0deQr/yS1WnxvmYLlJXZpaQrQiseMY+6xusl79E04UjWoqyr+t1/Ew==",
             "dev": true
         },
         "@types/resolve": {
@@ -21461,13 +21486,13 @@
             "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
         },
         "@vue/test-utils": {
-            "version": "2.4.0",
-            "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.0.tgz",
-            "integrity": "sha512-BKB9aj1yky63/I3IwSr1FjUeHYsKXI7D6S9F378AHt7a5vC0dLkOBtSsFXoRGC/7BfHmiB9HRhT+i9xrUHoAKw==",
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.1.tgz",
+            "integrity": "sha512-VO8nragneNzUZUah6kOjiFmD/gwRjUauG9DROh6oaOeFwX1cZRUNHhdeogE8635cISigXFTtGLUQWx5KCb0xeg==",
             "dev": true,
             "requires": {
-                "js-beautify": "1.14.6",
-                "vue-component-type-helpers": "1.6.5"
+                "js-beautify": "1.14.9",
+                "vue-component-type-helpers": "1.8.4"
             }
         },
         "@webassemblyjs/ast": {
@@ -21731,24 +21756,24 @@
             "requires": {}
         },
         "algoliasearch": {
-            "version": "4.19.0",
-            "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.19.0.tgz",
-            "integrity": "sha512-UIzLHOkprUFzwFxqgw+TOhEG2usLv8q9l4V/Ul82IgNNO+g5RjENd5Sl/J6BU4BlRdMLy/OvPfbSc7Y1dOdwgA==",
+            "version": "4.19.1",
+            "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.19.1.tgz",
+            "integrity": "sha512-IJF5b93b2MgAzcE/tuzW0yOPnuUyRgGAtaPv5UUywXM8kzqfdwZTO4sPJBzoGz1eOy6H9uEchsJsBFTELZSu+g==",
             "requires": {
-                "@algolia/cache-browser-local-storage": "4.19.0",
-                "@algolia/cache-common": "4.19.0",
-                "@algolia/cache-in-memory": "4.19.0",
-                "@algolia/client-account": "4.19.0",
-                "@algolia/client-analytics": "4.19.0",
-                "@algolia/client-common": "4.19.0",
-                "@algolia/client-personalization": "4.19.0",
-                "@algolia/client-search": "4.19.0",
-                "@algolia/logger-common": "4.19.0",
-                "@algolia/logger-console": "4.19.0",
-                "@algolia/requester-browser-xhr": "4.19.0",
-                "@algolia/requester-common": "4.19.0",
-                "@algolia/requester-node-http": "4.19.0",
-                "@algolia/transporter": "4.19.0"
+                "@algolia/cache-browser-local-storage": "4.19.1",
+                "@algolia/cache-common": "4.19.1",
+                "@algolia/cache-in-memory": "4.19.1",
+                "@algolia/client-account": "4.19.1",
+                "@algolia/client-analytics": "4.19.1",
+                "@algolia/client-common": "4.19.1",
+                "@algolia/client-personalization": "4.19.1",
+                "@algolia/client-search": "4.19.1",
+                "@algolia/logger-common": "4.19.1",
+                "@algolia/logger-console": "4.19.1",
+                "@algolia/requester-browser-xhr": "4.19.1",
+                "@algolia/requester-common": "4.19.1",
+                "@algolia/requester-node-http": "4.19.1",
+                "@algolia/transporter": "4.19.1"
             }
         },
         "ansi-colors": {
@@ -22142,33 +22167,33 @@
             }
         },
         "babel-plugin-polyfill-corejs2": {
-            "version": "0.4.4",
-            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.4.tgz",
-            "integrity": "sha512-9WeK9snM1BfxB38goUEv2FLnA6ja07UMfazFHzCXUb3NyDZAwfXvQiURQ6guTTMeHcOsdknULm1PDhs4uWtKyA==",
+            "version": "0.4.5",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.5.tgz",
+            "integrity": "sha512-19hwUH5FKl49JEsvyTcoHakh6BE0wgXLLptIyKZ3PijHc/Ci521wygORCUCCred+E/twuqRyAkE02BAWPmsHOg==",
             "dev": true,
             "requires": {
                 "@babel/compat-data": "^7.22.6",
-                "@babel/helper-define-polyfill-provider": "^0.4.1",
-                "@nicolo-ribaudo/semver-v6": "^6.3.3"
+                "@babel/helper-define-polyfill-provider": "^0.4.2",
+                "semver": "^6.3.1"
             }
         },
         "babel-plugin-polyfill-corejs3": {
-            "version": "0.8.2",
-            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.2.tgz",
-            "integrity": "sha512-Cid+Jv1BrY9ReW9lIfNlNpsI53N+FN7gE+f73zLAUbr9C52W4gKLWSByx47pfDJsEysojKArqOtOKZSVIIUTuQ==",
+            "version": "0.8.3",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.3.tgz",
+            "integrity": "sha512-z41XaniZL26WLrvjy7soabMXrfPWARN25PZoriDEiLMxAp50AUW3t35BGQUMg5xK3UrpVTtagIDklxYa+MhiNA==",
             "dev": true,
             "requires": {
-                "@babel/helper-define-polyfill-provider": "^0.4.1",
+                "@babel/helper-define-polyfill-provider": "^0.4.2",
                 "core-js-compat": "^3.31.0"
             }
         },
         "babel-plugin-polyfill-regenerator": {
-            "version": "0.5.1",
-            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.1.tgz",
-            "integrity": "sha512-L8OyySuI6OSQ5hFy9O+7zFjyr4WhAfRjLIOkhQGYl+emwJkd/S4XXT1JpfrgR1jrQ1NcGiOh+yAdGlF8pnC3Jw==",
+            "version": "0.5.2",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.2.tgz",
+            "integrity": "sha512-tAlOptU0Xj34V1Y2PNTL4Y0FOJMDB6bZmoW39FeCQIhigGLkqu3Fj6uiXpxIf6Ij274ENdYx64y6Au+ZKlb1IA==",
             "dev": true,
             "requires": {
-                "@babel/helper-define-polyfill-provider": "^0.4.1"
+                "@babel/helper-define-polyfill-provider": "^0.4.2"
             }
         },
         "bach": {
@@ -22985,9 +23010,9 @@
             }
         },
         "commander": {
-            "version": "2.20.3",
-            "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-            "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+            "version": "10.0.1",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+            "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
             "dev": true
         },
         "commondir": {
@@ -23632,37 +23657,57 @@
             "dev": true
         },
         "editorconfig": {
-            "version": "0.15.3",
-            "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
-            "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==",
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz",
+            "integrity": "sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==",
             "dev": true,
             "requires": {
-                "commander": "^2.19.0",
-                "lru-cache": "^4.1.5",
-                "semver": "^5.6.0",
-                "sigmund": "^1.0.1"
+                "@one-ini/wasm": "0.1.1",
+                "commander": "^10.0.0",
+                "minimatch": "9.0.1",
+                "semver": "^7.5.3"
             },
             "dependencies": {
-                "lru-cache": {
-                    "version": "4.1.5",
-                    "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-                    "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+                "brace-expansion": {
+                    "version": "2.0.1",
+                    "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+                    "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
                     "dev": true,
                     "requires": {
-                        "pseudomap": "^1.0.2",
-                        "yallist": "^2.1.2"
+                        "balanced-match": "^1.0.0"
+                    }
+                },
+                "lru-cache": {
+                    "version": "6.0.0",
+                    "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+                    "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+                    "dev": true,
+                    "requires": {
+                        "yallist": "^4.0.0"
+                    }
+                },
+                "minimatch": {
+                    "version": "9.0.1",
+                    "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.1.tgz",
+                    "integrity": "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==",
+                    "dev": true,
+                    "requires": {
+                        "brace-expansion": "^2.0.1"
                     }
                 },
                 "semver": {
-                    "version": "5.7.2",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-                    "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-                    "dev": true
+                    "version": "7.5.4",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+                    "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+                    "dev": true,
+                    "requires": {
+                        "lru-cache": "^6.0.0"
+                    }
                 },
                 "yallist": {
-                    "version": "2.1.2",
-                    "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-                    "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+                    "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
                     "dev": true
                 }
             }
@@ -23674,9 +23719,9 @@
             "dev": true
         },
         "electron-to-chromium": {
-            "version": "1.4.466",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.466.tgz",
-            "integrity": "sha512-TSkRvbXRXD8BwhcGlZXDsbI2lRoP8dvqR7LQnqQNk9KxXBc4tG8O+rTuXgTyIpEdiqSGKEBSqrxdqEntnjNncA==",
+            "version": "1.4.470",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.470.tgz",
+            "integrity": "sha512-zZM48Lmy2FKWgqyvsX9XK+J6FfP7aCDUFLmgooLJzA7v1agCs/sxSoBpTIwDLhmbhpx9yJIxj2INig/ncjJRqg==",
             "dev": true
         },
         "emoji-regex": {
@@ -24417,9 +24462,9 @@
             "dev": true
         },
         "fast-glob": {
-            "version": "3.3.0",
-            "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz",
-            "integrity": "sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==",
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+            "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
             "dev": true,
             "requires": {
                 "@nodelib/fs.stat": "^2.0.2",
@@ -26055,14 +26100,14 @@
             "dev": true
         },
         "js-beautify": {
-            "version": "1.14.6",
-            "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.6.tgz",
-            "integrity": "sha512-GfofQY5zDp+cuHc+gsEXKPpNw2KbPddreEo35O6jT6i0RVK6LhsoYBhq5TvK4/n74wnA0QbK8gGd+jUZwTMKJw==",
+            "version": "1.14.9",
+            "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.9.tgz",
+            "integrity": "sha512-coM7xq1syLcMyuVGyToxcj2AlzhkDjmfklL8r0JgJ7A76wyGMpJ1oA35mr4APdYNO/o/4YY8H54NQIJzhMbhBg==",
             "dev": true,
             "requires": {
                 "config-chain": "^1.1.13",
-                "editorconfig": "^0.15.3",
-                "glob": "^8.0.3",
+                "editorconfig": "^1.0.3",
+                "glob": "^8.1.0",
                 "nopt": "^6.0.0"
             }
         },
@@ -27104,9 +27149,9 @@
             "dev": true
         },
         "node-fetch": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.1.tgz",
-            "integrity": "sha512-cRVc/kyto/7E5shrWca1Wsea4y6tL9iYJE5FBCius3JQfb/4P4I295PfhgbJQBLTx6lATE4z+wK0rPM4VS2uow==",
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+            "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
             "dev": true,
             "requires": {
                 "data-uri-to-buffer": "^4.0.0",
@@ -27977,9 +28022,9 @@
             "dev": true
         },
         "postcss": {
-            "version": "8.4.26",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.26.tgz",
-            "integrity": "sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==",
+            "version": "8.4.27",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
+            "integrity": "sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==",
             "requires": {
                 "nanoid": "^3.3.6",
                 "picocolors": "^1.0.0",
@@ -28489,12 +28534,6 @@
             "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
             "dev": true
         },
-        "pseudomap": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-            "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==",
-            "dev": true
-        },
         "psl": {
             "version": "1.9.0",
             "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -29328,9 +29367,9 @@
             "dev": true
         },
         "sass": {
-            "version": "1.64.0",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.64.0.tgz",
-            "integrity": "sha512-m7YtAGmQta9uANIUJwXesAJMSncqH+3INc8kdVXs6eV6GUC8Qu2IYKQSN8PRLgiQfpca697G94klm2leYMxSHw==",
+            "version": "1.64.1",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.64.1.tgz",
+            "integrity": "sha512-16rRACSOFEE8VN7SCgBu1MpYCyN7urj9At898tyzdXFhC+a+yOX5dXwAR7L8/IdPJ1NB8OYoXmD55DM30B2kEQ==",
             "dev": true,
             "requires": {
                 "chokidar": ">=3.0.0 <4.0.0",
@@ -29687,12 +29726,6 @@
             "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
             "dev": true
         },
-        "sigmund": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-            "integrity": "sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==",
-            "dev": true
-        },
         "signal-exit": {
             "version": "3.0.7",
             "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -30317,15 +30350,23 @@
             }
         },
         "terser": {
-            "version": "5.19.1",
-            "resolved": "https://registry.npmjs.org/terser/-/terser-5.19.1.tgz",
-            "integrity": "sha512-27hxBUVdV6GoNg1pKQ7Z5cbR6V9txPVyBA+FQw3BaZ1Wuzvztce5p156DaP0NVZNrMZZ+6iG9Syf7WgMNKDg2Q==",
+            "version": "5.19.2",
+            "resolved": "https://registry.npmjs.org/terser/-/terser-5.19.2.tgz",
+            "integrity": "sha512-qC5+dmecKJA4cpYxRa5aVkKehYsQKc+AHeKl0Oe62aYjBL8ZA33tTljktDHJSaxxMnbI5ZYw+o/S2DxxLu8OfA==",
             "dev": true,
             "requires": {
                 "@jridgewell/source-map": "^0.3.3",
                 "acorn": "^8.8.2",
                 "commander": "^2.20.0",
                 "source-map-support": "~0.5.20"
+            },
+            "dependencies": {
+                "commander": {
+                    "version": "2.20.3",
+                    "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+                    "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+                    "dev": true
+                }
             }
         },
         "terser-webpack-plugin": {
@@ -30818,22 +30859,22 @@
             "dev": true
         },
         "unimport": {
-            "version": "3.0.14",
-            "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.0.14.tgz",
-            "integrity": "sha512-67Rh/sGpEuVqdHWkXaZ6NOq+I7sKt86o+DUtKeGB6dh4Hk1A8AQrzyVGg2+LaVEYotStH7HwvV9YSaRjyT7Uqg==",
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.1.0.tgz",
+            "integrity": "sha512-ybK3NVWh30MdiqSyqakrrQOeiXyu5507tDA0tUf7VJHrsq4DM6S43gR7oAsZaFojM32hzX982Lqw02D3yf2aiA==",
             "dev": true,
             "requires": {
                 "@rollup/pluginutils": "^5.0.2",
                 "escape-string-regexp": "^5.0.0",
                 "fast-glob": "^3.3.0",
                 "local-pkg": "^0.4.3",
-                "magic-string": "^0.30.0",
+                "magic-string": "^0.30.1",
                 "mlly": "^1.4.0",
                 "pathe": "^1.1.1",
                 "pkg-types": "^1.0.3",
                 "scule": "^1.0.0",
                 "strip-literal": "^1.0.1",
-                "unplugin": "^1.3.1"
+                "unplugin": "^1.4.0"
             },
             "dependencies": {
                 "escape-string-regexp": {
@@ -31259,18 +31300,18 @@
             "dev": true
         },
         "vee-validate": {
-            "version": "4.10.7",
-            "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.10.7.tgz",
-            "integrity": "sha512-LvJ2vAMyeJBoDnm+Ic37qvQRVsLirLynaBKW2mYCo05V6fOz7yFhMGECzW2fLsNmaHgRaaxivF/ky91dLx4efw==",
+            "version": "4.10.8",
+            "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.10.8.tgz",
+            "integrity": "sha512-4VWziid3tdlIMGWr0D24YG/e+Q+M6TMK2DQg8dMvufgNyHFIpKxkMKwWoSMuQS0Pi0wKJEo5F5Kok8pXlei4vA==",
             "requires": {
                 "@vue/devtools-api": "^6.5.0",
-                "type-fest": "^3.13.0"
+                "type-fest": "^4.0.0"
             },
             "dependencies": {
                 "type-fest": {
-                    "version": "3.13.1",
-                    "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
-                    "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g=="
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.0.0.tgz",
+                    "integrity": "sha512-d/oYtUnPM9zar2fqqGLYPzgcY0qUlYK0evgNVti93xpzfjGkMgZHu9Lvgrkn0rqGXTgsFRxFamzjGoD9Uo+dgw=="
                 }
             }
         },
@@ -31357,199 +31398,199 @@
             }
         },
         "vite": {
-            "version": "4.4.4",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.4.tgz",
-            "integrity": "sha512-4mvsTxjkveWrKDJI70QmelfVqTm+ihFAb6+xf4sjEU2TmUCTlVX87tmg/QooPEMQb/lM9qGHT99ebqPziEd3wg==",
+            "version": "4.4.7",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz",
+            "integrity": "sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==",
             "dev": true,
             "requires": {
                 "esbuild": "^0.18.10",
                 "fsevents": "~2.3.2",
-                "postcss": "^8.4.25",
+                "postcss": "^8.4.26",
                 "rollup": "^3.25.2"
             },
             "dependencies": {
                 "@esbuild/android-arm": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.14.tgz",
-                    "integrity": "sha512-blODaaL+lngG5bdK/t4qZcQvq2BBqrABmYwqPPcS5VRxrCSGHb9R/rA3fqxh7R18I7WU4KKv+NYkt22FDfalcg==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.16.tgz",
+                    "integrity": "sha512-gCHjjQmA8L0soklKbLKA6pgsLk1byULuHe94lkZDzcO3/Ta+bbeewJioEn1Fr7kgy9NWNFy/C+MrBwC6I/WCug==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/android-arm64": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.14.tgz",
-                    "integrity": "sha512-rZ2v+Luba5/3D6l8kofWgTnqE+qsC/L5MleKIKFyllHTKHrNBMqeRCnZI1BtRx8B24xMYxeU32iIddRQqMsOsg==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.16.tgz",
+                    "integrity": "sha512-wsCqSPqLz+6Ov+OM4EthU43DyYVVyfn15S4j1bJzylDpc1r1jZFFfJQNfDuT8SlgwuqpmpJXK4uPlHGw6ve7eA==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/android-x64": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.14.tgz",
-                    "integrity": "sha512-qSwh8y38QKl+1Iqg+YhvCVYlSk3dVLk9N88VO71U4FUjtiSFylMWK3Ugr8GC6eTkkP4Tc83dVppt2n8vIdlSGg==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.16.tgz",
+                    "integrity": "sha512-ldsTXolyA3eTQ1//4DS+E15xl0H/3DTRJaRL0/0PgkqDsI0fV/FlOtD+h0u/AUJr+eOTlZv4aC9gvfppo3C4sw==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/darwin-arm64": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.14.tgz",
-                    "integrity": "sha512-9Hl2D2PBeDYZiNbnRKRWuxwHa9v5ssWBBjisXFkVcSP5cZqzZRFBUWEQuqBHO4+PKx4q4wgHoWtfQ1S7rUqJ2Q==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.16.tgz",
+                    "integrity": "sha512-aBxruWCII+OtluORR/KvisEw0ALuw/qDQWvkoosA+c/ngC/Kwk0lLaZ+B++LLS481/VdydB2u6tYpWxUfnLAIw==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/darwin-x64": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.14.tgz",
-                    "integrity": "sha512-ZnI3Dg4ElQ6tlv82qLc/UNHtFsgZSKZ7KjsUNAo1BF1SoYDjkGKHJyCrYyWjFecmXpvvG/KJ9A/oe0H12odPLQ==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.16.tgz",
+                    "integrity": "sha512-6w4Dbue280+rp3LnkgmriS1icOUZDyPuZo/9VsuMUTns7SYEiOaJ7Ca1cbhu9KVObAWfmdjUl4gwy9TIgiO5eA==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/freebsd-arm64": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.14.tgz",
-                    "integrity": "sha512-h3OqR80Da4oQCIa37zl8tU5MwHQ7qgPV0oVScPfKJK21fSRZEhLE4IIVpmcOxfAVmqjU6NDxcxhYaM8aDIGRLw==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.16.tgz",
+                    "integrity": "sha512-x35fCebhe9s979DGKbVAwXUOcTmCIE32AIqB9CB1GralMIvxdnMLAw5CnID17ipEw9/3MvDsusj/cspYt2ZLNQ==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/freebsd-x64": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.14.tgz",
-                    "integrity": "sha512-ha4BX+S6CZG4BoH9tOZTrFIYC1DH13UTCRHzFc3GWX74nz3h/N6MPF3tuR3XlsNjMFUazGgm35MPW5tHkn2lzQ==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.16.tgz",
+                    "integrity": "sha512-YM98f+PeNXF3GbxIJlUsj+McUWG1irguBHkszCIwfr3BXtXZsXo0vqybjUDFfu9a8Wr7uUD/YSmHib+EeGAFlg==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/linux-arm": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.14.tgz",
-                    "integrity": "sha512-5+7vehI1iqru5WRtJyU2XvTOvTGURw3OZxe3YTdE9muNNIdmKAVmSHpB3Vw2LazJk2ifEdIMt/wTWnVe5V98Kg==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.16.tgz",
+                    "integrity": "sha512-b5ABb+5Ha2C9JkeZXV+b+OruR1tJ33ePmv9ZwMeETSEKlmu/WJ45XTTG+l6a2KDsQtJJ66qo/hbSGBtk0XVLHw==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/linux-arm64": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.14.tgz",
-                    "integrity": "sha512-IXORRe22In7U65NZCzjwAUc03nn8SDIzWCnfzJ6t/8AvGx5zBkcLfknI+0P+hhuftufJBmIXxdSTbzWc8X/V4w==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.16.tgz",
+                    "integrity": "sha512-XIqhNUxJiuy+zsR77+H5Z2f7s4YRlriSJKtvx99nJuG5ATuJPjmZ9n0ANgnGlPCpXGSReFpgcJ7O3SMtzIFeiQ==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/linux-ia32": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.14.tgz",
-                    "integrity": "sha512-BfHlMa0nibwpjG+VXbOoqJDmFde4UK2gnW351SQ2Zd4t1N3zNdmUEqRkw/srC1Sa1DRBE88Dbwg4JgWCbNz/FQ==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.16.tgz",
+                    "integrity": "sha512-no+pfEpwnRvIyH+txbBAWtjxPU9grslmTBfsmDndj7bnBmr55rOo/PfQmRfz7Qg9isswt1FP5hBbWb23fRWnow==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/linux-loong64": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.14.tgz",
-                    "integrity": "sha512-j2/Ex++DRUWIAaUDprXd3JevzGtZ4/d7VKz+AYDoHZ3HjJzCyYBub9CU1wwIXN+viOP0b4VR3RhGClsvyt/xSw==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.16.tgz",
+                    "integrity": "sha512-Zbnczs9ZXjmo0oZSS0zbNlJbcwKXa/fcNhYQjahDs4Xg18UumpXG/lwM2lcSvHS3mTrRyCYZvJbmzYc4laRI1g==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/linux-mips64el": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.14.tgz",
-                    "integrity": "sha512-qn2+nc+ZCrJmiicoAnJXJJkZWt8Nwswgu1crY7N+PBR8ChBHh89XRxj38UU6Dkthl2yCVO9jWuafZ24muzDC/A==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.16.tgz",
+                    "integrity": "sha512-YMF7hih1HVR/hQVa/ot4UVffc5ZlrzEb3k2ip0nZr1w6fnYypll9td2qcoMLvd3o8j3y6EbJM3MyIcXIVzXvQQ==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/linux-ppc64": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.14.tgz",
-                    "integrity": "sha512-aGzXzd+djqeEC5IRkDKt3kWzvXoXC6K6GyYKxd+wsFJ2VQYnOWE954qV2tvy5/aaNrmgPTb52cSCHFE+Z7Z0yg==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.16.tgz",
+                    "integrity": "sha512-Wkz++LZ29lDwUyTSEnzDaaP5OveOgTU69q9IyIw9WqLRxM4BjTBjz9un4G6TOvehWpf/J3gYVFN96TjGHrbcNQ==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/linux-riscv64": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.14.tgz",
-                    "integrity": "sha512-8C6vWbfr0ygbAiMFLS6OPz0BHvApkT2gCboOGV76YrYw+sD/MQJzyITNsjZWDXJwPu9tjrFQOVG7zijRzBCnLw==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.16.tgz",
+                    "integrity": "sha512-LFMKZ30tk78/mUv1ygvIP+568bwf4oN6reG/uczXnz6SvFn4e2QUFpUpZY9iSJT6Qpgstrhef/nMykIXZtZWGQ==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/linux-s390x": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.14.tgz",
-                    "integrity": "sha512-G/Lf9iu8sRMM60OVGOh94ZW2nIStksEcITkXdkD09/T6QFD/o+g0+9WVyR/jajIb3A0LvBJ670tBnGe1GgXMgw==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.16.tgz",
+                    "integrity": "sha512-3ZC0BgyYHYKfZo3AV2/66TD/I9tlSBaW7eWTEIkrQQKfJIifKMMttXl9FrAg+UT0SGYsCRLI35Gwdmm96vlOjg==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/linux-x64": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.14.tgz",
-                    "integrity": "sha512-TBgStYBQaa3EGhgqIDM+ECnkreb0wkcKqL7H6m+XPcGUoU4dO7dqewfbm0mWEQYH3kzFHrzjOFNpSAVzDZRSJw==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.16.tgz",
+                    "integrity": "sha512-xu86B3647DihHJHv/wx3NCz2Dg1gjQ8bbf9cVYZzWKY+gsvxYmn/lnVlqDRazObc3UMwoHpUhNYaZset4X8IPA==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/netbsd-x64": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.14.tgz",
-                    "integrity": "sha512-stvCcjyCQR2lMTroqNhAbvROqRjxPEq0oQ380YdXxA81TaRJEucH/PzJ/qsEtsHgXlWFW6Ryr/X15vxQiyRXVg==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.16.tgz",
+                    "integrity": "sha512-uVAgpimx9Ffw3xowtg/7qQPwHFx94yCje+DoBx+LNm2ePDpQXHrzE+Sb0Si2VBObYz+LcRps15cq+95YM7gkUw==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/openbsd-x64": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.14.tgz",
-                    "integrity": "sha512-apAOJF14CIsN5ht1PA57PboEMsNV70j3FUdxLmA2liZ20gEQnfTG5QU0FhENo5nwbTqCB2O3WDsXAihfODjHYw==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.16.tgz",
+                    "integrity": "sha512-6OjCQM9wf7z8/MBi6BOWaTL2AS/SZudsZtBziXMtNI8r/U41AxS9x7jn0ATOwVy08OotwkPqGRMkpPR2wcTJXA==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/sunos-x64": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.14.tgz",
-                    "integrity": "sha512-fYRaaS8mDgZcGybPn2MQbn1ZNZx+UXFSUoS5Hd2oEnlsyUcr/l3c6RnXf1bLDRKKdLRSabTmyCy7VLQ7VhGdOQ==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.16.tgz",
+                    "integrity": "sha512-ZoNkruFYJp9d1LbUYCh8awgQDvB9uOMZqlQ+gGEZR7v6C+N6u7vPr86c+Chih8niBR81Q/bHOSKGBK3brJyvkQ==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/win32-arm64": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.14.tgz",
-                    "integrity": "sha512-1c44RcxKEJPrVj62XdmYhxXaU/V7auELCmnD+Ri+UCt+AGxTvzxl9uauQhrFso8gj6ZV1DaORV0sT9XSHOAk8Q==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.16.tgz",
+                    "integrity": "sha512-+j4anzQ9hrs+iqO+/wa8UE6TVkKua1pXUb0XWFOx0FiAj6R9INJ+WE//1/Xo6FG1vB5EpH3ko+XcgwiDXTxcdw==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/win32-ia32": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.14.tgz",
-                    "integrity": "sha512-EXAFttrdAxZkFQmpvcAQ2bywlWUsONp/9c2lcfvPUhu8vXBBenCXpoq9YkUvVP639ld3YGiYx0YUQ6/VQz3Maw==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.16.tgz",
+                    "integrity": "sha512-5PFPmq3sSKTp9cT9dzvI67WNfRZGvEVctcZa1KGjDDu4n3H8k59Inbk0du1fz0KrAbKKNpJbdFXQMDUz7BG4rQ==",
                     "dev": true,
                     "optional": true
                 },
                 "@esbuild/win32-x64": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.14.tgz",
-                    "integrity": "sha512-K0QjGbcskx+gY+qp3v4/940qg8JitpXbdxFhRDA1aYoNaPff88+aEwoq45aqJ+ogpxQxmU0ZTjgnrQD/w8iiUg==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.16.tgz",
+                    "integrity": "sha512-sCIVrrtcWN5Ua7jYXNG1xD199IalrbfV2+0k/2Zf2OyV2FtnQnMgdzgpRAbi4AWlKJj1jkX+M+fEGPQj6BQB4w==",
                     "dev": true,
                     "optional": true
                 },
                 "esbuild": {
-                    "version": "0.18.14",
-                    "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.14.tgz",
-                    "integrity": "sha512-uNPj5oHPYmj+ZhSQeYQVFZ+hAlJZbAGOmmILWIqrGvPVlNLbyOvU5Bu6Woi8G8nskcx0vwY0iFoMPrzT86Ko+w==",
+                    "version": "0.18.16",
+                    "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.16.tgz",
+                    "integrity": "sha512-1xLsOXrDqwdHxyXb/x/SOyg59jpf/SH7YMvU5RNSU7z3TInaASNJWNFJ6iRvLvLETZMasF3d1DdZLg7sgRimRQ==",
                     "dev": true,
                     "requires": {
-                        "@esbuild/android-arm": "0.18.14",
-                        "@esbuild/android-arm64": "0.18.14",
-                        "@esbuild/android-x64": "0.18.14",
-                        "@esbuild/darwin-arm64": "0.18.14",
-                        "@esbuild/darwin-x64": "0.18.14",
-                        "@esbuild/freebsd-arm64": "0.18.14",
-                        "@esbuild/freebsd-x64": "0.18.14",
-                        "@esbuild/linux-arm": "0.18.14",
-                        "@esbuild/linux-arm64": "0.18.14",
-                        "@esbuild/linux-ia32": "0.18.14",
-                        "@esbuild/linux-loong64": "0.18.14",
-                        "@esbuild/linux-mips64el": "0.18.14",
-                        "@esbuild/linux-ppc64": "0.18.14",
-                        "@esbuild/linux-riscv64": "0.18.14",
-                        "@esbuild/linux-s390x": "0.18.14",
-                        "@esbuild/linux-x64": "0.18.14",
-                        "@esbuild/netbsd-x64": "0.18.14",
-                        "@esbuild/openbsd-x64": "0.18.14",
-                        "@esbuild/sunos-x64": "0.18.14",
-                        "@esbuild/win32-arm64": "0.18.14",
-                        "@esbuild/win32-ia32": "0.18.14",
-                        "@esbuild/win32-x64": "0.18.14"
+                        "@esbuild/android-arm": "0.18.16",
+                        "@esbuild/android-arm64": "0.18.16",
+                        "@esbuild/android-x64": "0.18.16",
+                        "@esbuild/darwin-arm64": "0.18.16",
+                        "@esbuild/darwin-x64": "0.18.16",
+                        "@esbuild/freebsd-arm64": "0.18.16",
+                        "@esbuild/freebsd-x64": "0.18.16",
+                        "@esbuild/linux-arm": "0.18.16",
+                        "@esbuild/linux-arm64": "0.18.16",
+                        "@esbuild/linux-ia32": "0.18.16",
+                        "@esbuild/linux-loong64": "0.18.16",
+                        "@esbuild/linux-mips64el": "0.18.16",
+                        "@esbuild/linux-ppc64": "0.18.16",
+                        "@esbuild/linux-riscv64": "0.18.16",
+                        "@esbuild/linux-s390x": "0.18.16",
+                        "@esbuild/linux-x64": "0.18.16",
+                        "@esbuild/netbsd-x64": "0.18.16",
+                        "@esbuild/openbsd-x64": "0.18.16",
+                        "@esbuild/sunos-x64": "0.18.16",
+                        "@esbuild/win32-arm64": "0.18.16",
+                        "@esbuild/win32-ia32": "0.18.16",
+                        "@esbuild/win32-x64": "0.18.16"
                     }
                 },
                 "fsevents": {
@@ -31918,9 +31959,9 @@
             }
         },
         "vue-component-type-helpers": {
-            "version": "1.6.5",
-            "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-1.6.5.tgz",
-            "integrity": "sha512-iGdlqtajmiqed8ptURKPJ/Olz0/mwripVZszg6tygfZSIL9kYFPJTNY6+Q6OjWGznl2L06vxG5HvNvAnWrnzbg==",
+            "version": "1.8.4",
+            "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-1.8.4.tgz",
+            "integrity": "sha512-6bnLkn8O0JJyiFSIF0EfCogzeqNXpnjJ0vW/SZzNHfe6sPx30lTtTXlE5TFs2qhJlAtDFybStVNpL73cPe3OMQ==",
             "dev": true
         },
         "vue-devtools-stub": {
@@ -32354,9 +32395,9 @@
             "dev": true
         },
         "zhead": {
-            "version": "2.0.9",
-            "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.0.9.tgz",
-            "integrity": "sha512-Y3g6EegQc6PVrYXPq2OS7/s27UGVS5Y6NY6SY3XGH4Hg+yQWbQTtWsjCgmpR8kZnYrv8auB54sz+x5FEDrvqzQ==",
+            "version": "2.0.10",
+            "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.0.10.tgz",
+            "integrity": "sha512-irug8fXNKjqazkA27cFQs7C6/ZD3qNiEzLC56kDyzQART/Z9GMGfg8h2i6fb9c8ZWnIx/QgOgFJxK3A/CYHG0g==",
             "dev": true
         },
         "zip-stream": {
diff --git a/package.json b/package.json
index e073a3860..39b105c85 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "primevue",
-    "version": "3.30.2",
+    "version": "3.31.0",
     "homepage": "https://primevue.org/",
     "repository": {
         "type": "git",
diff --git a/pages/accordion/index.vue b/pages/accordion/index.vue
index cdf8917a0..d5fc89ab4 100755
--- a/pages/accordion/index.vue
+++ b/pages/accordion/index.vue
@@ -1,8 +1,17 @@
 <template>
-    <DocComponent title="Vue Accordion Component" header="Accordion" description="Accordion groups a collection of contents in tabs." :componentDocs="docs" :apiDocs="['Accordion', 'AccordionTab']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Accordion Component"
+        header="Accordion"
+        description="Accordion groups a collection of contents in tabs."
+        :componentDocs="docs"
+        :apiDocs="['Accordion', 'AccordionTab']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Accordion/theming/index.vue';
 import AccessibilityDoc from '@/doc/accordion/AccessibilityDoc';
 import BasicDoc from '@/doc/accordion/BasicDoc';
 import ControlledDoc from '@/doc/accordion/ControlledDoc.vue';
@@ -10,7 +19,6 @@ import Disabled from '@/doc/accordion/DisabledDoc.vue';
 import DynamicDoc from '@/doc/accordion/DynamicDoc';
 import ImportDoc from '@/doc/accordion/ImportDoc';
 import MultipleDoc from '@/doc/accordion/MultipleDoc.vue';
-import StyleDoc from '@/doc/accordion/StyleDoc';
 import TemplateDoc from '@/doc/accordion/TemplateDoc.vue';
 import PTComponent from '@/doc/accordion/pt/index.vue';
 
@@ -53,18 +61,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/autocomplete/index.vue b/pages/autocomplete/index.vue
index c15ea311c..fa0b40e58 100755
--- a/pages/autocomplete/index.vue
+++ b/pages/autocomplete/index.vue
@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['AutoComplete']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -21,11 +22,11 @@ import ImportDoc from '@/doc/autocomplete/ImportDoc';
 import InvalidDoc from '@/doc/autocomplete/InvalidDoc';
 import MultipleDoc from '@/doc/autocomplete/MultipleDoc';
 import ObjectsDoc from '@/doc/autocomplete/ObjectsDoc';
-import StyleDoc from '@/doc/autocomplete/StyleDoc';
 import TemplateDoc from '@/doc/autocomplete/TemplateDoc';
 import VirtualScrollDoc from '@/doc/autocomplete/VirtualScrollDoc';
 import VeeValidateDoc from '@/doc/autocomplete/form/VeeValidateDoc.vue';
 import PTComponent from '@/doc/autocomplete/pt/index.vue';
+import ThemingDoc from '@/doc/autocomplete/theming/index.vue';
 
 export default {
     data() {
@@ -103,18 +104,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/avatar/index.vue b/pages/avatar/index.vue
index f65712300..3fca7b992 100644
--- a/pages/avatar/index.vue
+++ b/pages/avatar/index.vue
@@ -1,16 +1,23 @@
 <template>
-    <DocComponent title="Vue Avatar Component" header="Avatar" description="Avatar represents people using icons, labels and images." :componentDocs="docs" :apiDocs="['Avatar', 'AvatarGroup']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Avatar Component"
+        header="Avatar"
+        description="Avatar represents people using icons, labels and images."
+        :componentDocs="docs"
+        :apiDocs="['Avatar', 'AvatarGroup']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Avatar/theming/index.vue';
 import AccessibilityDoc from '@/doc/avatar/AccessibilityDoc';
 import AvatarGroupDoc from '@/doc/avatar/AvatarGroupDoc';
 import IconDoc from '@/doc/avatar/IconDoc';
 import ImageDoc from '@/doc/avatar/ImageDoc';
 import ImportDoc from '@/doc/avatar/ImportDoc';
 import LabelDoc from '@/doc/avatar/LabelDoc';
-import StylingAvatarDoc from '@/doc/avatar/StylingAvatarDoc';
-import StylingAvatarGroupDoc from '@/doc/avatar/StylingAvatarGroupDoc';
 import PTComponent from '@/doc/avatar/pt/index.vue';
 
 export default {
@@ -42,23 +49,14 @@ export default {
                     label: 'AvatarGroup',
                     component: AvatarGroupDoc
                 },
-                {
-                    id: 'stylingofavatar',
-                    label: 'Styling of Avatar',
-                    component: StylingAvatarDoc
-                },
-                {
-                    id: 'stylingofavatargroup',
-                    label: 'Styling of Avatar Group',
-                    component: StylingAvatarGroupDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/badge/index.vue b/pages/badge/index.vue
index f9065b43c..3681c84dc 100644
--- a/pages/badge/index.vue
+++ b/pages/badge/index.vue
@@ -1,8 +1,9 @@
 <template>
-    <DocComponent title="Vue Badge Component" header="Badge" description="Badge is a small status indicator for another element." :componentDocs="docs" :apiDocs="['Badge', 'BadgeDirective']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Badge Component" header="Badge" description="Badge is a small status indicator for another element." :componentDocs="docs" :apiDocs="['Badge', 'BadgeDirective']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Badge/theming/index.vue';
 import AccessibilityDoc from '@/doc/badge/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/badge/BasicDoc.vue';
 import ButtonDoc from '@/doc/badge/ButtonDoc.vue';
@@ -10,7 +11,6 @@ import ImportDoc from '@/doc/badge/ImportDoc.vue';
 import PositionDoc from '@/doc/badge/PositionDoc.vue';
 import SeverityDoc from '@/doc/badge/SeverityDoc.vue';
 import SizeDoc from '@/doc/badge/SizeDoc.vue';
-import StyleDoc from '@/doc/badge/StyleDoc.vue';
 import PTComponent from '@/doc/badge/pt/index.vue';
 
 export default {
@@ -47,18 +47,14 @@ export default {
                     label: 'Button',
                     component: ButtonDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/blockui/index.vue b/pages/blockui/index.vue
index 5306c1b2e..60ab52447 100755
--- a/pages/blockui/index.vue
+++ b/pages/blockui/index.vue
@@ -1,13 +1,13 @@
 <template>
-    <DocComponent title="Vue BlockUI Component" header="BlockUI" description="BlockUI can either block other components or the whole page." :componentDocs="docs" :apiDocs="['BlockUI']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue BlockUI Component" header="BlockUI" description="BlockUI can either block other components or the whole page." :componentDocs="docs" :apiDocs="['BlockUI']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Blockui/theming/index.vue';
 import AccessibilityDoc from '@/doc/blockui/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/blockui/BasicDoc.vue';
 import DocumentDoc from '@/doc/blockui/DocumentDoc.vue';
 import ImportDoc from '@/doc/blockui/ImportDoc.vue';
-import StyleDoc from '@/doc/blockui/StyleDoc.vue';
 import PTComponent from '@/doc/blockui/pt/index.vue';
 
 export default {
@@ -29,18 +29,14 @@ export default {
                     label: 'Document',
                     component: DocumentDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/breadcrumb/index.vue b/pages/breadcrumb/index.vue
index 6bbef4993..b1c095441 100755
--- a/pages/breadcrumb/index.vue
+++ b/pages/breadcrumb/index.vue
@@ -1,14 +1,22 @@
 <template>
-    <DocComponent title="Vue Breadcrumb Component" header="Breadcrumb" description="Breadcrumb provides contextual information about page hierarchy." :componentDocs="docs" :apiDocs="['Breadcrumb', 'MenuItem']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Breadcrumb Component"
+        header="Breadcrumb"
+        description="Breadcrumb provides contextual information about page hierarchy."
+        :componentDocs="docs"
+        :apiDocs="['Breadcrumb', 'MenuItem']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/breadcrumb/AccessibilityDoc';
 import BasicDoc from '@/doc/breadcrumb/BasicDoc';
 import ImportDoc from '@/doc/breadcrumb/ImportDoc';
-import StyleDoc from '@/doc/breadcrumb/StyleDoc';
 import TemplateDoc from '@/doc/breadcrumb/TemplateDoc';
 import PTComponent from '@/doc/breadcrumb/pt/index.vue';
+import ThemingDoc from '@/doc/breadcrumb/theming/index.vue';
 
 export default {
     data() {
@@ -29,18 +37,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/button/index.vue b/pages/button/index.vue
index e800ff467..316472189 100755
--- a/pages/button/index.vue
+++ b/pages/button/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue Button Component" header="Button" description="Button is an extension to standard input element with icons and theming." :componentDocs="docs" :apiDocs="['Button']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Button Component"
+        header="Button"
+        description="Button is an extension to standard input element with icons and theming."
+        :componentDocs="docs"
+        :apiDocs="['Button']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -19,10 +27,10 @@ import RaisedTextDoc from '@/doc/button/RaisedTextDoc.vue';
 import RoundedDoc from '@/doc/button/RoundedDoc.vue';
 import SeverityDoc from '@/doc/button/SeverityDoc.vue';
 import SizesDoc from '@/doc/button/SizesDoc.vue';
-import StyleDoc from '@/doc/button/StyleDoc.vue';
 import TemplateDoc from '@/doc/button/TemplateDoc.vue';
 import TextDoc from '@/doc/button/TextDoc.vue';
 import PTComponent from '@/doc/button/pt/index.vue';
+import ThemingDoc from '@/doc/button/theming/index.vue';
 
 export default {
     data() {
@@ -113,18 +121,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/calendar/index.vue b/pages/calendar/index.vue
index f56c87dbb..653b4103d 100755
--- a/pages/calendar/index.vue
+++ b/pages/calendar/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue Calendar Component" header="Calendar" description="Calendar, also known as DatePicker, is a form component to work with dates." :componentDocs="docs" :apiDocs="['Calendar']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Calendar Component"
+        header="Calendar"
+        description="Calendar, also known as DatePicker, is a form component to work with dates."
+        :componentDocs="docs"
+        :apiDocs="['Calendar']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -20,12 +28,12 @@ import MonthPickerDoc from '@/doc/calendar/MonthPickerDoc';
 import MultipleDoc from '@/doc/calendar/MultipleDoc';
 import MultipleMonthsDoc from '@/doc/calendar/MultipleMonthsDoc';
 import RangeDoc from '@/doc/calendar/RangeDoc';
-import StyleDoc from '@/doc/calendar/StyleDoc';
 import TimeDoc from '@/doc/calendar/TimeDoc';
 import TouchUIDoc from '@/doc/calendar/TouchUIDoc';
 import YearPickerDoc from '@/doc/calendar/YearPickerDoc';
 import VeeValidateDoc from '@/doc/calendar/form/VeeValidateDoc.vue';
 import PTComponent from '@/doc/calendar/pt/index.vue';
+import ThemingDoc from '@/doc/calendar/theming/index.vue';
 
 export default {
     data() {
@@ -138,18 +146,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/card/index.vue b/pages/card/index.vue
index b65bf0fff..e7ad8b4de 100755
--- a/pages/card/index.vue
+++ b/pages/card/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Card Component" header="Card" description="Card is a flexible container component." :componentDocs="docs" :apiDocs="['Card']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Card Component" header="Card" description="Card is a flexible container component." :componentDocs="docs" :apiDocs="['Card']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -7,9 +7,8 @@ import AccessibilityDoc from '@/doc/card/AccessibilityDoc';
 import AdvancedDoc from '@/doc/card/AdvancedDoc';
 import BasicDoc from '@/doc/card/BasicDoc';
 import ImportDoc from '@/doc/card/ImportDoc';
-import StyleDoc from '@/doc/card/StyleDoc';
 import PTComponent from '@/doc/card/pt/index.vue';
-
+import ThemingDoc from '@/doc/Card/theming/index.vue';
 export default {
     data() {
         return {
@@ -29,18 +28,14 @@ export default {
                     label: 'Advanced',
                     component: AdvancedDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/carousel/index.vue b/pages/carousel/index.vue
index 3ba5fd421..a7fa6b8b7 100755
--- a/pages/carousel/index.vue
+++ b/pages/carousel/index.vue
@@ -1,15 +1,23 @@
 <template>
-    <DocComponent title="Vue Carousel Component" header="Carousel" description="Carousel is a content slider featuring various customization options." :componentDocs="docs" :apiDocs="['Carousel']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Carousel Component"
+        header="Carousel"
+        description="Carousel is a content slider featuring various customization options."
+        :componentDocs="docs"
+        :apiDocs="['Carousel']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Carousel/theming/index.vue';
 import AccessibilityDoc from '@/doc/carousel/AccessibilityDoc';
 import BasicDoc from '@/doc/carousel/BasicDoc';
 import CircularDoc from '@/doc/carousel/CircularDoc';
 import ImportDoc from '@/doc/carousel/ImportDoc';
 import NumScrollDoc from '@/doc/carousel/NumScrollDoc';
 import ResponsiveDoc from '@/doc/carousel/ResponsiveDoc';
-import StyleDoc from '@/doc/carousel/StyleDoc';
 import VerticalDoc from '@/doc/carousel/VerticalDoc';
 import PTComponent from '@/doc/carousel/pt/index.vue';
 
@@ -47,18 +55,14 @@ export default {
                     label: 'Vertical',
                     component: VerticalDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/cascadeselect/index.vue b/pages/cascadeselect/index.vue
index 6dd6bf003..24e69fdb3 100644
--- a/pages/cascadeselect/index.vue
+++ b/pages/cascadeselect/index.vue
@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['CascadeSelect']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -17,10 +18,10 @@ import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc';
 import ImportDoc from '@/doc/cascadeselect/ImportDoc';
 import InvalidDoc from '@/doc/cascadeselect/InvalidDoc';
 import LoadingStateDoc from '@/doc/cascadeselect/LoadingStateDoc';
-import StyleDoc from '@/doc/cascadeselect/StyleDoc';
 import TemplateDoc from '@/doc/cascadeselect/TemplateDoc';
 import VeeValidateDoc from '@/doc/cascadeselect/form/VeeValidateDoc';
 import PTComponent from '@/doc/cascadeselect/pt/index.vue';
+import ThemingDoc from '@/doc/cascadeselect/theming/index.vue';
 
 export default {
     data() {
@@ -73,18 +74,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/checkbox/index.vue b/pages/checkbox/index.vue
index 893e2f7b7..2256d7799 100755
--- a/pages/checkbox/index.vue
+++ b/pages/checkbox/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue Checkbox Component" header="Checkbox" description="Checkbox is an extension to standard checkbox element with theming." :componentDocs="docs" :apiDocs="['Checkbox']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Checkbox Component"
+        header="Checkbox"
+        description="Checkbox is an extension to standard checkbox element with theming."
+        :componentDocs="docs"
+        :apiDocs="['Checkbox']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -10,9 +18,9 @@ import DynamicDoc from '@/doc/checkbox/DynamicDoc';
 import GroupDoc from '@/doc/checkbox/GroupDoc';
 import ImportDoc from '@/doc/checkbox/ImportDoc';
 import InvalidDoc from '@/doc/checkbox/InvalidDoc';
-import StyleDoc from '@/doc/checkbox/StyleDoc';
 import VeeValidateDoc from '@/doc/checkbox/form/VeeValidateDoc';
 import PTComponent from '@/doc/checkbox/pt/index.vue';
+import ThemingDoc from '@/doc/checkbox/theming/index.vue';
 
 export default {
     data() {
@@ -60,18 +68,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/chip/index.vue b/pages/chip/index.vue
index c9dd9b2ad..f91edbbdd 100644
--- a/pages/chip/index.vue
+++ b/pages/chip/index.vue
@@ -1,14 +1,14 @@
 <template>
-    <DocComponent title="Vue Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." :componentDocs="docs" :apiDocs="['Chip']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." :componentDocs="docs" :apiDocs="['Chip']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Chip/theming/index.vue';
 import AccessibilityDoc from '@/doc/chip/AccessibilityDoc';
 import BasicDoc from '@/doc/chip/BasicDoc';
 import IconDoc from '@/doc/chip/IconDoc';
 import ImageDoc from '@/doc/chip/ImageDoc';
 import ImportDoc from '@/doc/chip/ImportDoc';
-import StyleDoc from '@/doc/chip/StyleDoc';
 import TemplateDoc from '@/doc/chip/TemplateDoc';
 import PTComponent from '@/doc/chip/pt/index.vue';
 
@@ -41,18 +41,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/chips/index.vue b/pages/chips/index.vue
index d23358caf..80a19b6a3 100755
--- a/pages/chips/index.vue
+++ b/pages/chips/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Chips Component" header="Chips" description="Chips is used to enter multiple values on an input field." :componentDocs="docs" :apiDocs="['Chips']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Chips Component" header="Chips" description="Chips is used to enter multiple values on an input field." :componentDocs="docs" :apiDocs="['Chips']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -10,10 +10,10 @@ import FloatLabelDoc from '@/doc/chips/FloatLabelDoc';
 import ImportDoc from '@/doc/chips/ImportDoc';
 import InvalidDoc from '@/doc/chips/InvalidDoc';
 import SeparatorDoc from '@/doc/chips/SeparatorDoc';
-import StyleDoc from '@/doc/chips/StyleDoc';
 import TemplateDoc from '@/doc/chips/TemplateDoc';
 import VeeValidateDoc from '@/doc/chips/form/VeeValidateDoc';
 import PTComponent from '@/doc/chips/pt/index.vue';
+import ThemingDoc from '@/doc/chips/theming/index.vue';
 
 export default {
     data() {
@@ -66,18 +66,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/colorpicker/index.vue b/pages/colorpicker/index.vue
index 4ea7b84dd..a596a70f2 100755
--- a/pages/colorpicker/index.vue
+++ b/pages/colorpicker/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue ColorPicker Component" header="ColorPicker" description="ColorPicker is an input component to select a color." :componentDocs="docs" :apiDocs="['ColorPicker']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue ColorPicker Component" header="ColorPicker" description="ColorPicker is an input component to select a color." :componentDocs="docs" :apiDocs="['ColorPicker']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -9,9 +9,9 @@ import DisabledDoc from '@/doc/colorpicker/DisabledDoc';
 import FormatDoc from '@/doc/colorpicker/FormatDoc';
 import ImportDoc from '@/doc/colorpicker/ImportDoc';
 import InlineDoc from '@/doc/colorpicker/InlineDoc';
-import StyleDoc from '@/doc/colorpicker/StyleDoc';
 import VeeValidateDoc from '@/doc/colorpicker/form/VeeValidateDoc';
 import PTComponent from '@/doc/colorpicker/pt/index.vue';
+import ThemingDoc from '@/doc/colorpicker/theming/index.vue';
 
 export default {
     data() {
@@ -54,18 +54,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/confirmdialog/index.vue b/pages/confirmdialog/index.vue
index c375443b3..b7e2ed136 100644
--- a/pages/confirmdialog/index.vue
+++ b/pages/confirmdialog/index.vue
@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['ConfirmDialog', 'ConfirmationService-UseConfirm', 'ConfirmationOptions']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -15,9 +16,9 @@ import BasicDoc from '@/doc/confirmdialog/BasicDoc.vue';
 import ConfirmationServiceDoc from '@/doc/confirmdialog/ConfirmationServiceDoc.vue';
 import ImportDoc from '@/doc/confirmdialog/ImportDoc.vue';
 import PositionDoc from '@/doc/confirmdialog/PositionDoc.vue';
-import StyleDoc from '@/doc/confirmdialog/StyleDoc.vue';
 import TemplateDoc from '@/doc/confirmdialog/TemplateDoc.vue';
 import PTComponent from '@/doc/confirmdialog/pt/index.vue';
+import ThemingDoc from '@/doc/confirmdialog/theming/index.vue';
 
 export default {
     data() {
@@ -48,18 +49,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/confirmpopup/index.vue b/pages/confirmpopup/index.vue
index 1d061ea34..a152e9765 100644
--- a/pages/confirmpopup/index.vue
+++ b/pages/confirmpopup/index.vue
@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['ConfirmPopup', 'ConfirmationService-UseConfirm', 'ConfirmationOptions']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -14,9 +15,9 @@ import AccessibilityDoc from '@/doc/confirmpopup/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/confirmpopup/BasicDoc.vue';
 import ConfirmationServiceDoc from '@/doc/confirmpopup/ConfirmationServiceDoc.vue';
 import ImportDoc from '@/doc/confirmpopup/ImportDoc.vue';
-import StyleDoc from '@/doc/confirmpopup/StyleDoc.vue';
 import TemplateDoc from '@/doc/confirmpopup/TemplateDoc.vue';
 import PTComponent from '@/doc/confirmpopup/pt/index.vue';
+import ThemingDoc from '@/doc/confirmpopup/theming/index.vue';
 
 export default {
     data() {
@@ -42,18 +43,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/contextmenu/index.vue b/pages/contextmenu/index.vue
index 09986bdfa..2749ae1b2 100755
--- a/pages/contextmenu/index.vue
+++ b/pages/contextmenu/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue ContextMenu Component" header="ContextMenu" description="ContextMenu displays an overlay menu on right click of its target." :componentDocs="docs" :apiDocs="['ContextMenu', 'MenuItem']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue ContextMenu Component"
+        header="ContextMenu"
+        description="ContextMenu displays an overlay menu on right click of its target."
+        :componentDocs="docs"
+        :apiDocs="['ContextMenu', 'MenuItem']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -7,8 +15,8 @@ import AccessibilityDoc from '@/doc/contextmenu/AccessibilityDoc';
 import BasicDoc from '@/doc/contextmenu/BasicDoc';
 import DocumentDoc from '@/doc/contextmenu/DocumentDoc';
 import ImportDoc from '@/doc/contextmenu/ImportDoc';
-import StyleDoc from '@/doc/contextmenu/StyleDoc';
 import PTComponent from '@/doc/contextmenu/pt/index.vue';
+import ThemingDoc from '@/doc/contextmenu/theming/index.vue';
 
 export default {
     data() {
@@ -29,18 +37,14 @@ export default {
                     label: 'Document',
                     component: DocumentDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/datatable/index.vue b/pages/datatable/index.vue
index 3b450d371..136dd4b56 100755
--- a/pages/datatable/index.vue
+++ b/pages/datatable/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue Table Component" header="DataTable" description="DataTable displays data in tabular format." :componentDocs="docs" :apiDocs="['DataTable', 'Column', 'ColumnGroup', 'Row']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Table Component"
+        header="DataTable"
+        description="DataTable displays data in tabular format."
+        :componentDocs="docs"
+        :apiDocs="['DataTable', 'Column', 'ColumnGroup', 'Row']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -19,7 +27,6 @@ import RowExpansionDoc from '@/doc/datatable/RowExpansionDoc';
 import SizeDoc from '@/doc/datatable/SizeDoc';
 import StatefulDoc from '@/doc/datatable/StatefulDoc';
 import StripedRowsDoc from '@/doc/datatable/StripedRowsDoc';
-import StyleDoc from '@/doc/datatable/StyleDoc';
 import TemplateDoc from '@/doc/datatable/TemplateDoc';
 import ExpandModeDoc from '@/doc/datatable/colresize/ExpandModeDoc';
 import FitModeDoc from '@/doc/datatable/colresize/FitModeDoc';
@@ -50,6 +57,7 @@ import MultipleColumnsDoc from '@/doc/datatable/sort/MultipleColumnsDoc';
 import PresortDoc from '@/doc/datatable/sort/PresortDoc';
 import RemovableSortDoc from '@/doc/datatable/sort/RemovableSortDoc';
 import SingleColumnDoc from '@/doc/datatable/sort/SingleColumnDoc';
+import ThemingDoc from '@/doc/datatable/theming/index.vue';
 import LazyVirtualScrollDoc from '@/doc/datatable/virtualscroll/LazyVirtualScrollDoc';
 import PreloadVirtualScrollDoc from '@/doc/datatable/virtualscroll/PreloadVirtualScrollDoc';
 
@@ -347,18 +355,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/dataview/index.vue b/pages/dataview/index.vue
index 4ea9984da..f344a5393 100755
--- a/pages/dataview/index.vue
+++ b/pages/dataview/index.vue
@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['DataView', 'DataViewLayoutOptions']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -18,8 +19,8 @@ import LoadingDoc from '@/doc/dataview/LoadingDoc';
 import PaginationDoc from '@/doc/dataview/PaginationDoc';
 import PrimeFlexDoc from '@/doc/dataview/PrimeFlexDoc';
 import SortingDoc from '@/doc/dataview/SortingDoc';
-import StyleDoc from '@/doc/dataview/StyleDoc';
 import PTComponent from '@/doc/dataview/pt/index.vue';
+import ThemingDoc from '@/doc/dataview/theming/index.vue';
 
 export default {
     data() {
@@ -60,18 +61,14 @@ export default {
                     label: 'Loading',
                     component: LoadingDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/dialog/index.vue b/pages/dialog/index.vue
index b9b7eb288..1bd405b33 100755
--- a/pages/dialog/index.vue
+++ b/pages/dialog/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Dialog Component" header="Dialog" description="Dialog is a container to display content in an overlay window" :componentDocs="docs" :apiDocs="['Dialog']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Dialog Component" header="Dialog" description="Dialog is a container to display content in an overlay window" :componentDocs="docs" :apiDocs="['Dialog']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -11,9 +11,9 @@ import LongContentDoc from '@/doc/dialog/LongContentDoc';
 import MaximizableDoc from '@/doc/dialog/MaximizableDoc';
 import PositionDoc from '@/doc/dialog/PositionDoc';
 import ResponsiveDoc from '@/doc/dialog/ResponsiveDoc';
-import StyleDoc from '@/doc/dialog/StyleDoc';
 import WithoutModalDoc from '@/doc/dialog/WithoutModalDoc';
 import PTComponent from '@/doc/dialog/pt/index.vue';
+import ThemingDoc from '@/doc/dialog/theming/index.vue';
 
 export default {
     data() {
@@ -59,18 +59,14 @@ export default {
                     label: 'Maximizable',
                     component: MaximizableDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/divider/index.vue b/pages/divider/index.vue
index 4633cd71f..b5ec60caa 100644
--- a/pages/divider/index.vue
+++ b/pages/divider/index.vue
@@ -1,14 +1,14 @@
 <template>
-    <DocComponent title="Vue Divider Component" header="Divider" description="Divider is used to separate contents." :componentDocs="docs" :apiDocs="['Divider']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Divider Component" header="Divider" description="Divider is used to separate contents." :componentDocs="docs" :apiDocs="['Divider']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Divider/theming/index.vue';
 import AccessibilityDoc from '@/doc/divider/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/divider/BasicDoc.vue';
 import ContentDoc from '@/doc/divider/ContentDoc.vue';
 import ImportDoc from '@/doc/divider/ImportDoc.vue';
 import LoginDoc from '@/doc/divider/LoginDoc.vue';
-import StyleDoc from '@/doc/divider/StyleDoc.vue';
 import TypeDoc from '@/doc/divider/TypeDoc.vue';
 import VerticalDoc from '@/doc/divider/VerticalDoc.vue';
 import PTComponent from '@/doc/divider/pt/index.vue';
@@ -47,18 +47,14 @@ export default {
                     label: 'Login',
                     component: LoginDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/dock/index.vue b/pages/dock/index.vue
index 06d0ec01e..2da4e5adc 100644
--- a/pages/dock/index.vue
+++ b/pages/dock/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Dock Component" header="Dock" description="Dock is a navigation component consisting of menuitems." :componentDocs="docs" :apiDocs="['Dock']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Dock Component" header="Dock" description="Dock is a navigation component consisting of menuitems." :componentDocs="docs" :apiDocs="['Dock']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -7,8 +7,8 @@ import AccessibilityDoc from '@/doc/dock/AccessibilityDoc';
 import AdvancedDoc from '@/doc/dock/AdvancedDoc';
 import BasicDoc from '@/doc/dock/BasicDoc';
 import ImportDoc from '@/doc/dock/ImportDoc';
-import StyleDoc from '@/doc/dock/StyleDoc';
 import PTComponent from '@/doc/dock/pt/index.vue';
+import ThemingDoc from '@/doc/dock/theming/index.vue';
 
 export default {
     data() {
@@ -29,18 +29,14 @@ export default {
                     label: 'Advanced',
                     component: AdvancedDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/dropdown/index.vue b/pages/dropdown/index.vue
index 233403c43..867fd912b 100755
--- a/pages/dropdown/index.vue
+++ b/pages/dropdown/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue Select Component" header="Dropdown" description="Dropdown also known as Select, is used to choose an item from a collection of options." :componentDocs="docs" :apiDocs="['Dropdown']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Select Component"
+        header="Dropdown"
+        description="Dropdown also known as Select, is used to choose an item from a collection of options."
+        :componentDocs="docs"
+        :apiDocs="['Dropdown']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -15,11 +23,11 @@ import ImportDoc from '@/doc/dropdown/ImportDoc';
 import InvalidDoc from '@/doc/dropdown/InvalidDoc';
 import LazyVirtualScrollDoc from '@/doc/dropdown/LazyVirtualScrollDoc';
 import LoadingStateDoc from '@/doc/dropdown/LoadingStateDoc';
-import StyleDoc from '@/doc/dropdown/StyleDoc';
 import TemplateDoc from '@/doc/dropdown/TemplateDoc';
 import VirtualScrollDoc from '@/doc/dropdown/VirtualScrollDoc';
 import VeeValidateDoc from '@/doc/dropdown/form/VeeValidateDoc';
 import PTComponent from '@/doc/dropdown/pt/index.vue';
+import ThemingDoc from '@/doc/dropdown/theming/index.vue';
 
 export default {
     data() {
@@ -102,18 +110,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/fieldset/index.vue b/pages/fieldset/index.vue
index 2b8cea9ea..eeeff22c7 100755
--- a/pages/fieldset/index.vue
+++ b/pages/fieldset/index.vue
@@ -1,12 +1,12 @@
 <template>
-    <DocComponent title="Vue Fieldset Component" header="Fieldset" description="Fieldset is a grouping component with a content toggle feature." :componentDocs="docs" :apiDocs="['Fieldset']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Fieldset Component" header="Fieldset" description="Fieldset is a grouping component with a content toggle feature." :componentDocs="docs" :apiDocs="['Fieldset']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Fieldset/theming/index.vue';
 import AccessibilityDoc from '@/doc/fieldset/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/fieldset/BasicDoc.vue';
 import ImportDoc from '@/doc/fieldset/ImportDoc.vue';
-import StyleDoc from '@/doc/fieldset/StyleDoc.vue';
 import TemplateDoc from '@/doc/fieldset/TemplateDoc.vue';
 import ToggleableDoc from '@/doc/fieldset/ToggleableDoc.vue';
 import PTComponent from '@/doc/fieldset/pt/index.vue';
@@ -35,18 +35,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/fileupload/index.vue b/pages/fileupload/index.vue
index c600e3071..3fab1b0d6 100755
--- a/pages/fileupload/index.vue
+++ b/pages/fileupload/index.vue
@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['FileUpload']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -16,9 +17,9 @@ import AutoDoc from '@/doc/fileupload/AutoDoc.vue';
 import BasicDoc from '@/doc/fileupload/BasicDoc.vue';
 import CustomUploadDoc from '@/doc/fileupload/CustomUploadDoc.vue';
 import ImportDoc from '@/doc/fileupload/ImportDoc.vue';
-import StyleDoc from '@/doc/fileupload/StyleDoc.vue';
 import TemplateDoc from '@/doc/fileupload/TemplateDoc.vue';
 import PTComponent from '@/doc/fileupload/pt/index.vue';
+import ThemingDoc from '@/doc/fileupload/theming/index.vue';
 
 export default {
     data() {
@@ -54,18 +55,14 @@ export default {
                     label: 'Custom Upload',
                     component: CustomUploadDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/galleria/index.vue b/pages/galleria/index.vue
index 13d888279..ec6026710 100755
--- a/pages/galleria/index.vue
+++ b/pages/galleria/index.vue
@@ -1,8 +1,9 @@
 <template>
-    <DocComponent title="Vue Gallery Component" header="Galleria" description="Galleria is a content gallery component." :componentDocs="docs" :apiDocs="['Galleria']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Gallery Component" header="Galleria" description="Galleria is a content gallery component." :componentDocs="docs" :apiDocs="['Galleria']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Galleria/theming/index.vue';
 import AccessibilityDoc from '@/doc/galleria/AccessibilityDoc';
 import AdvancedDoc from '@/doc/galleria/AdvancedDoc';
 import AutoPlayDoc from '@/doc/galleria/AutoPlayDoc';
@@ -11,7 +12,6 @@ import CaptionDoc from '@/doc/galleria/CaptionDoc';
 import ControlledDoc from '@/doc/galleria/ControlledDoc';
 import ImportDoc from '@/doc/galleria/ImportDoc';
 import ResponsiveDoc from '@/doc/galleria/ResponsiveDoc';
-import StyleDoc from '@/doc/galleria/StyleDoc';
 import ThumbnailDoc from '@/doc/galleria/ThumbnailDoc';
 import CustomContentDoc from '@/doc/galleria/fullscreen/CustomContentDoc';
 import WithThumbnailsDoc from '@/doc/galleria/fullscreen/WithThumbnailsDoc';
@@ -146,18 +146,14 @@ export default {
                     label: 'Advanced',
                     component: AdvancedDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/image/index.vue b/pages/image/index.vue
index 0d1741e8a..620c2ba16 100644
--- a/pages/image/index.vue
+++ b/pages/image/index.vue
@@ -1,13 +1,13 @@
 <template>
-    <DocComponent title="Vue Image Component" header="Image" description="Displays a single image with preview and tranformation options." :componentDocs="docs" :apiDocs="['Image']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Image Component" header="Image" description="Displays a single image with preview and tranformation options." :componentDocs="docs" :apiDocs="['Image']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Image/theming/index.vue';
 import AccessibilityDoc from '@/doc/image/AccessibilityDoc';
 import BasicDoc from '@/doc/image/BasicDoc';
 import ImportDoc from '@/doc/image/ImportDoc';
 import PreviewDoc from '@/doc/image/PreviewDoc';
-import StyleDoc from '@/doc/image/StyleDoc';
 import TemplateDoc from '@/doc/image/TemplateDoc';
 import PTComponent from '@/doc/image/pt/index.vue';
 
@@ -35,18 +35,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/inplace/index.vue b/pages/inplace/index.vue
index 5ada49fdd..f733c9e9d 100755
--- a/pages/inplace/index.vue
+++ b/pages/inplace/index.vue
@@ -6,17 +6,18 @@
         :componentDocs="docs"
         :apiDocs="['Inplace']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Inplace/theming/index.vue';
 import AccessibilityDoc from '@/doc/inplace/AccessibilityDoc';
 import BasicDoc from '@/doc/inplace/BasicDoc';
 import ImageDoc from '@/doc/inplace/ImageDoc';
 import ImportDoc from '@/doc/inplace/ImportDoc';
 import InputDoc from '@/doc/inplace/InputDoc';
 import LazyDoc from '@/doc/inplace/LazyDoc';
-import StyleDoc from '@/doc/inplace/StyleDoc';
 import PTComponent from '@/doc/inplace/pt/index.vue';
 
 export default {
@@ -48,18 +49,14 @@ export default {
                     label: 'Lazy',
                     component: LazyDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/inputmask/index.vue b/pages/inputmask/index.vue
index 5b447d5e0..2ca56458d 100755
--- a/pages/inputmask/index.vue
+++ b/pages/inputmask/index.vue
@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['InputMask']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -19,9 +20,9 @@ import InvalidDoc from '@/doc/inputmask/InvalidDoc.vue';
 import MaskDoc from '@/doc/inputmask/MaskDoc.vue';
 import OptionalDoc from '@/doc/inputmask/OptionalDoc.vue';
 import SlotCharDoc from '@/doc/inputmask/SlotCharDoc.vue';
-import StyleDoc from '@/doc/inputmask/StyleDoc.vue';
 import VeeValidateDoc from '@/doc/inputmask/form/VeeValidateDoc.vue';
 import PTComponent from '@/doc/inputmask/pt/index.vue';
+import ThemingDoc from '@/doc/inputmask/theming/index.vue';
 
 export default {
     data() {
@@ -79,18 +80,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/inputnumber/index.vue b/pages/inputnumber/index.vue
index f4d8563c3..687714400 100755
--- a/pages/inputnumber/index.vue
+++ b/pages/inputnumber/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue InputNumber Component" header="InputNumber" description="InputNumber is an input component to provide numerical input." :componentDocs="docs" :apiDocs="['InputNumber']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue InputNumber Component"
+        header="InputNumber"
+        description="InputNumber is an input component to provide numerical input."
+        :componentDocs="docs"
+        :apiDocs="['InputNumber']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -13,10 +21,10 @@ import InvalidDoc from '@/doc/inputnumber/InvalidDoc';
 import LocaleDoc from '@/doc/inputnumber/LocaleDoc';
 import NumeralsDoc from '@/doc/inputnumber/NumeralsDoc';
 import PrefixSuffixDoc from '@/doc/inputnumber/PrefixSuffixDoc';
-import StyleDoc from '@/doc/inputnumber/StyleDoc';
 import VerticalDoc from '@/doc/inputnumber/VerticalDoc';
 import VeeValidateDoc from '@/doc/inputnumber/form/VeeValidateDoc';
 import PTComponent from '@/doc/inputnumber/pt/index.vue';
+import ThemingDoc from '@/doc/inputnumber/theming/index.vue';
 
 export default {
     data() {
@@ -84,18 +92,14 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/inputswitch/index.vue b/pages/inputswitch/index.vue
index 09a4cf31f..8d14ea5e6 100755
--- a/pages/inputswitch/index.vue
+++ b/pages/inputswitch/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue InputSwitch Component" header="InputSwitch" description="InputSwitch is used to select a boolean value." :componentDocs="docs" :apiDocs="['InputSwitch']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue InputSwitch Component" header="InputSwitch" description="InputSwitch is used to select a boolean value." :componentDocs="docs" :apiDocs="['InputSwitch']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -9,9 +9,9 @@ import DisabledDoc from '@/doc/inputswitch/DisabledDoc.vue';
 import ImportDoc from '@/doc/inputswitch/ImportDoc.vue';
 import InvalidDoc from '@/doc/inputswitch/InvalidDoc.vue';
 import PreselectionDoc from '@/doc/inputswitch/PreselectionDoc.vue';
-import StyleDoc from '@/doc/inputswitch/StyleDoc.vue';
 import VeeValidateDoc from '@/doc/inputswitch/form/VeeValidateDoc.vue';
 import PTComponent from '@/doc/inputswitch/pt/index.vue';
+import ThemingDoc from '@/doc/inputswitch/theming/index.vue';
 
 export default {
     data() {
@@ -54,18 +54,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/inputtext/index.vue b/pages/inputtext/index.vue
index 1e6733b19..2e038ec61 100755
--- a/pages/inputtext/index.vue
+++ b/pages/inputtext/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Input Component" header="InputText" description="InputText is an extension to standard input element with theming." :componentDocs="docs" :apiDocs="['InputText']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Input Component" header="InputText" description="InputText is an extension to standard input element with theming." :componentDocs="docs" :apiDocs="['InputText']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -12,9 +12,9 @@ import IconsDoc from '@/doc/inputtext/IconsDoc.vue';
 import ImportDoc from '@/doc/inputtext/ImportDoc.vue';
 import InvalidDoc from '@/doc/inputtext/InvalidDoc.vue';
 import SizesDoc from '@/doc/inputtext/SizesDoc.vue';
-import StyleDoc from '@/doc/inputtext/StyleDoc.vue';
 import VeeValidateDoc from '@/doc/inputtext/form/VeeValidateDoc.vue';
 import PTComponent from '@/doc/inputtext/pt/index.vue';
+import ThemingDoc from '@/doc/inputtext/theming/index.vue';
 
 export default {
     data() {
@@ -72,18 +72,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/knob/index.vue b/pages/knob/index.vue
index 05f0be118..ec5a488e9 100644
--- a/pages/knob/index.vue
+++ b/pages/knob/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Knob Component" header="Knob" description="Knob is a form component to define number inputs with a dial." :componentDocs="docs" :apiDocs="['Knob']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Knob Component" header="Knob" description="Knob is a form component to define number inputs with a dial." :componentDocs="docs" :apiDocs="['Knob']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -14,10 +14,10 @@ import ReadOnlyDoc from '@/doc/knob/ReadOnlyDoc.vue';
 import SizeDoc from '@/doc/knob/SizeDoc.vue';
 import StepDoc from '@/doc/knob/StepDoc.vue';
 import StrokeDoc from '@/doc/knob/StrokeDoc.vue';
-import StyleDoc from '@/doc/knob/StyleDoc.vue';
 import TemplateDoc from '@/doc/knob/TemplateDoc.vue';
 import VeeValidateDoc from '@/doc/knob/form/VeeValidateDoc.vue';
 import PTComponent from '@/doc/knob/pt/index.vue';
+import ThemingDoc from '@/doc/knob/theming/index.vue';
 
 export default {
     data() {
@@ -90,18 +90,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/listbox/index.vue b/pages/listbox/index.vue
index cd10885c7..6b953e12b 100755
--- a/pages/listbox/index.vue
+++ b/pages/listbox/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Listbox Component" header="Listbox" description="Listbox is used to select one or more values from a list of items." :componentDocs="docs" :apiDocs="['Listbox']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Listbox Component" header="Listbox" description="Listbox is used to select one or more values from a list of items." :componentDocs="docs" :apiDocs="['Listbox']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -11,11 +11,11 @@ import GroupDoc from '@/doc/listbox/GroupDoc';
 import ImportDoc from '@/doc/listbox/ImportDoc';
 import InvalidDoc from '@/doc/listbox/InvalidDoc';
 import MultipleDoc from '@/doc/listbox/MultipleDoc';
-import StyleDoc from '@/doc/listbox/StyleDoc';
 import TemplateDoc from '@/doc/listbox/TemplateDoc';
 import VirtualScrollDoc from '@/doc/listbox/VirtualScrollDoc';
 import VeeValidateDoc from '@/doc/listbox/form/VeeValidateDoc';
 import PTComponent from '@/doc/listbox/pt/index.vue';
+import ThemingDoc from '@/doc/listbox/theming/index.vue';
 
 export default {
     data() {
@@ -78,18 +78,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/megamenu/index.vue b/pages/megamenu/index.vue
index 2d6b58019..b343a47e3 100755
--- a/pages/megamenu/index.vue
+++ b/pages/megamenu/index.vue
@@ -1,15 +1,23 @@
 <template>
-    <DocComponent title="Vue MegaMenu Component" header="MegaMenu" description="MegaMenu is navigation component that displays submenus together." :componentDocs="docs" :apiDocs="['MegaMenu', 'MenuItem']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue MegaMenu Component"
+        header="MegaMenu"
+        description="MegaMenu is navigation component that displays submenus together."
+        :componentDocs="docs"
+        :apiDocs="['MegaMenu', 'MenuItem']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/megamenu/AccessibilityDoc';
 import BasicDoc from '@/doc/megamenu/BasicDoc';
 import ImportDoc from '@/doc/megamenu/ImportDoc';
-import StyleDoc from '@/doc/megamenu/StyleDoc';
 import TemplateDoc from '@/doc/megamenu/TemplateDoc';
 import VerticalDoc from '@/doc/megamenu/VerticalDoc';
 import PTComponent from '@/doc/megamenu/pt/index.vue';
+import ThemingDoc from '@/doc/megamenu/theming/index.vue';
 
 export default {
     data() {
@@ -35,18 +43,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/menu/index.vue b/pages/menu/index.vue
index 99b3b4ee3..6c6cdc28d 100755
--- a/pages/menu/index.vue
+++ b/pages/menu/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue Menu Component" header="Menu" description="Menu is a navigation/command component that supports dynamic and static positioning." :componentDocs="docs" :apiDocs="['Menu', 'MenuItem']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Menu Component"
+        header="Menu"
+        description="Menu is a navigation/command component that supports dynamic and static positioning."
+        :componentDocs="docs"
+        :apiDocs="['Menu', 'MenuItem']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -8,9 +16,9 @@ import BasicDoc from '@/doc/menu/BasicDoc';
 import GroupDoc from '@/doc/menu/GroupDoc';
 import ImportDoc from '@/doc/menu/ImportDoc';
 import PopupDoc from '@/doc/menu/PopupDoc';
-import StyleDoc from '@/doc/menu/StyleDoc';
 import TemplateDoc from '@/doc/menu/TemplateDoc';
 import PTComponent from '@/doc/menu/pt/index.vue';
+import ThemingDoc from '@/doc/menu/theming/index.vue';
 
 export default {
     data() {
@@ -41,18 +49,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/menubar/index.vue b/pages/menubar/index.vue
index bd7eef5a6..93a47858d 100755
--- a/pages/menubar/index.vue
+++ b/pages/menubar/index.vue
@@ -1,14 +1,22 @@
 <template>
-    <DocComponent title="Vue Navbar Component" header="Menubar" description="Menubar also known as Navbar, is a horizontal menu component." :componentDocs="docs" :apiDocs="['Menubar', 'MenuItem']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Navbar Component"
+        header="Menubar"
+        description="Menubar also known as Navbar, is a horizontal menu component."
+        :componentDocs="docs"
+        :apiDocs="['Menubar', 'MenuItem']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/menubar/AccessibilityDoc';
 import BasicDoc from '@/doc/menubar/BasicDoc';
 import ImportDoc from '@/doc/menubar/ImportDoc';
-import StyleDoc from '@/doc/menubar/StyleDoc';
 import TemplateDoc from '@/doc/menubar/TemplateDoc';
 import PTComponent from '@/doc/menubar/pt/index.vue';
+import ThemingDoc from '@/doc/menubar/theming/index.vue';
 
 export default {
     data() {
@@ -29,18 +37,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/message/index.vue b/pages/message/index.vue
index 2f0085002..5fcef94fb 100755
--- a/pages/message/index.vue
+++ b/pages/message/index.vue
@@ -1,8 +1,9 @@
 <template>
-    <DocComponent title="Vue Message Component" header="Message" description="Message component is used to display inline messages." :componentDocs="docs" :apiDocs="['Message']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Message Component" header="Message" description="Message component is used to display inline messages." :componentDocs="docs" :apiDocs="['Message']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Message/theming/index.vue';
 import AccessibilityDoc from '@/doc/message/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/message/BasicDoc.vue';
 import ClosabledDoc from '@/doc/message/ClosableDoc.vue';
@@ -11,7 +12,6 @@ import DynamicDoc from '@/doc/message/DynamicDoc.vue';
 import ImportDoc from '@/doc/message/ImportDoc.vue';
 import SeverityDoc from '@/doc/message/SeverityDoc.vue';
 import StickyDoc from '@/doc/message/StickyDoc.vue';
-import StyleDoc from '@/doc/message/StyleDoc.vue';
 import TemplateDoc from '@/doc/message/TemplateDoc.vue';
 import PTComponent from '@/doc/message/pt/index.vue';
 
@@ -59,18 +59,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/multiselect/index.vue b/pages/multiselect/index.vue
index e166b4f1d..e3a861867 100755
--- a/pages/multiselect/index.vue
+++ b/pages/multiselect/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue MultiSelect Component" header="MultiSelect" description="MultiSelect is used to select multiple items from a collection." :componentDocs="docs" :apiDocs="['MultiSelect']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue MultiSelect Component"
+        header="MultiSelect"
+        description="MultiSelect is used to select multiple items from a collection."
+        :componentDocs="docs"
+        :apiDocs="['MultiSelect']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -13,11 +21,11 @@ import GroupDoc from '@/doc/multiselect/GroupDoc';
 import ImportDoc from '@/doc/multiselect/ImportDoc';
 import InvalidDoc from '@/doc/multiselect/InvalidDoc';
 import LoadingStateDoc from '@/doc/multiselect/LoadingStateDoc';
-import StyleDoc from '@/doc/multiselect/StyleDoc';
 import TemplateDoc from '@/doc/multiselect/TemplateDoc';
 import VirtualScrollDoc from '@/doc/multiselect/VirtualScrollDoc';
 import VeeValidateDoc from '@/doc/multiselect/form/VeeValidateDoc';
 import PTComponent from '@/doc/multiselect/pt/index.vue';
+import ThemingDoc from '@/doc/multiselect/theming/index.vue';
 
 export default {
     data() {
@@ -90,18 +98,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/orderlist/index.vue b/pages/orderlist/index.vue
index 352922200..79677a806 100755
--- a/pages/orderlist/index.vue
+++ b/pages/orderlist/index.vue
@@ -1,13 +1,13 @@
 <template>
-    <DocComponent title="Vue OrderList Component" header="OrderList" description="OrderList is used to sort a collection." :componentDocs="docs" :apiDocs="['OrderList']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue OrderList Component" header="OrderList" description="OrderList is used to sort a collection." :componentDocs="docs" :apiDocs="['OrderList']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/orderlist/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/orderlist/BasicDoc.vue';
 import ImportDoc from '@/doc/orderlist/ImportDoc.vue';
-import StyleDoc from '@/doc/orderlist/StyleDoc.vue';
 import PTComponent from '@/doc/orderlist/pt/index.vue';
+import ThemingDoc from '@/doc/orderlist/theming/index.vue';
 
 export default {
     data() {
@@ -23,18 +23,14 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/organizationchart/index.vue b/pages/organizationchart/index.vue
index 3cc80f223..a92d63ed1 100755
--- a/pages/organizationchart/index.vue
+++ b/pages/organizationchart/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue Organization Chart Component" header="OrganizationChart" description="OrganizationChart visualizes hierarchical organization data." :componentDocs="docs" :apiDocs="['OrganizationChart']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Organization Chart Component"
+        header="OrganizationChart"
+        description="OrganizationChart visualizes hierarchical organization data."
+        :componentDocs="docs"
+        :apiDocs="['OrganizationChart']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -8,9 +16,9 @@ import BasicDoc from '@/doc/organizationchart/BasicDoc';
 import ColoredDoc from '@/doc/organizationchart/ColoredDoc';
 import ImportDoc from '@/doc/organizationchart/ImportDoc';
 import SelectionDoc from '@/doc/organizationchart/SelectionDoc';
-import StyleDoc from '@/doc/organizationchart/StyleDoc';
 import TemplateDoc from '@/doc/organizationchart/TemplateDoc';
 import PTComponent from '@/doc/organizationchart/pt/index.vue';
+import ThemingDoc from '@/doc/organizationchart/theming/index.vue';
 
 export default {
     data() {
@@ -41,18 +49,14 @@ export default {
                     label: 'Colored',
                     component: ColoredDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/overlaypanel/index.vue b/pages/overlaypanel/index.vue
index cae3e02fe..5b86ad953 100755
--- a/pages/overlaypanel/index.vue
+++ b/pages/overlaypanel/index.vue
@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['OverlayPanel']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -14,8 +15,8 @@ import AccessibilityDoc from '@/doc/overlaypanel/AccessibilityDoc';
 import BasicDoc from '@/doc/overlaypanel/BasicDoc';
 import DataTableDoc from '@/doc/overlaypanel/DataTableDoc';
 import ImportDoc from '@/doc/overlaypanel/ImportDoc';
-import StyleDoc from '@/doc/overlaypanel/StyleDoc';
 import PTComponent from '@/doc/overlaypanel/pt/index.vue';
+import ThemingDoc from '@/doc/overlaypanel/theming/index.vue';
 
 export default {
     data() {
@@ -36,18 +37,14 @@ export default {
                     label: 'DataTable',
                     component: DataTableDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/paginator/index.vue b/pages/paginator/index.vue
index 823ed2b84..662092ba2 100755
--- a/pages/paginator/index.vue
+++ b/pages/paginator/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue Paginator Component" header="Paginator" description="Paginator displays data in paged format and provides navigation between pages." :componentDocs="docs" :apiDocs="['Paginator']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Paginator Component"
+        header="Paginator"
+        description="Paginator displays data in paged format and provides navigation between pages."
+        :componentDocs="docs"
+        :apiDocs="['Paginator']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -9,9 +17,9 @@ import CurrentPageReportDoc from '@/doc/paginator/CurrentPageReportDoc.vue';
 import CustomContentDoc from '@/doc/paginator/CustomContentDoc.vue';
 import ImportDoc from '@/doc/paginator/ImportDoc.vue';
 import ResponsiveDoc from '@/doc/paginator/ResponsiveDoc.vue';
-import StyleDoc from '@/doc/paginator/StyleDoc.vue';
 import TemplateDoc from '@/doc/paginator/TemplateDoc.vue';
 import PTComponent from '@/doc/paginator/pt/index.vue';
+import ThemingDoc from '@/doc/paginator/theming/index.vue';
 
 export default {
     data() {
@@ -47,26 +55,15 @@ export default {
                     label: 'Custom Content',
                     component: CustomContentDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
 </script>
-
-<style scoped>
-.image-gallery {
-    text-align: center;
-    padding: 1rem;
-}
-</style>
diff --git a/pages/panel/index.vue b/pages/panel/index.vue
index 1e1a75418..06fd549bb 100755
--- a/pages/panel/index.vue
+++ b/pages/panel/index.vue
@@ -1,14 +1,14 @@
 <template>
-    <DocComponent title="Vue Panel Component" header="Panel" description="Panel is a grouping component providing with content toggle feature." :componentDocs="docs" :apiDocs="['Panel']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Panel Component" header="Panel" description="Panel is a grouping component providing with content toggle feature." :componentDocs="docs" :apiDocs="['Panel']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 <script>
 import AccessibilityDoc from '@/doc/panel/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/panel/BasicDoc.vue';
 import ImportDoc from '@/doc/panel/ImportDoc.vue';
-import StyleDoc from '@/doc/panel/StyleDoc.vue';
 import TemplateDoc from '@/doc/panel/TemplateDoc.vue';
 import ToggleableDoc from '@/doc/panel/ToggleableDoc.vue';
 import PTComponent from '@/doc/panel/pt/index.vue';
+import ThemingDoc from '@/doc/panel/theming/index.vue';
 
 export default {
     data() {
@@ -34,18 +34,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/panelmenu/index.vue b/pages/panelmenu/index.vue
index 792c98121..4831e26a3 100755
--- a/pages/panelmenu/index.vue
+++ b/pages/panelmenu/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue PanelMenu Component" header="PanelMenu" description="PanelMenu is a hybrid of accordion-tree components." :componentDocs="docs" :apiDocs="['PanelMenu', 'MenuItem']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue PanelMenu Component"
+        header="PanelMenu"
+        description="PanelMenu is a hybrid of accordion-tree components."
+        :componentDocs="docs"
+        :apiDocs="['PanelMenu', 'MenuItem']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -8,8 +16,8 @@ import BasicDoc from '@/doc/panelmenu/BasicDoc';
 import ImportDoc from '@/doc/panelmenu/ImportDoc';
 import MultipleDoc from '@/doc/panelmenu/MultipleDoc';
 import ProgrammaticDoc from '@/doc/panelmenu/ProgrammaticDoc';
-import StyleDoc from '@/doc/panelmenu/StyleDoc';
 import PTComponent from '@/doc/panelmenu/pt/index.vue';
+import ThemingDoc from '@/doc/panelmenu/theming/index.vue';
 
 export default {
     data() {
@@ -35,18 +43,14 @@ export default {
                     label: 'Multiple',
                     component: MultipleDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/password/index.vue b/pages/password/index.vue
index 9cfe69fd7..2ade18623 100755
--- a/pages/password/index.vue
+++ b/pages/password/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Password Component" header="Password" description="Password displays strength indicator for password fields." :componentDocs="docs" :apiDocs="['Password']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Password Component" header="Password" description="Password displays strength indicator for password fields." :componentDocs="docs" :apiDocs="['Password']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -11,11 +11,11 @@ import ImportDoc from '@/doc/password/ImportDoc.vue';
 import InvalidDoc from '@/doc/password/InvalidDoc.vue';
 import LocaleDoc from '@/doc/password/LocaleDoc.vue';
 import MeterDoc from '@/doc/password/MeterDoc.vue';
-import StyleDoc from '@/doc/password/StyleDoc.vue';
 import TemplateDoc from '@/doc/password/TemplateDoc.vue';
 import ToggleMaskDoc from '@/doc/password/ToggleMaskDoc.vue';
 import VeeValidateDoc from '@/doc/password/form/VeeValidateDoc.vue';
 import PTComponent from '@/doc/password/pt/index.vue';
+import ThemingDoc from '@/doc/password/theming/index.vue';
 
 export default {
     data() {
@@ -78,18 +78,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/picklist/index.vue b/pages/picklist/index.vue
index 3f8f15d9e..df41fbf73 100755
--- a/pages/picklist/index.vue
+++ b/pages/picklist/index.vue
@@ -1,13 +1,13 @@
 <template>
-    <DocComponent title="Vue PickList Component" header="PickList" description="PickList is used to reorder items between different lists." :componentDocs="docs" :apiDocs="['PickList']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue PickList Component" header="PickList" description="PickList is used to reorder items between different lists." :componentDocs="docs" :apiDocs="['PickList']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/picklist/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/picklist/BasicDoc.vue';
 import ImportDoc from '@/doc/picklist/ImportDoc.vue';
-import StyleDoc from '@/doc/picklist/StyleDoc.vue';
 import PTComponent from '@/doc/picklist/pt/index.vue';
+import ThemingDoc from '@/doc/picklist/theming/index.vue';
 
 export default {
     data() {
@@ -23,18 +23,14 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/progressbar/index.vue b/pages/progressbar/index.vue
index 852098f81..2ab2486cf 100755
--- a/pages/progressbar/index.vue
+++ b/pages/progressbar/index.vue
@@ -1,14 +1,14 @@
 <template>
-    <DocComponent title="Vue ProgressBar Component" header="ProgressBar" description="ProgressBar is a process status indicator." :componentDocs="docs" :apiDocs="['ProgressBar']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue ProgressBar Component" header="ProgressBar" description="ProgressBar is a process status indicator." :componentDocs="docs" :apiDocs="['ProgressBar']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Progressbar/theming/index.vue';
 import AccessibilityDoc from '@/doc/progressbar/AccessibilityDoc';
 import BasicDoc from '@/doc/progressbar/BasicDoc';
 import DynamicDoc from '@/doc/progressbar/DynamicDoc';
 import ImportDoc from '@/doc/progressbar/ImportDoc';
 import IndeterminateDoc from '@/doc/progressbar/IndeterminateDoc';
-import StyleDoc from '@/doc/progressbar/StyleDoc';
 import TemplateDoc from '@/doc/progressbar/TemplateDoc';
 import PTComponent from '@/doc/progressbar/pt/index.vue';
 
@@ -41,18 +41,14 @@ export default {
                     label: 'Indeterminate',
                     component: IndeterminateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/radiobutton/index.vue b/pages/radiobutton/index.vue
index b52037950..6391242f8 100755
--- a/pages/radiobutton/index.vue
+++ b/pages/radiobutton/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue RadioButton Component" header="RadioButton" description="RadioButton is an extension to standard radio button element with theming." :componentDocs="docs" :apiDocs="['RadioButton']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue RadioButton Component"
+        header="RadioButton"
+        description="RadioButton is an extension to standard radio button element with theming."
+        :componentDocs="docs"
+        :apiDocs="['RadioButton']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -9,9 +17,9 @@ import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
 import GroupDoc from '@/doc/radiobutton/GroupDoc.vue';
 import ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
 import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
-import StyleDoc from '@/doc/radiobutton/StyleDoc.vue';
 import VeeValidateDoc from '@/doc/radiobutton/form/VeeValidateDoc.vue';
 import PTComponent from '@/doc/radiobutton/pt/index.vue';
+import ThemingDoc from '@/doc/radiobutton/theming/index.vue';
 
 export default {
     data() {
@@ -54,18 +62,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/rating/index.vue b/pages/rating/index.vue
index e80fbce94..571e52719 100755
--- a/pages/rating/index.vue
+++ b/pages/rating/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Rating Component" header="Rating" description="Rating component is a star based selection input." :componentDocs="docs" :apiDocs="['Rating']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Rating Component" header="Rating" description="Rating component is a star based selection input." :componentDocs="docs" :apiDocs="['Rating']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -9,10 +9,10 @@ import DisabledDoc from '@/doc/rating/DisabledDoc.vue';
 import ImportDoc from '@/doc/rating/ImportDoc.vue';
 import NumberOfStarsDoc from '@/doc/rating/NumberOfStarsDoc.vue';
 import ReadOnlyDoc from '@/doc/rating/ReadOnlyDoc.vue';
-import StyleDoc from '@/doc/rating/StyleDoc.vue';
 import TemplateDoc from '@/doc/rating/TemplateDoc.vue';
 import WithoutCancelDoc from '@/doc/rating/WithoutCancelDoc.vue';
 import PTComponent from '@/doc/rating/pt/index.vue';
+import ThemingDoc from '@/doc/rating/theming/index.vue';
 
 export default {
     data() {
@@ -53,18 +53,14 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/selectbutton/index.vue b/pages/selectbutton/index.vue
index 0cc830923..a80953c24 100755
--- a/pages/selectbutton/index.vue
+++ b/pages/selectbutton/index.vue
@@ -1,17 +1,26 @@
 <template>
-    <DocComponent title="Vue SelectButton Component" header="SelectButton" description="Slider is a component to provide input with a drag handle." :componentDocs="docs" :apiDocs="['SelectButton']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue SelectButton Component"
+        header="SelectButton"
+        description="Slider is a component to provide input with a drag handle."
+        :componentDocs="docs"
+        :apiDocs="['SelectButton']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/selectbutton/AccessibilityDoc';
 import BasicDoc from '@/doc/selectbutton/BasicDoc';
 import DisabledDoc from '@/doc/selectbutton/DisabledDoc';
-import VeeValidateDoc from '@/doc/selectbutton/form/VeeValidateDoc';
 import ImportDoc from '@/doc/selectbutton/ImportDoc';
 import InvalidDoc from '@/doc/selectbutton/InvalidDoc';
 import MultipleDoc from '@/doc/selectbutton/MultipleDoc';
 import TemplateDoc from '@/doc/selectbutton/TemplateDoc';
+import VeeValidateDoc from '@/doc/selectbutton/form/VeeValidateDoc';
 import PTComponent from '@/doc/selectbutton/pt/index.vue';
+import ThemingDoc from '@/doc/selectbutton/theming/index.vue';
 
 export default {
     data() {
@@ -65,7 +74,8 @@ export default {
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/sidebar/index.vue b/pages/sidebar/index.vue
index bf82a479b..d736da67d 100755
--- a/pages/sidebar/index.vue
+++ b/pages/sidebar/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue Sidebar Component" header="Sidebar" description="Sidebar, also known as Drawer, is a container component displayed as an overlay." :componentDocs="docs" :apiDocs="['Sidebar']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Sidebar Component"
+        header="Sidebar"
+        description="Sidebar, also known as Drawer, is a container component displayed as an overlay."
+        :componentDocs="docs"
+        :apiDocs="['Sidebar']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -9,9 +17,9 @@ import FullScreenDoc from '@/doc/sidebar/FullScreenDoc';
 import ImportDoc from '@/doc/sidebar/ImportDoc';
 import PositionDoc from '@/doc/sidebar/PositionDoc';
 import SizeDoc from '@/doc/sidebar/SizeDoc';
-import StyleDoc from '@/doc/sidebar/StyleDoc';
 import TemplateDoc from '@/doc/sidebar/TemplateDoc';
 import PTComponent from '@/doc/sidebar/pt/index.vue';
+import ThemingDoc from '@/doc/sidebar/theming/index.vue';
 
 export default {
     data() {
@@ -47,18 +55,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/skeleton/index.vue b/pages/skeleton/index.vue
index 5ec3351b7..302b86005 100644
--- a/pages/skeleton/index.vue
+++ b/pages/skeleton/index.vue
@@ -1,15 +1,23 @@
 <template>
-    <DocComponent title="Vue Skeleton Component" header="Skeleton" description="Skeleton is a placeholder to display instead of the actual content." :componentDocs="docs" :apiDocs="['Skeleton']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Skeleton Component"
+        header="Skeleton"
+        description="Skeleton is a placeholder to display instead of the actual content."
+        :componentDocs="docs"
+        :apiDocs="['Skeleton']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Skeleton/theming/index.vue';
 import Accessibility from '@/doc/skeleton/AccessibilityDoc.vue';
 import CardDoc from '@/doc/skeleton/CardDoc.vue';
 import DataTableDoc from '@/doc/skeleton/DataTableDoc.vue';
 import ImportDoc from '@/doc/skeleton/ImportDoc.vue';
 import ListDoc from '@/doc/skeleton/ListDoc.vue';
 import ShapesDoc from '@/doc/skeleton/ShapesDoc.vue';
-import StyleDoc from '@/doc/skeleton/StyleDoc.vue';
 import PTComponent from '@/doc/skeleton/pt/index.vue';
 
 export default {
@@ -41,18 +49,14 @@ export default {
                     label: 'Datatable',
                     component: DataTableDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: Accessibility
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/slider/index.vue b/pages/slider/index.vue
index 4ecf1f03b..b184d423c 100755
--- a/pages/slider/index.vue
+++ b/pages/slider/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Slider Component" header="Slider" description="Slider is a component to provide input with a drag handle." :componentDocs="docs" :apiDocs="['Slider']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Slider Component" header="Slider" description="Slider is a component to provide input with a drag handle." :componentDocs="docs" :apiDocs="['Slider']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -9,9 +9,9 @@ import ImportDoc from '@/doc/slider/ImportDoc';
 import InputDoc from '@/doc/slider/InputDoc';
 import RangeDoc from '@/doc/slider/RangeDoc';
 import StepDoc from '@/doc/slider/StepDoc';
-import StyleDoc from '@/doc/slider/StyleDoc';
 import VerticalDoc from '@/doc/slider/VerticalDoc';
 import PTComponent from '@/doc/slider/pt/index.vue';
+import ThemingDoc from '@/doc/slider/theming/index.vue';
 
 export default {
     data() {
@@ -47,18 +47,14 @@ export default {
                     label: 'Vertical',
                     component: VerticalDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/speeddial/index.vue b/pages/speeddial/index.vue
index cd8cbd08c..4e7380f45 100644
--- a/pages/speeddial/index.vue
+++ b/pages/speeddial/index.vue
@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['SpeedDial']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -20,6 +21,7 @@ import QuarterCircleDoc from '@/doc/speeddial/QuarterCircleDoc.vue';
 import SemiCircleDoc from '@/doc/speeddial/SemiCircleDoc.vue';
 import TooltipDoc from '@/doc/speeddial/TooltipDoc.vue';
 import PTComponent from '@/doc/speeddial/pt/index.vue';
+import ThemingDoc from '@/doc/speeddial/theming/index.vue';
 
 export default {
     data() {
@@ -35,7 +37,8 @@ export default {
                 { id: 'custom', label: 'Custom', component: CustomDoc },
                 { id: 'accessibility', label: 'Accessibility', component: AccessibilityDoc }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/splitbutton/index.vue b/pages/splitbutton/index.vue
index 6ee689bf5..17fdd743a 100755
--- a/pages/splitbutton/index.vue
+++ b/pages/splitbutton/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue SplitButton Component" header="SplitButton" description="SplitButton groups a set of commands in an overlay with a default command." :componentDocs="docs" :apiDocs="['SplitButton']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue SplitButton Component"
+        header="SplitButton"
+        description="SplitButton groups a set of commands in an overlay with a default command."
+        :componentDocs="docs"
+        :apiDocs="['SplitButton']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -13,10 +21,10 @@ 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 StyleDoc from '@/doc/splitbutton/StyleDoc.vue';
 import TemplateDoc from '@/doc/splitbutton/TemplateDoc.vue';
 import TextDoc from '@/doc/splitbutton/TextDoc.vue';
 import PTComponent from '@/doc/splitbutton/pt/index.vue';
+import ThemingDoc from '@/doc/splitbutton/theming/index.vue';
 
 export default {
     data() {
@@ -77,18 +85,14 @@ export default {
                     label: 'Disabled',
                     component: DisabledDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/splitter/index.vue b/pages/splitter/index.vue
index 1f85d5501..930e01862 100644
--- a/pages/splitter/index.vue
+++ b/pages/splitter/index.vue
@@ -1,14 +1,22 @@
 <template>
-    <DocComponent title="Vue Splitter Component" header="Splitter" description="Splitter is utilized to separate and resize panels." :componentDocs="docs" :apiDocs="['Splitter', 'SplitterPanel']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Splitter Component"
+        header="Splitter"
+        description="Splitter is utilized to separate and resize panels."
+        :componentDocs="docs"
+        :apiDocs="['Splitter', 'SplitterPanel']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Splitter/theming/index.vue';
 import AccessibilityDoc from '@/doc/splitter/AccessibilityDoc';
 import HorizontalDoc from '@/doc/splitter/HorizontalDoc.vue';
 import ImportDoc from '@/doc/splitter/ImportDoc';
 import NestedDoc from '@/doc/splitter/NestedDoc.vue';
 import SizeDoc from '@/doc/splitter/SizeDoc.vue';
-import StyleDoc from '@/doc/splitter/StyleDoc';
 import VerticalDoc from '@/doc/splitter/VerticalDoc.vue';
 import PTComponent from '@/doc/splitter/pt/index.vue';
 
@@ -41,18 +49,14 @@ export default {
                     label: 'Nested',
                     component: NestedDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/steps.vue b/pages/steps.vue
index 8cf38334b..d7b183cdd 100755
--- a/pages/steps.vue
+++ b/pages/steps.vue
@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['Steps', 'MenuItem']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -14,8 +15,8 @@ import AccessibilityDoc from '@/doc/steps/AccessibilityDoc';
 import BasicDoc from '@/doc/steps/BasicDoc';
 import ImportDoc from '@/doc/steps/ImportDoc';
 import InteractiveDoc from '@/doc/steps/InteractiveDoc';
-import StyleDoc from '@/doc/steps/StyleDoc';
 import PTComponent from '@/doc/steps/pt/index.vue';
+import ThemingDoc from '@/doc/steps/theming/index.vue';
 
 export default {
     data() {
@@ -36,18 +37,14 @@ export default {
                     label: 'Interactive',
                     component: InteractiveDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/tabmenu.vue b/pages/tabmenu.vue
index 6fade7a5f..32f81d96e 100755
--- a/pages/tabmenu.vue
+++ b/pages/tabmenu.vue
@@ -1,14 +1,22 @@
 <template>
-    <DocComponent title="Vue TabMenu Component" header="TabMenu" description="TabMenu is a navigation/command component that displays items as tab headers." :componentDocs="docs" :apiDocs="['TabMenu', 'MenuItem']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue TabMenu Component"
+        header="TabMenu"
+        description="TabMenu is a navigation/command component that displays items as tab headers."
+        :componentDocs="docs"
+        :apiDocs="['TabMenu', 'MenuItem']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
 import PTComponent from '@/doc/tabmenu/pt/index.vue';
+import ThemingDoc from '@/doc/tabmenu/theming/index.vue';
 import AccessibilityDoc from '../doc/tabmenu/AccessibilityDoc.vue';
 import BasicDoc from '../doc/tabmenu/BasicDoc.vue';
 import ControlledDoc from '../doc/tabmenu/ControlledDoc.vue';
 import ImportDoc from '../doc/tabmenu/ImportDoc.vue';
-import StyleDoc from '../doc/tabmenu/StyleDoc.vue';
 
 export default {
     data() {
@@ -29,25 +37,15 @@ export default {
                     label: 'Controlled',
                     component: ControlledDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
 </script>
-
-<style scoped lang="scss">
-::v-deep(.tabmenudemo-content) {
-    padding: 2rem 1rem;
-}
-</style>
diff --git a/pages/tabview/index.vue b/pages/tabview/index.vue
index eed864574..b626c7d56 100755
--- a/pages/tabview/index.vue
+++ b/pages/tabview/index.vue
@@ -1,8 +1,17 @@
 <template>
-    <DocComponent title="Vue Tabs Component" header="TabView" description="TabView is a container component to group content with tabs." :componentDocs="docs" :apiDocs="['TabView', 'TabPanel']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Tabs Component"
+        header="TabView"
+        description="TabView is a container component to group content with tabs."
+        :componentDocs="docs"
+        :apiDocs="['TabView', 'TabPanel']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Tabview/theming/index.vue';
 import AccessibilityDoc from '@/doc/tabview/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/tabview/BasicDoc.vue';
 import ControlledDoc from '@/doc/tabview/ControlledDoc.vue';
@@ -10,7 +19,6 @@ import DisabledDoc from '@/doc/tabview/DisabledDoc.vue';
 import DynamicDoc from '@/doc/tabview/DynamicDoc.vue';
 import ImportDoc from '@/doc/tabview/ImportDoc.vue';
 import ScrollableDoc from '@/doc/tabview/ScrollableDoc.vue';
-import StyleDoc from '@/doc/tabview/StyleDoc.vue';
 import TemplateDoc from '@/doc/tabview/TemplateDoc.vue';
 import PTComponent from '@/doc/tabview/pt/index.vue';
 
@@ -53,18 +61,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/tag/index.vue b/pages/tag/index.vue
index a28f923c6..519c4246d 100644
--- a/pages/tag/index.vue
+++ b/pages/tag/index.vue
@@ -1,15 +1,15 @@
 <template>
-    <DocComponent title="Vue Tag Component" header="Tag" description="Tag component is used to categorize content." :componentDocs="docs" :apiDocs="['Tag']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Tag Component" header="Tag" description="Tag component is used to categorize content." :componentDocs="docs" :apiDocs="['Tag']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Tag/theming/index.vue';
 import AccessibilityDoc from '@/doc/tag/AccessibilityDoc';
 import BasicDoc from '@/doc/tag/BasicDoc';
 import IconDoc from '@/doc/tag/IconDoc';
 import ImportDoc from '@/doc/tag/ImportDoc';
 import PillDoc from '@/doc/tag/PillDoc';
 import SeverityDoc from '@/doc/tag/SeverityDoc';
-import StyleDoc from '@/doc/tag/StyleDoc';
 import TemplateDoc from '@/doc/tag/TemplateDoc';
 import PTComponent from '@/doc/tag/pt/index.vue';
 
@@ -47,18 +47,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/terminal/index.vue b/pages/terminal/index.vue
index cc006c454..32989afbc 100755
--- a/pages/terminal/index.vue
+++ b/pages/terminal/index.vue
@@ -1,12 +1,12 @@
 <template>
-    <DocComponent title="Vue Terminal Component" header="Terminal" description="Terminal is a text based user interface." :componentDocs="docs" :apiDocs="['Terminal', 'TerminalService']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Terminal Component" header="Terminal" description="Terminal is a text based user interface." :componentDocs="docs" :apiDocs="['Terminal', 'TerminalService']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
+import ThemingDoc from '@/doc/Terminal/theming/index.vue';
 import AccessibilityDoc from '@/doc/terminal/AccessibilityDoc';
 import BasicDoc from '@/doc/terminal/BasicDoc';
 import ImportDoc from '@/doc/terminal/ImportDoc';
-import StyleDoc from '@/doc/terminal/StyleDoc';
 import PTComponent from '@/doc/terminal/pt/index.vue';
 
 export default {
@@ -23,18 +23,14 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/textarea/index.vue b/pages/textarea/index.vue
index 597d42f59..aab4bce68 100755
--- a/pages/textarea/index.vue
+++ b/pages/textarea/index.vue
@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['Textarea']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -17,9 +18,9 @@ import DisabledDoc from '@/doc/textarea/DisabledDoc';
 import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc';
 import ImportDoc from '@/doc/textarea/ImportDoc';
 import InvalidDoc from '@/doc/textarea/InvalidDoc';
-import StyleDoc from '@/doc/textarea/StyleDoc';
 import VeeValidateDoc from '@/doc/textarea/form/VeeValidateDoc.vue';
 import PTComponent from '@/doc/textarea/pt/index.vue';
+import ThemingDoc from '@/doc/textarea/theming/index.vue';
 
 export default {
     data() {
@@ -67,18 +68,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/tieredmenu/index.vue b/pages/tieredmenu/index.vue
index 01d6b9619..9a51d3658 100755
--- a/pages/tieredmenu/index.vue
+++ b/pages/tieredmenu/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue TieredMenu Component" header="TieredMenu" description="TieredMenu displays submenus in nested overlays." :componentDocs="docs" :apiDocs="['TieredMenu', 'MenuItem']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue TieredMenu Component"
+        header="TieredMenu"
+        description="TieredMenu displays submenus in nested overlays."
+        :componentDocs="docs"
+        :apiDocs="['TieredMenu', 'MenuItem']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -7,8 +15,8 @@ import AccessibilityDoc from '@/doc/tieredmenu/AccessibilityDoc';
 import BasicDoc from '@/doc/tieredmenu/BasicDoc';
 import ImportDoc from '@/doc/tieredmenu/ImportDoc';
 import PopupDoc from '@/doc/tieredmenu/PopupDoc';
-import StyleDoc from '@/doc/tieredmenu/StyleDoc';
 import PTComponent from '@/doc/tieredmenu/pt/index.vue';
+import ThemingDoc from '@/doc/tieredmenu/theming/index.vue';
 
 export default {
     data() {
@@ -29,18 +37,14 @@ export default {
                     label: 'Popup',
                     component: PopupDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/timeline/index.vue b/pages/timeline/index.vue
index 5f06982a3..529e5d346 100644
--- a/pages/timeline/index.vue
+++ b/pages/timeline/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Timeline Component" header="Timeline" description="Timeline visualizes a series of chained events." :componentDocs="docs" :apiDocs="['Timeline']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Timeline Component" header="Timeline" description="Timeline visualizes a series of chained events." :componentDocs="docs" :apiDocs="['Timeline']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -9,9 +9,9 @@ import BasicDoc from '@/doc/timeline/BasicDoc';
 import HorizontalDoc from '@/doc/timeline/HorizontalDoc';
 import ImportDoc from '@/doc/timeline/ImportDoc';
 import OppositeDoc from '@/doc/timeline/OppositeDoc';
-import StyleDoc from '@/doc/timeline/StyleDoc';
 import TemplateDoc from '@/doc/timeline/TemplateDoc';
 import PTComponent from '@/doc/timeline/pt/index.vue';
+import ThemingDoc from '@/doc/timeline/theming/index.vue';
 
 export default {
     data() {
@@ -47,41 +47,15 @@ export default {
                     label: 'Horizontal',
                     component: HorizontalDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
 </script>
-
-<style lang="scss" scoped>
-@media screen and (max-width: 960px) {
-    ::v-deep(.customized-timeline) {
-        .p-timeline-event:nth-child(even) {
-            flex-direction: row !important;
-
-            .p-timeline-event-content {
-                text-align: left !important;
-            }
-        }
-
-        .p-timeline-event-opposite {
-            flex: 0;
-        }
-
-        .p-card {
-            margin-top: 1rem;
-        }
-    }
-}
-</style>
diff --git a/pages/togglebutton/index.vue b/pages/togglebutton/index.vue
index 956a6740a..b2ed75cde 100755
--- a/pages/togglebutton/index.vue
+++ b/pages/togglebutton/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue ToggleButton Component" header="ToggleButton" description="ToggleButton is used to select a boolean value using a button." :componentDocs="docs" :apiDocs="['ToggleButton']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue ToggleButton Component"
+        header="ToggleButton"
+        description="ToggleButton is used to select a boolean value using a button."
+        :componentDocs="docs"
+        :apiDocs="['ToggleButton']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -7,10 +15,10 @@ import AccessibilityDoc from '@/doc/togglebutton/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/togglebutton/BasicDoc.vue';
 import CustomizedDoc from '@/doc/togglebutton/CustomizedDoc.vue';
 import DisabledDoc from '@/doc/togglebutton/DisabledDoc.vue';
-import VeeValidateDoc from '@/doc/togglebutton/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/togglebutton/ImportDoc.vue';
-import StyleDoc from '@/doc/togglebutton/StyleDoc.vue';
+import VeeValidateDoc from '@/doc/togglebutton/form/VeeValidateDoc.vue';
 import PTComponent from '@/doc/togglebutton/pt/index.vue';
+import ThemingDoc from '@/doc/togglebutton/theming/index.vue';
 
 export default {
     data() {
@@ -48,18 +56,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/toolbar/index.vue b/pages/toolbar/index.vue
index 627fcc0c1..895060e07 100755
--- a/pages/toolbar/index.vue
+++ b/pages/toolbar/index.vue
@@ -1,11 +1,11 @@
 <template>
-    <DocComponent title="Vue Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." :componentDocs="docs" :apiDocs="['Toolbar']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." :componentDocs="docs" :apiDocs="['Toolbar']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 <script>
+import ThemingDoc from '@/doc/Toolbar/theming/index.vue';
 import AccessibilityDoc from '@/doc/toolbar/AccessibilityDoc';
 import BasicDoc from '@/doc/toolbar/BasicDoc';
 import ImportDoc from '@/doc/toolbar/ImportDoc';
-import StyleDoc from '@/doc/toolbar/StyleDoc';
 import PTComponent from '@/doc/toolbar/pt/index.vue';
 
 export default {
@@ -22,18 +22,14 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/tree/index.vue b/pages/tree/index.vue
index f19ff8691..95d37be3d 100755
--- a/pages/tree/index.vue
+++ b/pages/tree/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Tree Component" header="Tree" description="Tree is used to display hierarchical data." :componentDocs="docs" :apiDocs="['Tree']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Tree Component" header="Tree" description="Tree is used to display hierarchical data." :componentDocs="docs" :apiDocs="['Tree']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 <script>
 import AccessibilityDoc from '@/doc/tree/AccessibilityDoc.vue';
@@ -9,12 +9,12 @@ import EventsDoc from '@/doc/tree/EventsDoc.vue';
 import FilterDoc from '@/doc/tree/FilterDoc.vue';
 import ImportDoc from '@/doc/tree/ImportDoc.vue';
 import LazyDoc from '@/doc/tree/LazyDoc.vue';
-import StyleDoc from '@/doc/tree/StyleDoc.vue';
 import TemplateDoc from '@/doc/tree/TemplateDoc.vue';
 import PTComponent from '@/doc/tree/pt/index.vue';
 import CheckboxDoc from '@/doc/tree/selection/CheckboxDoc.vue';
 import MultipleDoc from '@/doc/tree/selection/MultipleDoc.vue';
 import SingleDoc from '@/doc/tree/selection/SingleDoc.vue';
+import ThemingDoc from '@/doc/tree/theming/index.vue';
 
 export default {
     data() {
@@ -76,25 +76,15 @@ export default {
                     label: 'Filter',
                     component: FilterDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
 </script>
-
-<style scoped>
-button {
-    margin-right: 0.5rem;
-}
-</style>
diff --git a/pages/treeselect/index.vue b/pages/treeselect/index.vue
index 217c6a01e..28e380743 100644
--- a/pages/treeselect/index.vue
+++ b/pages/treeselect/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue TreeSelect Component" header="TreeSelect" description="TreeSelect is a form component to choose from hierarchical data." :componentDocs="docs" :apiDocs="['TreeSelect']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue TreeSelect Component"
+        header="TreeSelect"
+        description="TreeSelect is a form component to choose from hierarchical data."
+        :componentDocs="docs"
+        :apiDocs="['TreeSelect']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -11,9 +19,9 @@ import FloatLabelDoc from '@/doc/treeselect/FloatLabelDoc';
 import ImportDoc from '@/doc/treeselect/ImportDoc';
 import InvalidDoc from '@/doc/treeselect/InvalidDoc';
 import MultipleDoc from '@/doc/treeselect/MultipleDoc';
-import StyleDoc from '@/doc/treeselect/StyleDoc';
 import VeeValidateDoc from '@/doc/treeselect/form/VeeValidateDoc.vue';
 import PTComponent from '@/doc/treeselect/pt/index.vue';
+import ThemingDoc from '@/doc/treeselect/theming/index.vue';
 
 export default {
     data() {
@@ -66,18 +74,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/treetable/index.vue b/pages/treetable/index.vue
index ac55ee34c..79178eb96 100755
--- a/pages/treetable/index.vue
+++ b/pages/treetable/index.vue
@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue TreeTable Component" header="TreeTable" description="TreeTable is used to display hierarchical data in tabular format." :componentDocs="docs" :apiDocs="['TreeTable', 'Column']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue TreeTable Component"
+        header="TreeTable"
+        description="TreeTable is used to display hierarchical data in tabular format."
+        :componentDocs="docs"
+        :apiDocs="['TreeTable', 'Column']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -13,7 +21,6 @@ import ImportDoc from '@/doc/treetable/ImportDoc';
 import LazyLoadDoc from '@/doc/treetable/LazyLoadDoc';
 import ResponsiveDoc from '@/doc/treetable/ResponsiveDoc';
 import SizeDoc from '@/doc/treetable/SizeDoc';
-import StyleDoc from '@/doc/treetable/StyleDoc';
 import TemplateDoc from '@/doc/treetable/TemplateDoc';
 import PaginatorBasicDoc from '@/doc/treetable/paginator/PaginatorBasicDoc';
 import PaginatorTemplateDoc from '@/doc/treetable/paginator/PaginatorTemplateDoc';
@@ -31,6 +38,7 @@ import SingleRowSelectionDoc from '@/doc/treetable/selection/SingleRowSelectionD
 import MultipleColumnsDoc from '@/doc/treetable/sort/MultipleColumnsDoc';
 import RemovableSortDoc from '@/doc/treetable/sort/RemovableSortDoc';
 import SingleColumnDoc from '@/doc/treetable/sort/SingleColumnDoc';
+import ThemingDoc from '@/doc/treetable/theming/index.vue';
 
 export default {
     data() {
@@ -191,18 +199,14 @@ export default {
                     label: 'Responsive',
                     component: ResponsiveDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/pages/tristatecheckbox/index.vue b/pages/tristatecheckbox/index.vue
index 970283d32..a6dda863d 100755
--- a/pages/tristatecheckbox/index.vue
+++ b/pages/tristatecheckbox/index.vue
@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['TriStateCheckbox']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -13,11 +14,11 @@
 import AccessibilityDoc from '@/doc/tristatecheckbox/AccessibilityDoc';
 import BasicDoc from '@/doc/tristatecheckbox/BasicDoc';
 import DisabledDoc from '@/doc/tristatecheckbox/DisabledDoc';
-import VeeValidateDoc from '@/doc/tristatecheckbox/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/tristatecheckbox/ImportDoc';
 import InvalidDoc from '@/doc/tristatecheckbox/InvalidDoc';
-import StyleDoc from '@/doc/tristatecheckbox/StyleDoc';
+import VeeValidateDoc from '@/doc/tristatecheckbox/form/VeeValidateDoc.vue';
 import PTComponent from '@/doc/tristatecheckbox/pt/index.vue';
+import ThemingDoc from '@/doc/tristatecheckbox/theming/index.vue';
 
 export default {
     data() {
@@ -55,18 +56,14 @@ export default {
                         }
                     ]
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };
diff --git a/rollup.config.js b/rollup.config.js
index 4a0d1fff3..8161109dd 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -92,7 +92,8 @@ const CORE_DEPENDENCIES = {
     'primevue/tree': 'primevue.tree',
     'primevue/menu': 'primevue.menu',
     'primevue/tieredmenu': 'primevue.tieredmenu',
-    'primevue/badge': 'primevue.badge'
+    'primevue/badge': 'primevue.badge',
+    'primevue/tailwind': 'primevue.tailwind'
 };
 
 // dependencies
@@ -282,6 +283,10 @@ function addConfig() {
     addEntry('config', 'PrimeVue.js', 'config');
 }
 
+function addTailwind() {
+    addEntry('tailwind', 'Tailwind', 'tailwind');
+}
+
 function addUtils() {
     addEntry('utils', 'Utils.js', 'utils');
 }
@@ -317,6 +322,7 @@ addDirectives();
 addServices();
 addSFC();
 addIcon();
+addTailwind();
 addCore();
 
 export default entries;
diff --git a/vite.config.js b/vite.config.js
index 40a29c413..790a18d00 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -79,7 +79,8 @@ export default {
             'primevue/overlayeventbus': path.resolve(__dirname, './components/lib/overlayeventbus/OverlayEventBus.js'),
             'primevue/terminalservice': path.resolve(__dirname, './components/lib/terminalservice/TerminalService.js'),
             'primevue/dynamicdialogeventbus': path.resolve(__dirname, './components/lib/dynamicdialogeventbus/DynamicDialogEventBus.js'),
-            'primevue/virtualscroller': path.resolve(__dirname, './components/lib/virtualscroller/VirtualScroller.vue')
+            'primevue/virtualscroller': path.resolve(__dirname, './components/lib/virtualscroller/VirtualScroller.vue'),
+            'primevue/tailwind': path.resolve(__dirname, './components/lib/tailwind/Tailwind.js')
         }
     }
 };