From 4edfa8a12cf843a61cb69baeb3db247015b4dd83 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 10 Mar 2025 16:16:44 +0300
Subject: [PATCH] Preset section is added to Theming tab

---
 apps/showcase/assets/styles/layout/_doc.scss  | 51 +++++++++++++----
 .../showcase/assets/styles/layout/layout.scss |  4 +-
 .../components/doc/DocStyledPreset.vue        | 56 +++++++++++++++++++
 apps/showcase/components/doc/helpers/index.js |  3 +-
 apps/showcase/doc/accordion/theming/index.vue |  7 +++
 .../doc/autocomplete/theming/index.vue        |  7 +++
 apps/showcase/doc/avatar/theming/index.vue    |  7 +++
 apps/showcase/doc/badge/theming/index.vue     | 13 +++++
 apps/showcase/doc/blockui/theming/index.vue   |  7 +++
 .../showcase/doc/breadcrumb/theming/index.vue |  7 +++
 apps/showcase/doc/button/theming/index.vue    |  7 +++
 apps/showcase/doc/card/theming/index.vue      |  7 +++
 apps/showcase/doc/carousel/theming/index.vue  |  7 +++
 .../doc/cascadeselect/theming/index.vue       |  7 +++
 apps/showcase/doc/checkbox/theming/index.vue  |  7 +++
 apps/showcase/doc/chip/theming/index.vue      |  7 +++
 .../doc/colorpicker/theming/index.vue         |  7 +++
 .../doc/confirmdialog/theming/index.vue       |  7 +++
 .../doc/confirmpopup/theming/index.vue        |  7 +++
 .../doc/contextmenu/theming/index.vue         |  7 +++
 apps/showcase/doc/datatable/theming/index.vue |  7 +++
 apps/showcase/doc/dataview/theming/index.vue  |  7 +++
 .../showcase/doc/datepicker/theming/index.vue |  7 +++
 apps/showcase/doc/dialog/theming/index.vue    |  7 +++
 apps/showcase/doc/divider/theming/index.vue   |  7 +++
 apps/showcase/doc/dock/theming/index.vue      |  7 +++
 apps/showcase/doc/drawer/theming/index.vue    |  7 +++
 apps/showcase/doc/editor/theming/index.vue    |  7 +++
 apps/showcase/doc/fieldset/theming/index.vue  |  7 +++
 .../showcase/doc/fileupload/theming/index.vue |  7 +++
 .../showcase/doc/floatlabel/theming/index.vue |  7 +++
 apps/showcase/doc/galleria/theming/index.vue  |  7 +++
 apps/showcase/doc/iconfield/theming/index.vue |  7 +++
 apps/showcase/doc/iftalabel/theming/index.vue |  7 +++
 apps/showcase/doc/image/theming/index.vue     |  7 +++
 .../doc/imagecompare/theming/index.vue        |  7 +++
 apps/showcase/doc/inplace/theming/index.vue   |  7 +++
 .../showcase/doc/inputgroup/theming/index.vue |  7 +++
 .../doc/inputnumber/theming/index.vue         |  7 +++
 apps/showcase/doc/inputotp/theming/index.vue  | 16 +++++-
 apps/showcase/doc/inputtext/theming/index.vue |  7 +++
 apps/showcase/doc/knob/theming/index.vue      |  7 +++
 apps/showcase/doc/listbox/theming/index.vue   |  7 +++
 apps/showcase/doc/megamenu/theming/index.vue  |  7 +++
 apps/showcase/doc/menu/theming/index.vue      |  7 +++
 apps/showcase/doc/menubar/theming/index.vue   |  7 +++
 apps/showcase/doc/message/theming/index.vue   |  7 +++
 .../showcase/doc/metergroup/theming/index.vue |  7 +++
 .../doc/multiselect/theming/index.vue         |  7 +++
 apps/showcase/doc/orderlist/theming/index.vue |  7 +++
 .../doc/organizationchart/theming/index.vue   |  7 +++
 apps/showcase/doc/paginator/theming/index.vue |  7 +++
 apps/showcase/doc/panel/theming/index.vue     |  7 +++
 apps/showcase/doc/panelmenu/theming/index.vue |  7 +++
 apps/showcase/doc/password/theming/index.vue  |  7 +++
 apps/showcase/doc/picklist/theming/index.vue  |  7 +++
 apps/showcase/doc/popover/theming/index.vue   |  7 +++
 .../doc/progressbar/theming/index.vue         |  7 +++
 .../doc/progressspinner/theming/index.vue     |  7 +++
 .../doc/radiobutton/theming/index.vue         |  7 +++
 apps/showcase/doc/rating/theming/index.vue    |  7 +++
 apps/showcase/doc/ripple/theming/index.vue    |  7 +++
 .../doc/scrollpanel/theming/index.vue         |  7 +++
 apps/showcase/doc/select/theming/index.vue    |  7 +++
 .../doc/selectbutton/theming/index.vue        |  7 +++
 apps/showcase/doc/skeleton/theming/index.vue  |  7 +++
 apps/showcase/doc/slider/theming/index.vue    |  7 +++
 apps/showcase/doc/speeddial/theming/index.vue |  7 +++
 .../doc/splitbutton/theming/index.vue         |  7 +++
 apps/showcase/doc/splitter/theming/index.vue  |  7 +++
 apps/showcase/doc/stepper/theming/index.vue   |  7 +++
 apps/showcase/doc/tabs/theming/index.vue      |  7 +++
 apps/showcase/doc/tag/theming/index.vue       |  7 +++
 apps/showcase/doc/terminal/theming/index.vue  |  7 +++
 apps/showcase/doc/textarea/theming/index.vue  |  7 +++
 .../showcase/doc/tieredmenu/theming/index.vue |  7 +++
 apps/showcase/doc/timeline/theming/index.vue  |  7 +++
 apps/showcase/doc/toast/theming/index.vue     |  7 +++
 .../doc/togglebutton/theming/index.vue        |  7 +++
 .../doc/toggleswitch/theming/index.vue        |  7 +++
 apps/showcase/doc/toolbar/theming/index.vue   |  7 +++
 apps/showcase/doc/tooltip/theming/index.vue   |  7 +++
 apps/showcase/doc/tree/theming/index.vue      |  7 +++
 .../showcase/doc/treeselect/theming/index.vue |  7 +++
 apps/showcase/doc/treetable/theming/index.vue |  7 +++
 .../doc/virtualscroller/theming/index.vue     | 16 +++++-
 86 files changed, 697 insertions(+), 15 deletions(-)
 create mode 100644 apps/showcase/components/doc/DocStyledPreset.vue

diff --git a/apps/showcase/assets/styles/layout/_doc.scss b/apps/showcase/assets/styles/layout/_doc.scss
index 982cb2947..8b3e2505b 100644
--- a/apps/showcase/assets/styles/layout/_doc.scss
+++ b/apps/showcase/assets/styles/layout/_doc.scss
@@ -112,7 +112,7 @@
     align-items: center;
     scroll-margin-top: 6.5rem;
 
-    > a {
+    >a {
         color: var(--primary-text-color);
         opacity: 0.7;
         margin-inline-start: 1rem;
@@ -123,7 +123,7 @@
         @include focus-visible();
     }
 
-    > .doc-section-label-badge {
+    >.doc-section-label-badge {
         margin-inline-start: 0.5rem;
     }
 
@@ -132,7 +132,7 @@
     }
 
     &:hover {
-        > a {
+        >a {
             display: block;
 
             &:hover {
@@ -143,7 +143,7 @@
 }
 
 .doc-section-description {
-    > p {
+    >p {
         font-size: 1.125rem;
 
         i {
@@ -185,7 +185,7 @@
     overflow-x: hidden;
     align-self: flex-start;
 
-    > .navbar-item {
+    >.navbar-item {
         .navbar-item-content {
             border-inline-start: 1px solid var(--border-color);
             padding-inline-start: .25rem;
@@ -198,7 +198,7 @@
     }
 
     .navbar-item {
-        > .navbar-item-content {
+        >.navbar-item-content {
             display: flex;
 
             button {
@@ -230,7 +230,7 @@
         }
 
         &.active-navbar-item {
-            > .navbar-item-content {
+            >.navbar-item-content {
                 border-color: var(--primary-text-color);
 
                 button {
@@ -282,7 +282,7 @@
     right: .75rem;
     gap: .5rem;
     display: none;
-    background: rgba(255,255,255,.05);
+    background: rgba(255, 255, 255, .05);
     border-radius: 10px;
     padding: 2px;
     backdrop-filter: blur(6px);
@@ -299,7 +299,7 @@
         cursor: pointer;
 
         &:hover {
-            background-color: rgba(255,255,255,.1);
+            background-color: rgba(255, 255, 255, .1);
             color: var(--code-button-text-color);
         }
 
@@ -370,7 +370,8 @@
                 }
             }
 
-            .doc-option-name, i:not(.pi) {
+            .doc-option-name,
+            i:not(.pi) {
                 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
                 position: relative;
                 scroll-margin-top: 6.5rem;
@@ -478,3 +479,33 @@
         }
     }
 }
+
+.doc-preset-table {
+    border-collapse: collapse;
+    width: 100%;
+    min-width: 640px;
+    margin-bottom: 1.5rem;
+
+    th {
+        border-bottom: 1px solid var(--border-color);
+        padding-block: .75rem;
+        padding-inline: 1rem;
+        text-align: start;
+        text-transform: capitalize;
+    }
+
+    td {
+        padding-block: .75rem;
+        padding-inline: 1rem;
+        border-bottom: 1px solid var(--border-color);
+        white-space: pre-line;
+        line-height: 1.5;
+        scroll-margin-top: 6.5rem;
+
+        &:first-child {
+            color: var(--primary-text-color);
+            font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+            font-weight: 600;
+        }
+    }
+}
\ No newline at end of file
diff --git a/apps/showcase/assets/styles/layout/layout.scss b/apps/showcase/assets/styles/layout/layout.scss
index d15826645..f2abda045 100644
--- a/apps/showcase/assets/styles/layout/layout.scss
+++ b/apps/showcase/assets/styles/layout/layout.scss
@@ -11,9 +11,9 @@
 @import './_news';
 @import './_footer';
 @import './_code';
-@import './_doc';
+@import './_doc.scss';
 @import './_docsearch';
 @import './_responsive';
 @import './_animation';
 @import './_templates';
-@import './landing/_landing';
+@import './landing/_landing';
\ No newline at end of file
diff --git a/apps/showcase/components/doc/DocStyledPreset.vue b/apps/showcase/components/doc/DocStyledPreset.vue
new file mode 100644
index 000000000..ac4b325d3
--- /dev/null
+++ b/apps/showcase/components/doc/DocStyledPreset.vue
@@ -0,0 +1,56 @@
+<template>
+    <DocSectionText>
+        <p>PrimeVue offers various preset options that allow you to customize the component's styling to match your application's design system. Below you'll find links to the implementation and type definitions for each preset.</p>
+        <div class="doc-tablewrapper mt-4">
+            <table class="doc-preset-table">
+                <thead>
+                    <tr>
+                        <th v-for="header in headers" :key="header">
+                            <template v-if="header !== 'readonly' && header !== 'optional' && header !== 'deprecated'">
+                                {{ header }}
+                            </template>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="preset in presets" :key="preset">
+                        <td :class="`doc-option-preset-name-${preset.toLowerCase()}`">{{ preset }}</td>
+                        <td :class="`doc-option-preset-implementation-${preset.toLowerCase()}`">
+                            <a
+                                :href="`https://github.com/primefaces/primeuix/blob/main/packages/themes/src/presets/${preset.toLowerCase()}/${$attrs.data}/index.ts`"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm dark:bg-surface-800 dark:hover:bg-surface-700"
+                            >
+                                <span class="text-surface-900 dark:text-surface-50 font-medium">{{ preset }}</span>
+                                <i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i>
+                            </a>
+                        </td>
+                        <td :class="`doc-option-preset-type-${preset.toLowerCase()}`">
+                            <a
+                                :href="`https://github.com/primefaces/primeuix/blob/main/packages/themes/src/presets/${preset.toLowerCase()}/${$attrs.data}/index.d.ts`"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm dark:bg-surface-800 dark:hover:bg-surface-700"
+                            >
+                                <span class="text-surface-900 dark:text-surface-50 font-medium">{{ preset }}</span>
+                                <i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i>
+                            </a>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            headers: ['Preset', 'Implementation', 'Types'],
+            presets: ['Aura', 'Lara', 'Nora', 'Material']
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/components/doc/helpers/index.js b/apps/showcase/components/doc/helpers/index.js
index ce828b8f2..e2c31ae97 100644
--- a/apps/showcase/components/doc/helpers/index.js
+++ b/apps/showcase/components/doc/helpers/index.js
@@ -66,7 +66,8 @@ export const getTokenOptions = (name) => {
         for (const [_, value] of Object.entries(tokens)) {
             data.push({
                 token: value.token,
-                variable: value.variable,
+                property: value.name.split('.').slice(1).join('.'),
+                'CSS Variable': value.variable,
                 description: value.description
             });
         }
diff --git a/apps/showcase/doc/accordion/theming/index.vue b/apps/showcase/doc/accordion/theming/index.vue
index db5de5b02..c23b60e2c 100644
--- a/apps/showcase/doc/accordion/theming/index.vue
+++ b/apps/showcase/doc/accordion/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -55,6 +56,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Accordion')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'accordion'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/autocomplete/theming/index.vue b/apps/showcase/doc/autocomplete/theming/index.vue
index 5fc9017e7..73441795f 100644
--- a/apps/showcase/doc/autocomplete/theming/index.vue
+++ b/apps/showcase/doc/autocomplete/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('AutoComplete')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'autocomplete'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/avatar/theming/index.vue b/apps/showcase/doc/avatar/theming/index.vue
index 4e8a22221..4d7b350d8 100644
--- a/apps/showcase/doc/avatar/theming/index.vue
+++ b/apps/showcase/doc/avatar/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Avatar')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'avatar'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/badge/theming/index.vue b/apps/showcase/doc/badge/theming/index.vue
index b5a442fea..e1098630b 100644
--- a/apps/showcase/doc/badge/theming/index.vue
+++ b/apps/showcase/doc/badge/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -41,6 +42,18 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Badge')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Badge Preset',
+                            component: DocStyledPreset,
+                            data: 'badge'
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'OverlayBadge Preset',
+                            component: DocStyledPreset,
+                            data: 'overlaybadge'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/blockui/theming/index.vue b/apps/showcase/doc/blockui/theming/index.vue
index 36d21154f..35b9afeee 100644
--- a/apps/showcase/doc/blockui/theming/index.vue
+++ b/apps/showcase/doc/blockui/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('BlockUI')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'blockui'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/breadcrumb/theming/index.vue b/apps/showcase/doc/breadcrumb/theming/index.vue
index 9d221820a..3485e202f 100644
--- a/apps/showcase/doc/breadcrumb/theming/index.vue
+++ b/apps/showcase/doc/breadcrumb/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Breadcrumb')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'breadcrumb'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/button/theming/index.vue b/apps/showcase/doc/button/theming/index.vue
index 0012bbbdb..419b666ac 100644
--- a/apps/showcase/doc/button/theming/index.vue
+++ b/apps/showcase/doc/button/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -41,6 +42,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Button')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'button'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/card/theming/index.vue b/apps/showcase/doc/card/theming/index.vue
index d603af38a..a65e218ce 100644
--- a/apps/showcase/doc/card/theming/index.vue
+++ b/apps/showcase/doc/card/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Card')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'card'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/carousel/theming/index.vue b/apps/showcase/doc/carousel/theming/index.vue
index 536e123b1..9dff688bd 100644
--- a/apps/showcase/doc/carousel/theming/index.vue
+++ b/apps/showcase/doc/carousel/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Carousel')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'carousel'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/cascadeselect/theming/index.vue b/apps/showcase/doc/cascadeselect/theming/index.vue
index 34aa33856..f8ebbbadb 100644
--- a/apps/showcase/doc/cascadeselect/theming/index.vue
+++ b/apps/showcase/doc/cascadeselect/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('CascadeSelect')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'cascadeselect'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/checkbox/theming/index.vue b/apps/showcase/doc/checkbox/theming/index.vue
index 62c5629bf..1823c2242 100644
--- a/apps/showcase/doc/checkbox/theming/index.vue
+++ b/apps/showcase/doc/checkbox/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Checkbox')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'checkbox'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/chip/theming/index.vue b/apps/showcase/doc/chip/theming/index.vue
index 9c07a158a..0b3a4c7fa 100644
--- a/apps/showcase/doc/chip/theming/index.vue
+++ b/apps/showcase/doc/chip/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Chip')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'chip'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/colorpicker/theming/index.vue b/apps/showcase/doc/colorpicker/theming/index.vue
index 16bf800c7..f9b4bae8e 100644
--- a/apps/showcase/doc/colorpicker/theming/index.vue
+++ b/apps/showcase/doc/colorpicker/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('ColorPicker')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'colorpicker'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/confirmdialog/theming/index.vue b/apps/showcase/doc/confirmdialog/theming/index.vue
index 0f39a4226..2a9008658 100644
--- a/apps/showcase/doc/confirmdialog/theming/index.vue
+++ b/apps/showcase/doc/confirmdialog/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('ConfirmDialog')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'confirmdialog'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/confirmpopup/theming/index.vue b/apps/showcase/doc/confirmpopup/theming/index.vue
index 71f787032..15a448d50 100644
--- a/apps/showcase/doc/confirmpopup/theming/index.vue
+++ b/apps/showcase/doc/confirmpopup/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('ConfirmPopup')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'confirmpopup'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/contextmenu/theming/index.vue b/apps/showcase/doc/contextmenu/theming/index.vue
index 2fa95069c..6d15e8689 100644
--- a/apps/showcase/doc/contextmenu/theming/index.vue
+++ b/apps/showcase/doc/contextmenu/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('ContextMenu')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'contextmenu'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/datatable/theming/index.vue b/apps/showcase/doc/datatable/theming/index.vue
index 6e3c5eddb..7706becf9 100644
--- a/apps/showcase/doc/datatable/theming/index.vue
+++ b/apps/showcase/doc/datatable/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('DataTable')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'datatable'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/dataview/theming/index.vue b/apps/showcase/doc/dataview/theming/index.vue
index 202b8af2b..640d22480 100644
--- a/apps/showcase/doc/dataview/theming/index.vue
+++ b/apps/showcase/doc/dataview/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('DataView')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'dataview'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/datepicker/theming/index.vue b/apps/showcase/doc/datepicker/theming/index.vue
index 941c6493e..1d6e4076c 100644
--- a/apps/showcase/doc/datepicker/theming/index.vue
+++ b/apps/showcase/doc/datepicker/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('DatePicker')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'datepicker'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/dialog/theming/index.vue b/apps/showcase/doc/dialog/theming/index.vue
index 62411ddc2..cb074014e 100644
--- a/apps/showcase/doc/dialog/theming/index.vue
+++ b/apps/showcase/doc/dialog/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Dialog')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'dialog'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/divider/theming/index.vue b/apps/showcase/doc/divider/theming/index.vue
index af2576b90..4d80ddb11 100644
--- a/apps/showcase/doc/divider/theming/index.vue
+++ b/apps/showcase/doc/divider/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Divider')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'divider'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/dock/theming/index.vue b/apps/showcase/doc/dock/theming/index.vue
index acfc6c9ca..0aa4ec231 100644
--- a/apps/showcase/doc/dock/theming/index.vue
+++ b/apps/showcase/doc/dock/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Dock')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'dock'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/drawer/theming/index.vue b/apps/showcase/doc/drawer/theming/index.vue
index 95be94e9c..f5aaa807d 100644
--- a/apps/showcase/doc/drawer/theming/index.vue
+++ b/apps/showcase/doc/drawer/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Drawer')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'drawer'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/editor/theming/index.vue b/apps/showcase/doc/editor/theming/index.vue
index e380aa2db..ac45e84a1 100644
--- a/apps/showcase/doc/editor/theming/index.vue
+++ b/apps/showcase/doc/editor/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Editor')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'editor'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/fieldset/theming/index.vue b/apps/showcase/doc/fieldset/theming/index.vue
index 586b223ea..048ee745c 100644
--- a/apps/showcase/doc/fieldset/theming/index.vue
+++ b/apps/showcase/doc/fieldset/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Fieldset')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'fieldset'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/fileupload/theming/index.vue b/apps/showcase/doc/fileupload/theming/index.vue
index 0ccb18b68..f523d8e20 100644
--- a/apps/showcase/doc/fileupload/theming/index.vue
+++ b/apps/showcase/doc/fileupload/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('FileUpload')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'fileupload'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/floatlabel/theming/index.vue b/apps/showcase/doc/floatlabel/theming/index.vue
index 4e3995fa4..e04ce9276 100644
--- a/apps/showcase/doc/floatlabel/theming/index.vue
+++ b/apps/showcase/doc/floatlabel/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('FloatLabel')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'floatlabel'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/galleria/theming/index.vue b/apps/showcase/doc/galleria/theming/index.vue
index ec1d132da..84d1a92ac 100644
--- a/apps/showcase/doc/galleria/theming/index.vue
+++ b/apps/showcase/doc/galleria/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Galleria')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'galleria'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/iconfield/theming/index.vue b/apps/showcase/doc/iconfield/theming/index.vue
index 4ecebbf18..465dfa6d3 100644
--- a/apps/showcase/doc/iconfield/theming/index.vue
+++ b/apps/showcase/doc/iconfield/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -41,6 +42,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('IconField')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'iconfield'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/iftalabel/theming/index.vue b/apps/showcase/doc/iftalabel/theming/index.vue
index 7439af3b9..f07f34433 100644
--- a/apps/showcase/doc/iftalabel/theming/index.vue
+++ b/apps/showcase/doc/iftalabel/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('IftaLabel')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'iftalabel'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/image/theming/index.vue b/apps/showcase/doc/image/theming/index.vue
index 214d01f30..76a4866ef 100644
--- a/apps/showcase/doc/image/theming/index.vue
+++ b/apps/showcase/doc/image/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Image')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'image'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/imagecompare/theming/index.vue b/apps/showcase/doc/imagecompare/theming/index.vue
index d4293517c..2db27f773 100644
--- a/apps/showcase/doc/imagecompare/theming/index.vue
+++ b/apps/showcase/doc/imagecompare/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('ImageCompare')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'imagecompare'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/inplace/theming/index.vue b/apps/showcase/doc/inplace/theming/index.vue
index 7b239103e..2c9f0dd70 100644
--- a/apps/showcase/doc/inplace/theming/index.vue
+++ b/apps/showcase/doc/inplace/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Inplace')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'inplace'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/inputgroup/theming/index.vue b/apps/showcase/doc/inputgroup/theming/index.vue
index 04d771e3a..72663afb0 100644
--- a/apps/showcase/doc/inputgroup/theming/index.vue
+++ b/apps/showcase/doc/inputgroup/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -41,6 +42,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('InputGroup')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'inputgroup'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/inputnumber/theming/index.vue b/apps/showcase/doc/inputnumber/theming/index.vue
index 46795244c..abc2bc282 100644
--- a/apps/showcase/doc/inputnumber/theming/index.vue
+++ b/apps/showcase/doc/inputnumber/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('InputNumber')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'inputnumber'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/inputotp/theming/index.vue b/apps/showcase/doc/inputotp/theming/index.vue
index 337304ba6..1d020f545 100644
--- a/apps/showcase/doc/inputotp/theming/index.vue
+++ b/apps/showcase/doc/inputotp/theming/index.vue
@@ -10,7 +10,8 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getStyleOptions } from '@/components/doc/helpers';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
+import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -27,6 +28,19 @@ export default {
                             description: 'List of class names used in the styled mode.',
                             component: DocApiTable,
                             data: getStyleOptions('InputOtp')
+                        },
+                        {
+                            id: 'theming.tokens',
+                            label: 'Design Tokens',
+                            description: 'List of design tokens used in a preset.',
+                            component: DocApiTable,
+                            data: getTokenOptions('InputOtp')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'inputotp'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/inputtext/theming/index.vue b/apps/showcase/doc/inputtext/theming/index.vue
index 12365791d..a1bc7fbff 100644
--- a/apps/showcase/doc/inputtext/theming/index.vue
+++ b/apps/showcase/doc/inputtext/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('InputText')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'inputtext'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/knob/theming/index.vue b/apps/showcase/doc/knob/theming/index.vue
index 045560d10..d490cf997 100644
--- a/apps/showcase/doc/knob/theming/index.vue
+++ b/apps/showcase/doc/knob/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Knob')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'knob'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/listbox/theming/index.vue b/apps/showcase/doc/listbox/theming/index.vue
index 865daf148..29ffcc54a 100644
--- a/apps/showcase/doc/listbox/theming/index.vue
+++ b/apps/showcase/doc/listbox/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Listbox')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'listbox'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/megamenu/theming/index.vue b/apps/showcase/doc/megamenu/theming/index.vue
index c418ad6dc..70cdc9341 100644
--- a/apps/showcase/doc/megamenu/theming/index.vue
+++ b/apps/showcase/doc/megamenu/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('MegaMenu')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'megamenu'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/menu/theming/index.vue b/apps/showcase/doc/menu/theming/index.vue
index 3748577f2..3d64bb430 100644
--- a/apps/showcase/doc/menu/theming/index.vue
+++ b/apps/showcase/doc/menu/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Menu')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'menu'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/menubar/theming/index.vue b/apps/showcase/doc/menubar/theming/index.vue
index 928dd6d57..5c90fb704 100644
--- a/apps/showcase/doc/menubar/theming/index.vue
+++ b/apps/showcase/doc/menubar/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Menubar')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'menubar'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/message/theming/index.vue b/apps/showcase/doc/message/theming/index.vue
index 4ee53c09b..7ed295f02 100644
--- a/apps/showcase/doc/message/theming/index.vue
+++ b/apps/showcase/doc/message/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Message')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'message'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/metergroup/theming/index.vue b/apps/showcase/doc/metergroup/theming/index.vue
index 1d02acfed..f019a2d2d 100644
--- a/apps/showcase/doc/metergroup/theming/index.vue
+++ b/apps/showcase/doc/metergroup/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('MeterGroup')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'metergroup'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/multiselect/theming/index.vue b/apps/showcase/doc/multiselect/theming/index.vue
index 69a1cb62e..949576ae1 100644
--- a/apps/showcase/doc/multiselect/theming/index.vue
+++ b/apps/showcase/doc/multiselect/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('MultiSelect')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'multiselect'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/orderlist/theming/index.vue b/apps/showcase/doc/orderlist/theming/index.vue
index 1e4813c83..02ec90bfe 100644
--- a/apps/showcase/doc/orderlist/theming/index.vue
+++ b/apps/showcase/doc/orderlist/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('OrderList')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'orderlist'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/organizationchart/theming/index.vue b/apps/showcase/doc/organizationchart/theming/index.vue
index cee0468fd..abe73053f 100644
--- a/apps/showcase/doc/organizationchart/theming/index.vue
+++ b/apps/showcase/doc/organizationchart/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('OrganizationChart')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'organizationchart'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/paginator/theming/index.vue b/apps/showcase/doc/paginator/theming/index.vue
index e1865bccc..b9a602d69 100644
--- a/apps/showcase/doc/paginator/theming/index.vue
+++ b/apps/showcase/doc/paginator/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Paginator')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'paginator'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/panel/theming/index.vue b/apps/showcase/doc/panel/theming/index.vue
index 76bda8106..95cf4218d 100644
--- a/apps/showcase/doc/panel/theming/index.vue
+++ b/apps/showcase/doc/panel/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Panel')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'panel'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/panelmenu/theming/index.vue b/apps/showcase/doc/panelmenu/theming/index.vue
index b66616fea..804ad07cb 100644
--- a/apps/showcase/doc/panelmenu/theming/index.vue
+++ b/apps/showcase/doc/panelmenu/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('PanelMenu')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'panelmenu'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/password/theming/index.vue b/apps/showcase/doc/password/theming/index.vue
index e14aec985..86e55b991 100644
--- a/apps/showcase/doc/password/theming/index.vue
+++ b/apps/showcase/doc/password/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Password')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'password'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/picklist/theming/index.vue b/apps/showcase/doc/picklist/theming/index.vue
index 15a1e48f9..b719759b8 100644
--- a/apps/showcase/doc/picklist/theming/index.vue
+++ b/apps/showcase/doc/picklist/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('PickList')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'picklist'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/popover/theming/index.vue b/apps/showcase/doc/popover/theming/index.vue
index bd56557c7..9e53860e7 100644
--- a/apps/showcase/doc/popover/theming/index.vue
+++ b/apps/showcase/doc/popover/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Popover')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'popover'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/progressbar/theming/index.vue b/apps/showcase/doc/progressbar/theming/index.vue
index a314211f7..724b7f959 100644
--- a/apps/showcase/doc/progressbar/theming/index.vue
+++ b/apps/showcase/doc/progressbar/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('ProgressBar')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'progressbar'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/progressspinner/theming/index.vue b/apps/showcase/doc/progressspinner/theming/index.vue
index 04004ee4d..ca0ce0d87 100644
--- a/apps/showcase/doc/progressspinner/theming/index.vue
+++ b/apps/showcase/doc/progressspinner/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('ProgressSpinner')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'progressspinner'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/radiobutton/theming/index.vue b/apps/showcase/doc/radiobutton/theming/index.vue
index 4386d7c35..823f544f4 100644
--- a/apps/showcase/doc/radiobutton/theming/index.vue
+++ b/apps/showcase/doc/radiobutton/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('RadioButton')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'radiobutton'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/rating/theming/index.vue b/apps/showcase/doc/rating/theming/index.vue
index 04503dc18..cbf256407 100644
--- a/apps/showcase/doc/rating/theming/index.vue
+++ b/apps/showcase/doc/rating/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Rating')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'rating'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/ripple/theming/index.vue b/apps/showcase/doc/ripple/theming/index.vue
index 2aadd5c10..24f379f68 100644
--- a/apps/showcase/doc/ripple/theming/index.vue
+++ b/apps/showcase/doc/ripple/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Ripple')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'ripple'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/scrollpanel/theming/index.vue b/apps/showcase/doc/scrollpanel/theming/index.vue
index aa1b1f63d..a615196ee 100644
--- a/apps/showcase/doc/scrollpanel/theming/index.vue
+++ b/apps/showcase/doc/scrollpanel/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('ScrollPanel')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'scrollpanel'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/select/theming/index.vue b/apps/showcase/doc/select/theming/index.vue
index c46ef3aef..b37331979 100644
--- a/apps/showcase/doc/select/theming/index.vue
+++ b/apps/showcase/doc/select/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Select')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'select'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/selectbutton/theming/index.vue b/apps/showcase/doc/selectbutton/theming/index.vue
index 4d9bc759a..ccec9eb9e 100644
--- a/apps/showcase/doc/selectbutton/theming/index.vue
+++ b/apps/showcase/doc/selectbutton/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('SelectButton')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'selectbutton'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/skeleton/theming/index.vue b/apps/showcase/doc/skeleton/theming/index.vue
index 8fd7927ac..7733c5dc9 100644
--- a/apps/showcase/doc/skeleton/theming/index.vue
+++ b/apps/showcase/doc/skeleton/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Skeleton')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'skeleton'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/slider/theming/index.vue b/apps/showcase/doc/slider/theming/index.vue
index f59610c7f..57f04bc84 100644
--- a/apps/showcase/doc/slider/theming/index.vue
+++ b/apps/showcase/doc/slider/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Slider')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'slider'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/speeddial/theming/index.vue b/apps/showcase/doc/speeddial/theming/index.vue
index 2116ff499..fde3e4f6e 100644
--- a/apps/showcase/doc/speeddial/theming/index.vue
+++ b/apps/showcase/doc/speeddial/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('SpeedDial')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'speeddial'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/splitbutton/theming/index.vue b/apps/showcase/doc/splitbutton/theming/index.vue
index 5864468ad..2d21f2745 100644
--- a/apps/showcase/doc/splitbutton/theming/index.vue
+++ b/apps/showcase/doc/splitbutton/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('SplitButton')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'splitbutton'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/splitter/theming/index.vue b/apps/showcase/doc/splitter/theming/index.vue
index 7cdfb6b46..d22c5a2a6 100644
--- a/apps/showcase/doc/splitter/theming/index.vue
+++ b/apps/showcase/doc/splitter/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -41,6 +42,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Splitter')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'splitter'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/stepper/theming/index.vue b/apps/showcase/doc/stepper/theming/index.vue
index 8056ce5a5..f5a549517 100644
--- a/apps/showcase/doc/stepper/theming/index.vue
+++ b/apps/showcase/doc/stepper/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -69,6 +70,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Stepper')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'stepper'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/tabs/theming/index.vue b/apps/showcase/doc/tabs/theming/index.vue
index 50f164996..765540088 100644
--- a/apps/showcase/doc/tabs/theming/index.vue
+++ b/apps/showcase/doc/tabs/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -62,6 +63,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Tabs')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'tabs'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/tag/theming/index.vue b/apps/showcase/doc/tag/theming/index.vue
index ea33a055d..c9ab4bf6f 100644
--- a/apps/showcase/doc/tag/theming/index.vue
+++ b/apps/showcase/doc/tag/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Tag')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'tag'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/terminal/theming/index.vue b/apps/showcase/doc/terminal/theming/index.vue
index d909281af..c20762a94 100644
--- a/apps/showcase/doc/terminal/theming/index.vue
+++ b/apps/showcase/doc/terminal/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Terminal')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'terminal'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/textarea/theming/index.vue b/apps/showcase/doc/textarea/theming/index.vue
index b0a026fea..646e866f3 100644
--- a/apps/showcase/doc/textarea/theming/index.vue
+++ b/apps/showcase/doc/textarea/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Textarea')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'textarea'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/tieredmenu/theming/index.vue b/apps/showcase/doc/tieredmenu/theming/index.vue
index 4b813d463..be801f8a2 100644
--- a/apps/showcase/doc/tieredmenu/theming/index.vue
+++ b/apps/showcase/doc/tieredmenu/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('TieredMenu')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'tieredmenu'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/timeline/theming/index.vue b/apps/showcase/doc/timeline/theming/index.vue
index 875fcc071..67f08eceb 100644
--- a/apps/showcase/doc/timeline/theming/index.vue
+++ b/apps/showcase/doc/timeline/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Timeline')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'timeline'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/toast/theming/index.vue b/apps/showcase/doc/toast/theming/index.vue
index 74dc1cbb1..0de563a26 100644
--- a/apps/showcase/doc/toast/theming/index.vue
+++ b/apps/showcase/doc/toast/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Toast')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'toast'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/togglebutton/theming/index.vue b/apps/showcase/doc/togglebutton/theming/index.vue
index 494b3c1e1..351d68480 100644
--- a/apps/showcase/doc/togglebutton/theming/index.vue
+++ b/apps/showcase/doc/togglebutton/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('ToggleButton')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'togglebutton'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/toggleswitch/theming/index.vue b/apps/showcase/doc/toggleswitch/theming/index.vue
index 765d277d7..427236cfa 100644
--- a/apps/showcase/doc/toggleswitch/theming/index.vue
+++ b/apps/showcase/doc/toggleswitch/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('ToggleSwitch')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'toggleswitch'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/toolbar/theming/index.vue b/apps/showcase/doc/toolbar/theming/index.vue
index b03843b71..1e7018929 100644
--- a/apps/showcase/doc/toolbar/theming/index.vue
+++ b/apps/showcase/doc/toolbar/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Toolbar')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'toolbar'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/tooltip/theming/index.vue b/apps/showcase/doc/tooltip/theming/index.vue
index 97e4a056d..d4bfdd682 100644
--- a/apps/showcase/doc/tooltip/theming/index.vue
+++ b/apps/showcase/doc/tooltip/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Tooltip')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'tooltip'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/tree/theming/index.vue b/apps/showcase/doc/tree/theming/index.vue
index c2a509fbe..01922e5ad 100644
--- a/apps/showcase/doc/tree/theming/index.vue
+++ b/apps/showcase/doc/tree/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('Tree')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'tree'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/treeselect/theming/index.vue b/apps/showcase/doc/treeselect/theming/index.vue
index 83756aea9..473a3a11b 100644
--- a/apps/showcase/doc/treeselect/theming/index.vue
+++ b/apps/showcase/doc/treeselect/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('TreeSelect')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'treeselect'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/treetable/theming/index.vue b/apps/showcase/doc/treetable/theming/index.vue
index 298478873..0d32d6da6 100644
--- a/apps/showcase/doc/treetable/theming/index.vue
+++ b/apps/showcase/doc/treetable/theming/index.vue
@@ -10,6 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
 import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -34,6 +35,12 @@ export default {
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
                             data: getTokenOptions('TreeTable')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'treetable'
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/virtualscroller/theming/index.vue b/apps/showcase/doc/virtualscroller/theming/index.vue
index ce81ad6c2..22e80d7d2 100644
--- a/apps/showcase/doc/virtualscroller/theming/index.vue
+++ b/apps/showcase/doc/virtualscroller/theming/index.vue
@@ -10,7 +10,8 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getStyleOptions } from '@/components/doc/helpers';
+import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
+import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 
 export default {
     data() {
@@ -26,6 +27,19 @@ export default {
                             description: 'List of class names used in the styled mode.',
                             component: DocApiTable,
                             data: getStyleOptions('VirtualScroller')
+                        },
+                        {
+                            id: 'theming.tokens',
+                            label: 'Design Tokens',
+                            description: 'List of design tokens used in a preset.',
+                            component: DocApiTable,
+                            data: getTokenOptions('VirtualScroller')
+                        },
+                        {
+                            id: 'theming.preset',
+                            label: 'Preset',
+                            component: DocStyledPreset,
+                            data: 'virtualscroller'
                         }
                     ]
                 }