diff --git a/.github/workflows/generate_api_doc.yml b/.github/workflows/generate_api_doc.yml
index 2870c3d65..56def89a6 100644
--- a/.github/workflows/generate_api_doc.yml
+++ b/.github/workflows/generate_api_doc.yml
@@ -12,6 +12,7 @@ permissions:
 
 jobs:
   build:
+    if: github.repository == 'primefaces/primevue' && github.ref == 'refs/heads/master'
     runs-on: ubuntu-latest
 
     strategy:
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index 515fb6d3c..cdea03744 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -5,7 +5,7 @@ on:
         branches: [master]
 
 permissions:
-    contents: read
+    contents: write
 
 jobs:
     build:
@@ -16,10 +16,10 @@ jobs:
                 node-version: [16.x, 18.x]
 
         steps:
-            - uses: actions/checkout@v2
+            - uses: actions/checkout@v3
 
             - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v2
+              uses: actions/setup-node@v3
               with:
                   node-version: ${{ matrix.node-version }}
                   cache: 'npm'
@@ -31,19 +31,29 @@ jobs:
             - name: Lint Check
               if: ${{ success() }}
               run: |
-                  npm run format:check
+                  npm run lint
 
-            - name: Code Format
+            - name: Code Format Check
+              id: codeFormatCheck
               if: ${{ success() }}
               run: |
                   npm run format:check
 
+            - name: Code Format
+              if: always() && steps.codeFormatCheck.outcome == 'failure'
+              run: |
+                  npm run format
+                  git config user.name "GitHub Actions Bot"
+                  git config user.email "<>"
+                  git commit -a -m "Code Format"
+                  git push
+
             - name: Security Check
               if: ${{ success() }}
               run: |
                   npm run security:check
 
-            #- name: Test
-            #  if: ${{ success() }}
-            #  run: |
-            #      npm run test:unit
+            - name: Unit Tests Check
+              if: ${{ success() }}
+              run: |
+                  npm run test:unit
diff --git a/.github/workflows/pr-checker.yml b/.github/workflows/pr-checker.yml
index 48f6ba81e..e5d58b414 100644
--- a/.github/workflows/pr-checker.yml
+++ b/.github/workflows/pr-checker.yml
@@ -44,6 +44,14 @@ jobs:
         run: |
           npm run test:unit
 
+      - name: Lint
+        run: |
+          npm run lint
+
+      - name: Security
+        run: |
+          npm run security:check
+
       - name: Add Code Format Fail Comment
         if: always() && steps.codeFormat.outcome == 'failure'
         uses: thollander/actions-comment-pull-request@v1
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 69ed8fddb..97ded00d0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,53 @@
 # Changelog
 
+## [3.28.0](https://github.com/primefaces/primevue/tree/3.28.0) (2023-05-02)
+
+[Full Changelog](https://github.com/primefaces/primevue/compare/3.27.0...3.28.0)
+
+**Implemented New Features and Enhancements:**
+
+- New passthrough\(pt\) property implementation for Chart & FileUpload & Message Components  [\#3911](https://github.com/primefaces/primevue/issues/3911)
+- New passthrough\(pt\) property implementation for Menu Components [\#3907](https://github.com/primefaces/primevue/issues/3907)
+- Button: No label [\#3905](https://github.com/primefaces/primevue/issues/3905)
+- Add global `pt` option to PrimeVue config [\#3902](https://github.com/primefaces/primevue/issues/3902)
+- New passthrough\(pt\) property implementation for Button Components [\#3889](https://github.com/primefaces/primevue/issues/3889)
+- New passthrough\(pt\) property implementation for Overlay Components  [\#3885](https://github.com/primefaces/primevue/issues/3885)
+- New passthrough\(pt\) property implementation for Misc Components  [\#3879](https://github.com/primefaces/primevue/issues/3879)
+
+**Fixed bugs:**
+
+- Message: wrong close icon size [\#3908](https://github.com/primefaces/primevue/issues/3908)
+- Panel: Header accessibility issue [\#3904](https://github.com/primefaces/primevue/issues/3904)
+- Calendar: Material theme icons not visible [\#3903](https://github.com/primefaces/primevue/issues/3903)
+- Password: Incorrect onClick property as scope for custom icons [\#3900](https://github.com/primefaces/primevue/issues/3900)
+- AutoComplete: class style and click event refactor on `removetokenicon` scoped slot [\#3899](https://github.com/primefaces/primevue/issues/3899)
+- Dropdown: Selection is not working correctly with falsy values [\#3891](https://github.com/primefaces/primevue/issues/3891)
+
+## [3.27.0](https://github.com/primefaces/primevue/tree/3.27.0) (2023-04-19)
+
+[Full Changelog](https://github.com/primefaces/primevue/compare/3.26.1...3.27.0)
+
+**Implemented New Features and Enhancements:**
+
+- Add icon templating support to components [\#3833](https://github.com/primefaces/primevue/issues/3833)
+- Improve icon implementation in core [\#3832](https://github.com/primefaces/primevue/issues/3832)
+- Add new Icon components [\#3829](https://github.com/primefaces/primevue/issues/3829)
+- Panel: Footer Templating [\#3820](https://github.com/primefaces/primevue/issues/3820)
+- AutoComplete: NumpadEnter is not recognised [\#3816](https://github.com/primefaces/primevue/issues/3816)
+- Calendar: Emit year-change event via navBackward and navForward [\#3811](https://github.com/primefaces/primevue/issues/3811)
+- New passthrough\(pt\) property implementation for Panel Components [\#3797](https://github.com/primefaces/primevue/issues/3797)
+- Galleria: Play and Pause [\#3619](https://github.com/primefaces/primevue/issues/3619)
+
+**Fixed bugs:**
+
+- TabView: Scrollable Starting/Ending Nav Arrow Blocks First/Last Tab [\#3849](https://github.com/primefaces/primevue/issues/3849)
+- DataTable Filter with Calendar is not showing in proper location [\#3632](https://github.com/primefaces/primevue/issues/3632)
+
+**Deprecated:**
+
+- Deprecated `indicator` slot [\#3871](https://github.com/primefaces/primevue/issues/3871)
+- FullCalendar: Deprecated component [\#3827](https://github.com/primefaces/primevue/issues/3827)
+
 ## [3.26.1](https://github.com/primefaces/primevue/tree/3.26.1) (2023-03-27)
 
 [Full Changelog](https://github.com/primefaces/primevue/compare/3.26.0...3.26.1)
diff --git a/README.md b/README.md
index 39c8509e6..b3f197029 100644
--- a/README.md
+++ b/README.md
@@ -15,10 +15,10 @@ PrimeVue is available at [npm](https://www.npmjs.com/package/primevue).
 
 ````
 // with npm
-npm install primevue primeicons
+npm install primevue
 
 // with yarn
-yarn add primevue primeicons
+yarn add primevue
 ````
 
 ## Plugin
@@ -44,16 +44,13 @@ import 'primevue/resources/themes/lara-light-blue/theme.css';
 
 // core
 import 'primevue/resources/primevue.min.css';
-
-// icons
-import 'primeicons/primeicons.css';
 ```
 
 Each PrimeVue theme has its own font family so it is suggested to apply it to your application for a unified look.
 
 ```
 body {
-    font-family: (--font-family);
+    font-family: var(--font-family);
 }
 ```
 
@@ -96,12 +93,11 @@ Open the nuxt configuration file and add the css dependencies.
 export default defineNuxtConfig({
     css: [
         "primevue/resources/themes/lara-light-blue/theme.css",
-        "primevue/resources/primevue.css",
-        "primeicons/primeicons.css"
+        "primevue/resources/primevue.css"
     ],
-	build: {
-		transpile: ["primevue"]
-	}
+    build: {
+      transpile: ["primevue"]
+    }
 })
 ```
 
diff --git a/api-generator/components/autocomplete.js b/api-generator/components/autocomplete.js
index 14412ab63..e012096b8 100644
--- a/api-generator/components/autocomplete.js
+++ b/api-generator/components/autocomplete.js
@@ -250,6 +250,12 @@ const AutoCompleteProps = [
         type: 'string',
         default: 'null',
         description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/avatar.js b/api-generator/components/avatar.js
index 5146e4981..b0c96a8c6 100644
--- a/api-generator/components/avatar.js
+++ b/api-generator/components/avatar.js
@@ -28,6 +28,19 @@ const AvatarProps = [
         type: 'string',
         default: 'square',
         description: 'Shape of the element, valid options are "square" and "circle".'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
+const AvatarSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
     }
 ];
 
@@ -43,6 +56,7 @@ module.exports = {
         name: 'Avatar',
         description: 'Avatar represents people using icons, labels and images.',
         props: AvatarProps,
+        slots: AvatarSlots,
         events: AvatarEvents
     }
 };
diff --git a/api-generator/components/avatargroup.js b/api-generator/components/avatargroup.js
index 8b570a288..4168b6775 100644
--- a/api-generator/components/avatargroup.js
+++ b/api-generator/components/avatargroup.js
@@ -1,7 +1,47 @@
+const AvatarGroupProps = [
+    {
+        name: 'label',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the text to display.'
+    },
+    {
+        name: 'icon',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the icon to display.'
+    },
+    {
+        name: 'image',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the image to display.'
+    },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Size of the element, valid options are "large" and "xlarge".'
+    },
+    {
+        name: 'shape',
+        type: 'string',
+        default: 'square',
+        description: 'Shape of the element, valid options are "square" and "circle".'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
 module.exports = {
     avatargroup: {
         name: 'AvatarGroup',
         'doc-url': 'avatar',
-        description: 'A set of Avatars can be displayed together using the AvatarGroup component.'
+        description: 'A set of Avatars can be displayed together using the AvatarGroup component.',
+        props: AvatarGroupProps
     }
 };
diff --git a/api-generator/components/badge.js b/api-generator/components/badge.js
index 5c7245dfb..0562aeb0a 100644
--- a/api-generator/components/badge.js
+++ b/api-generator/components/badge.js
@@ -16,6 +16,12 @@ const BadgeProps = [
         type: 'string',
         default: 'null',
         description: 'Size of the badge, valid options are "large" and "xlarge".'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/blockui.js b/api-generator/components/blockui.js
index 73deaf34c..d355deac8 100644
--- a/api-generator/components/blockui.js
+++ b/api-generator/components/blockui.js
@@ -22,6 +22,12 @@ const BlockUIProps = [
         type: 'boolean',
         default: 'true',
         description: 'Whether to automatically manage layering.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/breadcrumb.js b/api-generator/components/breadcrumb.js
index e466fb154..cae78fa05 100644
--- a/api-generator/components/breadcrumb.js
+++ b/api-generator/components/breadcrumb.js
@@ -16,6 +16,12 @@ const BreadcrumbProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -27,6 +33,10 @@ const BreadcrumbSlots = [
     {
         name: 'separator',
         description: 'Custom separator template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 
diff --git a/api-generator/components/button.js b/api-generator/components/button.js
index 359c3d45e..565350938 100644
--- a/api-generator/components/button.js
+++ b/api-generator/components/button.js
@@ -94,6 +94,25 @@ const ButtonProps = [
         type: 'boolean',
         default: 'false',
         description: 'Add a plain textual class to the button without a background initially.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
+const ButtonEvents = [];
+
+const ButtonSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
     }
 ];
 
@@ -101,6 +120,8 @@ module.exports = {
     button: {
         name: 'Button',
         description: 'Button is an extension to standard button element with icons and theming.',
-        props: ButtonProps
+        props: ButtonProps,
+        events: ButtonEvents,
+        slots: ButtonSlots
     }
 };
diff --git a/api-generator/components/calendar.js b/api-generator/components/calendar.js
index 131f885af..79614b5df 100644
--- a/api-generator/components/calendar.js
+++ b/api-generator/components/calendar.js
@@ -316,6 +316,12 @@ const CalendarProps = [
         type: 'object',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -462,11 +468,11 @@ const CalendarSlots = [
         description: 'Custom content for the calendar decade.'
     },
     {
-        name: 'triggericon',
-        description: 'Custom trigger icon template.'
+        name: 'dropdownicon',
+        description: 'Custom dropdown icon template.'
     },
     {
-        name: 'previcon',
+        name: 'previousicon',
         description: 'Custom previous icon template.'
     },
     {
diff --git a/api-generator/components/carousel.js b/api-generator/components/carousel.js
index ea51532dd..4fe24167a 100644
--- a/api-generator/components/carousel.js
+++ b/api-generator/components/carousel.js
@@ -82,10 +82,20 @@ const CarouselProps = [
         type: 'boolean',
         default: 'true',
         description: 'Whether to display indicator container.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
 const CarouselSlots = [
+    {
+        name: 'header',
+        description: 'Custom content for the component header.'
+    },
     {
         name: 'header',
         description: 'Custom content for the component header.'
@@ -99,7 +109,7 @@ const CarouselSlots = [
         description: 'Custom content for the component item.'
     },
     {
-        name: 'previcon',
+        name: 'previousicon',
         description: 'Custom previous icon template.'
     },
     {
diff --git a/api-generator/components/cascadeselect.js b/api-generator/components/cascadeselect.js
index 00d43400f..8715876d5 100644
--- a/api-generator/components/cascadeselect.js
+++ b/api-generator/components/cascadeselect.js
@@ -184,6 +184,12 @@ const CascadeSelectProps = [
         type: 'string',
         default: 'null',
         description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -284,6 +290,14 @@ const CascadeSelectSlots = [
         name: 'indicator',
         description: 'Custom content for the dropdown indicator.'
     },
+    {
+        name: 'dropdownicon',
+        description: 'Custom dropdown icon template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
     {
         name: 'optiongroupicon',
         description: 'Custom content for the option group icon.'
diff --git a/api-generator/components/chart.js b/api-generator/components/chart.js
index c60869bca..2cd31d4e2 100644
--- a/api-generator/components/chart.js
+++ b/api-generator/components/chart.js
@@ -34,6 +34,12 @@ const ChartProps = [
         type: 'number',
         default: '150',
         description: 'Height of the chart in non-responsive mode.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/checkbox.js b/api-generator/components/checkbox.js
index 2e122f275..0ca595316 100644
--- a/api-generator/components/checkbox.js
+++ b/api-generator/components/checkbox.js
@@ -88,6 +88,12 @@ const CheckboxProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/chip.js b/api-generator/components/chip.js
index abf3096df..894250b91 100644
--- a/api-generator/components/chip.js
+++ b/api-generator/components/chip.js
@@ -28,6 +28,12 @@ const ChipProps = [
         type: 'string',
         default: 'pi pi-times-circle',
         description: 'Icon of the remove element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -45,11 +51,23 @@ const ChipEvents = [
     }
 ];
 
+const ChipSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template of chip component.'
+    },
+    {
+        name: 'removeicon',
+        description: 'Custom remove icon template of chip component.'
+    }
+];
+
 module.exports = {
     chip: {
         name: 'Chip',
         description: 'Chip represents entities using icons, labels and images',
         props: ChipProps,
-        events: ChipEvents
+        events: ChipEvents,
+        slots: ChipSlots
     }
 };
diff --git a/api-generator/components/chips.js b/api-generator/components/chips.js
index bc2d80de7..9e0940fdd 100644
--- a/api-generator/components/chips.js
+++ b/api-generator/components/chips.js
@@ -64,6 +64,12 @@ const ChipsProps = [
         type: 'object',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/colorpicker.js b/api-generator/components/colorpicker.js
index f145256d9..a564c297a 100644
--- a/api-generator/components/colorpicker.js
+++ b/api-generator/components/colorpicker.js
@@ -70,6 +70,12 @@ const ColorPickerProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/column.js b/api-generator/components/column.js
index 380fbc8ec..6fc57b760 100644
--- a/api-generator/components/column.js
+++ b/api-generator/components/column.js
@@ -250,6 +250,12 @@ const ColumnProps = [
         type: 'boolean',
         default: 'false',
         description: 'Whether the column is rendered.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -289,6 +295,62 @@ const ColumnSlots = [
     {
         name: 'filterapply',
         description: "Custom content for the filter menu's apply section"
+    },
+    {
+        name: 'loading',
+        description: 'Custom loading template.'
+    },
+    {
+        name: 'rowtogglericon',
+        description: 'Custom row toggler icon template.'
+    },
+    {
+        name: 'rowtogglericon',
+        description: 'Custom row toggler icon template.'
+    },
+    {
+        name: 'rowcheckboxicon',
+        description: 'Custom row checkbox icon template.'
+    },
+    {
+        name: 'roweditoriniticon',
+        description: 'Custom row editor init icon template.'
+    },
+    {
+        name: 'roweditorsaveicon',
+        description: 'Custom row editor save icon template.'
+    },
+    {
+        name: 'roweditorcancelicon',
+        description: 'Custom row editor cancel icon template.'
+    },
+    {
+        name: 'filtericon',
+        description: 'Custom filter icon template.'
+    },
+    {
+        name: 'filterclearicon',
+        description: 'Custom filter clear icon template.'
+    },
+    {
+        name: 'filterremoveicon',
+        description: 'Custom filter remove icon template.'
+    },
+    {
+        name: 'filteraddicon',
+        description: 'Custom filter add icon template.'
+    },
+    {
+        name: 'sorticon',
+        description: 'Custom sort icon template.'
+    },
+    {
+        name: 'headercheckboxicon',
+        description: 'Custom header checkbox icon template.'
+    },
+    {
+        name: 'rowreordericon',
+        description: 'Custom row reorder icon template.'
     }
 ];
 
diff --git a/api-generator/components/columngroup.js b/api-generator/components/columngroup.js
index 6fef6cdd8..cfd9b9605 100644
--- a/api-generator/components/columngroup.js
+++ b/api-generator/components/columngroup.js
@@ -1,7 +1,23 @@
+const ColumnGroupProps = [
+    {
+        name: 'type',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the type of the group.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
 module.exports = {
     columngroup: {
         name: 'ColumnGroup',
         description: 'Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns',
-        'doc-url': 'datatable'
+        'doc-url': 'datatable',
+        props: ColumnGroupProps
     }
 };
diff --git a/api-generator/components/confirmdialog.js b/api-generator/components/confirmdialog.js
index 6e39797ca..130dc6444 100644
--- a/api-generator/components/confirmdialog.js
+++ b/api-generator/components/confirmdialog.js
@@ -16,13 +16,31 @@ const ConfirmDialogProps = [
         type: 'boolean',
         default: 'true',
         description: 'Whether the dialog can be relocated by dragging.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
 const ConfirmDialogSlots = [
     {
         name: 'message',
-        description: 'Custom content for the component.'
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'accepticon',
+        description: 'Custom accept icon template.'
+    },
+    {
+        name: 'rejecticon',
+        description: 'Custom reject icon template.'
     }
 ];
 
diff --git a/api-generator/components/confirmpopup.js b/api-generator/components/confirmpopup.js
index c5354e9b9..27b47f4a4 100644
--- a/api-generator/components/confirmpopup.js
+++ b/api-generator/components/confirmpopup.js
@@ -4,6 +4,12 @@ const ConfirmPopupProps = [
         type: 'string',
         default: 'null',
         description: 'Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -11,6 +17,18 @@ const ConfirmPopupSlots = [
     {
         name: 'message',
         description: 'Custom content for the component.'
+    },
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'accepticon',
+        description: 'Custom accept icon template.'
+    },
+    {
+        name: 'rejecticon',
+        description: 'Custom reject icon template.'
     }
 ];
 
diff --git a/api-generator/components/contextmenu.js b/api-generator/components/contextmenu.js
index 4c7030047..d0f7cffe6 100644
--- a/api-generator/components/contextmenu.js
+++ b/api-generator/components/contextmenu.js
@@ -34,6 +34,12 @@ const ContextMenuProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -45,6 +51,10 @@ const ContextMenuSlots = [
     {
         name: 'submenuicon',
         description: 'Custom submenu icon template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 
diff --git a/api-generator/components/datatable.js b/api-generator/components/datatable.js
index a2e48a9e2..0b875f983 100644
--- a/api-generator/components/datatable.js
+++ b/api-generator/components/datatable.js
@@ -377,6 +377,12 @@ const DataTableProps = [
         type: 'string',
         default: 'null',
         description: 'Style class of the table element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -1120,31 +1126,67 @@ const DataTableEvents = [
 const DataTableSlots = [
     {
         name: 'header',
-        description: "Custom content for the component's header"
+        description: "Custom content for the component's header."
     },
     {
         name: 'paginatorstart',
-        description: "Custom content for the component paginator's left side"
+        description: "Custom content for the component paginator's left side."
     },
     {
         name: 'paginatorend',
-        description: "Custom content for the component paginator's right side"
+        description: "Custom content for the component paginator's right side."
     },
     {
         name: 'footer',
-        description: "Custom content for the component's footer"
+        description: "Custom content for the component's footer."
     },
     {
         name: 'groupheader',
-        description: "Custom content for the component's subgroup header"
+        description: "Custom content for the component's subgroup header."
     },
     {
         name: 'groupfooter',
-        description: "Custom content for the component's subgroup footer"
+        description: "Custom content for the component's subgroup footer."
     },
     {
-        name: 'expansion',
-        description: "Custom content for the component's expanded content"
+        name: 'loading',
+        description: 'Custom loading template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
+    {
+        name: 'reorderindicatorupicon',
+        description: 'Custom reorder indicator up icon template.'
+    },
+    {
+        name: 'reorderindicatordownicon',
+        description: 'Custom reorder indicator down icon template.'
+    },
+    {
+        name: 'rowgrouptogglericon',
+        description: 'Custom rowgroup toggler icon template.'
+    },
+    {
+        name: 'paginatorfirstpagelinkicon',
+        description: 'Custom paginator first page link icon template.'
+    },
+    {
+        name: 'paginatorprevpagelinkicon',
+        description: 'Custom paginator prev page link icon template.'
+    },
+    {
+        name: 'paginatornextpagelinkicon',
+        description: 'Custom paginator next page link icon template.'
+    },
+    {
+        name: 'paginatorlastpagelinkicon',
+        description: 'Custom paginator last page link icon template.'
+    },
+    {
+        name: 'empty',
+        description: 'Custom empty template.'
     }
 ];
 
diff --git a/api-generator/components/dataview.js b/api-generator/components/dataview.js
index 039575f63..184e80c3e 100644
--- a/api-generator/components/dataview.js
+++ b/api-generator/components/dataview.js
@@ -94,6 +94,12 @@ const DataViewProps = [
         type: 'string',
         default: 'null',
         description: 'Name of the data that uniquely identifies the a record in the data.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/dataviewlayoutoptions.js b/api-generator/components/dataviewlayoutoptions.js
index e34ae325f..a1feb110b 100644
--- a/api-generator/components/dataviewlayoutoptions.js
+++ b/api-generator/components/dataviewlayoutoptions.js
@@ -4,6 +4,12 @@ const DataViewLayoutOptionsProps = [
         type: 'string',
         default: 'null',
         description: 'Value of the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/dialog.js b/api-generator/components/dialog.js
index 7e53088a9..e08bfa3c2 100644
--- a/api-generator/components/dialog.js
+++ b/api-generator/components/dialog.js
@@ -130,6 +130,12 @@ const DialogProps = [
         type: 'string',
         default: 'body',
         description: 'A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are "body" for document body and "self" for the element itself.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -189,6 +195,14 @@ const DialogSlots = [
     {
         name: 'footer',
         description: "Custom content for the component's footer"
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
+    },
+    {
+        name: 'maximizeicon',
+        description: 'Custom maximizeicon icon template of dialog.'
     }
 ];
 
diff --git a/api-generator/components/dock.js b/api-generator/components/dock.js
index b5615d452..8c105e8b6 100644
--- a/api-generator/components/dock.js
+++ b/api-generator/components/dock.js
@@ -34,6 +34,12 @@ const DockProps = [
         type: 'object',
         default: 'null',
         description: "Whether to display the tooltip on items. The modifiers of tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/dropdown.js b/api-generator/components/dropdown.js
index d4826f131..afe00f1b1 100644
--- a/api-generator/components/dropdown.js
+++ b/api-generator/components/dropdown.js
@@ -256,6 +256,12 @@ const DropdownProps = [
         type: 'string',
         default: 'null',
         description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -372,6 +378,22 @@ const DropdownSlots = [
     {
         name: 'loader',
         description: 'Custom content for the virtual scroller loader items'
+    },
+    {
+        name: 'clearicon',
+        description: 'Custom clear icon template.'
+    },
+    {
+        name: 'dropdownicon',
+        description: 'Custom dropdown icon template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
+    {
+        name: 'filtericon',
+        description: 'Custom filter icon template.'
     }
 ];
 
diff --git a/api-generator/components/editor.js b/api-generator/components/editor.js
index f443c2556..e55b2f419 100644
--- a/api-generator/components/editor.js
+++ b/api-generator/components/editor.js
@@ -34,6 +34,12 @@ const EditorProps = [
         type: 'object',
         default: 'null',
         description: 'Modules configuration, see <a href="http://quilljs.com/docs/modules/">here</a> for available options.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/fileupload.js b/api-generator/components/fileupload.js
index 72986a9f6..cef25b014 100644
--- a/api-generator/components/fileupload.js
+++ b/api-generator/components/fileupload.js
@@ -142,6 +142,12 @@ const FileUploadProps = [
         type: 'string',
         default: 'null',
         description: 'Style class of the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -276,9 +282,33 @@ const FileUploadEvents = [
 ];
 
 const FileUploadSlots = [
+    {
+        name: 'header',
+        description: 'Custom header template.'
+    },
+    {
+        name: 'content',
+        description: 'Custom content template.'
+    },
     {
         name: 'empty',
         description: 'Custom content when there is no selected file'
+    },
+    {
+        name: 'chooseicon',
+        description: 'Custom choose icon template.'
+    },
+    {
+        name: 'uploadicon',
+        description: 'Custom upload icon template.'
+    },
+    {
+        name: 'cancelicon',
+        description: 'Custom cancel icon template.'
+    },
+    {
+        name: 'fileremoveicon',
+        description: 'Custom remove icon template for each file.'
     }
 ];
 
diff --git a/api-generator/components/galleria.js b/api-generator/components/galleria.js
index 4ef0cb142..953956ff3 100644
--- a/api-generator/components/galleria.js
+++ b/api-generator/components/galleria.js
@@ -142,6 +142,12 @@ const GalleriaProps = [
         type: 'any',
         default: 'null',
         description: "Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -175,7 +181,7 @@ const GalleriaSlots = [
         description: 'Custom close icon template.'
     },
     {
-        name: 'previtemicon',
+        name: 'previousitemicon',
         description: 'Custom navigator previous item icon template.'
     },
     {
@@ -183,7 +189,7 @@ const GalleriaSlots = [
         description: 'Custom navigator next item icon template.'
     },
     {
-        name: 'prevthumbnailicon',
+        name: 'previousthumbnailicon',
         description: 'Custom thumbnail previous icon template.'
     },
     {
diff --git a/api-generator/components/image.js b/api-generator/components/image.js
index dc7205074..da1460ca5 100644
--- a/api-generator/components/image.js
+++ b/api-generator/components/image.js
@@ -22,6 +22,12 @@ const ImageProps = [
         type: 'boolean',
         default: 'false',
         description: 'Disable the zoom-out button'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -64,6 +70,14 @@ const ImageSlots = [
     {
         name: 'close',
         description: 'Custom content for the component close.'
+    },
+    {
+        name: 'image',
+        description: 'Custom content for the component image.'
+    },
+    {
+        name: 'preview',
+        description: 'Custom content for the component preview.'
     }
 ];
 
diff --git a/api-generator/components/inlinemessage.js b/api-generator/components/inlinemessage.js
index 78616eb77..0ec46364b 100644
--- a/api-generator/components/inlinemessage.js
+++ b/api-generator/components/inlinemessage.js
@@ -10,13 +10,19 @@ const InlineMessageProps = [
         type: 'string',
         default: 'undefined',
         description: 'Display a custom icon for the message.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
 const MessageSlots = [
     {
-        name: 'messageicon',
-        description: 'Custom message icon template.'
+        name: 'icon',
+        description: 'Custom icon template.'
     }
 ];
 
diff --git a/api-generator/components/inplace.js b/api-generator/components/inplace.js
index 5e2a4a6ba..f9f96aded 100644
--- a/api-generator/components/inplace.js
+++ b/api-generator/components/inplace.js
@@ -16,6 +16,12 @@ const InplaceProps = [
         type: 'boolean',
         default: 'false',
         description: 'When present, it specifies that the element should be disabled.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -47,11 +53,15 @@ const InplaceEvents = [
 const InplaceSlots = [
     {
         name: 'display',
-        description: 'Output content'
+        description: 'Custom display template.'
     },
     {
         name: 'content',
-        description: 'Actual content'
+        description: 'Custom content template.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
     }
 ];
 
diff --git a/api-generator/components/inputmask.js b/api-generator/components/inputmask.js
index 9111e6ae7..f1269744c 100644
--- a/api-generator/components/inputmask.js
+++ b/api-generator/components/inputmask.js
@@ -28,6 +28,12 @@ const InputMaskProps = [
         type: 'boolean',
         default: 'false',
         description: 'Defines if model sets the raw unmasked value to bound value or the formatted mask value.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/inputnumber.js b/api-generator/components/inputnumber.js
index 9204a3c80..e3587c5bc 100644
--- a/api-generator/components/inputnumber.js
+++ b/api-generator/components/inputnumber.js
@@ -182,6 +182,12 @@ const InputNumberProps = [
         type: 'object',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLButtonElement to decrement button inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/inputswitch.js b/api-generator/components/inputswitch.js
index 6b06ebda2..f4b2eb076 100644
--- a/api-generator/components/inputswitch.js
+++ b/api-generator/components/inputswitch.js
@@ -40,6 +40,12 @@ const InputSwitchProps = [
         type: 'object',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/inputtext.js b/api-generator/components/inputtext.js
index 3b4110c74..4541151ce 100644
--- a/api-generator/components/inputtext.js
+++ b/api-generator/components/inputtext.js
@@ -4,6 +4,12 @@ const InputTextProps = [
         type: 'any',
         default: 'null',
         description: 'Value of the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/knob.js b/api-generator/components/knob.js
index 81b026e0e..95d48e58b 100644
--- a/api-generator/components/knob.js
+++ b/api-generator/components/knob.js
@@ -94,6 +94,12 @@ const KnobProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/listbox.js b/api-generator/components/listbox.js
index 58844f546..f2c6d7c03 100644
--- a/api-generator/components/listbox.js
+++ b/api-generator/components/listbox.js
@@ -173,6 +173,12 @@ const ListboxProps = [
         type: 'string',
         default: 'null',
         description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/megamenu.js b/api-generator/components/megamenu.js
index cc47ddc71..f0f3a42ff 100644
--- a/api-generator/components/megamenu.js
+++ b/api-generator/components/megamenu.js
@@ -16,6 +16,12 @@ const MegaMenuProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -35,6 +41,10 @@ const MegaMenuSlots = [
     {
         name: 'submenuicon',
         description: 'Custom submenu icon template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 
diff --git a/api-generator/components/menu.js b/api-generator/components/menu.js
index cd75e0365..4d98f2ac2 100644
--- a/api-generator/components/menu.js
+++ b/api-generator/components/menu.js
@@ -34,6 +34,12 @@ const MenuProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -60,6 +66,10 @@ const MenuSlots = [
     {
         name: 'item',
         description: 'Template of a menuitem.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 
diff --git a/api-generator/components/menubar.js b/api-generator/components/menubar.js
index e36616ff2..885730a1f 100644
--- a/api-generator/components/menubar.js
+++ b/api-generator/components/menubar.js
@@ -10,6 +10,12 @@ const MenubarProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -33,6 +39,10 @@ const MenubarSlots = [
     {
         name: 'submenuicon',
         description: 'Custom submenu icon template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 
diff --git a/api-generator/components/message.js b/api-generator/components/message.js
index 02be57a06..8f6e648fe 100644
--- a/api-generator/components/message.js
+++ b/api-generator/components/message.js
@@ -34,6 +34,12 @@ const MessageProps = [
         type: 'string',
         default: 'undefined',
         description: 'Display a custom close icon for the message.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/multiselect.js b/api-generator/components/multiselect.js
index 14fbcbe37..8eca6b3e3 100644
--- a/api-generator/components/multiselect.js
+++ b/api-generator/components/multiselect.js
@@ -292,6 +292,12 @@ const MultiSelectProps = [
         type: 'string',
         default: 'null',
         description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -448,6 +454,14 @@ const MultiSelectSlots = [
     {
         name: 'itemcheckboxicon',
         description: 'Custom item checkbox icon template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
+    {
+        name: 'dropdownicon',
+        description: 'Custom dropdown icon template.'
     }
 ];
 
diff --git a/api-generator/components/orderlist.js b/api-generator/components/orderlist.js
index 95fd8d805..f71b7a644 100644
--- a/api-generator/components/orderlist.js
+++ b/api-generator/components/orderlist.js
@@ -47,6 +47,12 @@ const OrderListProps = [
         type: 'boolean',
         default: 'false',
         description: 'Whether to displays rows with alternating colors.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/organizationchart.js b/api-generator/components/organizationchart.js
index 244a0b017..abd033fa6 100644
--- a/api-generator/components/organizationchart.js
+++ b/api-generator/components/organizationchart.js
@@ -28,6 +28,12 @@ const OrganizationChartProps = [
         type: 'object',
         default: 'null',
         description: 'A map instance of key-value pairs to represented the collapsed nodes.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/overlaypanel.js b/api-generator/components/overlaypanel.js
index 3cdf36322..f2861c06b 100644
--- a/api-generator/components/overlaypanel.js
+++ b/api-generator/components/overlaypanel.js
@@ -46,6 +46,12 @@ const OverlayPanelProps = [
         type: 'string',
         default: 'undefined',
         description: 'Display a custom close icon for the message.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/paginator.js b/api-generator/components/paginator.js
index 89c1fcc10..75967020d 100644
--- a/api-generator/components/paginator.js
+++ b/api-generator/components/paginator.js
@@ -46,6 +46,12 @@ const PaginatorProps = [
         type: 'boolean',
         default: 'true',
         description: 'Whether to show the paginator even there is only one page.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -80,11 +86,11 @@ const PaginatorEvents = [
 
 const PaginatorSlots = [
     {
-        name: 'left',
+        name: 'start',
         description: "Custom content for the component's left side."
     },
     {
-        name: 'right',
+        name: 'end',
         description: "Custom content for the component's right side."
     },
     {
diff --git a/api-generator/components/panelmenu.js b/api-generator/components/panelmenu.js
index a534bc763..b5711eb58 100644
--- a/api-generator/components/panelmenu.js
+++ b/api-generator/components/panelmenu.js
@@ -16,6 +16,12 @@ const PanelMenuProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -27,6 +33,14 @@ const PanelMenuSlots = [
     {
         name: 'submenuicon',
         description: 'Custom submenu icon template.'
+    },
+    {
+        name: 'headericon',
+        description: 'Custom header icon template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 
diff --git a/api-generator/components/password.js b/api-generator/components/password.js
index 2c9492670..fc5d8224d 100644
--- a/api-generator/components/password.js
+++ b/api-generator/components/password.js
@@ -136,6 +136,12 @@ const PasswordProps = [
         type: 'object',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/picklist.js b/api-generator/components/picklist.js
index 2579f62a5..4f97179e9 100644
--- a/api-generator/components/picklist.js
+++ b/api-generator/components/picklist.js
@@ -59,6 +59,12 @@ const PickListProps = [
         type: 'boolean',
         default: 'true',
         description: 'Whether to show buttons of target list.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -172,6 +178,10 @@ const PickListEvents = [
 ];
 
 const PickListSlots = [
+    {
+        name: 'header',
+        description: 'Custom header template.'
+    },
     {
         name: 'sourceheader',
         description: "Custom content for the component's source header."
diff --git a/api-generator/components/progressbar.js b/api-generator/components/progressbar.js
index c89f78165..161870126 100644
--- a/api-generator/components/progressbar.js
+++ b/api-generator/components/progressbar.js
@@ -16,6 +16,12 @@ const ProgressbarProps = [
         type: 'boolean',
         default: 'true',
         description: 'Whether to display the progress bar value.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/progressspinner.js b/api-generator/components/progressspinner.js
index f2a190cea..493b9e054 100644
--- a/api-generator/components/progressspinner.js
+++ b/api-generator/components/progressspinner.js
@@ -16,6 +16,12 @@ const ProgressSpinnerProps = [
         type: 'string',
         default: '2s',
         description: 'Duration of the rotate animation.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/radiobutton.js b/api-generator/components/radiobutton.js
index 620ad456b..ec531e6a4 100644
--- a/api-generator/components/radiobutton.js
+++ b/api-generator/components/radiobutton.js
@@ -58,6 +58,12 @@ const RadioButtonProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/rating.js b/api-generator/components/rating.js
index a65cfe909..a1014cbe2 100644
--- a/api-generator/components/rating.js
+++ b/api-generator/components/rating.js
@@ -46,6 +46,27 @@ const RatingProps = [
         type: 'string',
         default: 'null',
         description: 'Icon for the cancelable state.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
+const RatingSlots = [
+    {
+        name: 'cancelicon',
+        description: 'Custom cancel icon template.'
+    },
+    {
+        name: 'onicon',
+        description: 'Custom on icon template.'
+    },
+    {
+        name: 'officon',
+        description: 'Custom off icon template.'
     }
 ];
 
@@ -73,6 +94,7 @@ module.exports = {
         name: 'rating',
         description: 'Rating component is a star based selection input.',
         props: RatingProps,
+        slots: RatingSlots,
         events: RatingEvents
     }
 };
diff --git a/api-generator/components/row.js b/api-generator/components/row.js
index 88fc8c91f..732575d73 100644
--- a/api-generator/components/row.js
+++ b/api-generator/components/row.js
@@ -1,7 +1,23 @@
+const RowProps = [
+    {
+        name: 'type',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the type of the group.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
 module.exports = {
     row: {
         name: 'Row',
         description: 'DataTable can be grouped by defining a Row component with nested columns',
-        'doc-url': 'datatable'
+        'doc-url': 'datatable',
+        props: RowProps
     }
 };
diff --git a/api-generator/components/scrolltop.js b/api-generator/components/scrolltop.js
index 4f59e0804..4dfc7beb1 100644
--- a/api-generator/components/scrolltop.js
+++ b/api-generator/components/scrolltop.js
@@ -22,6 +22,12 @@ const ScrollTopProps = [
         type: 'string',
         default: 'smooth',
         description: 'Defines the scrolling behavi, "smooth" adds an animation and "auto" scrolls with a jump.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/selectbutton.js b/api-generator/components/selectbutton.js
index 4621fd151..483b4541f 100644
--- a/api-generator/components/selectbutton.js
+++ b/api-generator/components/selectbutton.js
@@ -58,6 +58,12 @@ const SelectButtonProps = [
         type: 'string',
         default: 'null',
         description: 'Identifier of the underlying element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/sidebar.js b/api-generator/components/sidebar.js
index 333484b7b..c810d3051 100644
--- a/api-generator/components/sidebar.js
+++ b/api-generator/components/sidebar.js
@@ -58,6 +58,12 @@ const SidebarProps = [
         type: 'string',
         default: 'undefined',
         description: 'Icon to display in the sidebar close button.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -80,6 +86,10 @@ const SidebarSlots = [
     {
         name: 'header',
         description: 'Custom content for the component header.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
     }
 ];
 
diff --git a/api-generator/components/skeleton.js b/api-generator/components/skeleton.js
index 59ef801d1..e500ce80d 100644
--- a/api-generator/components/skeleton.js
+++ b/api-generator/components/skeleton.js
@@ -34,6 +34,12 @@ const SkeletonProps = [
         type: 'string',
         default: 'wave',
         description: 'Type of the animation, valid options are "wave" and "none".'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/slider.js b/api-generator/components/slider.js
index 15ae0a7a5..5d6a3f816 100644
--- a/api-generator/components/slider.js
+++ b/api-generator/components/slider.js
@@ -58,6 +58,12 @@ const SliderProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/speeddial.js b/api-generator/components/speeddial.js
index 01c3d3422..84fc6ad58 100644
--- a/api-generator/components/speeddial.js
+++ b/api-generator/components/speeddial.js
@@ -106,6 +106,12 @@ const SpeedDialProps = [
         type: 'object',
         default: 'null',
         description: "Whether to display the tooltip on items. The modifiers of tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -137,8 +143,12 @@ const SpeedDialSlots = [
         description: 'Custom content for the item'
     },
     {
-        name: 'toggle',
-        description: 'toggle: toggle metadata'
+        name: 'button',
+        description: 'Custom button template.'
+    },
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
     }
 ];
 
diff --git a/api-generator/components/splitbutton.js b/api-generator/components/splitbutton.js
index 669b43666..d5b237969 100644
--- a/api-generator/components/splitbutton.js
+++ b/api-generator/components/splitbutton.js
@@ -100,6 +100,12 @@ const SplitButtonProps = [
         type: 'boolean',
         default: 'false',
         description: 'Add a plain textual class to the button without a background initially.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -117,11 +123,23 @@ const SplitButtonEvents = [
     }
 ];
 
+const SplitButtonSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'menubuttonicon',
+        description: 'Custom menu button icon template.'
+    }
+];
+
 module.exports = {
     splitbutton: {
         name: 'SplitButton',
         description: 'SplitButton groups a set of commands in an overlay with a default command.',
         props: SplitButtonProps,
-        events: SplitButtonEvents
+        events: SplitButtonEvents,
+        slots: SplitButtonSlots
     }
 };
diff --git a/api-generator/components/steps.js b/api-generator/components/steps.js
index c0e3b3111..00dec500f 100644
--- a/api-generator/components/steps.js
+++ b/api-generator/components/steps.js
@@ -22,6 +22,12 @@ const StepsProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/tabmenu.js b/api-generator/components/tabmenu.js
index 8f3954a6e..3c94c8961 100644
--- a/api-generator/components/tabmenu.js
+++ b/api-generator/components/tabmenu.js
@@ -16,6 +16,12 @@ const TabMenuProps = [
         type: 'number',
         default: '0',
         description: 'Active index of menuitem.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -42,6 +48,10 @@ const TabMenuSlots = [
     {
         name: 'item',
         description: 'Template of a menuitem.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 
diff --git a/api-generator/components/tabview.js b/api-generator/components/tabview.js
index a632fe72a..41d4879ab 100644
--- a/api-generator/components/tabview.js
+++ b/api-generator/components/tabview.js
@@ -41,6 +41,18 @@ const TabViewProps = [
         default: 'null',
         description: 'Uses to pass all properties of the HTMLButtonElement to the next button.'
     },
+    {
+        name: 'prevIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Prev icon of the scrollable tabview.'
+    },
+    {
+        name: 'nextIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Next icon of the scrollable tabview.'
+    },
     {
         name: 'pt',
         type: 'any',
diff --git a/api-generator/components/tag.js b/api-generator/components/tag.js
index 56a03541f..1ac243364 100644
--- a/api-generator/components/tag.js
+++ b/api-generator/components/tag.js
@@ -22,6 +22,19 @@ const TagProps = [
         type: 'string',
         default: 'null',
         description: 'Icon of the tag to display next to the value.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
+const TagSlots = [
+    {
+        name: 'icon',
+        description: 'custom icon template.'
     }
 ];
 
@@ -29,6 +42,7 @@ module.exports = {
     tag: {
         name: 'Tag',
         description: 'Tag component is used to categorize content.',
-        props: TagProps
+        props: TagProps,
+        slots: TagSlots
     }
 };
diff --git a/api-generator/components/terminal.js b/api-generator/components/terminal.js
index abe7e54a8..7946ad94e 100644
--- a/api-generator/components/terminal.js
+++ b/api-generator/components/terminal.js
@@ -10,6 +10,12 @@ const TerminalProps = [
         type: 'string',
         default: 'null',
         description: 'Prompt text for each command.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/textarea.js b/api-generator/components/textarea.js
index eb95104f5..fdaf7aaae 100644
--- a/api-generator/components/textarea.js
+++ b/api-generator/components/textarea.js
@@ -10,6 +10,12 @@ const TextareaProps = [
         type: 'boolean',
         default: 'false',
         description: 'When present, height of textarea changes as being typed.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/tieredmenu.js b/api-generator/components/tieredmenu.js
index 57b1b20d7..85df8d475 100644
--- a/api-generator/components/tieredmenu.js
+++ b/api-generator/components/tieredmenu.js
@@ -34,6 +34,12 @@ const TieredMenuProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -45,6 +51,10 @@ const TieredMenuSlots = [
     {
         name: 'submenuicon',
         description: 'Custom submenu icon template.'
+    },
+    {
+        name: 'itemicon',
+        description: 'Custom item icon template.'
     }
 ];
 
diff --git a/api-generator/components/timeline.js b/api-generator/components/timeline.js
index 1e95f0ba3..45973dc90 100644
--- a/api-generator/components/timeline.js
+++ b/api-generator/components/timeline.js
@@ -22,6 +22,12 @@ const TimelineProps = [
         type: 'string',
         default: 'null',
         description: 'Name of the field that uniquely identifies the a record in the data.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/toast.js b/api-generator/components/toast.js
index 1306aadb6..e4dc9fe4c 100644
--- a/api-generator/components/toast.js
+++ b/api-generator/components/toast.js
@@ -28,6 +28,12 @@ const ToastProps = [
         type: 'object',
         default: 'null',
         description: 'Object literal to define widths per screen size.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -60,6 +66,14 @@ const ToastSlots = [
     {
         name: 'message',
         description: 'Custom content for the toast message'
+    },
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
     }
 ];
 
diff --git a/api-generator/components/togglebutton.js b/api-generator/components/togglebutton.js
index 6614ca535..e35bca1f0 100644
--- a/api-generator/components/togglebutton.js
+++ b/api-generator/components/togglebutton.js
@@ -70,6 +70,12 @@ const ToggleButtonProps = [
         type: 'object',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -109,11 +115,19 @@ const ToggleButtonEvents = [
     }
 ];
 
+const ToggleButtonSlots = [
+    {
+        name: 'icon',
+        description: 'custom icon template.'
+    }
+];
+
 module.exports = {
     togglebutton: {
         name: 'ToggleButton',
         description: 'ToggleButton is used to select a boolean value using a button.',
         props: ToggleButtonProps,
+        slots: ToggleButtonSlots,
         events: ToggleButtonEvents
     }
 };
diff --git a/api-generator/components/toolbar.js b/api-generator/components/toolbar.js
index 40b5f6506..a9f08a52e 100644
--- a/api-generator/components/toolbar.js
+++ b/api-generator/components/toolbar.js
@@ -21,6 +21,10 @@ const ToolbarSlots = [
     {
         name: 'end',
         description: "Custom content for the component's right side"
+    },
+    {
+        name: 'center',
+        description: "Custom content for the component's center"
     }
 ];
 
diff --git a/api-generator/components/tree.js b/api-generator/components/tree.js
index 433d4f39b..ddb7ddf4f 100644
--- a/api-generator/components/tree.js
+++ b/api-generator/components/tree.js
@@ -77,6 +77,12 @@ const TreeProps = [
         type: 'string',
         default: 'null',
         description: 'Height of the scroll viewport in fixed units or the "flex" keyword for a dynamic size.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/treeselect.js b/api-generator/components/treeselect.js
index d11b2a2c2..349987baa 100644
--- a/api-generator/components/treeselect.js
+++ b/api-generator/components/treeselect.js
@@ -101,6 +101,12 @@ const TreeSelectProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -196,8 +202,16 @@ const TreeSelectSlots = [
         description: 'Custom content when there is no data to display'
     },
     {
-        name: 'indicator',
+        name: 'triggericon',
         description: 'Custom content for the dropdown indicator'
+    },
+    {
+        name: 'itemtogglericon',
+        description: 'Custom item toggler icon template.'
+    },
+    {
+        name: 'itemcheckboxicon',
+        description: 'Custom item checkbox icon template.'
     }
 ];
 
diff --git a/api-generator/components/treetable.js b/api-generator/components/treetable.js
index 4d3be6134..9310522c4 100644
--- a/api-generator/components/treetable.js
+++ b/api-generator/components/treetable.js
@@ -221,6 +221,12 @@ const TreeTableProps = [
         type: 'string',
         default: 'null',
         description: 'Defines the responsive mode, currently only option is scroll.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -443,23 +449,55 @@ const TreeTableEvents = [
 const TreeTableSlots = [
     {
         name: 'header',
-        description: "Custom content for the component's header"
+        description: "Custom content for the component's header."
     },
     {
         name: 'paginatorstart',
-        description: "Custom content for the component paginator's left side"
+        description: "Custom content for the component paginator's left side."
     },
     {
         name: 'paginatorend',
-        description: "Custom content for the component paginator's right side"
+        description: "Custom content for the component paginator's right side."
     },
     {
         name: 'empty',
-        description: 'Custom content when there is no data to display'
+        description: 'Custom content when there is no data to display.'
     },
     {
         name: 'footer',
-        description: "Custom content for the component's footer"
+        description: "Custom content for the component's footer."
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
+    {
+        name: 'togglericon',
+        description: 'Custom toggler icon template.'
+    },
+    {
+        name: 'checkboxicon',
+        description: 'Custom checkbox icon template.'
+    },
+    {
+        name: 'sorticon',
+        description: 'Custom sort icon template.'
+    },
+    {
+        name: 'paginatorfirstpagelinkicon',
+        description: 'Custom paginator first page link icon template.'
+    },
+    {
+        name: 'paginatorprevpagelinkicon',
+        description: 'Custom paginator prev page link icon template.'
+    },
+    {
+        name: 'paginatornextpagelinkicon',
+        description: 'Custom paginator next page link icon template.'
+    },
+    {
+        name: 'paginatorlastpagelinkicon',
+        description: 'Custom paginator last page link icon template.'
     }
 ];
 
diff --git a/api-generator/components/tristatecheckbox.js b/api-generator/components/tristatecheckbox.js
index ea0e6b0c5..ce4779741 100644
--- a/api-generator/components/tristatecheckbox.js
+++ b/api-generator/components/tristatecheckbox.js
@@ -40,6 +40,12 @@ const TriStateCheckboxProps = [
         type: 'string',
         default: 'null',
         description: 'Used to define a string that labels the element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/api-generator/components/virtualscroller.js b/api-generator/components/virtualscroller.js
index 31d19ef4e..8acfd16cc 100644
--- a/api-generator/components/virtualscroller.js
+++ b/api-generator/components/virtualscroller.js
@@ -101,6 +101,12 @@ const VirtualScrollerProps = [
         type: 'number|string',
         default: '0',
         description: 'Index of the element in tabbing order.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
diff --git a/assets/data/news.json b/assets/data/news.json
index 39d6566b1..aa0892abd 100644
--- a/assets/data/news.json
+++ b/assets/data/news.json
@@ -1,8 +1,8 @@
 {
-    "id": 36,
-    "content": "Introducing the all-new Apollo Vite Template",
-    "linkText": "View Demo",
-    "linkHref": "https://www.primefaces.org/apollo-vue",
+    "id": 37,
+    "content": "Unstyled mode preview featuring Tailwind.",
+    "linkText": "Learn More",
+    "linkHref": "https://youtu.be/JpYIX3V96gs",
     "backgroundStyle": "background-color:#4f8ff7",
     "textStyle": "color:#ffffff;font-weight:500",
     "linkStyle": "color:#ffffff;font-weight:700;text-decoration: underline;"
diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index 4bd02ce41..a15a73703 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -455,9 +455,18 @@
             "to": "/uikit"
         },
         {
-            "name": "PrimeIcons",
+            "name": "Icons",
             "icon": "pi pi-eye",
-            "to": "/icons"
+            "children": [
+                {
+                    "name": "Prime Icons",
+                    "to": "/icons"
+                },
+                {
+                    "name": "Custom Icons",
+                    "to": "/customicons"
+                }
+            ]
         },
         {
             "name": "Templates",
diff --git a/build-meta.js b/build-meta.js
index 697602815..14486010e 100644
--- a/build-meta.js
+++ b/build-meta.js
@@ -14,7 +14,7 @@ function copyDependencies(inFolder, outFolder) {
 }
 
 copyDependencies('./components/lib/', 'dist/');
-copyDependencies('./components/lib/icon/', 'dist/icon/');
+copyDependencies('./components/lib/icons/', 'dist/icons/');
 
 fs.copySync(path.resolve(__dirname, './components/lib/ts-helpers.d.ts'), 'dist/ts-helpers.d.ts');
 fs.copySync(path.resolve(__dirname, './package-build.json'), 'dist/package.json');
diff --git a/components/doc/DocComponent.vue b/components/doc/DocComponent.vue
index 26dc47657..3891826ba 100644
--- a/components/doc/DocComponent.vue
+++ b/components/doc/DocComponent.vue
@@ -49,7 +49,7 @@ export default {
         };
     },
     mounted() {
-        this.tab = this.$route.hash.includes('api') ? 1 : 0;
+        this.tab = this.$route.hash.includes('api') ? 1 : this.$route.hash.includes('pt') ? 2 : 0;
     }
 };
 </script>
diff --git a/components/doc/codeeditor/templates.js b/components/doc/codeeditor/templates.js
index 86d423d04..d0069f29a 100644
--- a/components/doc/codeeditor/templates.js
+++ b/components/doc/codeeditor/templates.js
@@ -2,7 +2,7 @@ import pkg from '../../../package.json';
 import { services } from './services';
 
 const PrimeVue = {
-    version: '^3.26.1',
+    version: '^3.28.0',
     description:
         'PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.'
 };
diff --git a/components/lib/accordion/Accordion.vue b/components/lib/accordion/Accordion.vue
index 3cde6b2b2..201a54b55 100755
--- a/components/lib/accordion/Accordion.vue
+++ b/components/lib/accordion/Accordion.vue
@@ -43,8 +43,8 @@
 
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import ChevronDownIcon from 'primevue/icon/chevrondown';
-import ChevronRightIcon from 'primevue/icon/chevronright';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
diff --git a/components/lib/accordiontab/AccordionTab.d.ts b/components/lib/accordiontab/AccordionTab.d.ts
index 6070b4c4c..992b8e4ef 100755
--- a/components/lib/accordiontab/AccordionTab.d.ts
+++ b/components/lib/accordiontab/AccordionTab.d.ts
@@ -37,19 +37,19 @@ export interface AccordionTabPassThroughOptions {
     /**
      * Uses to pass attributes to the headeraction's DOM element.
      */
-    headeraction?: AccordionTabPassThroughOptionType;
+    headerAction?: AccordionTabPassThroughOptionType;
     /**
      * Uses to pass attributes to the headericon's DOM element.
      */
-    headericon?: AccordionTabPassThroughOptionType;
+    headerIcon?: AccordionTabPassThroughOptionType;
     /**
      * Uses to pass attributes to the headertitle's DOM element.
      */
-    headertitle?: AccordionTabPassThroughOptionType;
+    headerTitle?: AccordionTabPassThroughOptionType;
     /**
      * Uses to pass attributes to the toggleablecontent's DOM element.
      */
-    toggleablecontent?: AccordionTabPassThroughOptionType;
+    toggleableContent?: AccordionTabPassThroughOptionType;
     /**
      * Uses to pass attributes to the content's DOM element.
      */
diff --git a/components/lib/autocomplete/AutoComplete.d.ts b/components/lib/autocomplete/AutoComplete.d.ts
index def676430..494cfb10d 100755
--- a/components/lib/autocomplete/AutoComplete.d.ts
+++ b/components/lib/autocomplete/AutoComplete.d.ts
@@ -8,8 +8,20 @@
  *
  */
 import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
+import { ButtonPassThroughOptionType } from '../button';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
-import { VirtualScrollerItemOptions, VirtualScrollerProps } from '../virtualscroller';
+import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
+
+export declare type AutoCompletePassThroughOptionType = AutoCompletePassThroughAttributes | ((options: AutoCompletePassThroughMethodOptions) => AutoCompletePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AutoCompletePassThroughMethodOptions {
+    props: AutoCompleteProps;
+    state: AutoCompleteState;
+    context: AutoCompleteContext;
+}
 
 /**
  * Custom change event.
@@ -78,6 +90,141 @@ export interface AutoCompleteCompleteEvent {
     query: string;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AutoCompleteProps.pt}
+ */
+export interface AutoCompletePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the token' DOM element.
+     */
+    token?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the token label's DOM element.
+     */
+    tokenLabel?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the remove token icon's DOM element.
+     */
+    removeTokenIcon?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    dropdownButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the search result message's DOM element.
+     */
+    searchResultMessage?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the VirtualScroller component.
+     * @see {@link VirtualScrollerPassThroughOptionType}
+     */
+    virtualScroller?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item group's DOM element.
+     */
+    itemGroup?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: AutoCompletePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the selected message's DOM element.
+     */
+    selectedMessage?: AutoCompletePassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface AutoCompletePassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in AutoComplete component.
+ */
+export interface AutoCompleteState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item index as a number.
+     * @defaultvalue -1
+     */
+    focusedOptionIndex: number;
+    /**
+     * Current focused item index as a number.
+     * @defaultvalue -1
+     */
+    focusedMultipleOptionIndex: number;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current search state as a boolean.
+     * @defaultValue false
+     */
+    searching: boolean;
+}
+
+/**
+ * Defines current options in AutoComplete component.
+ */
+export interface AutoCompleteContext {
+    /**
+     * Current selection state of the item as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current focus state of the item as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in AutoComplete component.
  */
@@ -206,6 +353,7 @@ export interface AutoCompleteProps {
     panelProps?: HTMLAttributes | undefined;
     /**
      * Icon to display in the dropdown.
+     * @deprecated since v3.27.0. Use 'dropdownicon' slot.
      */
     dropdownIcon?: string | undefined;
     /**
@@ -214,10 +362,12 @@ export interface AutoCompleteProps {
     dropdownClass?: string | object | undefined;
     /**
      * Icon to display in loading state.
+     * @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
     /**
      * Icon to display in chip remove action.
+     * @deprecated since v3.27.0. Use 'removetokenicon' slot.
      */
     removeTokenIcon?: string | undefined;
     /**
@@ -271,6 +421,11 @@ export interface AutoCompleteProps {
      * Identifier of the underlying input element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AutoCompletePassThroughOptions}
+     */
+    pt?: AutoCompletePassThroughOptions;
 }
 
 /**
@@ -410,7 +565,16 @@ export interface AutoCompleteSlots {
     /**
      * Custom remove token icon template in multiple mode.
      */
-    removetokenicon(): VNode[];
+    removetokenicon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+        /**
+         * Remove token icon function.
+         */
+        onClick: void;
+    }): VNode[];
     /**
      * Custom loading icon template.
      */
diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index 19a1b487a..2b90502d3 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="containerClass" @click="onContainerClick">
+    <div ref="container" :class="containerClass" @click="onContainerClick" v-bind="ptm('root')">
         <input
             v-if="!multiple"
             ref="focusInput"
@@ -25,7 +25,7 @@
             @keydown="onKeyDown"
             @input="onInput"
             @change="onChange"
-            v-bind="inputProps"
+            v-bind="{ ...inputProps, ...ptm('input') }"
         />
         <ul
             v-if="multiple"
@@ -38,6 +38,7 @@
             @focus="onMultipleContainerFocus"
             @blur="onMultipleContainerBlur"
             @keydown="onMultipleContainerKeyDown"
+            v-bind="ptm('container')"
         >
             <li
                 v-for="(option, i) of modelValue"
@@ -49,15 +50,16 @@
                 :aria-selected="true"
                 :aria-setsize="modelValue.length"
                 :aria-posinset="i + 1"
+                v-bind="ptm('token')"
             >
                 <slot name="chip" :value="option">
-                    <span class="p-autocomplete-token-label">{{ getOptionLabel(option) }}</span>
+                    <span class="p-autocomplete-token-label" v-bind="ptm('tokenLabel')">{{ getOptionLabel(option) }}</span>
                 </slot>
-                <slot name="removetokenicon">
-                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-autocomplete-token-icon', removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" />
+                <slot name="removetokenicon" class="p-autocomplete-token-icon" :onClick="(event) => removeOption(event, i)">
+                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-autocomplete-token-icon', removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
                 </slot>
             </li>
-            <li class="p-autocomplete-input-token" role="option">
+            <li class="p-autocomplete-input-token" role="option" v-bind="ptm('token')">
                 <input
                     ref="focusInput"
                     :id="inputId"
@@ -81,30 +83,48 @@
                     @keydown="onKeyDown"
                     @input="onInput"
                     @change="onChange"
-                    v-bind="inputProps"
+                    v-bind="{ ...inputProps, ...ptm('input') }"
                 />
             </li>
         </ul>
         <slot v-if="searching" name="loadingicon">
-            <component :is="loadingIcon ? 'i' : 'SpinnerIcon'" :class="['p-autocomplete-loader', loadingIcon]" spin aria-hidden="true" />
+            <i v-if="loadingIcon" :class="['p-autocomplete-loader pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
+            <SpinnerIcon v-else class="p-autocomplete-loader" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
         </slot>
-        <Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="['p-autocomplete-dropdown', dropdownClass]" :disabled="disabled" aria-hidden="true" @click="onDropdownClick">
-            <slot name="dropdownicon">
-                <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" />
-            </slot>
+        <Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="['p-autocomplete-dropdown', dropdownClass]" :disabled="disabled" aria-hidden="true" @click="onDropdownClick" :pt="ptm('dropdownButton')">
+            <template #icon>
+                <slot name="dropdownicon">
+                    <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" v-bind="ptm('dropdownButton')['icon']" />
+                </slot>
+            </template>
         </Button>
-        <span role="status" aria-live="polite" class="p-hidden-accessible">
+        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')">
             {{ searchResultMessageText }}
         </span>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div v-if="overlayVisible" :ref="overlayRef" :class="panelStyleClass" :style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="panelProps">
+                <div
+                    v-if="overlayVisible"
+                    :ref="overlayRef"
+                    :class="panelStyleClass"
+                    :style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }"
+                    @click="onOverlayClick"
+                    @keydown="onOverlayKeyDown"
+                    v-bind="{ ...panelProps, ...ptm('panel') }"
+                >
                     <slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
-                    <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
+                    <VirtualScroller :ref="virtualScrollerRef" v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
                         <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
-                            <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-autocomplete-items', styleClass]" :style="contentStyle" role="listbox">
+                            <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-autocomplete-items', styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')">
                                 <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
-                                    <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" class="p-autocomplete-item-group" role="option">
+                                    <li
+                                        v-if="isOptionGroup(option)"
+                                        :id="id + '_' + getOptionIndex(i, getItemOptions)"
+                                        :style="{ height: itemSize ? itemSize + 'px' : undefined }"
+                                        class="p-autocomplete-item-group"
+                                        role="option"
+                                        v-bind="ptm('itemGroup')"
+                                    >
                                         <slot name="optiongroup" :option="option.optionGroup" :item="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
                                     </li>
                                     <li
@@ -121,13 +141,14 @@
                                         :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
                                         @click="onOptionSelect($event, option)"
                                         @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
+                                        v-bind="getPTOptions(option, getItemOptions, i, 'item')"
                                     >
                                         <slot v-if="$slots.option" name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
                                         <slot v-else name="item" :item="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
                                         <!--TODO: Deprecated since v3.16.0-->
                                     </li>
                                 </template>
-                                <li v-if="!items || (items && items.length === 0)" class="p-autocomplete-empty-message" role="option">
+                                <li v-if="!items || (items && items.length === 0)" class="p-autocomplete-empty-message" role="option" v-bind="ptm('emptyMessage')">
                                     <slot name="empty">{{ searchResultMessageText }}</slot>
                                 </li>
                             </ul>
@@ -137,7 +158,7 @@
                         </template>
                     </VirtualScroller>
                     <slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
-                    <span role="status" aria-live="polite" class="p-hidden-accessible">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')">
                         {{ selectedMessageText }}
                     </span>
                 </div>
@@ -147,10 +168,11 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
-import ChevronDownIcon from 'primevue/icon/chevrondown';
-import SpinnerIcon from 'primevue/icon/spinner';
-import TimesCircleIcon from 'primevue/icon/timescircle';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import SpinnerIcon from 'primevue/icons/spinner';
+import TimesCircleIcon from 'primevue/icons/timescircle';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
@@ -159,6 +181,7 @@ import VirtualScroller from 'primevue/virtualscroller';
 
 export default {
     name: 'AutoComplete',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
     props: {
         modelValue: null,
@@ -386,6 +409,15 @@ export default {
         getOptionRenderKey(option, index) {
             return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
         },
+        getPTOptions(option, itemOptions, index, key) {
+            return this.ptm(key, {
+                context: {
+                    selected: this.isSelected(option),
+                    focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),
+                    disabled: this.isOptionDisabled(option)
+                }
+            });
+        },
         isOptionDisabled(option) {
             return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
         },
diff --git a/components/lib/avatar/Avatar.d.ts b/components/lib/avatar/Avatar.d.ts
index 3eaef7fdc..09c5b0784 100644
--- a/components/lib/avatar/Avatar.d.ts
+++ b/components/lib/avatar/Avatar.d.ts
@@ -9,6 +9,45 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type AvatarPassThroughOptionType = AvatarPassThroughAttributes | ((options: AvatarPassThroughMethodOptions) => AvatarPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AvatarPassThroughMethodOptions {
+    props: AvatarProps;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface AvatarPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AvatarProps.pt}
+ */
+export interface AvatarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AvatarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: AvatarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: AvatarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the image's DOM element.
+     */
+    image?: AvatarPassThroughOptionType;
+}
+
 /**
  * Defines valid properties in Avatar component.
  */
@@ -19,6 +58,7 @@ export interface AvatarProps {
     label?: string | undefined;
     /**
      * Defines the icon to display.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     icon?: string | undefined;
     /**
@@ -43,6 +83,11 @@ export interface AvatarProps {
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AvatarPassThroughOptions}
+     */
+    pt?: AvatarPassThroughOptions;
 }
 
 /**
@@ -53,6 +98,10 @@ export interface AvatarSlots {
      * Content can easily be customized with the default slot instead of using the built-in modes.
      */
     default(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    icon(): VNode[];
 }
 
 /**
diff --git a/components/lib/avatar/Avatar.vue b/components/lib/avatar/Avatar.vue
index 8caad6900..b79474a37 100644
--- a/components/lib/avatar/Avatar.vue
+++ b/components/lib/avatar/Avatar.vue
@@ -1,16 +1,20 @@
 <template>
-    <div :class="containerClass" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel">
+    <div :class="containerClass" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root')">
         <slot>
-            <span v-if="label" class="p-avatar-text">{{ label }}</span>
-            <span v-else-if="icon" :class="iconClass"></span>
-            <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" />
+            <span v-if="label" class="p-avatar-text" v-bind="ptm('label')">{{ label }}</span>
+            <component v-else-if="$slots.icon" :is="$slots.icon" class="p-avatar-icon" v-bind="ptm('icon')" />
+            <span v-else-if="icon" :class="['p-avatar-icon', icon]" v-bind="ptm('icon')" />
+            <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" />
         </slot>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Avatar',
+    extends: BaseComponent,
     emits: ['error'],
     props: {
         label: {
@@ -58,9 +62,6 @@ export default {
                     'p-avatar-xl': this.size === 'xlarge'
                 }
             ];
-        },
-        iconClass() {
-            return ['p-avatar-icon', this.icon];
         }
     }
 };
diff --git a/components/lib/avatargroup/AvatarGroup.d.ts b/components/lib/avatargroup/AvatarGroup.d.ts
index 1cff7dd48..89a9d9c4a 100644
--- a/components/lib/avatargroup/AvatarGroup.d.ts
+++ b/components/lib/avatargroup/AvatarGroup.d.ts
@@ -9,10 +9,36 @@
  */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type AvatarGroupPassThroughOptionType = AvatarGroupPassThroughAttributes | null | undefined;
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface AvatarGroupPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AvatarGroupProps.pt}
+ */
+export interface AvatarGroupPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AvatarGroupPassThroughOptionType;
+}
+
 /**
  * Defines valid properties in AvatarGroup component.
  */
-export interface AvatarGroupProps {}
+export interface AvatarGroupProps {
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AvatarGroupPassThroughOptions}
+     */
+    pt?: AvatarGroupPassThroughOptions;
+}
 
 /**
  * Defines valid slots in AvatarGroup component.
diff --git a/components/lib/avatargroup/AvatarGroup.vue b/components/lib/avatargroup/AvatarGroup.vue
index 2a3311455..9d0ae8ccb 100644
--- a/components/lib/avatargroup/AvatarGroup.vue
+++ b/components/lib/avatargroup/AvatarGroup.vue
@@ -1,12 +1,15 @@
 <template>
-    <div class="p-avatar-group p-component">
+    <div class="p-avatar-group p-component" v-bind="ptm('root')">
         <slot></slot>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
-    name: 'AvatarGroup'
+    name: 'AvatarGroup',
+    extends: BaseComponent
 };
 </script>
 
diff --git a/components/lib/badge/Badge.d.ts b/components/lib/badge/Badge.d.ts
index 044eea063..3d7934bd8 100644
--- a/components/lib/badge/Badge.d.ts
+++ b/components/lib/badge/Badge.d.ts
@@ -10,6 +10,33 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type BadgePassThroughOptionType = BadgePassThroughAttributes | ((options: BadgePassThroughMethodOptions) => BadgePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface BadgePassThroughMethodOptions {
+    props: BadgeProps;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface BadgePassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link BadgeProps.pt}
+ */
+export interface BadgePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: BadgePassThroughOptionType;
+}
+
 /**
  * Defines valid properties in Badge component.
  */
@@ -26,6 +53,11 @@ export interface BadgeProps {
      * Size of the badge, valid options are 'large' and 'xlarge'.
      */
     size?: 'large' | 'xlarge' | null | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {BadgePassThroughOptions}
+     */
+    pt?: BadgePassThroughOptions;
 }
 
 /**
diff --git a/components/lib/badge/Badge.vue b/components/lib/badge/Badge.vue
index 4d0ab5c76..43e243306 100644
--- a/components/lib/badge/Badge.vue
+++ b/components/lib/badge/Badge.vue
@@ -1,14 +1,16 @@
 <template>
-    <span :class="badgeClass">
+    <span :class="badgeClass" v-bind="ptm('root')">
         <slot>{{ value }}</slot>
     </span>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Badge',
+    extends: BaseComponent,
     props: {
         value: {
             type: [String, Number],
diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index ea592db41..639711ae0 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -1,25 +1,46 @@
 <script>
 import { ObjectUtils } from 'primevue/utils';
+import { mergeProps } from 'vue';
 
 export default {
     name: 'BaseComponent',
     props: {
         pt: {
             type: Object,
-            value: {}
+            default: undefined
         }
     },
     methods: {
-        getPTItem(obj = {}, key = '') {
+        getOption(obj = {}, key = '') {
             const fKey = ObjectUtils.convertToFlatCase(key);
 
             return obj[Object.keys(obj).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''];
         },
+        getPTValue(obj = {}, key = '', params = {}) {
+            const self = ObjectUtils.getItemValue(this.getOption(obj, key), params);
+            const globalPT = ObjectUtils.getItemValue(this.getOption(this.defaultPT, key), params);
+            const merged = mergeProps(self, globalPT);
+
+            return merged;
+            /*
+             * @todo: The 'class' option in self can always be more powerful to style the component easily.
+             *
+             * return self && self['class'] ? { ...merged, ...{ class: self['class'] } } : merged;
+             */
+        },
         ptm(key = '', params = {}) {
-            return ObjectUtils.getItemValue(this.getPTItem(this.pt, key), { props: this.$props, state: this.$data, ...params });
+            return this.getPTValue(this.pt, key, { props: this.$props, state: this.$data, ...params });
         },
         ptmo(obj = {}, key = '', params = {}) {
-            return ObjectUtils.getItemValue(this.getPTItem(obj, key), params);
+            return this.getPTValue(obj, key, params);
+        }
+    },
+    computed: {
+        defaultPT() {
+            return ObjectUtils.getItemValue(this.getOption(this.$primevue.config.pt, this.$.type.name), this.defaultsParams);
+        },
+        defaultsParams() {
+            return { instance: this.$ };
         }
     }
 };
diff --git a/components/lib/baseicon/BaseIcon.vue b/components/lib/baseicon/BaseIcon.vue
index c0f4d160a..f68e733a2 100644
--- a/components/lib/baseicon/BaseIcon.vue
+++ b/components/lib/baseicon/BaseIcon.vue
@@ -6,11 +6,11 @@ export default {
     props: {
         label: {
             type: String,
-            value: undefined
+            default: undefined
         },
         spin: {
             type: Boolean,
-            value: false
+            default: false
         }
     },
     methods: {
@@ -33,11 +33,8 @@ export default {
 };
 </script>
 <style>
-/* Theme */
 .p-icon {
     display: inline-block;
-    width: 1rem;
-    height: 1rem;
 }
 
 .p-icon-spin {
diff --git a/components/lib/blockui/BlockUI.d.ts b/components/lib/blockui/BlockUI.d.ts
index 5ca626cf1..a9d5f8c5d 100755
--- a/components/lib/blockui/BlockUI.d.ts
+++ b/components/lib/blockui/BlockUI.d.ts
@@ -10,6 +10,45 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type BlockUIPassThroughOptionType = BlockUIPassThroughAttributes | ((options: BlockUIPassThroughMethodOptions) => BlockUIPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface BlockUIPassThroughMethodOptions {
+    props: BlockUIProps;
+    state: BlockUIState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link BlockUIProps.pt}
+ */
+export interface BlockUIPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: BlockUIPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface BlockUIPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in BlockUI component.
+ */
+export interface BlockUIState {
+    /**
+     * Current blocked state as a boolean.
+     * @defaultValue false
+     */
+    isBlocked: boolean;
+}
+
 /**
  * Defines valid properties in BlockUI component
  */
@@ -34,6 +73,11 @@ export interface BlockUIProps {
      * @defaultValue true
      */
     autoZIndex?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {BlockUIPassThroughOptions}
+     */
+    pt?: BlockUIPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/blockui/BlockUI.spec.js b/components/lib/blockui/BlockUI.spec.js
index 456e22db6..0d4a4e35a 100644
--- a/components/lib/blockui/BlockUI.spec.js
+++ b/components/lib/blockui/BlockUI.spec.js
@@ -1,16 +1,7 @@
-import { config, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { beforeEach, expect } from 'vitest';
 import BlockUI from './BlockUI.vue';
 
-config.global.mocks = {
-    $primevue: {
-        config: {
-            zIndex: {
-                modal: 1100
-            }
-        }
-    }
-};
 vi.mock('primevue/utils');
 let wrapper = null;
 
diff --git a/components/lib/blockui/BlockUI.vue b/components/lib/blockui/BlockUI.vue
index 7c3eb981b..1d34bd7f1 100755
--- a/components/lib/blockui/BlockUI.vue
+++ b/components/lib/blockui/BlockUI.vue
@@ -1,14 +1,16 @@
 <template>
-    <div ref="container" class="p-blockui-container" :aria-busy="isBlocked">
+    <div ref="container" class="p-blockui-container" :aria-busy="isBlocked" v-bind="ptm('root')">
         <slot></slot>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
 
 export default {
     name: 'BlockUI',
+    extends: BaseComponent,
     emits: ['block', 'unblock'],
     props: {
         blocked: {
diff --git a/components/lib/breadcrumb/Breadcrumb.d.ts b/components/lib/breadcrumb/Breadcrumb.d.ts
index 7e4675394..114b0030d 100755
--- a/components/lib/breadcrumb/Breadcrumb.d.ts
+++ b/components/lib/breadcrumb/Breadcrumb.d.ts
@@ -11,6 +11,61 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type BreadcrumbPassThroughOptionType = BreadcrumbPassThroughAttributes | ((options: BreadcrumbPassThroughMethodOptions) => BreadcrumbPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface BreadcrumbPassThroughMethodOptions {
+    props: BreadcrumbProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link BreadcrumbProps.pt}
+ */
+export interface BreadcrumbPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: BreadcrumbPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: BreadcrumbPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: BreadcrumbPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: BreadcrumbPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: BreadcrumbPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: BreadcrumbPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: BreadcrumbPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator icon's DOM element.
+     */
+    separatorIcon?: BreadcrumbPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface BreadcrumbPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Breadcrumb component.
  */
@@ -36,6 +91,11 @@ export interface BreadcrumbProps {
      * Identifier of the underlying menu element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {BreadcrumbPassThroughOptions}
+     */
+    pt?: BreadcrumbPassThroughOptions;
 }
 
 /**
@@ -56,6 +116,20 @@ export interface BreadcrumbSlots {
      * Custom separator template.
      */
     separator(): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/breadcrumb/Breadcrumb.vue b/components/lib/breadcrumb/Breadcrumb.vue
index e59e31a09..bf1afcf41 100755
--- a/components/lib/breadcrumb/Breadcrumb.vue
+++ b/components/lib/breadcrumb/Breadcrumb.vue
@@ -1,25 +1,27 @@
 <template>
-    <nav class="p-breadcrumb p-component">
-        <ol class="p-breadcrumb-list">
-            <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :template="$slots.item" :exact="exact" />
+    <nav class="p-breadcrumb p-component" v-bind="ptm('root')">
+        <ol class="p-breadcrumb-list" v-bind="ptm('menu')">
+            <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :templates="$slots" :exact="exact" :pt="pt" />
             <template v-for="(item, i) of model" :key="item.label">
-                <li v-if="home || i !== 0" class="p-menuitem-separator">
+                <li v-if="home || i !== 0" class="p-menuitem-separator" v-bind="ptm('separator')">
                     <slot name="separator">
-                        <ChevronRightIcon aria-hidden="true" />
+                        <ChevronRightIcon aria-hidden="true" v-bind="ptm('separatorIcon')" />
                     </slot>
                 </li>
-                <BreadcrumbItem :item="item" :template="$slots.item" :exact="exact" />
+                <BreadcrumbItem :item="item" :index="i" :templates="$slots" :exact="exact" :pt="pt" />
             </template>
         </ol>
     </nav>
 </template>
 
 <script>
-import ChevronRightIcon from 'primevue/icon/chevronright';
+import BaseComponent from 'primevue/basecomponent';
+import ChevronRightIcon from 'primevue/icons/chevronright';
 import BreadcrumbItem from './BreadcrumbItem.vue';
 
 export default {
     name: 'Breadcrumb',
+    extends: BaseComponent,
     props: {
         model: {
             type: Array,
diff --git a/components/lib/breadcrumb/BreadcrumbItem.vue b/components/lib/breadcrumb/BreadcrumbItem.vue
index ae863e4b5..3f6bbbbe1 100755
--- a/components/lib/breadcrumb/BreadcrumbItem.vue
+++ b/components/lib/breadcrumb/BreadcrumbItem.vue
@@ -1,28 +1,34 @@
 <template>
-    <li v-if="visible()" :class="containerClass()">
-        <template v-if="!template">
+    <li v-if="visible()" :class="containerClass()" v-bind="ptm('menuitem')">
+        <template v-if="!templates || !templates.item">
             <router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
-                <a :href="href" :class="linkClass({ isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)">
-                    <span v-if="item.icon" :class="iconClass"></span>
-                    <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
+                <a :href="href" :class="linkClass({ isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)" v-bind="ptm('action')">
+                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" class="p-menuitem-icon" />
+                    <span v-else-if="item.icon" :class="['p-menuitem-icon', item.icon]" v-bind="ptm('icon')" />
+                    <span v-if="item.label" class="p-menuitem-text" v-bind="ptm('label')">{{ label() }}</span>
                 </a>
             </router-link>
-            <a v-else :href="item.url || '#'" :class="linkClass()" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick">
-                <span v-if="item.icon" :class="iconClass"></span>
-                <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
+            <a v-else :href="item.url || '#'" :class="linkClass()" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action')">
+                <component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" class="p-menuitem-icon" />
+                <span v-else-if="item.icon" :class="['p-menuitem-icon', item.icon]" v-bind="ptm('icon')" />
+                <span v-if="item.label" class="p-menuitem-text" v-bind="ptm('label')">{{ label() }}</span>
             </a>
         </template>
-        <component v-else :is="template" :item="item"></component>
+        <component v-else :is="templates.item" :item="item"></component>
     </li>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'BreadcrumbItem',
+    extends: BaseComponent,
     props: {
         item: null,
-        template: null,
-        exact: null
+        templates: null,
+        exact: null,
+        index: null
     },
     methods: {
         onClick(event, navigate) {
@@ -64,11 +70,6 @@ export default {
 
             return to === lastPath || url === lastPath ? 'page' : undefined;
         }
-    },
-    computed: {
-        iconClass() {
-            return ['p-menuitem-icon', this.item.icon];
-        }
     }
 };
 </script>
diff --git a/components/lib/button/Button.d.ts b/components/lib/button/Button.d.ts
index a66e2a8d8..f6955bb85 100755
--- a/components/lib/button/Button.d.ts
+++ b/components/lib/button/Button.d.ts
@@ -10,6 +10,49 @@
 import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ButtonPassThroughOptionType = ButtonPassThroughAttributes | ((options: ButtonPassThroughMethodOptions) => ButtonPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ButtonPassThroughMethodOptions {
+    props: ButtonProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ButtonProps.pt}
+ */
+export interface ButtonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the badge's DOM element.
+     */
+    badge?: ButtonPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ButtonPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Button component.
  */
@@ -54,7 +97,6 @@ export interface ButtonProps extends ButtonHTMLAttributes {
     loading?: boolean | undefined;
     /**
      * Icon to display in loading state.
-     * @defaultValue pi pi-spinner pi-spin
      */
     loadingIcon?: string | undefined;
     /**
@@ -95,6 +137,11 @@ export interface ButtonProps extends ButtonHTMLAttributes {
      * @defaultValue false
      */
     plain?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ButtonPassThroughOptions}
+     */
+    pt?: ButtonPassThroughOptions;
 }
 
 /**
@@ -105,6 +152,26 @@ export interface ButtonSlots {
      * Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.
      */
     default(): VNode[];
+    /**
+     * Custom icon template.
+     * @param {Object} scope - icon slot's params.
+     */
+    icon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom loading icon template.
+     * @param {Object} scope - loading icon slot's params.
+     */
+    loadingicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/button/Button.spec.js b/components/lib/button/Button.spec.js
index 21a4714de..f0b70295e 100644
--- a/components/lib/button/Button.spec.js
+++ b/components/lib/button/Button.spec.js
@@ -79,6 +79,6 @@ describe('Button.vue', () => {
             }
         });
 
-        expect(wrapper.html()).toBe('<button class="p-button p-component" type="button"><span class="ml-2 font-bold">Default PrimeVue Button</span></button>');
+        expect(wrapper.html()).toBe(`<button class="p-button p-component" type="button"><span class="ml-2 font-bold">Default PrimeVue Button</span></button>`);
     });
 });
diff --git a/components/lib/button/Button.vue b/components/lib/button/Button.vue
index a60cececc..7c58b28b2 100755
--- a/components/lib/button/Button.vue
+++ b/components/lib/button/Button.vue
@@ -1,19 +1,27 @@
 <template>
-    <button v-ripple :class="buttonClass" type="button" :aria-label="defaultAriaLabel" :disabled="disabled">
+    <button v-ripple :class="buttonClass" type="button" :aria-label="defaultAriaLabel" :disabled="disabled" v-bind="ptm('root')">
         <slot>
-            <span v-if="loading && !icon" :class="iconStyleClass"></span>
-            <span v-if="icon" :class="iconStyleClass"></span>
-            <span class="p-button-label">{{ label || '&nbsp;' }}</span>
-            <span v-if="badge" :class="badgeStyleClass">{{ badge }}</span>
+            <slot v-if="loading" name="loadingicon" :class="loadingIconStyleClass">
+                <span v-if="loadingIcon" :class="[loadingIconStyleClass, loadingIcon]" v-bind="ptm('loadingIcon')" />
+                <SpinnerIcon v-else :class="loadingIconStyleClass" spin v-bind="ptm('loadingIcon')" />
+            </slot>
+            <slot v-else name="icon" :class="iconStyleClass">
+                <span v-if="icon" :class="[iconStyleClass, icon]" v-bind="ptm('icon')"></span>
+            </slot>
+            <span class="p-button-label" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
+            <span v-if="badge" :class="badgeStyleClass" v-bind="ptm('badge')">{{ badge }}</span>
         </slot>
     </button>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import SpinnerIcon from 'primevue/icons/spinner';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'Button',
+    extends: BaseComponent,
     props: {
         label: {
             type: String,
@@ -45,7 +53,7 @@ export default {
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner pi-spin'
+            default: undefined
         },
         link: {
             type: Boolean,
@@ -85,11 +93,11 @@ export default {
             return [
                 'p-button p-component',
                 {
-                    'p-button-icon-only': this.icon && !this.label,
+                    'p-button-icon-only': this.hasIcon && !this.label,
                     'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
                     'p-disabled': this.$attrs.disabled || this.loading,
                     'p-button-loading': this.loading,
-                    'p-button-loading-label-only': this.loading && !this.icon && this.label,
+                    'p-button-loading-label-only': this.loading && !this.hasIcon && this.label,
                     'p-button-link': this.link,
                     [`p-button-${this.severity}`]: this.severity,
                     'p-button-raised': this.raised,
@@ -104,7 +112,6 @@ export default {
         },
         iconStyleClass() {
             return [
-                this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
                 'p-button-icon',
                 this.iconClass,
                 {
@@ -115,6 +122,9 @@ export default {
                 }
             ];
         },
+        loadingIconStyleClass() {
+            return ['p-button-loading-icon pi-spin', this.iconStyleClass];
+        },
         badgeStyleClass() {
             return [
                 'p-badge p-component',
@@ -129,8 +139,14 @@ export default {
         },
         defaultAriaLabel() {
             return this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs['aria-label'];
+        },
+        hasIcon() {
+            return this.icon || this.$slots.icon;
         }
     },
+    components: {
+        SpinnerIcon
+    },
     directives: {
         ripple: Ripple
     }
diff --git a/components/lib/calendar/Calendar.d.ts b/components/lib/calendar/Calendar.d.ts
index 78c91e8c9..6a5f8edae 100755
--- a/components/lib/calendar/Calendar.d.ts
+++ b/components/lib/calendar/Calendar.d.ts
@@ -8,8 +8,19 @@
  *
  */
 import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
+import { ButtonPassThroughOptionType } from '../button';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type CalendarPassThroughOptionType = CalendarPassThroughAttributes | ((options: CalendarPassThroughMethodOptions) => CalendarPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface CalendarPassThroughMethodOptions {
+    props: CalendarProps;
+    state: CalendarState;
+}
+
 /**
  * Custom Calendar responsive options metadata.
  */
@@ -69,6 +80,259 @@ export interface CalendarBlurEvent {
     value: string;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link CalendarProps.pt}
+ */
+export interface CalendarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    dropdownButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the group container's DOM element.
+     */
+    groupContainer?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the group's DOM element.
+     */
+    group?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    previousButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the title's DOM element.
+     */
+    title?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the month title's DOM element.
+     */
+    monthTitle?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the year title's DOM element.
+     */
+    yearTitle?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the decade title's DOM element.
+     */
+    decadeTitle?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    nextButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table's DOM element.
+     */
+    table?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table header's DOM element.
+     */
+    tableHeader?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table header row's DOM element.
+     */
+    tableHeaderRow?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table header cell's DOM element.
+     */
+    tableHeaderCell?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the week label's DOM element.
+     */
+    weekLabel?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the week day's DOM element.
+     */
+    weekDay?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table body's DOM element.
+     */
+    tableBody?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table body row's DOM element.
+     */
+    tableBodyRow?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the week number's DOM element.
+     */
+    weekNumber?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the week label container's DOM element.
+     */
+    weekLabelContainer?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the day's DOM element.
+     */
+    day?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the day label's DOM element.
+     */
+    dayLabel?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the aria selected day's DOM element.
+     */
+    ariaSelectedDay?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the month picker's DOM element.
+     */
+    monthPicker?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the month's DOM element.
+     */
+    month?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the aria month's DOM element.
+     */
+    ariaMonth?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the year picker's DOM element.
+     */
+    yearPicker?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the year's DOM element.
+     */
+    year?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the aria year's DOM element.
+     */
+    ariaYear?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the time picker's DOM element.
+     */
+    timePicker?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hour picker's DOM element.
+     */
+    hourPicker?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hour's DOM element.
+     */
+    hour?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separatorc ontainer's DOM element.
+     */
+    separatorContainer?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the minute picker's DOM element.
+     */
+    minutePicker?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the minute's DOM element.
+     */
+    minute?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the second picker's DOM element.
+     */
+    secondPicker?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the second's DOM element.
+     */
+    second?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the ampm picker's DOM element.
+     */
+    ampmPicker?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the ampm's DOM element.
+     */
+    ampm?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the buttonbar's DOM element.
+     */
+    buttonbar?: CalendarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    todayButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    clearButton?: ButtonPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface CalendarPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Calendar component.
+ */
+export interface CalendarState {
+    /**
+     * Current month as a number.
+     */
+    currentMonth: number;
+    /**
+     * Current year as a number.
+     */
+    currentYear: number;
+    /**
+     * Current hour as a number.
+     */
+    currentHour: number;
+    /**
+     * Current minute as a number.
+     */
+    currentMinute: number;
+    /**
+     * Current second as a number.
+     */
+    currentSecond: number;
+    /**
+     * Current pm state as a boolean.
+     * @defaultValue false
+     */
+    pm: boolean;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current view state as a string.
+     * @defaultValue 'date'
+     */
+    currentView: string;
+}
+
 /**
  * Defines valid properties in Calendar component.
  */
@@ -109,22 +373,27 @@ export interface CalendarProps {
     showIcon?: boolean | undefined;
     /**
      * Icon of the calendar button.
+     * @deprecated since v3.27.0. Use 'dropdownicon' slot.
      */
     icon?: string | undefined;
     /**
      * Icon to show in the previous button.
+     * @deprecated since v3.27.0. Use 'previousicon' slot.
      */
     previousIcon?: string | undefined;
     /**
      * Icon to show in the next button.
+     * @deprecated since v3.27.0. Use 'nexticon' slot.
      */
     nextIcon?: string | undefined;
     /**
      * Icon to show in each of the increment buttons.
+     * @deprecated since v3.27.0. Use 'incrementicon' slot.
      */
     incrementIcon?: string | undefined;
     /**
      * Icon to show in each of the decrement buttons.
+     * @deprecated since v3.27.0. Use 'decrementicon' slot.
      */
     decrementIcon?: string | undefined;
     /**
@@ -331,6 +600,11 @@ export interface CalendarProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {CalendarPassThroughOptions}
+     */
+    pt?: CalendarPassThroughOptions;
 }
 
 /**
@@ -364,13 +638,13 @@ export interface CalendarSlots {
         years: string[] | undefined;
     }): VNode[];
     /**
-     * Custom trigger icon template.
+     * Custom dropdown icon template.
      */
-    triggericon(): VNode[];
+    dropdownicon(): VNode[];
     /**
      * Custom previous icon template.
      */
-    previcon(): VNode[];
+    previousicon(): VNode[];
     /**
      * Custom next icon template.
      */
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index dfe20b459..19a5b8648 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -1,5 +1,5 @@
 <template>
-    <span ref="container" :id="id" :class="containerClass">
+    <span ref="container" :id="id" :class="containerClass" v-bind="ptm('root')">
         <input
             v-if="!inline"
             :ref="inputRef"
@@ -25,7 +25,7 @@
             @focus="onFocus"
             @blur="onBlur"
             @keydown="onKeyDown"
-            v-bind="inputProps"
+            v-bind="{ ...inputProps, ...ptm('input') }"
         />
         <CalendarButton
             v-if="showIcon"
@@ -37,10 +37,13 @@
             aria-haspopup="dialog"
             :aria-expanded="overlayVisible"
             :aria-controls="panelId"
+            :pt="ptm('dropdownButton')"
         >
-            <slot name="triggericon">
-                <component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" />
-            </slot>
+            <template #icon>
+                <slot name="dropdownicon">
+                    <component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButton')['icon']" />
+                </slot>
+            </template>
         </CalendarButton>
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave">
@@ -56,12 +59,12 @@
                     @click="onOverlayClick"
                     @keydown="onOverlayKeyDown"
                     @mouseup="onOverlayMouseUp"
-                    v-bind="panelProps"
+                    v-bind="{ ...panelProps, ...ptm('panel') }"
                 >
                     <template v-if="!timeOnly">
-                        <div class="p-datepicker-group-container">
-                            <div v-for="(month, groupIndex) of months" :key="month.month + month.year" class="p-datepicker-group">
-                                <div class="p-datepicker-header">
+                        <div class="p-datepicker-group-container" v-bind="ptm('groupContainer')">
+                            <div v-for="(month, groupIndex) of months" :key="month.month + month.year" class="p-datepicker-group" v-bind="ptm('group')">
+                                <div class="p-datepicker-header" v-bind="ptm('header')">
                                     <slot name="header"></slot>
                                     <button
                                         v-show="showOtherMonths ? groupIndex === 0 : false"
@@ -72,12 +75,13 @@
                                         @keydown="onContainerButtonKeydown"
                                         :disabled="disabled"
                                         :aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
+                                        v-bind="ptm('previousButton')"
                                     >
-                                        <slot name="previcon">
-                                            <component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="['p-datepicker-prev-icon', previousIcon]" />
+                                        <slot name="previousicon">
+                                            <component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="['p-datepicker-prev-icon', previousIcon]" v-bind="ptm('previousIcon')" />
                                         </slot>
                                     </button>
-                                    <div class="p-datepicker-title">
+                                    <div class="p-datepicker-title" v-bind="ptm('title')">
                                         <button
                                             v-if="currentView === 'date'"
                                             type="button"
@@ -86,6 +90,7 @@
                                             class="p-datepicker-month p-link"
                                             :disabled="switchViewButtonDisabled"
                                             :aria-label="$primevue.config.locale.chooseMonth"
+                                            v-bind="ptm('monthTitle')"
                                         >
                                             {{ getMonthName(month.month) }}
                                         </button>
@@ -97,10 +102,11 @@
                                             class="p-datepicker-year p-link"
                                             :disabled="switchViewButtonDisabled"
                                             :aria-label="$primevue.config.locale.chooseYear"
+                                            v-bind="ptm('yearTitle')"
                                         >
                                             {{ getYear(month) }}
                                         </button>
-                                        <span v-if="currentView === 'year'" class="p-datepicker-decade">
+                                        <span v-if="currentView === 'year'" class="p-datepicker-decade" v-bind="ptm('decadeTitle')">
                                             <slot name="decade" :years="yearPickerValues"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot>
                                         </span>
                                     </div>
@@ -113,33 +119,34 @@
                                         @keydown="onContainerButtonKeydown"
                                         :disabled="disabled"
                                         :aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
+                                        v-bind="ptm('nextButton')"
                                     >
                                         <slot name="nexticon">
-                                            <component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="['p-datepicker-next-icon', nextIcon]" />
+                                            <component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="['p-datepicker-next-icon', nextIcon]" v-bind="ptm('nextIcon')" />
                                         </slot>
                                     </button>
                                 </div>
-                                <div v-if="currentView === 'date'" class="p-datepicker-calendar-container">
-                                    <table class="p-datepicker-calendar" role="grid">
-                                        <thead>
-                                            <tr>
-                                                <th v-if="showWeek" scope="col" class="p-datepicker-weekheader p-disabled">
-                                                    <span>{{ weekHeaderLabel }}</span>
+                                <div v-if="currentView === 'date'" class="p-datepicker-calendar-container" v-bind="ptm('container')">
+                                    <table class="p-datepicker-calendar" role="grid" v-bind="ptm('table')">
+                                        <thead v-bind="ptm('tableHeader')">
+                                            <tr v-bind="ptm('tableHeaderRow')">
+                                                <th v-if="showWeek" scope="col" class="p-datepicker-weekheader p-disabled" v-bind="ptm('tableHeaderCell')">
+                                                    <span v-bind="ptm('weekLabel')">{{ weekHeaderLabel }}</span>
                                                 </th>
-                                                <th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay">
-                                                    <span>{{ weekDay }}</span>
+                                                <th v-for="weekDay of weekDays" :key="weekDay" scope="col" :abbr="weekDay" v-bind="ptm('tableHeaderCell')">
+                                                    <span v-bind="ptm('weekDay')">{{ weekDay }}</span>
                                                 </th>
                                             </tr>
                                         </thead>
-                                        <tbody>
-                                            <tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month">
-                                                <td v-if="showWeek" class="p-datepicker-weeknumber">
-                                                    <span class="p-disabled">
-                                                        <span v-if="month.weekNumbers[i] < 10" style="visibility: hidden">0</span>
+                                        <tbody v-bind="ptm('tableBody')">
+                                            <tr v-for="(week, i) of month.dates" :key="week[0].day + '' + week[0].month" v-bind="ptm('tableBodyRow')">
+                                                <td v-if="showWeek" class="p-datepicker-weeknumber" v-bind="ptm('weekNumber')">
+                                                    <span class="p-disabled" v-bind="ptm('weekLabelContainer')">
+                                                        <span v-if="month.weekNumbers[i] < 10" style="visibility: hidden" v-bind="ptm('weekLabel')">0</span>
                                                         {{ month.weekNumbers[i] }}
                                                     </span>
                                                 </td>
-                                                <td v-for="date of week" :key="date.day + '' + date.month" :aria-label="date.day" :class="{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }">
+                                                <td v-for="date of week" :key="date.day + '' + date.month" :aria-label="date.day" :class="{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }" v-bind="ptm('day')">
                                                     <span
                                                         v-ripple
                                                         :class="{ 'p-highlight': isSelected(date), 'p-disabled': !date.selectable }"
@@ -147,10 +154,11 @@
                                                         draggable="false"
                                                         @keydown="onDateCellKeydown($event, date, groupIndex)"
                                                         :aria-selected="isSelected(date)"
+                                                        v-bind="ptm('dayLabel')"
                                                     >
                                                         <slot name="date" :date="date">{{ date.day }}</slot>
                                                     </span>
-                                                    <div v-if="isSelected(date)" class="p-hidden-accessible" aria-live="polite">
+                                                    <div v-if="isSelected(date)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('ariaSelectedDay')">
                                                         {{ date.day }}
                                                     </div>
                                                 </td>
@@ -160,7 +168,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div v-if="currentView === 'month'" class="p-monthpicker">
+                        <div v-if="currentView === 'month'" class="p-monthpicker" v-bind="ptm('monthPicker')">
                             <span
                                 v-for="(m, i) of monthPickerValues"
                                 :key="m"
@@ -169,14 +177,15 @@
                                 @keydown="onMonthCellKeydown($event, { month: m, index: i })"
                                 class="p-monthpicker-month"
                                 :class="{ 'p-highlight': isMonthSelected(i), 'p-disabled': !m.selectable }"
+                                v-bind="ptm('month')"
                             >
                                 {{ m.value }}
-                                <div v-if="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite">
+                                <div v-if="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('ariaMonth')">
                                     {{ m.value }}
                                 </div>
                             </span>
                         </div>
-                        <div v-if="currentView === 'year'" class="p-yearpicker">
+                        <div v-if="currentView === 'year'" class="p-yearpicker" v-bind="ptm('yearPicker')">
                             <span
                                 v-for="y of yearPickerValues"
                                 :key="y.value"
@@ -185,16 +194,17 @@
                                 @keydown="onYearCellKeydown($event, y)"
                                 class="p-yearpicker-year"
                                 :class="{ 'p-highlight': isYearSelected(y.value), 'p-disabled': !y.selectable }"
+                                v-bind="ptm('year')"
                             >
                                 {{ y.value }}
-                                <div v-if="isYearSelected(y.value)" class="p-hidden-accessible" aria-live="polite">
+                                <div v-if="isYearSelected(y.value)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('ariaYear')">
                                     {{ y.value }}
                                 </div>
                             </span>
                         </div>
                     </template>
-                    <div v-if="(showTime || timeOnly) && currentView === 'date'" class="p-timepicker">
-                        <div class="p-hour-picker">
+                    <div v-if="(showTime || timeOnly) && currentView === 'date'" class="p-timepicker" v-bind="ptm('timePicker')">
+                        <div class="p-hour-picker" v-bind="ptm('hourPicker')">
                             <button
                                 v-ripple
                                 class="p-link"
@@ -208,12 +218,13 @@
                                 @keyup.enter="onTimePickerElementMouseUp($event)"
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 type="button"
+                                v-bind="ptm('incrementButton')"
                             >
                                 <slot name="incrementicon">
-                                    <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" />
+                                    <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" />
                                 </slot>
                             </button>
-                            <span>{{ formattedCurrentHour }}</span>
+                            <span v-bind="ptm('hour')">{{ formattedCurrentHour }}</span>
                             <button
                                 v-ripple
                                 class="p-link"
@@ -227,16 +238,17 @@
                                 @keyup.enter="onTimePickerElementMouseUp($event)"
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 type="button"
+                                v-bind="ptm('decrementButton')"
                             >
                                 <slot name="decrementicon">
-                                    <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" />
+                                    <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" />
                                 </slot>
                             </button>
                         </div>
-                        <div class="p-separator">
-                            <span>{{ timeSeparator }}</span>
+                        <div class="p-separator" v-bind="ptm('separatorContainer')">
+                            <span v-bind="ptm('separator')">{{ timeSeparator }}</span>
                         </div>
-                        <div class="p-minute-picker">
+                        <div class="p-minute-picker" v-bind="ptm('minutePicker')">
                             <button
                                 v-ripple
                                 class="p-link"
@@ -251,12 +263,13 @@
                                 @keyup.enter="onTimePickerElementMouseUp($event)"
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 type="button"
+                                v-bind="ptm('incrementButton')"
                             >
                                 <slot name="incrementicon">
-                                    <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" />
+                                    <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" />
                                 </slot>
                             </button>
-                            <span>{{ formattedCurrentMinute }}</span>
+                            <span v-bind="ptm('minute')">{{ formattedCurrentMinute }}</span>
                             <button
                                 v-ripple
                                 class="p-link"
@@ -271,16 +284,17 @@
                                 @keyup.enter="onTimePickerElementMouseUp($event)"
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 type="button"
+                                v-bind="ptm('decrementButton')"
                             >
                                 <slot name="decrementicon">
-                                    <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" />
+                                    <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" />
                                 </slot>
                             </button>
                         </div>
-                        <div v-if="showSeconds" class="p-separator">
-                            <span>{{ timeSeparator }}</span>
+                        <div v-if="showSeconds" class="p-separator" v-bind="ptm('separatorContainer')">
+                            <span v-bind="ptm('separator')">{{ timeSeparator }}</span>
                         </div>
-                        <div v-if="showSeconds" class="p-second-picker">
+                        <div v-if="showSeconds" class="p-second-picker" v-bind="ptm('secondPicker')">
                             <button
                                 v-ripple
                                 class="p-link"
@@ -295,12 +309,13 @@
                                 @keyup.enter="onTimePickerElementMouseUp($event)"
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 type="button"
+                                v-bind="ptm('incrementButton')"
                             >
                                 <slot name="incrementicon">
-                                    <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" />
+                                    <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" />
                                 </slot>
                             </button>
-                            <span>{{ formattedCurrentSecond }}</span>
+                            <span v-bind="ptm('second')">{{ formattedCurrentSecond }}</span>
                             <button
                                 v-ripple
                                 class="p-link"
@@ -315,32 +330,33 @@
                                 @keyup.enter="onTimePickerElementMouseUp($event)"
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 type="button"
+                                v-bind="ptm('decrementButton')"
                             >
                                 <slot name="decrementicon">
-                                    <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" />
+                                    <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" />
                                 </slot>
                             </button>
                         </div>
-                        <div v-if="hourFormat == '12'" class="p-separator">
-                            <span>{{ timeSeparator }}</span>
+                        <div v-if="hourFormat == '12'" class="p-separator" v-bind="ptm('separatorContainer')">
+                            <span v-bind="ptm('separator')">{{ timeSeparator }}</span>
                         </div>
-                        <div v-if="hourFormat == '12'" class="p-ampm-picker">
-                            <button v-ripple class="p-link" :aria-label="$primevue.config.locale.am" @click="toggleAMPM($event)" type="button" :disabled="disabled">
+                        <div v-if="hourFormat == '12'" class="p-ampm-picker" v-bind="ptm('ampmPicker')">
+                            <button v-ripple class="p-link" :aria-label="$primevue.config.locale.am" @click="toggleAMPM($event)" type="button" :disabled="disabled" v-bind="ptm('incrementButton')">
                                 <slot name="incrementicon">
-                                    <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" />
+                                    <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="incrementIcon" v-bind="ptm('incrementIcon')" />
                                 </slot>
                             </button>
-                            <span>{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
-                            <button v-ripple class="p-link" :aria-label="$primevue.config.locale.pm" @click="toggleAMPM($event)" type="button" :disabled="disabled">
+                            <span v-bind="ptm('ampm')">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
+                            <button v-ripple class="p-link" :aria-label="$primevue.config.locale.pm" @click="toggleAMPM($event)" type="button" :disabled="disabled" v-bind="ptm('decrementButton')">
                                 <slot name="decrementicon">
-                                    <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" />
+                                    <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="decrementIcon" v-bind="ptm('decrementIcon')" />
                                 </slot>
                             </button>
                         </div>
                     </div>
-                    <div v-if="showButtonBar" class="p-datepicker-buttonbar">
-                        <CalendarButton type="button" :label="todayLabel" @click="onTodayButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown" />
-                        <CalendarButton type="button" :label="clearLabel" @click="onClearButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown" />
+                    <div v-if="showButtonBar" class="p-datepicker-buttonbar" v-bind="ptm('buttonbar')">
+                        <CalendarButton type="button" :label="todayLabel" @click="onTodayButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown" :pt="ptm('todayButton')" />
+                        <CalendarButton type="button" :label="clearLabel" @click="onClearButtonClick($event)" class="p-button-text" @keydown="onContainerButtonKeydown" :pt="ptm('clearButton')" />
                     </div>
                     <slot name="footer"></slot>
                 </div>
@@ -350,12 +366,13 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
-import CalendarIcon from 'primevue/icon/calendar';
-import ChevronDownIcon from 'primevue/icon/chevrondown';
-import ChevronLeftIcon from 'primevue/icon/chevronleft';
-import ChevronRightIcon from 'primevue/icon/chevronright';
-import ChevronUpIcon from 'primevue/icon/chevronup';
+import CalendarIcon from 'primevue/icons/calendar';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronLeftIcon from 'primevue/icons/chevronleft';
+import ChevronRightIcon from 'primevue/icons/chevronright';
+import ChevronUpIcon from 'primevue/icons/chevronup';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
@@ -363,6 +380,7 @@ import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUti
 
 export default {
     name: 'Calendar',
+    extends: BaseComponent,
     emits: ['show', 'hide', 'input', 'month-change', 'year-change', 'date-select', 'update:modelValue', 'today-click', 'clear-click', 'focus', 'blur', 'keydown'],
     props: {
         modelValue: null,
diff --git a/components/lib/carousel/Carousel.d.ts b/components/lib/carousel/Carousel.d.ts
index 9210bb379..e53fa2335 100755
--- a/components/lib/carousel/Carousel.d.ts
+++ b/components/lib/carousel/Carousel.d.ts
@@ -10,6 +10,154 @@
 import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type CarouselPassThroughOptionType = CarouselPassThroughAttributes | ((options: CarouselPassThroughMethodOptions) => CarouselPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface CarouselPassThroughMethodOptions {
+    props: CarouselProps;
+    state: CarouselState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link CarouselProps.pt}
+ */
+export interface CarouselPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: CarouselPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: CarouselPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: CarouselPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: CarouselPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous button's DOM element.
+     */
+    previousButton?: CarouselPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous button icon's DOM element.
+     */
+    previousButtonIcon?: CarouselPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the items content's DOM element.
+     */
+    itemsContent?: CarouselPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the items container's DOM element.
+     */
+    itemsContainer?: CarouselPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item cloned's DOM element.
+     */
+    itemCloned?: CarouselPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: CarouselPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next button's DOM element.
+     */
+    nextButton?: CarouselPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next button icon's DOM element.
+     */
+    nextButtonIcon?: CarouselPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the indicators's DOM element.
+     */
+    indicators?: CarouselPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the indicator's DOM element.
+     */
+    indicator?: CarouselPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the indicator button's DOM element.
+     */
+    indicatorButton?: CarouselPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: CarouselPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface CarouselPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Carousel component.
+ */
+export interface CarouselState {
+    /**
+     * Remaining items' count as a number.
+     * @defaultValue 0
+     */
+    remainingItems: number;
+    /**
+     * Number of items per page as a number.
+     * @defaultValue 1
+     */
+    d_numVisible: number;
+    /**
+     * Number of items to scroll as a number.
+     * @defaultValue 1
+     */
+    d_numScroll: number;
+    /**
+     * Old number of items to scroll as a number.
+     * @defaultValue 0
+     */
+    d_oldNumScroll: number;
+    /**
+     * Old number of items per page as a number.
+     * @defaultValue 0
+     */
+    d_oldNumVisible: number;
+    /**
+     * Old array of objects to display.
+     */
+    d_oldValue: number;
+    /**
+     * Index of the first item.
+     * @defaultValue 0
+     */
+    d_page: number;
+    /**
+     * Total shifted items' count as a number.
+     * @defaultValue 0
+     */
+    totalShiftedItems: number;
+    /**
+     * Allow autoplay as a boolean.
+     * @defaultValue false
+     */
+    allowAutoplay: boolean;
+    /**
+     * Defines if scrolling would be infinite as a boolean.
+     * @defaultValue false
+     */
+    d_circular: boolean;
+    /**
+     * Swipe threshold count as a number.
+     * @defaultValue 20
+     */
+    swipeThreshold: number;
+}
+
 export interface CarouselResponsiveOptions {
     /**
      * Breakpoint for responsive mode. Exp; @media screen and (max-width: ${breakpoint}) {...}
@@ -24,6 +172,7 @@ export interface CarouselResponsiveOptions {
      */
     numScroll: number;
 }
+
 /**
  * Defines valid properties in Carousel component.
  */
@@ -102,6 +251,11 @@ export interface CarouselProps {
      * Uses to pass all properties of the HTMLButtonElement to the next navigation button.
      */
     nextButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {CarouselPassThroughOptions}
+     */
+    pt?: CarouselPassThroughOptions;
 }
 
 /**
@@ -133,7 +287,7 @@ export interface CarouselSlots {
     /**
      * Custom previous icon template.
      */
-    previcon(): VNode[];
+    previousicon(): VNode[];
     /**
      * Custom next icon template.
      */
diff --git a/components/lib/carousel/Carousel.vue b/components/lib/carousel/Carousel.vue
index 76bd9ccc1..b24e3b84c 100755
--- a/components/lib/carousel/Carousel.vue
+++ b/components/lib/carousel/Carousel.vue
@@ -1,10 +1,10 @@
 <template>
-    <div :class="['p-carousel p-component', { 'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical() }]" role="region">
-        <div v-if="$slots.header" class="p-carousel-header">
+    <div :class="['p-carousel p-component', { 'p-carousel-vertical': isVertical(), 'p-carousel-horizontal': !isVertical() }]" role="region" v-bind="ptm('root')">
+        <div v-if="$slots.header" class="p-carousel-header" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
-        <div :class="contentClasses">
-            <div :class="containerClasses" :aria-live="allowAutoplay ? 'polite' : 'off'">
+        <div :class="contentClasses" v-bind="ptm('content')">
+            <div :class="containerClasses" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('container')">
                 <button
                     v-if="showNavigators"
                     v-ripple
@@ -13,15 +13,15 @@
                     :disabled="backwardIsDisabled"
                     :aria-label="ariaPrevButtonLabel"
                     @click="navBackward"
-                    v-bind="prevButtonProps"
+                    v-bind="{ ...prevButtonProps, ...ptm('previousButton') }"
                 >
-                    <slot name="previcon">
-                        <component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" class="p-carousel-next-icon" />
+                    <slot name="previousicon">
+                        <component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" class="p-carousel-next-icon" v-bind="ptm('previousButtonIcon')" />
                     </slot>
                 </button>
 
-                <div class="p-carousel-items-content" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove">
-                    <div ref="itemsContainer" class="p-carousel-items-container" @transitionend="onTransitionEnd">
+                <div class="p-carousel-items-content" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove" v-bind="ptm('itemsContent')">
+                    <div ref="itemsContainer" class="p-carousel-items-container" @transitionend="onTransitionEnd" v-bind="ptm('itemsContainer')">
                         <template v-if="isCircular()">
                             <div
                                 v-for="(item, index) of value.slice(-1 * d_numVisible)"
@@ -30,6 +30,7 @@
                                     'p-carousel-item p-carousel-item-cloned',
                                     { 'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible, 'p-carousel-item-start': 0 === index, 'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index }
                                 ]"
+                                v-bind="ptm('itemCloned')"
                             >
                                 <slot name="item" :data="item" :index="index"></slot>
                             </div>
@@ -42,6 +43,7 @@
                             :aria-hidden="firstIndex() > index || lastIndex() < index ? true : undefined"
                             :aria-label="ariaSlideNumber(index)"
                             :aria-roledescription="ariaSlideLabel"
+                            v-bind="ptm('item')"
                         >
                             <slot name="item" :data="item" :index="index"></slot>
                         </div>
@@ -50,6 +52,7 @@
                                 v-for="(item, index) of value.slice(0, d_numVisible)"
                                 :key="index + '_fcloned'"
                                 :class="['p-carousel-item p-carousel-item-cloned', { 'p-carousel-item-active': totalShiftedItems === 0, 'p-carousel-item-start': 0 === index, 'p-carousel-item-end': value.slice(0, d_numVisible).length - 1 === index }]"
+                                v-bind="ptm('itemCloned')"
                             >
                                 <slot name="item" :data="item" :index="index"></slot>
                             </div>
@@ -65,35 +68,45 @@
                     :disabled="forwardIsDisabled"
                     :aria-label="ariaNextButtonLabel"
                     @click="navForward"
-                    v-bind="nextButtonProps"
+                    v-bind="{ ...nextButtonProps, ...ptm('nextButton') }"
                 >
                     <slot name="nexticon">
-                        <component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-carousel-prev-icon" />
+                        <component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-carousel-prev-icon" v-bind="ptm('nextButtonIcon')" />
                     </slot>
                 </button>
             </div>
-            <ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="indicatorsContentClasses" @keydown="onIndicatorKeydown">
-                <li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="['p-carousel-indicator', { 'p-highlight': d_page === i }]">
-                    <button class="p-link" type="button" :tabindex="d_page === i ? '0' : '-1'" :aria-label="ariaPageLabel(i + 1)" :aria-current="d_page === i ? 'page' : undefined" @click="onIndicatorClick($event, i)" />
+            <ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="indicatorsContentClasses" @keydown="onIndicatorKeydown" v-bind="ptm('indicators')">
+                <li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="['p-carousel-indicator', { 'p-highlight': d_page === i }]" v-bind="ptm('indicator')">
+                    <button
+                        class="p-link"
+                        type="button"
+                        :tabindex="d_page === i ? '0' : '-1'"
+                        :aria-label="ariaPageLabel(i + 1)"
+                        :aria-current="d_page === i ? 'page' : undefined"
+                        @click="onIndicatorClick($event, i)"
+                        v-bind="ptm('indicatorButton')"
+                    />
                 </li>
             </ul>
         </div>
-        <div v-if="$slots.footer" class="p-carousel-footer">
+        <div v-if="$slots.footer" class="p-carousel-footer" v-bind="ptm('footer')">
             <slot name="footer"></slot>
         </div>
     </div>
 </template>
 
 <script>
-import ChevronDownIcon from 'primevue/icon/chevrondown';
-import ChevronLeftIcon from 'primevue/icon/chevronleft';
-import ChevronRightIcon from 'primevue/icon/chevronright';
-import ChevronUpIcon from 'primevue/icon/chevronup';
+import BaseComponent from 'primevue/basecomponent';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronLeftIcon from 'primevue/icons/chevronleft';
+import ChevronRightIcon from 'primevue/icons/chevronright';
+import ChevronUpIcon from 'primevue/icons/chevronup';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Carousel',
+    extends: BaseComponent,
     emits: ['update:page'],
     props: {
         value: null,
diff --git a/components/lib/cascadeselect/CascadeSelect.d.ts b/components/lib/cascadeselect/CascadeSelect.d.ts
index deb096a30..b38e27312 100644
--- a/components/lib/cascadeselect/CascadeSelect.d.ts
+++ b/components/lib/cascadeselect/CascadeSelect.d.ts
@@ -10,6 +10,16 @@
 import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type CascadeSelectPassThroughOptionType = CascadeSelectPassThroughAttributes | ((options: CascadeSelectPassThroughMethodOptions) => CascadeSelectPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface CascadeSelectPassThroughMethodOptions {
+    props: CascadeSelectProps;
+    state: CascadeSelectState;
+}
+
 /**
  * Custom change event
  * @see {@link CascadeSelectEmits.change}
@@ -31,6 +41,124 @@ export interface CascadeSelectChangeEvent {
  */
 export interface CascadeSelectGroupChangeEvent extends CascadeSelectChangeEvent {}
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link CascadeSelectProps.pt}
+ */
+export interface CascadeSelectPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: CascadeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: CascadeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: CascadeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the dropdown button's DOM element.
+     */
+    dropdownButton?: CascadeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: CascadeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the dropdown icon's DOM element.
+     */
+    dropdownIcon?: CascadeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: CascadeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: CascadeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: CascadeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: CascadeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the text's DOM element.
+     */
+    text?: CascadeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden selected message's DOM element.
+     */
+    hiddenSelectedMessage?: CascadeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the search result message text aria's DOM element.
+     */
+    searchResultAria?: CascadeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the selected message text aria's DOM element.
+     */
+    selectedMessageAria?: CascadeSelectPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface CascadeSelectPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines focused item info
+ */
+export interface CascadeSelectFocusedOptionInfo {
+    /**
+     * Active item index
+     */
+    index: number;
+    /**
+     * Active item level
+     */
+    level: number;
+    /**
+     * Parent key info
+     */
+    parentKey: string;
+}
+
+/**
+ * Defines current inline state in CascadeSelect component.
+ */
+export interface CascadeSelectState {
+    /**
+     * Current id state as a string
+     */
+    id: string;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item info.
+     * @type {CascadeSelectFocusedOptionInfo}
+     */
+    focusedOptionInfo: CascadeSelectFocusedOptionInfo;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    activeOptionPath: any[];
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+}
+
 /**
  * Defines valid properties in CascadeSelect component.
  */
@@ -116,14 +244,17 @@ export interface CascadeSelectProps {
     loading?: boolean | undefined;
     /**
      * Icon to display in the dropdown.
+     * @deprecated since v3.27.0. Use 'dropdownicon' slot.
      */
     dropdownIcon?: string | undefined;
     /**
      * Icon to display in loading state.
+     * @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
     /**
      * Icon to display in the option group.
+     * @deprecated since v3.27.0. Use 'optiongroupicon' slot.
      */
     optionGroupIcon?: string | undefined;
     /**
@@ -177,6 +308,11 @@ export interface CascadeSelectProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {CascadeSelectPassThroughOptions}
+     */
+    pt?: CascadeSelectPassThroughOptions;
 }
 
 /**
@@ -209,8 +345,17 @@ export interface CascadeSelectSlots {
     }): VNode[];
     /**
      * Custom indicator template.
+     * @deprecated since v3.27.0. Use 'dropdownicon or loadingicon' slots.
      */
     indicator(): VNode[];
+    /**
+     * Custom dropdown icon template.
+     */
+    dropdownicon(): VNode[];
+    /**
+     * Custom loading icon template.
+     */
+    loadingicon(): VNode[];
     /**
      * Custom option group icon template.
      */
diff --git a/components/lib/cascadeselect/CascadeSelect.vue b/components/lib/cascadeselect/CascadeSelect.vue
index fb22cd210..c52deeee0 100644
--- a/components/lib/cascadeselect/CascadeSelect.vue
+++ b/components/lib/cascadeselect/CascadeSelect.vue
@@ -1,6 +1,6 @@
 <template>
-    <div ref="container" :class="containerClass" @click="onContainerClick($event)">
-        <div class="p-hidden-accessible">
+    <div ref="container" :class="containerClass" @click="onContainerClick($event)" v-bind="ptm('root')">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
             <input
                 ref="focusInput"
                 :id="inputId"
@@ -21,27 +21,30 @@
                 @focus="onFocus"
                 @blur="onBlur"
                 @keydown="onKeyDown"
-                v-bind="inputProps"
+                v-bind="{ ...inputProps, ...ptm('input') }"
             />
         </div>
-        <span :class="labelClass">
+        <span :class="labelClass" v-bind="ptm('label')">
             <slot name="value" :value="modelValue" :placeholder="placeholder">
                 {{ label }}
             </slot>
         </span>
-        <div class="p-cascadeselect-trigger" role="button" tabindex="-1" aria-hidden="true">
-            <slot name="indicator">
-                <component v-if="loading" :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-cascadeselect-trigger-icon', loadingIcon]" aria-hidden="true" />
-                <component v-else :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-cascadeselect-trigger-icon', dropdownIcon]" aria-hidden="true" />
+        <div class="p-cascadeselect-trigger" role="button" tabindex="-1" aria-hidden="true" v-bind="ptm('dropdownButton')">
+            <slot v-if="loading" name="loadingicon" class="p-cascadeselect-trigger-icon">
+                <span v-if="loadingIcon" :class="['p-cascadeselect-trigger-icon pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
+                <SpinnerIcon v-else class="p-cascadeselect-trigger-icon" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
+            </slot>
+            <slot v-else name="dropdownicon" class="p-cascadeselect-trigger-icon">
+                <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-cascadeselect-trigger-icon', dropdownIcon]" aria-hidden="true" v-bind="ptm('dropdownIcon')" />
             </slot>
         </div>
-        <span role="status" aria-live="polite" class="p-hidden-accessible">
+        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('searchResultAria')">
             {{ searchResultMessageText }}
         </span>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div v-if="overlayVisible" :ref="overlayRef" :style="panelStyle" :class="panelStyleClass" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="panelProps">
-                    <div class="p-cascadeselect-items-wrapper">
+                <div v-if="overlayVisible" :ref="overlayRef" :style="panelStyle" :class="panelStyleClass" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="{ ...panelProps, ...ptm('panel') }">
+                    <div class="p-cascadeselect-items-wrapper" v-bind="ptm('wrapper')">
                         <CascadeSelectSub
                             :id="id + '_tree'"
                             role="tree"
@@ -59,10 +62,11 @@
                             :optionGroupLabel="optionGroupLabel"
                             :optionGroupChildren="optionGroupChildren"
                             @option-change="onOptionChange"
+                            :pt="pt"
                         />
                     </div>
 
-                    <span role="status" aria-live="polite" class="p-hidden-accessible">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')">
                         {{ selectedMessageText }}
                     </span>
                 </div>
@@ -72,9 +76,10 @@
 </template>
 
 <script>
-import AngleRightIcon from 'primevue/icon/angleright';
-import ChevronDownIcon from 'primevue/icon/chevrondown';
-import SpinnerIcon from 'primevue/icon/spinner';
+import BaseComponent from 'primevue/basecomponent';
+import AngleRightIcon from 'primevue/icons/angleright';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import SpinnerIcon from 'primevue/icons/spinner';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
@@ -82,6 +87,7 @@ import CascadeSelectSub from './CascadeSelectSub.vue';
 
 export default {
     name: 'CascadeSelect',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'click', 'group-change', 'before-show', 'before-hide', 'hide', 'show'],
     props: {
         modelValue: null,
diff --git a/components/lib/cascadeselect/CascadeSelectSub.vue b/components/lib/cascadeselect/CascadeSelectSub.vue
index 525e2c2d5..baed70c20 100644
--- a/components/lib/cascadeselect/CascadeSelectSub.vue
+++ b/components/lib/cascadeselect/CascadeSelectSub.vue
@@ -1,5 +1,5 @@
 <template>
-    <ul class="p-cascadeselect-panel p-cascadeselect-items">
+    <ul class="p-cascadeselect-panel p-cascadeselect-items" v-bind="ptm('list')">
         <template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
             <li
                 :id="getOptionId(processedOption)"
@@ -11,10 +11,11 @@
                 :aria-level="level + 1"
                 :aria-setsize="options.length"
                 :aria-posinset="index + 1"
+                v-bind="ptm('item')"
             >
-                <div v-ripple class="p-cascadeselect-item-content" @click="onOptionClick($event, processedOption)">
+                <div v-ripple class="p-cascadeselect-item-content" @click="onOptionClick($event, processedOption)" v-bind="ptm('content')">
                     <component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" />
-                    <span v-else class="p-cascadeselect-item-text">{{ getOptionLabelToRender(processedOption) }}</span>
+                    <span v-else class="p-cascadeselect-item-text" v-bind="ptm('text')">{{ getOptionLabelToRender(processedOption) }}</span>
                     <component
                         v-if="isOptionGroup(processedOption)"
                         :is="templates['optiongroupicon'] ? templates['optiongroupicon'] : optionGroupIcon ? 'span' : 'AngleRightIcon'"
@@ -39,6 +40,7 @@
                     :optionGroupLabel="optionGroupLabel"
                     :optionGroupChildren="optionGroupChildren"
                     @option-change="onOptionChange"
+                    :pt="pt"
                 />
             </li>
         </template>
@@ -46,12 +48,14 @@
 </template>
 
 <script>
-import AngleRightIcon from 'primevue/icon/angleright';
+import BaseComponent from 'primevue/basecomponent';
+import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'CascadeSelectSub',
+    extends: BaseComponent,
     emits: ['option-change'],
     props: {
         selectId: String,
diff --git a/components/lib/chart/Chart.d.ts b/components/lib/chart/Chart.d.ts
index 25227eaee..2ea6c838c 100755
--- a/components/lib/chart/Chart.d.ts
+++ b/components/lib/chart/Chart.d.ts
@@ -10,6 +10,37 @@
 import { CanvasHTMLAttributes } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ChartPassThroughOptionType = ChartPassThroughAttributes | ((options: ChartPassThroughMethodOptions) => ChartPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ChartPassThroughMethodOptions {
+    props: ChartProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ChartProps.pt}
+ */
+export interface ChartPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the canvas's DOM element.
+     */
+    canvas?: ChartPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ChartPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Custom select event.
  * @see {@link ChartEmits.select}
@@ -63,6 +94,11 @@ export interface ChartProps {
      * Uses to pass all properties of the CanvasHTMLAttributes to canvas element inside the component.
      */
     canvasProps?: CanvasHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ChartPassThroughOptions}
+     */
+    pt?: ChartPassThroughOptions;
 }
 
 export interface ChartSlots {}
diff --git a/components/lib/chart/Chart.vue b/components/lib/chart/Chart.vue
index a3b6fa893..1de5f969d 100755
--- a/components/lib/chart/Chart.vue
+++ b/components/lib/chart/Chart.vue
@@ -1,12 +1,15 @@
 <template>
-    <div class="p-chart">
-        <canvas ref="canvas" :width="width" :height="height" @click="onCanvasClick($event)" v-bind="canvasProps"></canvas>
+    <div class="p-chart" v-bind="ptm('root')">
+        <canvas ref="canvas" :width="width" :height="height" @click="onCanvasClick($event)" v-bind="{ ...canvasProps, ...ptm('canvas') }"></canvas>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Chart',
+    extends: BaseComponent,
     emits: ['select', 'loaded'],
     props: {
         type: String,
diff --git a/components/lib/checkbox/Checkbox.d.ts b/components/lib/checkbox/Checkbox.d.ts
index 86ad112e4..166750db9 100755
--- a/components/lib/checkbox/Checkbox.d.ts
+++ b/components/lib/checkbox/Checkbox.d.ts
@@ -10,6 +10,61 @@
 import { InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type CheckboxPassThroughOptionType = CheckboxPassThroughAttributes | ((options: CheckboxPassThroughMethodOptions) => CheckboxPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface CheckboxPassThroughMethodOptions {
+    props: CheckboxProps;
+    state: CheckboxState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link CheckboxProps.pt}
+ */
+export interface CheckboxPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: CheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: CheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: CheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: CheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: CheckboxPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface CheckboxPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Checkbox component.
+ */
+export interface CheckboxState {
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in Checkbox component.
  */
@@ -84,6 +139,11 @@ export interface CheckboxProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {CheckboxPassThroughOptions}
+     */
+    pt?: CheckboxPassThroughOptions;
 }
 
 export interface CheckboxSlots {
diff --git a/components/lib/checkbox/Checkbox.vue b/components/lib/checkbox/Checkbox.vue
index 52cfa66d8..760c6c05e 100755
--- a/components/lib/checkbox/Checkbox.vue
+++ b/components/lib/checkbox/Checkbox.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :class="containerClass" @click="onClick($event)">
-        <div class="p-hidden-accessible">
+    <div :class="containerClass" @click="onClick($event)" v-bind="ptm('root')">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
             <input
                 ref="input"
                 :id="inputId"
@@ -16,23 +16,25 @@
                 :aria-label="ariaLabel"
                 @focus="onFocus($event)"
                 @blur="onBlur($event)"
-                v-bind="inputProps"
+                v-bind="ptm('hiddenInput')"
             />
         </div>
-        <div ref="box" :class="['p-checkbox-box', inputClass, { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]" :style="inputStyle">
+        <div ref="box" :class="['p-checkbox-box', inputClass, { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]" :style="inputStyle" v-bind="{ ...inputProps, ...ptm('input') }">
             <slot name="icon" :checked="checked">
-                <component :is="checked ? 'CheckIcon' : null" class="p-checkbox-icon" />
+                <component :is="checked ? 'CheckIcon' : null" class="p-checkbox-icon" v-bind="ptm('icon')" />
             </slot>
         </div>
     </div>
 </template>
 
 <script>
-import CheckIcon from 'primevue/icon/check';
+import BaseComponent from 'primevue/basecomponent';
+import CheckIcon from 'primevue/icons/check';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Checkbox',
+    extends: BaseComponent,
     emits: ['click', 'update:modelValue', 'change', 'input', 'focus', 'blur'],
     props: {
         value: null,
diff --git a/components/lib/chip/Chip.d.ts b/components/lib/chip/Chip.d.ts
index b717e3243..38c3e908c 100644
--- a/components/lib/chip/Chip.d.ts
+++ b/components/lib/chip/Chip.d.ts
@@ -10,6 +10,61 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ChipPassThroughOptionType = ChipPassThroughAttributes | ((options: ChipPassThroughMethodOptions) => ChipPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ChipPassThroughMethodOptions {
+    props: ChipProps;
+    state: ChipState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ChipProps.pt}
+ */
+export interface ChipPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ChipPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the image's DOM element.
+     */
+    image?: ChipPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ChipPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label' DOM element.
+     */
+    label?: ChipPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the removeIcon's DOM element.
+     */
+    removeIcon?: ChipPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ChipPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Chip component.
+ */
+export interface ChipState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue true
+     */
+    visible: boolean;
+}
+
 /**
  * Defines valid properties in Chip component.
  */
@@ -20,6 +75,7 @@ export interface ChipProps {
     label?: string;
     /**
      * Defines the icon to display.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     icon?: string;
     /**
@@ -33,9 +89,14 @@ export interface ChipProps {
     removable?: boolean;
     /**
      * Icon of the remove element.
-     * @defaultValue pi pi-times-circle
+     * @deprecated since v3.27.0. Use 'removeicon' slot.
      */
     removeIcon?: string;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ChipPassThroughOptions}
+     */
+    pt?: ChipPassThroughOptions;
 }
 
 /**
@@ -46,6 +107,24 @@ export interface ChipSlots {
      * Content can easily be customized with the default slot instead of using the built-in modes.
      */
     default(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    icon(): VNode[];
+    /**
+     * Custom remove icon template of chip component.
+     * @param {Object} scope - remove icon slot's params.
+     */
+    removeicon(scope: {
+        /**
+         * Remove icon click event
+         */
+        onClick(): void;
+        /**
+         * Remove icon keydown event
+         */
+        onKeydown(): void;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/chip/Chip.spec.js b/components/lib/chip/Chip.spec.js
index e09d6729e..55a7650bc 100644
--- a/components/lib/chip/Chip.spec.js
+++ b/components/lib/chip/Chip.spec.js
@@ -34,7 +34,7 @@ describe('Chip.vue', () => {
     it('When removable is true and keydown triggered OnKeydown method should be called', async () => {
         const closeSpy = vi.spyOn(wrapper.vm, 'onKeydown');
 
-        await wrapper.find('.p-chip-remove-icon').trigger('keydown');
+        wrapper.vm.onKeydown({ key: 'Enter' });
 
         expect(closeSpy).toHaveBeenCalled();
     });
diff --git a/components/lib/chip/Chip.vue b/components/lib/chip/Chip.vue
index 8c15e20a1..45b0a6b16 100644
--- a/components/lib/chip/Chip.vue
+++ b/components/lib/chip/Chip.vue
@@ -1,17 +1,24 @@
 <template>
-    <div v-if="visible" :class="containerClass" :aria-label="label">
+    <div v-if="visible" :class="containerClass" :aria-label="label" v-bind="ptm('root')">
         <slot>
-            <img v-if="image" :src="image" />
-            <span v-else-if="icon" :class="iconClass"></span>
-            <div v-if="label" class="p-chip-text">{{ label }}</div>
+            <img v-if="image" :src="image" v-bind="ptm('image')" />
+            <component v-else-if="$slots.icon" :is="$slots.icon" class="p-chip-icon" v-bind="ptm('icon')" />
+            <span v-else-if="icon" :class="['p-chip-icon', icon]" v-bind="ptm('icon')" />
+            <div v-if="label" class="p-chip-text" v-bind="ptm('label')">{{ label }}</div>
+        </slot>
+        <slot v-if="removable" name="removeicon" :onClick="close" :onKeydown="onKeydown">
+            <component :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="['p-chip-remove-icon', removeIcon]" @click="close" @keydown="onKeydown" v-bind="ptm('removeIcon')"></component>
         </slot>
-        <span v-if="removable" tabindex="0" :class="removeIconClass" @click="close" @keydown="onKeydown"></span>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import TimesCircleIcon from 'primevue/icons/timescircle';
+
 export default {
     name: 'Chip',
+    extends: BaseComponent,
     emits: ['remove'],
     props: {
         label: {
@@ -32,7 +39,7 @@ export default {
         },
         removeIcon: {
             type: String,
-            default: 'pi pi-times-circle'
+            default: undefined
         }
     },
     data() {
@@ -59,13 +66,10 @@ export default {
                     'p-chip-image': this.image != null
                 }
             ];
-        },
-        iconClass() {
-            return ['p-chip-icon', this.icon];
-        },
-        removeIconClass() {
-            return ['p-chip-remove-icon', this.removeIcon];
         }
+    },
+    components: {
+        TimesCircleIcon
     }
 };
 </script>
diff --git a/components/lib/chips/Chips.d.ts b/components/lib/chips/Chips.d.ts
index c535357ed..b0bc570a4 100755
--- a/components/lib/chips/Chips.d.ts
+++ b/components/lib/chips/Chips.d.ts
@@ -10,6 +10,16 @@
 import { InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ChipsPassThroughOptionType = ChipsPassThroughAttributes | ((options: ChipsPassThroughMethodOptions) => ChipsPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ChipsPassThroughMethodOptions {
+    props: ChipsProps;
+    state: ChipsState;
+}
+
 /**
  * Custom add event.
  * @see {@link ChipsEmits.add}
@@ -32,6 +42,71 @@ export interface ChipsAddEvent {
  */
 export interface ChipsRemoveEvent extends ChipsAddEvent {}
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ChipsProps.pt}
+ */
+export interface ChipsPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ChipsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: ChipsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the token's DOM element.
+     */
+    token?: ChipsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ChipsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the remove token icon's DOM element.
+     */
+    removeTokenIcon?: ChipsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input token's DOM element.
+     */
+    inputToken?: ChipsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: ChipsPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ChipsPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Chips component.
+ */
+export interface ChipsState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current input value as a string.
+     */
+    inputValue: string;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item index state as a number.
+     */
+    focusedIndex: number;
+}
+
 /**
  * Defines valid properties in Chips component.
  */
@@ -72,10 +147,12 @@ export interface ChipsProps {
     inputStyle?: object | undefined;
     /**
      * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     inputProps?: InputHTMLAttributes | undefined;
     /**
      * Icon to display in chip remove action.
+     * @deprecated since v3.27.0. Use 'removetokenicon' slot.
      */
     removeTokenIcon?: string | undefined;
     /**
@@ -94,6 +171,11 @@ export interface ChipsProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ChipsPassThroughOptions}
+     */
+    pt?: ChipsPassThroughOptions;
 }
 /**
  * Defines valid slots in Chips slots.
@@ -111,8 +193,14 @@ export interface ChipsSlots {
     }): VNode[];
     /**
      * Custom remove token icon template.
+     * @param {Object} scope - remove token icon slot's params.
      */
-    removetokenicon(): VNode[];
+    removetokenicon(scope: {
+        /**
+         * Remove icon click event
+         */
+        onClick(): void;
+    }): VNode[];
 }
 /**
  * Defines valid emits in Chips component.
diff --git a/components/lib/chips/Chips.vue b/components/lib/chips/Chips.vue
index 1d9f18a91..8541b82a3 100755
--- a/components/lib/chips/Chips.vue
+++ b/components/lib/chips/Chips.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass">
+    <div :class="containerClass" v-bind="ptm('root')">
         <ul
             ref="container"
             class="p-inputtext p-chips-multiple-container"
@@ -13,6 +13,7 @@
             @focus="onContainerFocus"
             @blur="onContainerBlur"
             @keydown="onContainerKeyDown"
+            v-bind="ptm('container')"
         >
             <li
                 v-for="(val, i) of modelValue"
@@ -24,15 +25,16 @@
                 :aria-selected="true"
                 :aria-setsize="modelValue.length"
                 :aria-posinset="i + 1"
+                v-bind="ptm('token')"
             >
                 <slot name="chip" :value="val">
-                    <span class="p-chips-token-label">{{ val }}</span>
+                    <span class="p-chips-token-label" v-bind="ptm('label')">{{ val }}</span>
                 </slot>
-                <slot name="removetokenicon">
-                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" />
+                <slot name="removetokenicon" :onClick="(event) => removeItem(event, i)">
+                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
                 </slot>
             </li>
-            <li class="p-chips-input-token" role="option">
+            <li class="p-chips-input-token" role="option" v-bind="ptm('inputToken')">
                 <input
                     ref="input"
                     :id="inputId"
@@ -46,7 +48,7 @@
                     @input="onInput"
                     @keydown="onKeyDown($event)"
                     @paste="onPaste($event)"
-                    v-bind="inputProps"
+                    v-bind="{ ...inputProps, ...ptm('input') }"
                 />
             </li>
         </ul>
@@ -54,11 +56,13 @@
 </template>
 
 <script>
-import TimesCircleIcon from 'primevue/icon/timescircle';
+import BaseComponent from 'primevue/basecomponent';
+import TimesCircleIcon from 'primevue/icons/timescircle';
 import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Chips',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
     props: {
         modelValue: {
diff --git a/components/lib/colorpicker/ColorPicker.d.ts b/components/lib/colorpicker/ColorPicker.d.ts
index a8cdc757e..0b0e75dc9 100755
--- a/components/lib/colorpicker/ColorPicker.d.ts
+++ b/components/lib/colorpicker/ColorPicker.d.ts
@@ -9,6 +9,16 @@
  */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ColorPickerPassThroughOptionType = ColorPickerPassThroughAttributes | ((options: ColorPickerPassThroughMethodOptions) => ColorPickerPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ColorPickerPassThroughMethodOptions {
+    props: ColorPickerProps;
+    state: ColorPickerState;
+}
+
 /**
  * Custom change event.
  * @see {@link ColorPickerEmits.change}
@@ -24,6 +34,67 @@ export interface ColorPickerChangeEvent {
     value: any;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ColorPickerProps.pt}
+ */
+export interface ColorPickerPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the selector's DOM element.
+     */
+    selector?: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the color's DOM element.
+     */
+    color?: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the color handler's DOM element.
+     */
+    colorHandler?: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hue's DOM element.
+     */
+    hue?: ColorPickerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hue handler's DOM element.
+     */
+    hueHandler?: ColorPickerPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ColorPickerPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in ColorPicker component.
+ */
+export interface ColorPickerState {
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+}
+
 /**
  * Defines valid properties in ColorPicker component.
  */
@@ -75,6 +146,11 @@ export interface ColorPickerProps {
      * @defaultValue body
      */
     appendTo?: 'body' | 'self' | string | undefined | HTMLElement;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ColorPickerPassThroughOptions}
+     */
+    pt?: ColorPickerPassThroughOptions;
 }
 
 export interface ColorPickerSlots {}
diff --git a/components/lib/colorpicker/ColorPicker.vue b/components/lib/colorpicker/ColorPicker.vue
index 176b7c6ee..f4694ad53 100755
--- a/components/lib/colorpicker/ColorPicker.vue
+++ b/components/lib/colorpicker/ColorPicker.vue
@@ -1,17 +1,17 @@
 <template>
-    <div ref="container" :class="containerClass">
-        <input v-if="!inline" ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" />
+    <div ref="container" :class="containerClass" v-bind="ptm('root')">
+        <input v-if="!inline" ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('input')" />
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="pickerClass" @click="onOverlayClick">
-                    <div class="p-colorpicker-content">
-                        <div :ref="colorSelectorRef" class="p-colorpicker-color-selector" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()">
-                            <div class="p-colorpicker-color">
-                                <div :ref="colorHandleRef" class="p-colorpicker-color-handle"></div>
+                <div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="pickerClass" @click="onOverlayClick" v-bind="ptm('panel')">
+                    <div class="p-colorpicker-content" v-bind="ptm('content')">
+                        <div :ref="colorSelectorRef" class="p-colorpicker-color-selector" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('selector')">
+                            <div class="p-colorpicker-color" v-bind="ptm('color')">
+                                <div :ref="colorHandleRef" class="p-colorpicker-color-handle" v-bind="ptm('colorHandler')"></div>
                             </div>
                         </div>
-                        <div :ref="hueViewRef" class="p-colorpicker-hue" @mousedown="onHueMousedown($event)" @touchstart="onHueDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()">
-                            <div :ref="hueHandleRef" class="p-colorpicker-hue-handle"></div>
+                        <div :ref="hueViewRef" class="p-colorpicker-hue" @mousedown="onHueMousedown($event)" @touchstart="onHueDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('hue')">
+                            <div :ref="hueHandleRef" class="p-colorpicker-hue-handle" v-bind="ptm('hueHandler')"></div>
                         </div>
                     </div>
                 </div>
@@ -21,12 +21,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue/utils';
 
 export default {
     name: 'ColorPicker',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change', 'show', 'hide'],
     props: {
         modelValue: {
diff --git a/components/lib/column/Column.d.ts b/components/lib/column/Column.d.ts
index 7bd646f7d..88b5e3b22 100755
--- a/components/lib/column/Column.d.ts
+++ b/components/lib/column/Column.d.ts
@@ -10,9 +10,24 @@
  */
 
 import { VNode } from 'vue';
+import { ButtonPassThroughOptionType } from '../button';
+import { DataTablePassThroughOptions } from '../datatable';
+import { DropdownPassThroughOptionType } from '../dropdown';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { VirtualScrollerLoaderOptions } from '../virtualscroller';
 
+export declare type ColumnPassThroughOptionType = ColumnPassThroughAttributes | ((options: ColumnPassThroughMethodOptions) => ColumnPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ColumnPassThroughMethodOptions {
+    props: ColumnProps;
+    state: ColumnState;
+    context: ColumnContext;
+    parent: DataTablePassThroughOptions;
+}
+
 /**
  * Filter model metadata.
  */
@@ -68,6 +83,292 @@ export interface ColumnLoadingOptions extends VirtualScrollerLoaderOptions {
     field: string;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ColumnProps.pt}
+ */
+export interface ColumnPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header cell's DOM element.
+     */
+    headerCell?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the column resizer's DOM element.
+     */
+    columnResizer?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header content's DOM element.
+     */
+    headerContent?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header title's DOM element.
+     */
+    headerTitle?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the sort's DOM element.
+     */
+    sort?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the sort badge's DOM element.
+     */
+    sortBadge?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox wrapper's DOM element.
+     */
+    headerCheckboxWrapper?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header checkbox's DOM element.
+     */
+    headerCheckbox?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header checkbox icon's DOM element.
+     */
+    headerCheckboxIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the column filter's DOM element.
+     */
+    columnFilter?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter input's DOM element.
+     */
+    filterInput?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter menu button's DOM element.
+     */
+    filterMenuButton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header filter clear button's DOM element.
+     */
+    headerFilterClearButton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter clear icon's DOM element.
+     */
+    filterClearIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter overlay's DOM element.
+     */
+    filterOverlay?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter row items' DOM element.
+     */
+    filterRowItems?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter row item's DOM element.
+     */
+    filterRowItem?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter separator's DOM element.
+     */
+    filterSeparator?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter operator's DOM element.
+     */
+    filterOperator?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * @see {@link DropdownPassThroughOptionType}
+     */
+    filterOperatorDropdown?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter constraints' DOM element.
+     */
+    filterConstraints?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter constraint's DOM element.
+     */
+    filterConstraint?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * @see {@link DropdownPassThroughOptionType}
+     */
+    filterMatchModeDropdown?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter remove button container's DOM element.
+     */
+    filterRemove?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    filterRemoveButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter add rule's DOM element.
+     */
+    filterAddRule?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    filterAddRuleButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter buttonbar's DOM element.
+     */
+    filterButtonbar?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    filterClearButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    filterApplyButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the body cell's DOM element.
+     */
+    bodyCell?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rowgroup toggler's DOM element.
+     */
+    rowGroupToggler?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rowgroup toggler icon's DOM element.
+     */
+    rowGroupTogglerIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the column title's DOM element.
+     */
+    columnTitle?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the radiobutton wrapper's DOM element.
+     */
+    radiobuttonWrapper?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the radiobutton's DOM element.
+     */
+    radiobutton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the radiobutton icon's DOM element.
+     */
+    radiobuttonIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox wrapper's DOM element.
+     */
+    checkboxWrapper?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox's DOM element.
+     */
+    checkbox?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox icon's DOM element.
+     */
+    checkboxIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rowtoggler's DOM element.
+     */
+    rowToggler?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rowtoggler icon's DOM element.
+     */
+    rowTogglerIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor init button's DOM element.
+     */
+    rowEditorInitButton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor init icon's DOM element.
+     */
+    rowEditorInitIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor edit button's DOM element.
+     */
+    rowEditorEditButton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor edit icon's DOM element.
+     */
+    rowEditorEditIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor cancel button's DOM element.
+     */
+    rowEditorCancelButton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor cancel icon's DOM element.
+     */
+    rowEditorCancelIcon?: ColumnPassThroughOptionType;
+
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenHeaderInputWrapper?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenHeaderInput?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: ColumnPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ColumnPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Column component.
+ */
+export interface ColumnState {
+    d_editing: boolean;
+    /**
+     * Current style of the body cell.
+     */
+    styleObject: object;
+    /**
+     * Current filter overlay visible as a boolean.
+     */
+    overlayVisible: boolean;
+    /**
+     * Current filter match mode.
+     */
+    defaultMatchMode: string;
+    /**
+     * Current filter operator.
+     */
+    defaultOperator: string;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current style of the rowgroup header.
+     */
+    rowGroupHeaderStyleObject: object;
+}
+
+/**
+ * Defines current options in Column component.
+ */
+export interface ColumnContext {
+    /**
+     * Current checked state of row as a boolean.
+     * @defaultValue false
+     */
+    checked: boolean;
+    /**
+     * Current focused state of row as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state of row as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in Column component.
  */
@@ -221,7 +522,7 @@ export interface ColumnProps {
     rowReorder?: boolean | undefined;
     /**
      * Icon of the drag handle to reorder rows.
-     * @defaultValue pi pi-bars
+     * @deprecated since v3.27.0. Use 'rowreordericon' slot.
      */
     rowReorderIcon?: string | undefined;
     /**
@@ -486,6 +787,82 @@ export interface ColumnSlots {
          */
         loadingOptions: ColumnLoadingOptions;
     }): VNode[];
+    /**
+     * Custom row toggler icon template.
+     * @param {Object} scope - row toggler icon slot's params.
+     */
+    rowtogglericon(scope: {
+        /**
+         * Current row expanded state.
+         */
+        rowExpanded: boolean;
+    }): VNode[];
+    /**
+     * Custom row checkbox icon template.
+     * @param {Object} scope - header row icon slot's params.
+     */
+    rowcheckboxicon(scope: {
+        /**
+         * Current check state.
+         */
+        checked: boolean;
+    }): VNode[];
+    /**
+     * Custom row editor init icon template.
+     */
+    roweditoriniticon(): VNode[];
+    /**
+     * Custom row editor save icon template.
+     */
+    roweditorsaveicon(): VNode[];
+    /**
+     * Custom row editor cancel icon template.
+     */
+    roweditorcancelicon(): VNode[];
+    /**
+     * Custom filter icon template.
+     */
+    filtericon(): VNode[];
+    /**
+     * Custom filter clear icon template.
+     */
+    filterclearicon(): VNode[];
+    /**
+     * Custom filter remove icon template.
+     */
+    filterremoveicon(): VNode[];
+    /**
+     * Custom filter add icon template.
+     */
+    filteraddicon(): VNode[];
+    /**
+     * Custom sort icon template.
+     * @param {Object} scope - sort icon slot's params.
+     */
+    sorticon(scope: {
+        /**
+         * Current sort state.
+         */
+        sorted: boolean;
+        /**
+         * Current sort order state.
+         */
+        sortOrder: boolean;
+    }): VNode[];
+    /**
+     * Custom header checkbox icon template.
+     * @param {Object} scope - header checkbox icon slot's params.
+     */
+    headercheckboxicon(scope: {
+        /**
+         * Current check state.
+         */
+        checked: boolean;
+    }): VNode[];
+    /**
+     * Custom row reorder icon template.
+     */
+    rowreordericon(): VNode[];
 }
 
 export interface ColumnEmits {}
@@ -493,9 +870,9 @@ export interface ColumnEmits {}
 /**
  * **PrimeVue - Column**
  *
- * _Column is a helper component for DataTable and TreeTable._
+ * _Column is a helper component for Column and TreeTable._
  *
- * [Live Demo](https://www.primevue.org/datatable/)
+ * [Live Demo](https://www.primevue.org/Column/)
  * --- ---
  * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
  *
diff --git a/components/lib/column/Column.vue b/components/lib/column/Column.vue
index f0c23e217..f687443d3 100755
--- a/components/lib/column/Column.vue
+++ b/components/lib/column/Column.vue
@@ -1,6 +1,9 @@
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Column',
+    extends: BaseComponent,
     props: {
         columnKey: {
             type: null,
@@ -140,7 +143,7 @@ export default {
         },
         rowReorderIcon: {
             type: String,
-            default: 'pi pi-bars'
+            default: undefined
         },
         reorderableColumn: {
             type: Boolean,
diff --git a/components/lib/columngroup/ColumnGroup.d.ts b/components/lib/columngroup/ColumnGroup.d.ts
index f605ffc2f..b74ba60f3 100755
--- a/components/lib/columngroup/ColumnGroup.d.ts
+++ b/components/lib/columngroup/ColumnGroup.d.ts
@@ -5,8 +5,37 @@
  * [Live Demo](https://www.primevue.org/datatable/)
  * @module columngroup
  */
+import { DataTablePassThroughOptions } from '../datatable';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ColumnGroupPassThroughOptionType = ColumnGroupPassThroughAttributes | ((options: ColumnGroupPassThroughMethodOptions) => ColumnGroupPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ColumnGroupPassThroughMethodOptions {
+    props: ColumnGroupProps;
+    parent: DataTablePassThroughOptions;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ColumnGroupProps.pt}
+ */
+export interface ColumnGroupPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ColumnGroupPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ColumnGroupPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in ColumnGroup component.
  */
@@ -15,6 +44,11 @@ export interface ColumnGroupProps {
      * Type of column group
      */
     type?: 'header' | 'footer' | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ColumnGroupPassThroughOptions}
+     */
+    pt?: ColumnGroupPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/columngroup/ColumnGroup.vue b/components/lib/columngroup/ColumnGroup.vue
index 3a92bfc8b..2747ea869 100755
--- a/components/lib/columngroup/ColumnGroup.vue
+++ b/components/lib/columngroup/ColumnGroup.vue
@@ -1,6 +1,9 @@
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'ColumnGroup',
+    extends: BaseComponent,
     props: {
         type: {
             type: String,
diff --git a/components/lib/config/PrimeVue.d.ts b/components/lib/config/PrimeVue.d.ts
index 74450cf0d..35f5f765c 100644
--- a/components/lib/config/PrimeVue.d.ts
+++ b/components/lib/config/PrimeVue.d.ts
@@ -1,4 +1,86 @@
 import { Plugin } from 'vue';
+import { AccordionPassThroughOptions } from '../accordion';
+import { AccordionTabPassThroughOptions } from '../accordiontab';
+import { AutoCompletePassThroughOptions } from '../autocomplete';
+import { AvatarPassThroughOptions } from '../avatar';
+import { BadgePassThroughOptions } from '../badge';
+import { BlockUIPassThroughOptions } from '../blockui';
+import { BreadcrumbPassThroughOptions } from '../breadcrumb';
+import { ButtonPassThroughOptions } from '../button';
+import { CalendarPassThroughOptions } from '../calendar';
+import { CardPassThroughOptions } from '../card';
+import { CarouselPassThroughOptions } from '../carousel';
+import { CascadeSelectPassThroughOptions } from '../cascadeselect';
+import { ChartPassThroughOptions } from '../chart';
+import { CheckboxPassThroughOptions } from '../checkbox';
+import { ChipPassThroughOptions } from '../chip';
+import { ChipsPassThroughOptions } from '../chips';
+import { ColorPickerPassThroughOptions } from '../colorpicker';
+import { ColumnGroupPassThroughOptions } from '../columngroup';
+import { ConfirmDialogPassThroughOptions } from '../confirmdialog';
+import { ConfirmPopupPassThroughOptions } from '../confirmpopup';
+import { ContextMenuPassThroughOptions } from '../contextmenu';
+import { DataTablePassThroughOptions } from '../datatable';
+import { DataViewPassThroughOptions } from '../dataview';
+import { DataViewLayoutOptionsPassThroughOptions } from '../dataviewlayoutoptions';
+import { DeferredContentPassThroughOptions } from '../deferredcontent';
+import { DialogPassThroughOptions } from '../dialog';
+import { DividerPassThroughOptions } from '../divider';
+import { DockPassThroughOptions } from '../dock';
+import { DropdownPassThroughOptions } from '../dropdown';
+import { EditorPassThroughOptions } from '../editor';
+import { FieldsetPassThroughOptions } from '../fieldset';
+import { FileUploadPassThroughOptions } from '../fileupload';
+import { GalleriaPassThroughOptions } from '../galleria';
+import { ImagePassThroughOptions } from '../image';
+import { InlineMessagePassThroughOptions } from '../inlinemessage';
+import { InplacePassThroughOptions } from '../inplace';
+import { InputMaskPassThroughOptions } from '../inputmask';
+import { InputNumberPassThroughOptions } from '../inputnumber';
+import { InputSwitchPassThroughOptions } from '../inputswitch';
+import { InputTextPassThroughOptions } from '../inputtext';
+import { KnobPassThroughOptions } from '../knob';
+import { ListboxPassThroughOptions } from '../listbox';
+import { MegaMenuPassThroughOptions } from '../megamenu';
+import { MenuPassThroughOptions } from '../menu';
+import { MenubarPassThroughOptions } from '../menubar';
+import { MessagePassThroughOptions } from '../message';
+import { MultiSelectPassThroughOptions } from '../multiselect';
+import { OrderListPassThroughOptions } from '../orderlist';
+import { OrganizationChartPassThroughOptions } from '../organizationchart';
+import { OverlayPanelPassThroughOptions } from '../overlaypanel';
+import { PaginatorPassThroughOptions } from '../paginator';
+import { PanelPassThroughOptions } from '../panel';
+import { PanelMenuPassThroughOptions } from '../panelmenu';
+import { PasswordPassThroughOptions } from '../password';
+import { PickListPassThroughOptions } from '../picklist';
+import { ProgressBarPassThroughOptions } from '../progressbar';
+import { ProgressSpinnerPassThroughOptions } from '../progressspinner';
+import { RadioButtonPassThroughOptions } from '../radiobutton';
+import { RowPassThroughOptions } from '../row';
+import { ScrollPanelPassThroughOptions } from '../scrollpanel';
+import { ScrollTopPassThroughOptions } from '../scrolltop';
+import { SelectButtonPassThroughOptions } from '../selectbutton';
+import { SidebarPassThroughOptions } from '../sidebar';
+import { SkeletonPassThroughOptions } from '../skeleton';
+import { SpeedDialPassThroughOptions } from '../speeddial';
+import { SplitButtonPassThroughOptions } from '../splitbutton';
+import { SplitterPassThroughOptions } from '../splitter';
+import { TabMenuPassThroughOptions } from '../tabmenu';
+import { TabPanelPassThroughOptions } from '../tabpanel';
+import { TabViewPassThroughOptions } from '../tabview';
+import { TagPassThroughOptions } from '../tag';
+import { TerminalPassThroughOptions } from '../terminal';
+import { TextareaPassThroughOptions } from '../textarea';
+import { TieredMenuPassThroughOptions } from '../tieredmenu';
+import { TimelinePassThroughOptions } from '../timeline';
+import { ToastPassThroughOptions } from '../toast';
+import { ToolbarPassThroughOptions } from '../toolbar';
+import { TreePassThroughOptions } from '../tree';
+import { TreeSelectPassThroughOptions } from '../treeselect';
+import { TreeTablePassThroughOptions } from '../treetable';
+import { DefaultPTOptions } from '../ts-helpers';
+import { VirtualScrollerPassThroughOptions } from '../virtualscroller';
 
 interface PrimeVueConfiguration {
     ripple?: boolean;
@@ -6,6 +88,7 @@ interface PrimeVueConfiguration {
     locale?: PrimeVueLocaleOptions;
     filterMatchModeOptions?: any;
     zIndex?: PrimeVueZIndexOptions;
+    pt?: PrimeVuePTOptions;
 }
 
 interface PrimeVueZIndexOptions {
@@ -15,6 +98,92 @@ interface PrimeVueZIndexOptions {
     tooltip?: number;
 }
 
+interface PrimeVuePTOptions {
+    accordion?: DefaultPTOptions<AccordionPassThroughOptions>;
+    accordiontab?: DefaultPTOptions<AccordionTabPassThroughOptions>;
+    autocomplete?: DefaultPTOptions<AutoCompletePassThroughOptions>;
+    avatar?: DefaultPTOptions<AvatarPassThroughOptions>;
+    badge?: DefaultPTOptions<BadgePassThroughOptions>;
+    blockui?: DefaultPTOptions<BlockUIPassThroughOptions>;
+    breadcrumb?: DefaultPTOptions<BreadcrumbPassThroughOptions>;
+    button?: DefaultPTOptions<ButtonPassThroughOptions>;
+    calendar?: DefaultPTOptions<CalendarPassThroughOptions>;
+    card?: DefaultPTOptions<CardPassThroughOptions>;
+    carousel?: DefaultPTOptions<CarouselPassThroughOptions>;
+    cascadeselect?: DefaultPTOptions<CascadeSelectPassThroughOptions>;
+    chart?: DefaultPTOptions<ChartPassThroughOptions>;
+    checkbox?: DefaultPTOptions<CheckboxPassThroughOptions>;
+    chip?: DefaultPTOptions<ChipPassThroughOptions>;
+    chips?: DefaultPTOptions<ChipsPassThroughOptions>;
+    colorpicker?: DefaultPTOptions<ColorPickerPassThroughOptions>;
+    columngroup?: DefaultPTOptions<ColumnGroupPassThroughOptions>;
+    confirmdialog?: DefaultPTOptions<ConfirmDialogPassThroughOptions>;
+    confirmpopup?: DefaultPTOptions<ConfirmPopupPassThroughOptions>;
+    contextmenu?: DefaultPTOptions<ContextMenuPassThroughOptions>;
+    datatable?: DefaultPTOptions<DataTablePassThroughOptions>;
+    dataview?: DefaultPTOptions<DataViewPassThroughOptions>;
+    dataviewlayoutoptions?: DefaultPTOptions<DataViewLayoutOptionsPassThroughOptions>;
+    deferredcontent?: DefaultPTOptions<DeferredContentPassThroughOptions>;
+    divider?: DefaultPTOptions<DividerPassThroughOptions>;
+    dialog?: DefaultPTOptions<DialogPassThroughOptions>;
+    dock?: DefaultPTOptions<DockPassThroughOptions>;
+    dropdown?: DefaultPTOptions<DropdownPassThroughOptions>;
+    dynamicdialog?: DefaultPTOptions<DialogPassThroughOptions>;
+    editor?: DefaultPTOptions<EditorPassThroughOptions>;
+    fieldset?: DefaultPTOptions<FieldsetPassThroughOptions>;
+    fileupload?: DefaultPTOptions<FileUploadPassThroughOptions>;
+    galleria?: DefaultPTOptions<GalleriaPassThroughOptions>;
+    image?: DefaultPTOptions<ImagePassThroughOptions>;
+    inlinemessage?: DefaultPTOptions<InlineMessagePassThroughOptions>;
+    inplace?: DefaultPTOptions<InplacePassThroughOptions>;
+    inputmask?: DefaultPTOptions<InputMaskPassThroughOptions>;
+    inputnumber?: DefaultPTOptions<InputNumberPassThroughOptions>;
+    inputswitch?: DefaultPTOptions<InputSwitchPassThroughOptions>;
+    inputtext?: DefaultPTOptions<InputTextPassThroughOptions>;
+    knob?: DefaultPTOptions<KnobPassThroughOptions>;
+    listbox?: DefaultPTOptions<ListboxPassThroughOptions>;
+    megamenu?: DefaultPTOptions<MegaMenuPassThroughOptions>;
+    menu?: DefaultPTOptions<MenuPassThroughOptions>;
+    menubar?: DefaultPTOptions<MenubarPassThroughOptions>;
+    message?: DefaultPTOptions<MessagePassThroughOptions>;
+    multiselect?: DefaultPTOptions<MultiSelectPassThroughOptions>;
+    orderlist?: DefaultPTOptions<OrderListPassThroughOptions>;
+    organizationchart?: DefaultPTOptions<OrganizationChartPassThroughOptions>;
+    overlaypanel?: DefaultPTOptions<OverlayPanelPassThroughOptions>;
+    paginator?: DefaultPTOptions<PaginatorPassThroughOptions>;
+    panel?: DefaultPTOptions<PanelPassThroughOptions>;
+    panelmenu?: DefaultPTOptions<PanelMenuPassThroughOptions>;
+    password?: DefaultPTOptions<PasswordPassThroughOptions>;
+    picklist?: DefaultPTOptions<PickListPassThroughOptions>;
+    progressbar?: DefaultPTOptions<ProgressBarPassThroughOptions>;
+    progressspinner?: DefaultPTOptions<ProgressSpinnerPassThroughOptions>;
+    radiobutton?: DefaultPTOptions<RadioButtonPassThroughOptions>;
+    row?: DefaultPTOptions<RowPassThroughOptions>;
+    scrollpanel?: DefaultPTOptions<ScrollPanelPassThroughOptions>;
+    scrolltop?: DefaultPTOptions<ScrollTopPassThroughOptions>;
+    sidebar?: DefaultPTOptions<SidebarPassThroughOptions>;
+    skeleton?: DefaultPTOptions<SkeletonPassThroughOptions>;
+    speeddial?: DefaultPTOptions<SpeedDialPassThroughOptions>;
+    selectbutton?: DefaultPTOptions<SelectButtonPassThroughOptions>;
+    splitbutton?: DefaultPTOptions<SplitButtonPassThroughOptions>;
+    splitter?: DefaultPTOptions<SplitterPassThroughOptions>;
+    steps?: DefaultPTOptions<PanelMenuPassThroughOptions>;
+    tabmenu?: DefaultPTOptions<TabMenuPassThroughOptions>;
+    tabpanel?: DefaultPTOptions<TabPanelPassThroughOptions>;
+    tabview?: DefaultPTOptions<TabViewPassThroughOptions>;
+    tag?: DefaultPTOptions<TagPassThroughOptions>;
+    terminal?: DefaultPTOptions<TerminalPassThroughOptions>;
+    textarea?: DefaultPTOptions<TextareaPassThroughOptions>;
+    tieredmenu?: DefaultPTOptions<TieredMenuPassThroughOptions>;
+    timeline?: DefaultPTOptions<TimelinePassThroughOptions>;
+    toast?: DefaultPTOptions<ToastPassThroughOptions>;
+    toolbar?: DefaultPTOptions<ToolbarPassThroughOptions>;
+    tree?: DefaultPTOptions<TreePassThroughOptions>;
+    treeselect?: DefaultPTOptions<TreeSelectPassThroughOptions>;
+    treetable?: DefaultPTOptions<TreeTablePassThroughOptions>;
+    virtualscroller?: DefaultPTOptions<VirtualScrollerPassThroughOptions>;
+}
+
 interface PrimeVueLocaleAriaOptions {
     trueLabel?: string;
     falseLabel?: string;
diff --git a/components/lib/config/PrimeVue.js b/components/lib/config/PrimeVue.js
index 6f2b2e0a7..532251cf9 100644
--- a/components/lib/config/PrimeVue.js
+++ b/components/lib/config/PrimeVue.js
@@ -1,7 +1,7 @@
 import { FilterMatchMode } from 'primevue/api';
 import { inject, reactive } from 'vue';
 
-const defaultOptions = {
+export const defaultOptions = {
     ripple: false,
     inputStyle: 'outlined',
     locale: {
@@ -130,7 +130,8 @@ const defaultOptions = {
         overlay: 1000,
         menu: 1000,
         tooltip: 1100
-    }
+    },
+    pt: undefined
 };
 
 const PrimeVueSymbol = Symbol();
diff --git a/components/lib/config/PrimeVue.spec.js b/components/lib/config/PrimeVue.spec.js
new file mode 100644
index 000000000..c6b990b52
--- /dev/null
+++ b/components/lib/config/PrimeVue.spec.js
@@ -0,0 +1,10 @@
+import { config } from '@vue/test-utils';
+import { defaultOptions } from 'primevue/config';
+
+config.global.mocks['$primevue'] = {
+    config: defaultOptions
+};
+
+describe('PrimeVue.vue', () => {
+    it('should exist', async () => {});
+});
diff --git a/components/lib/confirmdialog/ConfirmDialog.d.ts b/components/lib/confirmdialog/ConfirmDialog.d.ts
index 15866fd0f..caf6718fe 100644
--- a/components/lib/confirmdialog/ConfirmDialog.d.ts
+++ b/components/lib/confirmdialog/ConfirmDialog.d.ts
@@ -8,9 +8,99 @@
  *
  */
 import { VNode } from 'vue';
+import { ButtonPassThroughOptions } from '../button';
 import { ConfirmationOptions } from '../confirmationoptions';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ConfirmDialogPassThroughOptionType = ConfirmDialogPassThroughAttributes | ((options: ConfirmDialogPassThroughMethodOptions) => ConfirmDialogPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ConfirmDialogPassThroughMethodOptions {
+    props: ConfirmDialogProps;
+    state: ConfirmDialogState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ConfirmDialogProps.pt}
+ */
+export interface ConfirmDialogPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header title's DOM element.
+     */
+    headerTitle?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header icons' DOM element.
+     */
+    headerIcons?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close button's component.
+     */
+    closeButton?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close button icon's component.
+     */
+    closeButtonIcon?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the message's DOM element.
+     */
+    message?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: ConfirmDialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    rejectButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    acceptButton?: ButtonPassThroughOptions;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ConfirmDialogPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in ConfirmDialog component.
+ */
+export interface ConfirmDialogState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+    /**
+     * Current confirmation message.
+     */
+    confirmation: any;
+}
+
 /**
  * Breakpoint metadata.
  */
@@ -51,6 +141,11 @@ export interface ConfirmDialogProps {
      * @defaultValue true
      */
     draggable?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ConfirmDialogPassThroughOptions}
+     */
+    pt?: ConfirmDialogPassThroughOptions;
 }
 
 /**
@@ -61,7 +156,29 @@ export interface ConfirmDialogSlots {
      * Custom message template.
      * @param {Object} scope - message slot's params.
      */
-    message(scope: { message: ConfirmationOptions }): VNode[];
+    message(scope: {
+        /**
+         * Message of the component
+         */
+        message: ConfirmationOptions;
+    }): VNode[];
+    /**
+     * Custom icon template.
+     */
+    icon(scope: {
+        /**
+         * Style class of the icon template
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom icon template.
+     */
+    accepticon(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    rejecticon(): VNode[];
 }
 
 /**
diff --git a/components/lib/confirmdialog/ConfirmDialog.vue b/components/lib/confirmdialog/ConfirmDialog.vue
index 44ad632e0..3c5970e29 100644
--- a/components/lib/confirmdialog/ConfirmDialog.vue
+++ b/components/lib/confirmdialog/ConfirmDialog.vue
@@ -11,26 +11,44 @@
         :closeOnEscape="closeOnEscape"
         :draggable="draggable"
         @update:visible="onHide"
+        :pt="pt"
     >
         <template v-if="!$slots.message">
-            <i v-if="confirmation.icon" :class="iconClass" />
-            <span class="p-confirm-dialog-message">{{ message }}</span>
+            <slot name="icon" class="p-confirm-dialog-icon">
+                <component v-if="$slots.icon" :is="$slots.icon" class="p-confirm-dialog-icon" />
+                <span v-else-if="confirmation.icon" :class="iconClass" v-bind="ptm('icon')" />
+            </slot>
+            <span class="p-confirm-dialog-message" v-bind="ptm('message')">{{ message }}</span>
         </template>
         <component v-else :is="$slots.message" :message="confirmation"></component>
         <template #footer>
-            <CDButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()" :autofocus="autoFocusReject" />
-            <CDButton :label="acceptLabel" :icon="acceptIcon" :class="acceptClass" @click="accept()" :autofocus="autoFocusAccept" />
+            <CDButton :label="rejectLabel" :class="rejectClass" iconPos="left" @click="reject()" :autofocus="autoFocusReject" :pt="ptm('rejectButton')">
+                <template #icon="iconProps">
+                    <slot name="rejecticon">
+                        <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" />
+                    </slot>
+                </template>
+            </CDButton>
+            <CDButton :label="acceptLabel" :class="acceptClass" iconPos="left" @click="accept()" :autofocus="autoFocusAccept" :pt="ptm('acceptButton')">
+                <template #icon="iconProps">
+                    <slot name="accepticon">
+                        <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" />
+                    </slot>
+                </template>
+            </CDButton>
         </template>
     </CDialog>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import ConfirmationEventBus from 'primevue/confirmationeventbus';
 import Dialog from 'primevue/dialog';
 
 export default {
     name: 'ConfirmDialog',
+    extends: BaseComponent,
     props: {
         group: String,
         breakpoints: {
diff --git a/components/lib/confirmpopup/ConfirmPopup.d.ts b/components/lib/confirmpopup/ConfirmPopup.d.ts
index 6440faf68..72d3f8209 100644
--- a/components/lib/confirmpopup/ConfirmPopup.d.ts
+++ b/components/lib/confirmpopup/ConfirmPopup.d.ts
@@ -8,9 +8,79 @@
  *
  */
 import { VNode } from 'vue';
+import { ButtonPassThroughOptions } from '../button';
 import { ConfirmationOptions } from '../confirmationoptions';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ConfirmPopupPassThroughOptionType = ConfirmPopupPassThroughAttributes | ((options: ConfirmPopupPassThroughMethodOptions) => ConfirmPopupPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ConfirmPopupPassThroughMethodOptions {
+    props: ConfirmPopupProps;
+    state: ConfirmPopupState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ConfirmPopupProps.pt}
+ */
+export interface ConfirmPopupPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the message's DOM element.
+     */
+    message?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    rejectButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    acceptButton?: ButtonPassThroughOptions;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ConfirmPopupPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in ConfirmPopup component.
+ */
+export interface ConfirmPopupState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+    /**
+     * Current confirmation message.
+     */
+    confirmation: ConfirmationOptions;
+}
+
 /**
  * Defines valid properties in ConfirmPopup component.
  */
@@ -19,6 +89,11 @@ export interface ConfirmPopupProps {
      * Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.
      */
     group?: string;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ConfirmPopupPassThroughOptions}
+     */
+    pt?: ConfirmPopupPassThroughOptions;
 }
 
 /**
@@ -29,7 +104,29 @@ export interface ConfirmPopupSlots {
      * Custom message template.
      * @param {Object} scope - message slot's params.
      */
-    message(scope: { message: ConfirmationOptions }): VNode[];
+    message(scope: {
+        /**
+         * Message of the component
+         */
+        message: ConfirmationOptions;
+    }): VNode[];
+    /**
+     * Custom icon template.
+     */
+    icon(scope: {
+        /**
+         * Style class of the icon template
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom icon template.
+     */
+    accepticon(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    rejecticon(): VNode[];
 }
 
 /**
diff --git a/components/lib/confirmpopup/ConfirmPopup.vue b/components/lib/confirmpopup/ConfirmPopup.vue
index bf472c367..f0aaf5559 100644
--- a/components/lib/confirmpopup/ConfirmPopup.vue
+++ b/components/lib/confirmpopup/ConfirmPopup.vue
@@ -1,17 +1,32 @@
 <template>
     <Portal>
         <transition name="p-confirm-popup" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div v-if="visible" :ref="containerRef" v-focustrap role="alertdialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" @keydown="onOverlayKeydown" v-bind="$attrs">
+            <div v-if="visible" :ref="containerRef" v-focustrap role="alertdialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" @keydown="onOverlayKeydown" v-bind="{ ...$attrs, ...ptm('root') }">
                 <template v-if="!$slots.message">
-                    <div class="p-confirm-popup-content">
-                        <i :class="iconClass" />
-                        <span class="p-confirm-popup-message">{{ confirmation.message }}</span>
+                    <div class="p-confirm-popup-content" v-bind="ptm('content')">
+                        <slot name="icon" class="p-confirm-popup-icon">
+                            <component v-if="$slots.icon" :is="$slots.icon" class="p-confirm-popup-icon" />
+                            <span v-else-if="confirmation.icon" :class="iconClass" v-bind="ptm('icon')" />
+                        </slot>
+                        <span class="p-confirm-popup-message" v-bind="ptm('message')">{{ confirmation.message }}</span>
                     </div>
                 </template>
                 <component v-else :is="$slots.message" :message="confirmation"></component>
-                <div class="p-confirm-popup-footer">
-                    <CPButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" />
-                    <CPButton :label="acceptLabel" :icon="acceptIcon" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" />
+                <div class="p-confirm-popup-footer" v-bind="ptm('footer')">
+                    <CPButton :label="rejectLabel" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" :pt="ptm('rejectButton')">
+                        <template #icon="iconProps">
+                            <slot name="rejecticon">
+                                <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" />
+                            </slot>
+                        </template>
+                    </CPButton>
+                    <CPButton :label="acceptLabel" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" :pt="ptm('acceptButton')">
+                        <template #icon="iconProps">
+                            <slot name="accepticon">
+                                <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" />
+                            </slot>
+                        </template>
+                    </CPButton>
                 </div>
             </div>
         </transition>
@@ -19,6 +34,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import ConfirmationEventBus from 'primevue/confirmationeventbus';
 import FocusTrap from 'primevue/focustrap';
@@ -28,6 +44,7 @@ import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue
 
 export default {
     name: 'ConfirmPopup',
+    extends: BaseComponent,
     inheritAttrs: false,
     props: {
         group: String
diff --git a/components/lib/contextmenu/ContextMenu.d.ts b/components/lib/contextmenu/ContextMenu.d.ts
index cf289aab1..829906a47 100755
--- a/components/lib/contextmenu/ContextMenu.d.ts
+++ b/components/lib/contextmenu/ContextMenu.d.ts
@@ -12,6 +12,136 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ContextMenuPassThroughOptionType = ContextMenuPassThroughAttributes | ((options: ContextMenuPassThroughMethodOptions) => ContextMenuPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ContextMenuPassThroughMethodOptions {
+    props: ContextMenuProps;
+    state: ContextMenuState;
+    context: ContextMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ContextMenuProps.pt}
+ */
+export interface ContextMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuIcon?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: ContextMenuPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ContextMenuPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines focused item info
+ */
+export interface ContextMenuFocusedItemInfo {
+    /**
+     * Active item index
+     */
+    index: number;
+    /**
+     * Active item level
+     */
+    level: number;
+    /**
+     * Parent key info
+     */
+    parentKey: string;
+}
+
+/**
+ * Defines current inline state in ContextMenu component.
+ */
+export interface ContextMenuState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item info.
+     * @type {ContextMenuFocusedItemInfo}
+     */
+    focusedItemInfo: ContextMenuFocusedItemInfo;
+    /**
+     * Active item path.
+     * @type {ContextMenuFocusedItemInfo}
+     */
+    activeItemPath: ContextMenuFocusedItemInfo[];
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+    /**
+     * Current submenu visible state as a boolean.
+     * @defaultValue false
+     */
+    submenuVisible: boolean;
+}
+
+/**
+ * Defines current options in ContextMenu component.
+ */
+export interface ContextMenuContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in ContextMenu component.
  */
@@ -57,6 +187,11 @@ export interface ContextMenuProps {
      * Identifier of the underlying menu element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ContextMenuPassThroughOptions}
+     */
+    pt?: ContextMenuPassThroughOptions;
 }
 
 /**
@@ -73,6 +208,20 @@ export interface ContextMenuSlots {
          */
         item: MenuItem;
     }): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
     /**
      * Custom submenu icon template.
      */
diff --git a/components/lib/contextmenu/ContextMenu.vue b/components/lib/contextmenu/ContextMenu.vue
index 73da3e4dc..2ffa1b54a 100755
--- a/components/lib/contextmenu/ContextMenu.vue
+++ b/components/lib/contextmenu/ContextMenu.vue
@@ -1,7 +1,7 @@
 <template>
     <Portal :appendTo="appendTo">
         <transition name="p-contextmenu" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div v-if="visible" :ref="containerRef" :class="containerClass" v-bind="$attrs">
+            <div v-if="visible" :ref="containerRef" :class="containerClass" v-bind="{ ...$attrs, ...ptm('root') }">
                 <ContextMenuSub
                     :ref="listRef"
                     :id="id + '_list'"
@@ -14,13 +14,14 @@
                     :menuId="id"
                     :focusedItemId="focused ? focusedItemId : undefined"
                     :items="processedItems"
-                    :template="$slots"
+                    :templates="$slots"
                     :activeItemPath="activeItemPath"
                     :exact="exact"
                     :aria-labelledby="ariaLabelledby"
                     :aria-label="ariaLabel"
                     :level="0"
                     :visible="submenuVisible"
+                    :pt="pt"
                     @focus="onFocus"
                     @blur="onBlur"
                     @keydown="onKeyDown"
@@ -33,12 +34,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Portal from 'primevue/portal';
 import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
 import ContextMenuSub from './ContextMenuSub.vue';
 
 export default {
     name: 'ContextMenu',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['focus', 'blur', 'show', 'hide'],
     props: {
diff --git a/components/lib/contextmenu/ContextMenuSub.vue b/components/lib/contextmenu/ContextMenuSub.vue
index 7721f8e16..b1fe95df4 100755
--- a/components/lib/contextmenu/ContextMenuSub.vue
+++ b/components/lib/contextmenu/ContextMenuSub.vue
@@ -1,6 +1,6 @@
 <template>
     <transition name="p-contextmenusub" @enter="onEnter">
-        <ul v-if="root ? true : visible" ref="container">
+        <ul v-if="root ? true : visible" ref="container" v-bind="ptm('menu')">
             <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
                 <li
                     v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
@@ -15,22 +15,45 @@
                     :aria-level="level + 1"
                     :aria-setsize="getAriaSetSize()"
                     :aria-posinset="getAriaPosInset(index)"
+                    v-bind="getPTOptions(processedItem, 'menuitem')"
                 >
-                    <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)">
-                        <template v-if="!template.item">
+                    <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                        <template v-if="!templates.item">
                             <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                                <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                                    <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
-                                    <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
+                                <a
+                                    v-ripple
+                                    :href="href"
+                                    :class="getItemActionClass(processedItem, { isActive, isExactActive })"
+                                    tabindex="-1"
+                                    aria-hidden="true"
+                                    @click="onItemActionClick($event, navigate)"
+                                    v-bind="getPTOptions(processedItem, 'action')"
+                                >
+                                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                    <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                                    <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                                 </a>
                             </router-link>
-                            <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
-                                <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
-                                <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
-                                <component v-if="getItemProp(processedItem, 'items')" :is="template.submenuicon || 'AngleRightIcon'" :active="isItemActive(processedItem)" class="p-submenu-icon" />
+                            <a
+                                v-else
+                                v-ripple
+                                :href="getItemProp(processedItem, 'url')"
+                                :class="getItemActionClass(processedItem)"
+                                :target="getItemProp(processedItem, 'target')"
+                                tabindex="-1"
+                                aria-hidden="true"
+                                v-bind="getPTOptions(processedItem, 'action')"
+                            >
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                <template v-if="getItemProp(processedItem, 'items')">
+                                    <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" class="p-submenu-icon" />
+                                    <AngleRightIcon v-else class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuicon')" />
+                                </template>
                             </a>
                         </template>
-                        <component v-else :is="template.item" :item="processedItem.item"></component>
+                        <component v-else :is="templates.item" :item="processedItem.item"></component>
                     </div>
                     <ContextMenuSub
                         v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
@@ -40,28 +63,38 @@
                         :menuId="menuId"
                         :focusedItemId="focusedItemId"
                         :items="processedItem.items"
-                        :template="template"
+                        :templates="templates"
                         :activeItemPath="activeItemPath"
                         :exact="exact"
                         :level="level + 1"
+                        :pt="pt"
                         :visible="isItemActive(processedItem) && isItemGroup(processedItem)"
                         @item-click="$emit('item-click', $event)"
                         @item-mouseenter="$emit('item-mouseenter', $event)"
                     />
                 </li>
-                <li v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" :id="getItemId(processedItem)" :style="getItemProp(processedItem, 'style')" :class="getSeparatorItemClass(processedItem)" role="separator"></li>
+                <li
+                    v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
+                    :id="getItemId(processedItem)"
+                    :style="getItemProp(processedItem, 'style')"
+                    :class="getSeparatorItemClass(processedItem)"
+                    role="separator"
+                    v-bind="ptm('separator')"
+                ></li>
             </template>
         </ul>
     </transition>
 </template>
 
 <script>
-import AngleRightIcon from 'primevue/icon/angleright';
+import BaseComponent from 'primevue/basecomponent';
+import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'ContextMenuSub',
+    extends: BaseComponent,
     emits: ['item-click', 'item-mouseenter'],
     props: {
         items: {
@@ -88,7 +121,7 @@ export default {
             type: Number,
             default: 0
         },
-        template: {
+        templates: {
             type: Object,
             default: null
         },
@@ -114,6 +147,14 @@ export default {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
+        getPTOptions(processedItem, key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.isItemActive(processedItem),
+                    focused: this.isItemFocused(processedItem)
+                }
+            });
+        },
         isItemActive(processedItem) {
             return this.activeItemPath.some((path) => path.key === processedItem.key);
         },
diff --git a/components/lib/datatable/BodyCell.vue b/components/lib/datatable/BodyCell.vue
index f06159d31..36b182588 100755
--- a/components/lib/datatable/BodyCell.vue
+++ b/components/lib/datatable/BodyCell.vue
@@ -1,9 +1,9 @@
 <template>
-    <td v-if="loading" :style="containerStyle" :class="containerClass">
+    <td v-if="loading" :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }">
         <component :is="column.children.loading" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :loadingOptions="loadingOptions" />
     </td>
-    <td v-else :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown" role="cell">
-        <span v-if="responsiveLayout === 'stack'" class="p-column-title">{{ columnProp('header') }}</span>
+    <td v-else :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown" role="cell" v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }">
+        <span v-if="responsiveLayout === 'stack'" class="p-column-title" v-bind="getColumnPTOptions(column, 'columnTitle')">{{ columnProp('header') }}</span>
         <component v-if="column.children && column.children.body && !d_editing" :is="column.children.body" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :editorInitCallback="editorInitCallback" />
         <component
             v-else-if="column.children && column.children.editor && d_editing"
@@ -18,26 +18,41 @@
         />
         <component v-else-if="column.children && column.children.body && !column.children.editor && d_editing" :is="column.children.body" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" />
         <template v-else-if="columnProp('selectionMode')">
-            <DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :name="name" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" />
-            <DTCheckbox v-else-if="columnProp('selectionMode') === 'multiple'" :value="rowData" :checked="selected" :aria-selected="selected ? true : undefined" @change="toggleRowWithCheckbox($event, rowIndex)" />
+            <DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :name="name" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" :column="column" :pt="pt" />
+            <DTCheckbox
+                v-else-if="columnProp('selectionMode') === 'multiple'"
+                :value="rowData"
+                :checked="selected"
+                :rowCheckboxIconTemplate="column.children && column.children.rowcheckboxicon"
+                :aria-selected="selected ? true : undefined"
+                @change="toggleRowWithCheckbox($event, rowIndex)"
+                :column="column"
+                :pt="pt"
+            />
         </template>
         <template v-else-if="columnProp('rowReorder')">
-            <i :class="['p-datatable-reorderablerow-handle', columnProp('rowReorderIcon') || 'pi pi-bars']"></i>
+            <component :is="column.children && column.children.rowreordericon ? column.children.rowreordericon : columnProp('rowReorderIcon') ? 'i' : 'BarsIcon'" :class="['p-datatable-reorderablerow-handle', columnProp('rowReorderIcon')]" />
         </template>
         <template v-else-if="columnProp('expander')">
-            <button v-ripple class="p-row-toggler p-link" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow">
-                <span :class="rowTogglerIcon"></span>
+            <button v-ripple class="p-row-toggler p-link" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="getColumnPTOptions(column, 'rowToggler')">
+                <component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :rowExpanded="isRowExpanded" />
+                <template v-else>
+                    <span v-if="isRowExpanded && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
+                    <ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
+                    <span v-else-if="!isRowExpanded && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
+                    <ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
+                </template>
             </button>
         </template>
         <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
-            <button v-if="!d_editing" v-ripple class="p-row-editor-init p-link" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit">
-                <span class="p-row-editor-init-icon pi pi-fw pi-pencil"></span>
+            <button v-if="!d_editing" v-ripple class="p-row-editor-init p-link" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPTOptions(column, 'rowEditorInitButton')">
+                <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" class="p-row-editor-init-icon" v-bind="getColumnPTOptions(column, 'rowEditorInitIcon')" />
             </button>
-            <button v-if="d_editing" v-ripple class="p-row-editor-save p-link" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave">
-                <span class="p-row-editor-save-icon pi pi-fw pi-check"></span>
+            <button v-if="d_editing" v-ripple class="p-row-editor-save p-link" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPTOptions(column, 'rowEditorEditButton')">
+                <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" class="p-row-editor-save-icon" v-bind="getColumnPTOptions(column, 'rowEditorEditIcon')" />
             </button>
-            <button v-if="d_editing" v-ripple class="p-row-editor-cancel p-link" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel">
-                <span class="p-row-editor-cancel-icon pi pi-fw pi-times"></span>
+            <button v-if="d_editing" v-ripple class="p-row-editor-cancel p-link" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPTOptions(column, 'rowEditorCancelButton')">
+                <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" class="p-row-editor-cancel-icon" v-bind="getColumnPTOptions(column, 'rowEditorCancelIcon')" />
             </button>
         </template>
         <template v-else>{{ resolveFieldData() }}</template>
@@ -45,6 +60,13 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import BarsIcon from 'primevue/icons/bars';
+import CheckIcon from 'primevue/icons/check';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
+import PencilIcon from 'primevue/icons/pencil';
+import TimesIcon from 'primevue/icons/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
@@ -53,6 +75,7 @@ import RowRadioButton from './RowRadioButton.vue';
 
 export default {
     name: 'BodyCell',
+    extends: BaseComponent,
     emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'row-toggle', 'radio-change', 'checkbox-change', 'editing-meta-change'],
     props: {
         rowData: {
@@ -75,9 +98,9 @@ export default {
             type: Number,
             default: null
         },
-        rowTogglerIcon: {
-            type: Array,
-            default: null
+        isRowExpanded: {
+            type: Boolean,
+            default: false
         },
         selected: {
             type: Boolean,
@@ -110,6 +133,14 @@ export default {
         name: {
             type: String,
             default: null
+        },
+        expandedRowIcon: {
+            type: String,
+            default: null
+        },
+        collapsedRowIcon: {
+            type: String,
+            default: null
         }
     },
     documentEditListener: null,
@@ -118,8 +149,7 @@ export default {
     data() {
         return {
             d_editing: this.editing,
-            styleObject: {},
-            isRowExpanded: false
+            styleObject: {}
         };
     },
     watch: {
@@ -158,11 +188,22 @@ export default {
         columnProp(prop) {
             return ObjectUtils.getVNodeProp(this.column, prop);
         },
+        getColumnPTOptions(column, key) {
+            return this.ptmo(this.getColumnProp(column), key, {
+                props: column.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getColumnProp(column) {
+            return column.props && column.props.pt ? column.props.pt : undefined; //@todo
+        },
         resolveFieldData() {
             return ObjectUtils.resolveFieldData(this.rowData, this.field);
         },
         toggleRow(event) {
-            this.isRowExpanded = !this.isRowExpanded;
             this.$emit('row-toggle', {
                 originalEvent: event,
                 data: this.rowData
@@ -453,7 +494,13 @@ export default {
     },
     components: {
         DTRadioButton: RowRadioButton,
-        DTCheckbox: RowCheckbox
+        DTCheckbox: RowCheckbox,
+        ChevronDownIcon: ChevronDownIcon,
+        ChevronRightIcon: ChevronRightIcon,
+        BarsIcon: BarsIcon,
+        PencilIcon: PencilIcon,
+        CheckIcon: CheckIcon,
+        TimesIcon: TimesIcon
     },
     directives: {
         ripple: Ripple
diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
index 15124059a..b5b6534c9 100644
--- a/components/lib/datatable/ColumnFilter.vue
+++ b/components/lib/datatable/ColumnFilter.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :class="containerClass">
-        <div v-if="display === 'row'" class="p-fluid p-column-filter-element" v-bind="filterInputProps">
+    <div :class="containerClass" v-bind="getColumnPTOptions('columnFilter')">
+        <div v-if="display === 'row'" class="p-fluid p-column-filter-element" v-bind="{ ...filterInputProps, ...getColumnPTOptions('filterInput') }">
             <component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
         </div>
         <button
@@ -15,10 +15,13 @@
             :class="{ 'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter() }"
             @click="toggleMenu()"
             @keydown="onToggleButtonKeyDown($event)"
+            v-bind="getColumnPTOptions('filterMenuButton')"
         >
-            <span class="pi pi-filter-icon pi-filter"></span>
+            <component :is="filterIconTemplate || 'FilterIcon'" />
+        </button>
+        <button v-if="showClearButton && display === 'row'" :class="{ 'p-hidden-space': !hasRowFilter() }" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()" v-bind="getColumnPTOptions('headerFilterClearButton')">
+            <component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPTOptions('filterClearIcon')" />
         </button>
-        <button v-if="showClearButton && display === 'row'" :class="{ 'p-hidden-space': !hasRowFilter() }" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
         <Portal>
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div
@@ -32,10 +35,11 @@
                     @keydown.escape="hide"
                     @click="onContentClick"
                     @mousedown="onContentMouseDown"
+                    v-bind="getColumnPTOptions('filterOverlay')"
                 >
                     <component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
                     <template v-if="display === 'row'">
-                        <ul class="p-column-filter-row-items">
+                        <ul class="p-column-filter-row-items" v-bind="getColumnPTOptions('filterRowItems')">
                             <li
                                 v-for="(matchMode, i) of matchModes"
                                 :key="matchMode.label"
@@ -45,15 +49,18 @@
                                 @keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
                                 :class="{ 'p-highlight': isRowMatchModeSelected(matchMode.value) }"
                                 :tabindex="i === 0 ? '0' : null"
+                                v-bind="getColumnPTOptions('filterRowItem')"
                             >
                                 {{ matchMode.label }}
                             </li>
-                            <li class="p-column-filter-separator"></li>
-                            <li class="p-column-filter-row-item" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()">{{ noFilterLabel }}</li>
+                            <li class="p-column-filter-separator" v-bind="getColumnPTOptions('filterInput')"></li>
+                            <li class="p-column-filter-row-item" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="getColumnPTOptions('filterRowItem')">
+                                {{ noFilterLabel }}
+                            </li>
                         </ul>
                     </template>
                     <template v-else>
-                        <div v-if="isShowOperator" class="p-column-filter-operator">
+                        <div v-if="isShowOperator" class="p-column-filter-operator" v-bind="getColumnPTOptions('filterOperator')">
                             <CFDropdown
                                 :options="operatorOptions"
                                 :modelValue="operator"
@@ -62,10 +69,11 @@
                                 optionLabel="label"
                                 optionValue="value"
                                 @update:modelValue="onOperatorChange($event)"
+                                :pt="getColumnPTOptions('filterOperatorDropdown')"
                             ></CFDropdown>
                         </div>
-                        <div class="p-column-filter-constraints">
-                            <div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" class="p-column-filter-constraint">
+                        <div class="p-column-filter-constraints" v-bind="getColumnPTOptions('filterConstraints')">
+                            <div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" class="p-column-filter-constraint" v-bind="getColumnPTOptions('filterConstraint')">
                                 <CFDropdown
                                     v-if="isShowMatchModes"
                                     :options="matchModes"
@@ -75,28 +83,37 @@
                                     optionValue="value"
                                     :aria-label="filterConstraintAriaLabel"
                                     @update:modelValue="onMenuMatchModeChange($event, i)"
+                                    :pt="getColumnPTOptions('filterMatchModeDropdown')"
                                 ></CFDropdown>
                                 <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
-                                <div>
+                                <div v-bind="getColumnPTOptions('filterRemove')">
                                     <CFButton
                                         v-if="showRemoveIcon"
                                         type="button"
-                                        icon="pi pi-trash"
                                         class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm"
                                         @click="removeConstraint(i)"
                                         :label="removeRuleButtonLabel"
-                                    ></CFButton>
+                                        :pt="getColumnPTOptions('filterRemoveButton')"
+                                    >
+                                        <template #icon="iconProps">
+                                            <component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPTOptions('filterRemoveButton')['icon']" />
+                                        </template>
+                                    </CFButton>
                                 </div>
                             </div>
                         </div>
-                        <div v-if="isShowAddConstraint" class="p-column-filter-add-rule">
-                            <CFButton type="button" :label="addRuleButtonLabel" icon="pi pi-plus" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()"></CFButton>
+                        <div v-if="isShowAddConstraint" class="p-column-filter-add-rule" v-bind="getColumnPTOptions('filterAddRule')">
+                            <CFButton type="button" :label="addRuleButtonLabel" iconPos="left" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()" :pt="getColumnPTOptions('filterAddRuleButton')">
+                                <template #icon="iconProps">
+                                    <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPTOptions('filterAddRuleButton')['icon']" />
+                                </template>
+                            </CFButton>
                         </div>
-                        <div class="p-column-filter-buttonbar">
-                            <CFButton v-if="!filterClearTemplate && showClearButton" type="button" class="p-button-outlined p-button-sm" :label="clearButtonLabel" @click="clearFilter"></CFButton>
+                        <div class="p-column-filter-buttonbar" v-bind="getColumnPTOptions('filterButtonbar')">
+                            <CFButton v-if="!filterClearTemplate && showClearButton" type="button" class="p-button-outlined p-button-sm" :label="clearButtonLabel" @click="clearFilter" :pt="getColumnPTOptions('filterClearButton')"></CFButton>
                             <component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
                             <template v-if="showApplyButton">
-                                <CFButton v-if="!filterApplyTemplate" type="button" class="p-button-sm" :label="applyButtonLabel" @click="applyFilter()"></CFButton>
+                                <CFButton v-if="!filterApplyTemplate" type="button" class="p-button-sm" :label="applyButtonLabel" @click="applyFilter()" v-bind="getColumnPTOptions('filterApplyButton')"></CFButton>
                                 <component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
                             </template>
                         </div>
@@ -110,15 +127,21 @@
 
 <script>
 import { FilterOperator } from 'primevue/api';
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
 import FocusTrap from 'primevue/focustrap';
+import FilterIcon from 'primevue/icons/filter';
+import FilterSlashIcon from 'primevue/icons/filterslash';
+import PlusIcon from 'primevue/icons/plus';
+import TrashIcon from 'primevue/icons/trash';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
 
 export default {
     name: 'ColumnFilter',
+    extends: BaseComponent,
     emits: ['filter-change', 'filter-apply', 'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
     props: {
         field: {
@@ -169,11 +192,42 @@ export default {
             type: Number,
             default: 2
         },
-        filterElement: null,
-        filterHeaderTemplate: null,
-        filterFooterTemplate: null,
-        filterClearTemplate: null,
-        filterApplyTemplate: null,
+        filterElement: {
+            type: Function,
+            default: null
+        },
+        filterHeaderTemplate: {
+            type: Function,
+            default: null
+        },
+        filterFooterTemplate: {
+            type: Function,
+            default: null
+        },
+        filterClearTemplate: {
+            type: Function,
+            default: null
+        },
+        filterApplyTemplate: {
+            type: Function,
+            default: null
+        },
+        filterIconTemplate: {
+            type: Function,
+            default: null
+        },
+        filterAddIconTemplate: {
+            type: Function,
+            default: null
+        },
+        filterRemoveIconTemplate: {
+            type: Function,
+            default: null
+        },
+        filterClearIconTemplate: {
+            type: Function,
+            default: null
+        },
         filters: {
             type: Object,
             default: null
@@ -193,7 +247,8 @@ export default {
         filterInputProps: {
             type: null,
             default: null
-        }
+        },
+        column: null
     },
     data() {
         return {
@@ -229,6 +284,18 @@ export default {
         }
     },
     methods: {
+        getColumnPTOptions(key) {
+            return this.ptmo(this.getColumnProp(), key, {
+                props: this.column.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
+        },
         clearFilter() {
             let _filters = { ...this.filters };
 
@@ -590,7 +657,11 @@ export default {
     components: {
         CFDropdown: Dropdown,
         CFButton: Button,
-        Portal: Portal
+        Portal: Portal,
+        FilterSlashIcon: FilterSlashIcon,
+        FilterIcon: FilterIcon,
+        TrashIcon: TrashIcon,
+        PlusIcon: PlusIcon
     },
     directives: {
         focustrap: FocusTrap
diff --git a/components/lib/datatable/DataTable.d.ts b/components/lib/datatable/DataTable.d.ts
index 412c7e32d..e81542fdc 100755
--- a/components/lib/datatable/DataTable.d.ts
+++ b/components/lib/datatable/DataTable.d.ts
@@ -8,8 +8,19 @@
  *
  */
 import { InputHTMLAttributes, TableHTMLAttributes, VNode } from 'vue';
+import { PaginatorPassThroughOptionType } from '../paginator';
 import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
-import { VirtualScrollerProps } from '../virtualscroller';
+import { VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
+
+export declare type DataTablePassThroughOptionType = DataTablePassThroughAttributes | ((options: DataTablePassThroughMethodOptions) => DataTablePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DataTablePassThroughMethodOptions {
+    props: DataTableProps;
+    state: DataTableState;
+}
 
 /**
  * Custom datatable export metadata.
@@ -521,6 +532,177 @@ export interface DataTableStateEvent {
     selectionKeys: any[];
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DataTableProps.pt}
+ */
+export interface DataTablePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading overlay's DOM element.
+     */
+    loadingOverlay?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Paginator component.
+     * @see {@link PaginatorPassThroughOptionType}
+     */
+    paginator?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the VirtualScroller component.
+     * @see {@link VirtualScrollerPassThroughOptionType}
+     */
+    virtualScroller?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table's DOM element.
+     */
+    table?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the virtual scroller spacer's DOM element.
+     */
+    virtualScrollerSpacer?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thead's DOM element.
+     */
+    thead?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header row's DOM element.
+     */
+    headerRow?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the tbody's DOM element.
+     */
+    tbody?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rowgroup header's DOM element.
+     */
+    rowgroupHeader?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row's DOM element.
+     */
+    row?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row expansion's DOM element.
+     */
+    rowExpansion?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rowgroup footer's DOM element.
+     */
+    rowgroupFooter?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the tfoot's DOM element.
+     */
+    tfoot?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footerr ow's DOM element.
+     */
+    footerRow?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer cell's DOM element.
+     */
+    footerCell?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the resize helper's DOM element.
+     */
+    resizeHelper?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the reorder indicator up's DOM element.
+     */
+    reorderIndicatorUp?: DataTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the reorder indicator down's DOM element.
+     */
+    reorderIndicatorDown?: DataTablePassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface DataTablePassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in DataTable component.
+ */
+export interface DataTableState {
+    /**
+     * Current index of first record as a number.
+     */
+    d_first: number;
+    /**
+     * Current number of rows to display in new page as a number.
+     */
+    d_rows: number;
+    /**
+     * Current sort field.
+     */
+    d_sortField: string | ((item: any) => string) | undefined;
+    /**
+     * Current order to sort the data by default.
+     */
+    d_sortOrder: number;
+    /**
+     * Current sortmeta objects to sort the data.
+     */
+    d_multiSortMeta: DataTableSortMeta[];
+    /**
+     * Current group sortmeta objects to sort the data.
+     */
+    d_groupRowsSortMeta: DataTableSortMeta;
+    /**
+     * Current keys of selected rows.
+     */
+    d_selectionKeys: any[];
+    /**
+     * Current keys of rows in expanded state.
+     */
+    d_expandedRowKeys: any[];
+    /**
+     * Current order of the columns.
+     */
+    d_columnOrder: string[];
+    /**
+     * Current keys of editing rows.
+     */
+    d_editingRowKeys: any;
+    /**
+     * Current editing meta data.
+     */
+    d_editingMeta: object;
+    /**
+     * Current filters object.
+     */
+    d_filters: DataTableFilterMeta;
+    /**
+     * Current editing as a boolean.
+     * @defaultValue false
+     */
+    d_editing: boolean;
+}
+
 /**
  * Defines valid properties in DataTable component.
  */
@@ -611,7 +793,7 @@ export interface DataTableProps {
     loading?: boolean | undefined;
     /**
      * The icon to show while indicating data load is in progress.
-     * @defaultValue pi pi-spinner
+     *  @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
     /**
@@ -730,12 +912,12 @@ export interface DataTableProps {
     expandedRows?: any[] | DataTableExpandedRows | null;
     /**
      * Icon of the row toggler to display the row as expanded.
-     * @defaultValue pi-chevron-down
+     * @deprecated since v3.27.0. Use 'rowtogglericon' slot.
      */
     expandedRowIcon?: string | undefined;
     /**
      * Icon of the row toggler to display the row as collapsed.
-     * @defaultValue pi-chevron-right
+     * @deprecated since v3.27.0. Use 'rowtogglericon' slot.
      */
     collapsedRowIcon?: string | undefined;
     /**
@@ -829,6 +1011,11 @@ export interface DataTableProps {
      * Uses to pass all properties of the HTMLInputElement to the focusable filter input element inside the component.
      */
     filterInputProps?: InputHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DataTablePassThroughOptions}
+     */
+    pt?: DataTablePassThroughOptions;
 }
 
 /**
@@ -900,6 +1087,44 @@ export interface DataTableSlots {
          */
         index: number;
     }): VNode[];
+    /**
+     * Custom loading icon template.
+     */
+    loadingicon(): VNode[];
+    /**
+     * Custom reorder indicator up icon template.
+     */
+    reorderindicatorupicon(): VNode[];
+    /**
+     * Custom reorder indicator down icon template.
+     */
+    reorderindicatordownicon(): VNode[];
+    /**
+     * Custom rowgroup toggler icon template.
+     * @param {Object} scope - rowgroup toggler icon slot's params.
+     */
+    rowgrouptogglericon(scope: {
+        /**
+         * Current rowgroup's expanded state.
+         */
+        expanded: boolean;
+    }): VNode[];
+    /**
+     * Custom paginator first page link icon template.
+     */
+    paginatorfirstpagelinkicon(): VNode[];
+    /**
+     * Custom paginator previous page link icon template.
+     */
+    paginatorprevpagelinkicon(): VNode[];
+    /**
+     * Custom paginator next page link icon template.
+     */
+    paginatornextpagelinkicon(): VNode[];
+    /**
+     * Custom paginator last page link icon template.
+     */
+    paginatorlastpagelinkicon(): VNode[];
 }
 /**
  * Defines valid emits in Datatable component.
diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
index 46a30facc..3256a2066 100755
--- a/components/lib/datatable/DataTable.vue
+++ b/components/lib/datatable/DataTable.vue
@@ -1,11 +1,15 @@
 <template>
-    <div :class="containerClass" data-scrollselectors=".p-datatable-wrapper">
+    <div :class="containerClass" data-scrollselectors=".p-datatable-wrapper" v-bind="ptm('root')">
         <slot></slot>
-        <div v-if="loading" class="p-datatable-loading-overlay p-component-overlay">
+        <div v-if="loading" class="p-datatable-loading-overlay p-component-overlay" v-bind="ptm('loadingOverlay')">
             <slot v-if="$slots.loading" name="loading"></slot>
-            <i v-else :class="loadingIconClass"></i>
+            <template v-else>
+                <component v-if="$slots.loadingicon" :is="$slots.loadingicon" class="p-datatable-loading-icon" />
+                <i v-else-if="loadingIcon" :class="['p-datatable-loading-icon pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" />
+                <SpinnerIcon v-else spin class="p-datatable-loading-icon" v-bind="ptm('loadingIcon')" />
+            </template>
         </div>
-        <div v-if="$slots.header" class="p-datatable-header">
+        <div v-if="$slots.header" class="p-datatable-header" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
         <DTPaginator
@@ -20,6 +24,7 @@
             class="p-paginator-top"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
+            :pt="ptm('paginator')"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
@@ -27,11 +32,23 @@
             <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
+            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon>
+                <slot name="paginatorfirstpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon>
+                <slot name="paginatorprevpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon>
+                <slot name="paginatornextpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
+                <slot name="paginatorlastpagelinkicon"></slot>
+            </template>
         </DTPaginator>
-        <div class="p-datatable-wrapper" :style="{ maxHeight: virtualScrollerDisabled ? scrollHeight : '' }">
+        <div class="p-datatable-wrapper" :style="{ maxHeight: virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')">
             <DTVirtualScroller
                 ref="virtualScroller"
-                v-bind="virtualScrollerOptions"
+                v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }"
                 :items="processedData"
                 :columns="columns"
                 :style="scrollHeight !== 'flex' ? { height: scrollHeight } : undefined"
@@ -43,7 +60,7 @@
                 :showSpacer="false"
             >
                 <template #content="slotProps">
-                    <table ref="table" role="table" :class="tableStyleClass" :style="[tableStyle, slotProps.spacerStyle]" v-bind="tableProps">
+                    <table ref="table" role="table" :class="tableStyleClass" :style="[tableStyle, slotProps.spacerStyle]" v-bind="{ ...tableProps, ...ptm('table') }">
                         <DTTableHeader
                             :columnGroup="headerColumnGroup"
                             :columns="slotProps.columns"
@@ -62,6 +79,7 @@
                             :filtersStore="filters"
                             :filterDisplay="filterDisplay"
                             :filterInputProps="filterInputProps"
+                            :headerCheckboxIconTemplate="$slots.headercheckboxicon"
                             @column-click="onColumnHeaderClick($event)"
                             @column-mousedown="onColumnHeaderMouseDown($event)"
                             @filter-change="onFilterChange"
@@ -72,6 +90,7 @@
                             @column-drop="onColumnHeaderDrop($event)"
                             @column-resizestart="onColumnResizeStart($event)"
                             @checkbox-change="toggleRowsWithCheckbox($event)"
+                            :pt="pt"
                         />
                         <DTTableBody
                             v-if="frozenValue"
@@ -184,14 +203,20 @@
                             @row-edit-cancel="onRowEditCancel($event)"
                             :editingMeta="d_editingMeta"
                             @editing-meta-change="onEditingMetaChange"
+                            :pt="pt"
                         />
-                        <tbody v-if="hasSpacerStyle(slotProps.spacerStyle)" :style="{ height: `calc(${slotProps.spacerStyle.height} - ${slotProps.rows.length * slotProps.itemSize}px)` }" class="p-datatable-virtualscroller-spacer"></tbody>
-                        <DTTableFooter :columnGroup="footerColumnGroup" :columns="slotProps.columns" />
+                        <tbody
+                            v-if="hasSpacerStyle(slotProps.spacerStyle)"
+                            :style="{ height: `calc(${slotProps.spacerStyle.height} - ${slotProps.rows.length * slotProps.itemSize}px)` }"
+                            class="p-datatable-virtualscroller-spacer"
+                            v-bind="ptm('virtualScrollerSpacer')"
+                        ></tbody>
+                        <DTTableFooter :columnGroup="footerColumnGroup" :columns="slotProps.columns" :pt="pt" />
                     </table>
                 </template>
             </DTVirtualScroller>
         </div>
-        <div v-if="$slots.footer" class="p-datatable-footer">
+        <div v-if="$slots.footer" class="p-datatable-footer" v-bind="ptm('footer')">
             <slot name="footer"></slot>
         </div>
         <DTPaginator
@@ -206,6 +231,7 @@
             class="p-paginator-bottom"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
+            :pt="ptm('paginator')"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
@@ -213,15 +239,35 @@
             <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
+            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon>
+                <slot name="paginatorfirstpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon>
+                <slot name="paginatorprevpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon>
+                <slot name="paginatornextpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
+                <slot name="paginatorlastpagelinkicon"></slot>
+            </template>
         </DTPaginator>
-        <div ref="resizeHelper" class="p-column-resizer-helper" style="display: none"></div>
-        <span v-if="reorderableColumns" ref="reorderIndicatorUp" class="pi pi-arrow-down p-datatable-reorder-indicator-up" style="position: absolute; display: none" />
-        <span v-if="reorderableColumns" ref="reorderIndicatorDown" class="pi pi-arrow-up p-datatable-reorder-indicator-down" style="position: absolute; display: none" />
+        <div ref="resizeHelper" class="p-column-resizer-helper" style="display: none" v-bind="ptm('resizeHelper')"></div>
+        <span v-if="reorderableColumns" ref="reorderIndicatorUp" class="p-datatable-reorder-indicator-up" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorUp')">
+            <component :is="$slots.reorderindicatorupicon || 'ArrowDownIcon'" />
+        </span>
+        <span v-if="reorderableColumns" ref="reorderIndicatorDown" class="p-datatable-reorder-indicator-down" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorDown')">
+            <component :is="$slots.reorderindicatordownicon || 'ArrowUpIcon'" />
+        </span>
     </div>
 </template>
 
 <script>
 import { FilterMatchMode, FilterOperator, FilterService } from 'primevue/api';
+import BaseComponent from 'primevue/basecomponent';
+import ArrowDownIcon from 'primevue/icons/arrowdown';
+import ArrowUpIcon from 'primevue/icons/arrowup';
+import SpinnerIcon from 'primevue/icons/spinner';
 import Paginator from 'primevue/paginator';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
@@ -231,6 +277,7 @@ import TableHeader from './TableHeader.vue';
 
 export default {
     name: 'DataTable',
+    extends: BaseComponent,
     emits: [
         'value-change',
         'update:first',
@@ -330,7 +377,7 @@ export default {
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner'
+            default: undefined
         },
         sortField: {
             type: [String, Function],
@@ -434,11 +481,11 @@ export default {
         },
         expandedRowIcon: {
             type: String,
-            default: 'pi-chevron-down'
+            default: undefined
         },
         collapsedRowIcon: {
             type: String,
-            default: 'pi-chevron-right'
+            default: undefined
         },
         rowGroupMode: {
             type: String,
@@ -2251,9 +2298,6 @@ export default {
         sorted() {
             return this.d_sortField || (this.d_multiSortMeta && this.d_multiSortMeta.length > 0);
         },
-        loadingIconClass() {
-            return ['p-datatable-loading-icon pi-spin', this.loadingIcon];
-        },
         allRowsSelected() {
             if (this.selectAll !== null) {
                 return this.selectAll;
@@ -2278,7 +2322,10 @@ export default {
         DTTableHeader: TableHeader,
         DTTableBody: TableBody,
         DTTableFooter: TableFooter,
-        DTVirtualScroller: VirtualScroller
+        DTVirtualScroller: VirtualScroller,
+        ArrowDownIcon: ArrowDownIcon,
+        ArrowUpIcon: ArrowUpIcon,
+        SpinnerIcon: SpinnerIcon
     }
 };
 </script>
diff --git a/components/lib/datatable/FooterCell.vue b/components/lib/datatable/FooterCell.vue
index 2f7ae600f..e6eb24294 100644
--- a/components/lib/datatable/FooterCell.vue
+++ b/components/lib/datatable/FooterCell.vue
@@ -1,18 +1,20 @@
 <template>
-    <td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')">
+    <td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('footerCell') }">
         <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
         {{ columnProp('footer') }}
     </td>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'FooterCell',
+    extends: BaseComponent,
     props: {
         column: {
-            type: null,
+            type: Object,
             default: null
         }
     },
@@ -35,6 +37,18 @@ export default {
         columnProp(prop) {
             return ObjectUtils.getVNodeProp(this.column, prop);
         },
+        getColumnPTOptions(key) {
+            return this.ptmo(this.getColumnProp(), key, {
+                props: this.column.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
+        },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
diff --git a/components/lib/datatable/HeaderCell.vue b/components/lib/datatable/HeaderCell.vue
index 673026188..fe5600e89 100644
--- a/components/lib/datatable/HeaderCell.vue
+++ b/components/lib/datatable/HeaderCell.vue
@@ -14,14 +14,25 @@
         @dragover="onDragOver"
         @dragleave="onDragLeave"
         @drop="onDrop"
+        v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('headerCell') }"
     >
-        <span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart"></span>
-        <div class="p-column-header-content">
+        <span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
+        <div class="p-column-header-content" v-bind="getColumnPTOptions('headerContent')">
             <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
-            <span v-if="columnProp('header')" class="p-column-title">{{ columnProp('header') }}</span>
-            <span v-if="columnProp('sortable')" :class="sortableColumnIcon"></span>
-            <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getBadgeValue() }}</span>
-            <DTHeaderCheckbox v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'" :checked="allRowsSelected" @change="onHeaderCheckboxChange" :disabled="empty" />
+            <span v-if="columnProp('header')" class="p-column-title" v-bind="getColumnPTOptions('headerTitle')">{{ columnProp('header') }}</span>
+            <span v-if="columnProp('sortable')" v-bind="getColumnPTOptions('sort')">
+                <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" class="p-sortable-column-icon" />
+            </span>
+            <span v-if="isMultiSorted()" class="p-sortable-column-badge" v-bind="getColumnPTOptions('sortBadge')">{{ getBadgeValue() }}</span>
+            <DTHeaderCheckbox
+                v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
+                :checked="allRowsSelected"
+                @change="onHeaderCheckboxChange"
+                :disabled="empty"
+                :headerCheckboxIconTemplate="headerCheckboxIconTemplate"
+                :column="column"
+                :pt="pt"
+            />
             <DTColumnFilter
                 v-if="filterDisplay === 'menu' && column.children && column.children.filter"
                 :field="columnProp('filterField') || columnProp('field')"
@@ -33,6 +44,10 @@
                 :filterFooterTemplate="column.children && column.children.filterfooter"
                 :filterClearTemplate="column.children && column.children.filterclear"
                 :filterApplyTemplate="column.children && column.children.filterapply"
+                :filterIconTemplate="column.children && column.children.filtericon"
+                :filterAddIconTemplate="column.children && column.children.filteraddicon"
+                :filterRemoveIconTemplate="column.children && column.children.filterremoveicon"
+                :filterClearIconTemplate="column.children && column.children.filterclearicon"
                 :filters="filters"
                 :filtersStore="filtersStore"
                 :filterInputProps="filterInputProps"
@@ -52,18 +67,25 @@
                 @constraint-add="$emit('constraint-add', $event)"
                 @constraint-remove="$emit('constraint-remove', $event)"
                 @apply-click="$emit('apply-click', $event)"
+                :pt="pt"
+                :column="column"
             />
         </div>
     </th>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import SortAltIcon from 'primevue/icons/sortalt';
+import SortAmountDownIcon from 'primevue/icons/sortamountdown';
+import SortAmountUpAltIcon from 'primevue/icons/sortamountupalt';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 import ColumnFilter from './ColumnFilter.vue';
 import HeaderCheckbox from './HeaderCheckbox.vue';
 
 export default {
     name: 'HeaderCell',
+    extends: BaseComponent,
     emits: [
         'column-click',
         'column-mousedown',
@@ -146,6 +168,10 @@ export default {
         filterInputProps: {
             type: null,
             default: null
+        },
+        headerCheckboxIconTemplate: {
+            type: Function,
+            default: null
         }
     },
     data() {
@@ -167,6 +193,18 @@ export default {
         columnProp(prop) {
             return ObjectUtils.getVNodeProp(this.column, prop);
         },
+        getColumnPTOptions(key) {
+            return this.ptmo(this.getColumnProp(), key, {
+                props: this.column.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+        },
         onClick(event) {
             this.$emit('column-click', { originalEvent: event, column: this.column });
         },
@@ -267,7 +305,7 @@ export default {
 
             return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
         },
-        sortableColumnIcon() {
+        sortState() {
             let sorted = false;
             let sortOrder = null;
 
@@ -283,21 +321,26 @@ export default {
                 }
             }
 
-            return [
-                'p-sortable-column-icon pi pi-fw',
-                {
-                    'pi-sort-alt': !sorted,
-                    'pi-sort-amount-up-alt': sorted && sortOrder > 0,
-                    'pi-sort-amount-down': sorted && sortOrder < 0
-                }
-            ];
+            return {
+                sorted,
+                sortOrder
+            };
+        },
+        sortableColumnIcon() {
+            const { sorted, sortOrder } = this.sortState;
+
+            if (!sorted) return SortAltIcon;
+            else if (sorted && sortOrder > 0) return SortAmountUpAltIcon;
+            else if (sorted && sortOrder < 0) return SortAmountDownIcon;
+
+            return null;
         },
         ariaSort() {
             if (this.columnProp('sortable')) {
-                const sortIcon = this.sortableColumnIcon;
+                const { sorted, sortOrder } = this.sortState;
 
-                if (sortIcon[1]['pi-sort-amount-down']) return 'descending';
-                else if (sortIcon[1]['pi-sort-amount-up-alt']) return 'ascending';
+                if (sorted && sortOrder < 0) return 'descending';
+                else if (sorted && sortOrder > 0) return 'ascending';
                 else return 'none';
             } else {
                 return null;
@@ -306,7 +349,10 @@ export default {
     },
     components: {
         DTHeaderCheckbox: HeaderCheckbox,
-        DTColumnFilter: ColumnFilter
+        DTColumnFilter: ColumnFilter,
+        SortAltIcon: SortAltIcon,
+        SortAmountUpAltIcon: SortAmountUpAltIcon,
+        SortAmountDownIcon: SortAmountDownIcon
     }
 };
 </script>
diff --git a/components/lib/datatable/HeaderCheckbox.vue b/components/lib/datatable/HeaderCheckbox.vue
index 9162d77d6..6827c2a07 100755
--- a/components/lib/datatable/HeaderCheckbox.vue
+++ b/components/lib/datatable/HeaderCheckbox.vue
@@ -1,23 +1,42 @@
 <template>
-    <div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused, 'p-disabled': disabled }]" @click="onClick" @keydown.space.prevent="onClick">
-        <div class="p-hidden-accessible">
-            <input ref="input" type="checkbox" :checked="checked" :disabled="disabled" :tabindex="disabled ? null : '0'" :aria-label="headerCheckboxAriaLabel" @focus="onFocus($event)" @blur="onBlur($event)" />
+    <div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused, 'p-disabled': disabled }]" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPTOptions('headerCheckboxWrapper')">
+        <div class="p-hidden-accessible" v-bind="getColumnPTOptions('hiddenHeaderInputWrapper')">
+            <input
+                ref="input"
+                type="checkbox"
+                :checked="checked"
+                :disabled="disabled"
+                :tabindex="disabled ? null : '0'"
+                :aria-label="headerCheckboxAriaLabel"
+                @focus="onFocus($event)"
+                @blur="onBlur($event)"
+                v-bind="getColumnPTOptions('hiddenHeaderInput')"
+            />
         </div>
-        <div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]">
-            <span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
+        <div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]" v-bind="getColumnPTOptions('headerCheckbox')">
+            <component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" class="p-checkbox-icon" />
+            <CheckIcon v-else class="p-checkbox-icon" v-bind="getColumnPTOptions('headerCheckboxIcon')" />
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import CheckIcon from 'primevue/icons/check';
 import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'HeaderCheckbox',
+    extends: BaseComponent,
     emits: ['change'],
     props: {
         checked: null,
-        disabled: null
+        disabled: null,
+        column: null,
+        headerCheckboxIconTemplate: {
+            type: Function,
+            default: null
+        }
     },
     data() {
         return {
@@ -25,6 +44,23 @@ export default {
         };
     },
     methods: {
+        getColumnPTOptions(key) {
+            return this.ptmo(this.getColumnProp(), key, {
+                props: this.column.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                },
+                context: {
+                    checked: this.checked,
+                    focused: this.focused,
+                    disabled: this.disabled
+                }
+            });
+        },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+        },
         onClick(event) {
             if (!this.disabled) {
                 this.$emit('change', {
@@ -46,6 +82,9 @@ export default {
         headerCheckboxAriaLabel() {
             return this.$primevue.config.locale.aria ? (this.checked ? this.$primevue.config.locale.aria.selectAll : this.$primevue.config.locale.aria.unselectAll) : undefined;
         }
+    },
+    components: {
+        CheckIcon: CheckIcon
     }
 };
 </script>
diff --git a/components/lib/datatable/RowCheckbox.vue b/components/lib/datatable/RowCheckbox.vue
index ac22a3767..4650f8813 100755
--- a/components/lib/datatable/RowCheckbox.vue
+++ b/components/lib/datatable/RowCheckbox.vue
@@ -1,23 +1,43 @@
 <template>
-    <div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused }]" @click="onClick">
-        <div class="p-hidden-accessible">
-            <input ref="input" type="checkbox" :checked="checked" :disabled="$attrs.disabled" :tabindex="$attrs.disabled ? null : '0'" :aria-label="checkboxAriaLabel" @focus="onFocus($event)" @blur="onBlur($event)" @keydown="onKeydown" />
+    <div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused }]" @click="onClick" v-bind="getColumnPTOptions('checkboxWrapper')">
+        <div class="p-hidden-accessible" v-bind="getColumnPTOptions('hiddenInputWrapper')">
+            <input
+                ref="input"
+                type="checkbox"
+                :checked="checked"
+                :disabled="$attrs.disabled"
+                :tabindex="$attrs.disabled ? null : '0'"
+                :aria-label="checkboxAriaLabel"
+                @focus="onFocus($event)"
+                @blur="onBlur($event)"
+                @keydown="onKeydown"
+                v-bind="getColumnPTOptions('hiddenInput')"
+            />
         </div>
-        <div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]">
-            <span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
+        <div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]" v-bind="getColumnPTOptions('checkbox')">
+            <component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" class="p-checkbox-icon" />
+            <CheckIcon v-else class="p-checkbox-icon" v-bind="getColumnPTOptions('checkboxIcon')" />
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import CheckIcon from 'primevue/icons/check';
 import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'RowCheckbox',
+    extends: BaseComponent,
     emits: ['change'],
     props: {
         value: null,
-        checked: null
+        checked: null,
+        column: null,
+        rowCheckboxIconTemplate: {
+            type: Function,
+            default: null
+        }
     },
     data() {
         return {
@@ -25,6 +45,23 @@ export default {
         };
     },
     methods: {
+        getColumnPTOptions(key) {
+            return this.ptmo(this.getColumnProp(), key, {
+                props: this.column.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                },
+                context: {
+                    checked: this.checked,
+                    focused: this.focused,
+                    disabled: this.$attrs.disabled
+                }
+            });
+        },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+        },
         onClick(event) {
             if (!this.$attrs.disabled) {
                 this.$emit('change', {
@@ -60,6 +97,9 @@ export default {
         checkboxAriaLabel() {
             return this.$primevue.config.locale.aria ? (this.checked ? this.$primevue.config.locale.aria.selectRow : this.$primevue.config.locale.aria.unselectRow) : undefined;
         }
+    },
+    components: {
+        CheckIcon: CheckIcon
     }
 };
 </script>
diff --git a/components/lib/datatable/RowRadioButton.vue b/components/lib/datatable/RowRadioButton.vue
index 6f1584fd4..c2c65baed 100755
--- a/components/lib/datatable/RowRadioButton.vue
+++ b/components/lib/datatable/RowRadioButton.vue
@@ -1,25 +1,28 @@
 <template>
-    <div :class="['p-radiobutton p-component', { 'p-radiobutton-focused': focused }]" @click="onClick">
-        <div class="p-hidden-accessible">
-            <input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" :name="name" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" />
+    <div :class="['p-radiobutton p-component', { 'p-radiobutton-focused': focused }]" @click="onClick" v-bind="getColumnPTOptions('radiobuttonWrapper')">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
+            <input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" :name="name" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" v-bind="getColumnPTOptions('hiddenInput')" />
         </div>
-        <div ref="box" :class="['p-radiobutton-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]">
-            <div class="p-radiobutton-icon"></div>
+        <div ref="box" :class="['p-radiobutton-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]" v-bind="getColumnPTOptions('radiobutton')">
+            <div class="p-radiobutton-icon" v-bind="getColumnPTOptions('radiobuttonIcon')"></div>
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'RowRadioButton',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['change'],
     props: {
         value: null,
         checked: null,
-        name: null
+        name: null,
+        column: null
     },
     data() {
         return {
@@ -27,6 +30,23 @@ export default {
         };
     },
     methods: {
+        getColumnPTOptions(key) {
+            return this.ptmo(this.getColumnProp(), key, {
+                props: this.column.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                },
+                context: {
+                    checked: this.checked,
+                    focused: this.focused,
+                    disabled: this.$attrs.disabled
+                }
+            });
+        },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+        },
         onClick(event) {
             if (!this.disabled) {
                 if (!this.checked) {
diff --git a/components/lib/datatable/TableBody.vue b/components/lib/datatable/TableBody.vue
index 666e09b66..abcc36b93 100755
--- a/components/lib/datatable/TableBody.vue
+++ b/components/lib/datatable/TableBody.vue
@@ -1,5 +1,5 @@
 <template>
-    <tbody :ref="bodyRef" class="p-datatable-tbody" role="rowgroup" :style="bodyStyle">
+    <tbody :ref="bodyRef" class="p-datatable-tbody" role="rowgroup" :style="bodyStyle" v-bind="ptm('tbody')">
         <template v-if="!empty">
             <template v-for="(rowData, index) of value">
                 <tr
@@ -8,10 +8,17 @@
                     class="p-rowgroup-header"
                     :style="rowGroupHeaderStyle"
                     role="row"
+                    v-bind="ptm('rowgroupHeader')"
                 >
-                    <td :colspan="columnsLength - 1">
-                        <button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button">
-                            <span :class="rowGroupTogglerIcon(rowData)"></span>
+                    <td :colspan="columnsLength - 1" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
+                        <button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="getColumnPTOptions('rowGroupToggler')">
+                            <component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded(rowData)" />
+                            <template v-else>
+                                <span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
+                                <ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
+                                <span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
+                                <ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
+                            </template>
                         </button>
                         <component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
                     </td>
@@ -35,6 +42,7 @@
                     @dragleave="onRowDragLeave($event)"
                     @dragend="onRowDragEnd($event)"
                     @drop="onRowDrop($event)"
+                    v-bind="ptm('row')"
                 >
                     <template v-for="(col, i) of columns">
                         <DTBodyCell
@@ -45,7 +53,6 @@
                             :rowIndex="getRowIndex(index)"
                             :index="i"
                             :selected="isSelected(rowData)"
-                            :rowTogglerIcon="columnProp(col, 'expander') ? rowTogglerIcon(rowData) : null"
                             :frozenRow="frozenRow"
                             :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, getRowIndex(index)) : null"
                             :editMode="editMode"
@@ -55,6 +62,9 @@
                             :virtualScrollerContentProps="virtualScrollerContentProps"
                             :ariaControls="expandedRowId + '_' + index + '_expansion'"
                             :name="nameAttributeSelector"
+                            :isRowExpanded="isRowExpanded(rowData)"
+                            :expandedRowIcon="expandedRowIcon"
+                            :collapsedRowIcon="collapsedRowIcon"
                             @radio-change="onRadioChange($event)"
                             @checkbox-change="onCheckboxChange($event)"
                             @row-toggle="onRowToggle($event)"
@@ -65,23 +75,37 @@
                             @row-edit-save="onRowEditSave($event)"
                             @row-edit-cancel="onRowEditCancel($event)"
                             @editing-meta-change="onEditingMetaChange"
+                            :pt="pt"
                         />
                     </template>
                 </tr>
-                <tr v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, getRowIndex(index)) + '_expansion'" :id="expandedRowId + '_' + index + '_expansion'" class="p-datatable-row-expansion" role="row">
-                    <td :colspan="columnsLength">
+                <tr
+                    v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)"
+                    :key="getRowKey(rowData, getRowIndex(index)) + '_expansion'"
+                    :id="expandedRowId + '_' + index + '_expansion'"
+                    class="p-datatable-row-expansion"
+                    role="row"
+                    v-bind="ptm('rowExpansion')"
+                >
+                    <td :colspan="columnsLength" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
                         <component :is="templates['expansion']" :data="rowData" :index="getRowIndex(index)" />
                     </td>
                 </tr>
-                <tr v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(index))" :key="getRowKey(rowData, getRowIndex(index)) + '_subfooter'" class="p-rowgroup-footer" role="row">
-                    <td :colspan="columnsLength - 1">
+                <tr
+                    v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(index))"
+                    :key="getRowKey(rowData, getRowIndex(index)) + '_subfooter'"
+                    class="p-rowgroup-footer"
+                    role="row"
+                    v-bind="ptm('rowgroupFooter')"
+                >
+                    <td :colspan="columnsLength - 1" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
                         <component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
                     </td>
                 </tr>
             </template>
         </template>
-        <tr v-else class="p-datatable-emptymessage" role="row">
-            <td :colspan="columnsLength">
+        <tr v-else class="p-datatable-emptymessage" role="row" v-bind="ptm('emptyMessage')">
+            <td :colspan="columnsLength" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
                 <component v-if="templates.empty" :is="templates.empty" />
             </td>
         </tr>
@@ -89,11 +113,15 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import BodyCell from './BodyCell.vue';
 
 export default {
     name: 'TableBody',
+    extends: BaseComponent,
     emits: [
         'rowgroup-toggle',
         'row-click',
@@ -273,6 +301,18 @@ export default {
         columnProp(col, prop) {
             return ObjectUtils.getVNodeProp(col, prop);
         },
+        getColumnPTOptions(column, key) {
+            return this.ptmo(this.getColumnProp(column), key, {
+                props: column.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getColumnProp(column) {
+            return column.props && column.props.pt ? column.props.pt : undefined; //@todo
+        },
         shouldRenderRowGroupHeader(value, rowData, i) {
             let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
             let prevRowData = value[i - 1];
@@ -389,16 +429,6 @@ export default {
                 return null;
             }
         },
-        rowTogglerIcon(rowData) {
-            const icon = this.isRowExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
-
-            return ['p-row-toggler-icon pi', icon];
-        },
-        rowGroupTogglerIcon(rowData) {
-            const icon = this.isRowGroupExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
-
-            return ['p-row-toggler-icon pi', icon];
-        },
         isGrouped(column) {
             if (this.groupRowsBy && this.columnProp(column, 'field')) {
                 if (Array.isArray(this.groupRowsBy)) return this.groupRowsBy.indexOf(column.props.field) > -1;
@@ -593,7 +623,9 @@ export default {
         }
     },
     components: {
-        DTBodyCell: BodyCell
+        DTBodyCell: BodyCell,
+        ChevronDownIcon: ChevronDownIcon,
+        ChevronRightIcon: ChevronRightIcon
     }
 };
 </script>
diff --git a/components/lib/datatable/TableFooter.vue b/components/lib/datatable/TableFooter.vue
index 49392dafe..7597ba1a2 100755
--- a/components/lib/datatable/TableFooter.vue
+++ b/components/lib/datatable/TableFooter.vue
@@ -1,14 +1,14 @@
 <template>
-    <tfoot v-if="hasFooter" class="p-datatable-tfoot" role="rowgroup">
-        <tr v-if="!columnGroup" role="row">
+    <tfoot v-if="hasFooter" class="p-datatable-tfoot" role="rowgroup" v-bind="{ ...ptm('tfoot'), ...getColumnGroupPTOptions('root') }">
+        <tr v-if="!columnGroup" role="row" v-bind="ptm('footerRow')">
             <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
-                <DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" />
+                <DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt" />
             </template>
         </tr>
         <template v-else>
-            <tr v-for="(row, i) of getFooterRows()" :key="i" role="row">
+            <tr v-for="(row, i) of getFooterRows()" :key="i" role="row" v-bind="getRowPTOptions(row, 'root')">
                 <template v-for="(col, j) of getFooterColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
-                    <DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" />
+                    <DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt" />
                 </template>
             </tr>
         </template>
@@ -16,18 +16,20 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { ObjectUtils } from 'primevue/utils';
 import FooterCell from './FooterCell.vue';
 
 export default {
     name: 'TableFooter',
+    extends: BaseComponent,
     props: {
         columnGroup: {
             type: null,
             default: null
         },
         columns: {
-            type: null,
+            type: Object,
             default: null
         }
     },
@@ -35,6 +37,30 @@ export default {
         columnProp(col, prop) {
             return ObjectUtils.getVNodeProp(col, prop);
         },
+        getColumnGroupPTOptions(key) {
+            return this.ptmo(this.getColumnGroupProps(), key, {
+                props: this.getColumnGroupProps(),
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getColumnGroupProps() {
+            return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
+        },
+        getRowPTOptions(row, key) {
+            return this.ptmo(this.getRowProp(row), key, {
+                props: row.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getRowProp(row) {
+            return row.props && row.props.pt ? row.props.pt : undefined; //@todo
+        },
         getFooterRows() {
             let rows = [];
 
diff --git a/components/lib/datatable/TableHeader.vue b/components/lib/datatable/TableHeader.vue
index 53261751e..b7408e6e3 100755
--- a/components/lib/datatable/TableHeader.vue
+++ b/components/lib/datatable/TableHeader.vue
@@ -1,7 +1,7 @@
 <template>
-    <thead class="p-datatable-thead" role="rowgroup">
+    <thead class="p-datatable-thead" role="rowgroup" v-bind="{ ...ptm('thead'), ...getColumnGroupPTOptions('root') }">
         <template v-if="!columnGroup">
-            <tr role="row">
+            <tr role="row" v-bind="ptm('headerRow')">
                 <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
                     <DTHeaderCell
                         v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
@@ -35,13 +35,20 @@
                         @constraint-add="$emit('constraint-add', $event)"
                         @constraint-remove="$emit('constraint-remove', $event)"
                         @apply-click="$emit('apply-click', $event)"
+                        :headerCheckboxIconTemplate="headerCheckboxIconTemplate"
+                        :pt="pt"
                     />
                 </template>
             </tr>
-            <tr v-if="filterDisplay === 'row'" role="row">
+            <tr v-if="filterDisplay === 'row'" role="row" v-bind="ptm('headerRow')">
                 <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
-                    <th v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))" :style="getFilterColumnHeaderStyle(col)" :class="getFilterColumnHeaderClass(col)">
-                        <DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" />
+                    <th
+                        v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
+                        :style="getFilterColumnHeaderStyle(col)"
+                        :class="getFilterColumnHeaderClass(col)"
+                        v-bind="{ ...getColumnPTOptions(col, 'root'), ...getColumnPTOptions(col, 'headerCell') }"
+                    >
+                        <DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" :column="col" :pt="pt" />
                         <DTColumnFilter
                             v-if="col.children && col.children.filter"
                             :field="columnProp(col, 'filterField') || columnProp(col, 'field')"
@@ -53,6 +60,10 @@
                             :filterFooterTemplate="col.children && col.children.filterfooter"
                             :filterClearTemplate="col.children && col.children.filterclear"
                             :filterApplyTemplate="col.children && col.children.filterapply"
+                            :filterIconTemplate="col.children && col.children.filtericon"
+                            :filterAddIconTemplate="col.children && col.children.filteraddicon"
+                            :filterRemoveIconTemplate="col.children && col.children.filterremoveicon"
+                            :filterClearIconTemplate="col.children && col.children.filterclearicon"
                             :filters="filters"
                             :filtersStore="filtersStore"
                             :filterInputProps="filterInputProps"
@@ -72,13 +83,15 @@
                             @constraint-add="$emit('constraint-add', $event)"
                             @constraint-remove="$emit('constraint-remove', $event)"
                             @apply-click="$emit('apply-click', $event)"
+                            :pt="pt"
+                            :column="col"
                         />
                     </th>
                 </template>
             </tr>
         </template>
         <template v-else>
-            <tr v-for="(row, i) of getHeaderRows()" :key="i" role="row">
+            <tr v-for="(row, i) of getHeaderRows()" :key="i" role="row" v-bind="getRowPTOptions(row, 'root')">
                 <template v-for="(col, j) of getHeaderColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
                     <DTHeaderCell
                         v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field')) && typeof col.children !== 'string'"
@@ -104,6 +117,8 @@
                         @constraint-add="$emit('constraint-add', $event)"
                         @constraint-remove="$emit('constraint-remove', $event)"
                         @apply-click="$emit('apply-click', $event)"
+                        :headerCheckboxIconTemplate="headerCheckboxIconTemplate"
+                        :pt="pt"
                     />
                 </template>
             </tr>
@@ -112,6 +127,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { ObjectUtils } from 'primevue/utils';
 import ColumnFilter from './ColumnFilter.vue';
 import HeaderCell from './HeaderCell.vue';
@@ -119,6 +135,7 @@ import HeaderCheckbox from './HeaderCheckbox.vue';
 
 export default {
     name: 'TableHeader',
+    extends: BaseComponent,
     emits: [
         'column-click',
         'column-mousedown',
@@ -205,12 +222,52 @@ export default {
         filterInputProps: {
             type: null,
             default: null
+        },
+        headerCheckboxIconTemplate: {
+            type: Function,
+            default: null
         }
     },
     methods: {
         columnProp(col, prop) {
             return ObjectUtils.getVNodeProp(col, prop);
         },
+        getColumnGroupPTOptions(key) {
+            return this.ptmo(this.getColumnGroupProps(), key, {
+                props: this.getColumnGroupProps(),
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getColumnGroupProps() {
+            return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
+        },
+        getRowPTOptions(row, key) {
+            return this.ptmo(this.getRowProp(row), key, {
+                props: row.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getRowProp(row) {
+            return row.props && row.props.pt ? row.props.pt : undefined; //@todo
+        },
+        getColumnPTOptions(column, key) {
+            return this.ptmo(this.getColumnProp(column), key, {
+                props: column.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getColumnProp(column) {
+            return column.props && column.props.pt ? column.props.pt : undefined; //@todo
+        },
         getFilterColumnHeaderClass(column) {
             return [
                 'p-filter-column',
diff --git a/components/lib/datatable/TableLoadingBody.vue b/components/lib/datatable/TableLoadingBody.vue
deleted file mode 100755
index f612d5e87..000000000
--- a/components/lib/datatable/TableLoadingBody.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-    <tbody class="p-datatable-tbody">
-        <tr v-for="n in rows" :key="n" role="row">
-            <td v-for="(col, i) of columns" :key="col.props.columnKey || col.props.field || i">
-                <component v-if="col.children && col.children.loading" :is="col.children.loading" :column="col" :index="i" />
-            </td>
-        </tr>
-    </tbody>
-</template>
-
-<script>
-export default {
-    name: 'TableLoadingBody',
-    props: {
-        columns: {
-            type: null,
-            default: null
-        },
-        rows: {
-            type: null,
-            default: null
-        }
-    }
-};
-</script>
diff --git a/components/lib/dataview/DataView.d.ts b/components/lib/dataview/DataView.d.ts
index cb1399d71..175abaa68 100755
--- a/components/lib/dataview/DataView.d.ts
+++ b/components/lib/dataview/DataView.d.ts
@@ -8,8 +8,18 @@
  *
  */
 import { VNode } from 'vue';
+import { PaginatorPassThroughOptionType } from '../paginator';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type DataViewPassThroughOptionType = DataViewPassThroughAttributes | ((options: DataViewPassThroughMethodOptions) => DataViewPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DataViewPassThroughMethodOptions {
+    props: DataViewProps;
+    state: DataViewState;
+}
 /**
  * Custom page event.
  * @see {@link DataViewEmits.page}
@@ -33,6 +43,63 @@ export interface DataViewPageEvent {
     pageCount: number;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DataViewProps.pt}
+ */
+export interface DataViewPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DataViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: DataViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Paginator component.
+     * @see {@link PaginatorPassThroughOptionType}
+     */
+    paginator?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: DataViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the column's DOM element.
+     */
+    column?: DataViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: DataViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: DataViewPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface DataViewPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in DataView component.
+ */
+export interface DataViewState {
+    /**
+     * Current index of first record as a number.
+     */
+    d_first: number;
+    /**
+     * Current number of rows to display in new page as a number.
+     */
+    d_rows: number;
+}
+
 /**
  * Defines valid properties in DataView component. In addition to these, all properties of HTMLDivElement can be used in this component.
  */
@@ -130,6 +197,11 @@ export interface DataViewProps {
      * Name of the data that uniquely identifies the a record in the data.
      */
     dataKey: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DataViewPassThroughOptions}
+     */
+    pt?: DataViewPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/dataview/DataView.vue b/components/lib/dataview/DataView.vue
index 1f243213e..be23d6066 100755
--- a/components/lib/dataview/DataView.vue
+++ b/components/lib/dataview/DataView.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :class="containerClass">
-        <div v-if="$slots.header" class="p-dataview-header">
+    <div :class="containerClass" v-bind="ptm('root')">
+        <div v-if="$slots.header" class="p-dataview-header" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
         <DVPaginator
@@ -15,6 +15,7 @@
             :class="{ 'p-paginator-top': paginatorTop }"
             :alwaysShow="alwaysShowPaginator"
             @page="onPage($event)"
+            :pt="ptm('paginator')"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
@@ -23,14 +24,14 @@
                 <slot name="paginatorend"></slot>
             </template>
         </DVPaginator>
-        <div class="p-dataview-content">
-            <div class="p-grid p-nogutter grid grid-nogutter">
+        <div class="p-dataview-content" v-bind="ptm('content')">
+            <div class="p-grid p-nogutter grid grid-nogutter" v-bind="ptm('grid')">
                 <template v-for="(item, index) of items" :key="getKey(item, index)">
                     <slot v-if="$slots.list && layout === 'list'" name="list" :data="item" :index="index"></slot>
                     <slot v-if="$slots.grid && layout === 'grid'" name="grid" :data="item" :index="index"></slot>
                 </template>
-                <div v-if="empty" class="p-col col">
-                    <div class="p-dataview-emptymessage">
+                <div v-if="empty" class="p-col col" v-bind="ptm('column')">
+                    <div class="p-dataview-emptymessage" v-bind="ptm('emptyMessage')">
                         <slot name="empty"></slot>
                     </div>
                 </div>
@@ -48,6 +49,7 @@
             :class="{ 'p-paginator-bottom': paginatorBottom }"
             :alwaysShow="alwaysShowPaginator"
             @page="onPage($event)"
+            :pt="ptm('root')"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
@@ -56,17 +58,20 @@
                 <slot name="paginatorend"></slot>
             </template>
         </DVPaginator>
-        <div v-if="$slots.footer" class="p-dataview-footer">
+        <div v-if="$slots.footer" class="p-dataview-footer" v-bind="ptm('footer')">
             <slot name="footer"></slot>
         </div>
     </div>
 </template>
+
 <script>
-import { ObjectUtils } from 'primevue/utils';
+import BaseComponent from 'primevue/basecomponent';
 import Paginator from 'primevue/paginator';
+import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'DataView',
+    extends: BaseComponent,
     emits: ['update:first', 'update:rows', 'page'],
     props: {
         value: {
diff --git a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts
index f463acb0f..c60aa10b7 100755
--- a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts
+++ b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts
@@ -10,6 +10,66 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type DataViewLayoutOptionsPassThroughOptionType = DataViewLayoutOptionsPassThroughAttributes | ((options: DataViewLayoutOptionsPassThroughMethodOptions) => DataViewLayoutOptionsPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DataViewLayoutOptionsPassThroughMethodOptions {
+    props: DataViewLayoutOptionsProps;
+    state: DataViewLayoutOptionsState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DataViewLayoutOptionsProps.pt}
+ */
+export interface DataViewLayoutOptionsPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DataViewLayoutOptionsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list button's DOM element.
+     */
+    listButton?: DataViewLayoutOptionsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list icon's DOM element.
+     */
+    listIcon?: DataViewLayoutOptionsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the grid button's DOM element.
+     */
+    gridButton?: DataViewLayoutOptionsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the grid icon's DOM element.
+     */
+    gridIcon?: DataViewLayoutOptionsPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface DataViewLayoutOptionsPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in DataViewLayoutOptions component.
+ */
+export interface DataViewLayoutOptionsState {
+    /**
+     * Current list button pressed state as a boolean.
+     * @defaultValue false
+     */
+    isListButtonPressed: boolean;
+    /**
+     * Current grid button pressed state as a boolean.
+     * @defaultValue false
+     */
+    isGridButtonPressed: boolean;
+}
+
 /**
  * Defines valid properties in DataViewLayoutOptions component.
  */
@@ -18,6 +78,11 @@ export interface DataViewLayoutOptionsProps {
      * Value of the component.
      */
     modelValue?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DataViewLayoutOptionsPassThroughOptions}
+     */
+    pt?: DataViewLayoutOptionsPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.spec.js b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.spec.js
index 9e0f14dfd..6d8c70d4d 100644
--- a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.spec.js
+++ b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.spec.js
@@ -1,19 +1,6 @@
-import { config, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import DataViewLayoutOptions from './DataViewLayoutOptions.vue';
 
-config.global.mocks = {
-    $primevue: {
-        config: {
-            locale: {
-                aria: {
-                    listView: 'listView',
-                    gridView: 'gridView'
-                }
-            }
-        }
-    }
-};
-
 describe('DataViewLayoutOptions.vue', () => {
     it('should exist', async () => {
         const wrapper = mount(DataViewLayoutOptions, {
diff --git a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue
index 0b6ff0337..cf06764fa 100755
--- a/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue
+++ b/components/lib/dataviewlayoutoptions/DataViewLayoutOptions.vue
@@ -1,24 +1,26 @@
 <template>
-    <div class="p-dataview-layout-options p-selectbutton p-buttonset" role="group">
-        <button :aria-label="listViewAriaLabel" :class="buttonListClass" @click="changeLayout('list')" type="button" :aria-pressed="isListButtonPressed">
+    <div class="p-dataview-layout-options p-selectbutton p-buttonset" role="group" v-bind="ptm('root')">
+        <button :aria-label="listViewAriaLabel" :class="buttonListClass" @click="changeLayout('list')" type="button" :aria-pressed="isListButtonPressed" v-bind="ptm('listButton')">
             <slot name="listicon">
-                <BarsIcon />
+                <BarsIcon v-bind="ptm('listIcon')" />
             </slot>
         </button>
-        <button :aria-label="gridViewAriaLabel" :class="buttonGridClass" @click="changeLayout('grid')" type="button" :aria-pressed="isGridButtonPressed">
+        <button :aria-label="gridViewAriaLabel" :class="buttonGridClass" @click="changeLayout('grid')" type="button" :aria-pressed="isGridButtonPressed" v-bind="ptm('gridButton')">
             <slot name="gridicon">
-                <ThLargeIcon />
+                <ThLargeIcon v-bind="ptm('gridIcon')" />
             </slot>
         </button>
     </div>
 </template>
 
 <script>
-import BarsIcon from 'primevue/icon/bars';
-import ThLargeIcon from 'primevue/icon/thlarge';
+import BaseComponent from 'primevue/basecomponent';
+import BarsIcon from 'primevue/icons/bars';
+import ThLargeIcon from 'primevue/icons/thlarge';
 
 export default {
     name: 'DataViewLayoutOptions',
+    extends: BaseComponent,
     emits: ['update:modelValue'],
     props: {
         modelValue: String
diff --git a/components/lib/dialog/Dialog.d.ts b/components/lib/dialog/Dialog.d.ts
index bc24c3541..693a382b6 100755
--- a/components/lib/dialog/Dialog.d.ts
+++ b/components/lib/dialog/Dialog.d.ts
@@ -10,6 +10,90 @@
 import { HTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type DialogPassThroughOptionType = DialogPassThroughAttributes | ((options: DialogPassThroughMethodOptions) => DialogPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DialogPassThroughMethodOptions {
+    props: DialogProps;
+    state: DialogState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DialogProps.pt}
+ */
+export interface DialogPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: DialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header title's DOM element.
+     */
+    headerTitle?: DialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header icons' DOM element.
+     */
+    headerIcons?: DialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the maximizable button's DOM element.
+     */
+    maximizableButton?: DialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the maximizable icon's DOM element.
+     */
+    maximizableIcon?: DialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close button's component.
+     */
+    closeButton?: DialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close button icon's component.
+     */
+    closeButtonIcon?: DialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: DialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: DialogPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: DialogPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface DialogPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Dialog component.
+ */
+export interface DialogState {
+    /**
+     * Current visible state of the container as a boolean.
+     * @defaultValue false
+     */
+    containerVisible: boolean;
+    /**
+     * Current maximized state as a boolean.
+     * @defaultValue false
+     */
+    maximized: boolean;
+}
+
 /**
  * Custom breakpoint metadata.
  */
@@ -146,19 +230,24 @@ export interface DialogProps {
     style?: any;
     /**
      * Icon to display in the dialog close button.
-     * @defaultValue pi pi-times
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**
      * Icon to display in the dialog maximize button when dialog is not maximized.
-     * @defaultValue pi pi-window-maximize
+     * @deprecated since v3.27.0. Use 'maximizeicon' slot.
      */
     maximizeIcon?: string | undefined;
     /**
-     * Icon to display in the dialog maximize button when dialog is maximized.
-     * @defaultValue pi pi-window-minimize
+     * Icon to display in the dialog maximize button when dialog is minimized.
+     * @deprecated since v3.27.0. Use 'minimizeicon' slot.
      */
     minimizeIcon?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DialogPassThroughOptions}
+     */
+    pt?: DialogPassThroughOptions;
 }
 
 /**
@@ -177,6 +266,20 @@ export interface DialogSlots {
      * Custom footer template.
      */
     footer(): VNode[];
+    /**
+     * Custom close icon template.
+     */
+    closeicon(): VNode[];
+    /**
+     * Custom maximize icon template of dialog.
+     * @param {Object} scope - maximize icon slot's params.
+     */
+    maximizeicon(scope: {
+        /**
+         * Maximized state as a boolean
+         */
+        maximized: boolean;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue
index 19bc83445..f7aa53de6 100755
--- a/components/lib/dialog/Dialog.vue
+++ b/components/lib/dialog/Dialog.vue
@@ -1,15 +1,27 @@
 <template>
     <Portal :appendTo="appendTo">
-        <div v-if="containerVisible" :ref="maskRef" :class="maskClass" @click="onMaskClick">
+        <div v-if="containerVisible" :ref="maskRef" :class="maskClass" @click="onMaskClick" v-bind="ptm('mask')">
             <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
-                <div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="dialogClass" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="$attrs">
-                    <div v-if="showHeader" :ref="headerContainerRef" class="p-dialog-header" @mousedown="initDrag">
+                <div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="dialogClass" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="{ ...$attrs, ...ptm('root') }">
+                    <div v-if="showHeader" :ref="headerContainerRef" class="p-dialog-header" @mousedown="initDrag" v-bind="ptm('header')">
                         <slot name="header">
-                            <span v-if="header" :id="ariaLabelledById" class="p-dialog-title">{{ header }}</span>
+                            <span v-if="header" :id="ariaLabelledById" class="p-dialog-title" v-bind="ptm('headerTitle')">{{ header }}</span>
                         </slot>
-                        <div class="p-dialog-header-icons">
-                            <button v-if="maximizable" :ref="maximizableRef" v-ripple :autofocus="focusableMax" class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" type="button" :tabindex="maximizable ? '0' : '-1'">
-                                <span :class="maximizeIconClass"></span>
+                        <div class="p-dialog-header-icons" v-bind="ptm('headerIcons')">
+                            <button
+                                v-if="maximizable"
+                                :ref="maximizableRef"
+                                v-ripple
+                                :autofocus="focusableMax"
+                                class="p-dialog-header-icon p-dialog-header-maximize p-link"
+                                @click="maximize"
+                                type="button"
+                                :tabindex="maximizable ? '0' : '-1'"
+                                v-bind="ptm('maximizableButton')"
+                            >
+                                <slot name="maximizeicon" :maximized="maximized">
+                                    <component :is="maximizeIconComponent" :class="maximizeIconClass" v-bind="ptm('maximizableIcon')" />
+                                </slot>
                             </button>
                             <button
                                 v-if="closable"
@@ -20,16 +32,18 @@
                                 @click="close"
                                 :aria-label="closeAriaLabel"
                                 type="button"
-                                v-bind="closeButtonProps"
+                                v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
                             >
-                                <span :class="['p-dialog-header-close-icon', closeIcon]"></span>
+                                <slot name="closeicon">
+                                    <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-dialog-header-close-icon', closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
+                                </slot>
                             </button>
                         </div>
                     </div>
-                    <div :ref="contentRef" :class="contentStyleClass" :style="contentStyle" v-bind="contentProps">
+                    <div :ref="contentRef" :class="contentStyleClass" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
                         <slot></slot>
                     </div>
-                    <div v-if="footer || $slots.footer" :ref="footerContainerRef" class="p-dialog-footer">
+                    <div v-if="footer || $slots.footer" :ref="footerContainerRef" class="p-dialog-footer" v-bind="ptm('footer')">
                         <slot name="footer">{{ footer }}</slot>
                     </div>
                 </div>
@@ -39,7 +53,11 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import FocusTrap from 'primevue/focustrap';
+import TimesIcon from 'primevue/icons/times';
+import WindowMaximizeIcon from 'primevue/icons/windowmaximize';
+import WindowMinimizeIcon from 'primevue/icons/windowminimize';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
@@ -47,6 +65,7 @@ import { computed } from 'vue';
 
 export default {
     name: 'Dialog',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['update:visible', 'show', 'hide', 'after-hide', 'maximize', 'unmaximize', 'dragend'],
     props: {
@@ -140,15 +159,15 @@ export default {
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         maximizeIcon: {
             type: String,
-            default: 'pi pi-window-maximize'
+            default: undefined
         },
         minimizeIcon: {
             type: String,
-            default: 'pi pi-window-minimize'
+            default: undefined
         },
         closeButtonProps: {
             type: null,
@@ -475,14 +494,13 @@ export default {
                 }
             ];
         },
+        maximizeIconComponent() {
+            return this.maximized ? (this.minimizeIcon ? 'span' : 'WindowMinimizeIcon') : this.maximizeIcon ? 'span' : 'WindowMaximizeIcon';
+        },
         maximizeIconClass() {
-            return [
-                'p-dialog-header-maximize-icon',
-                {
-                    [this.maximizeIcon]: !this.maximized,
-                    [this.minimizeIcon]: this.maximized
-                }
-            ];
+            const maximizeClasses = this.maximized ? this.minimizeIcon : this.maximizeIcon;
+
+            return `p-dialog-header-maximize-icon ${maximizeClasses}`;
         },
         ariaId() {
             return UniqueComponentId();
@@ -505,7 +523,10 @@ export default {
         focustrap: FocusTrap
     },
     components: {
-        Portal: Portal
+        Portal: Portal,
+        WindowMinimizeIcon,
+        WindowMaximizeIcon,
+        TimesIcon
     }
 };
 </script>
diff --git a/components/lib/divider/Divider.vue b/components/lib/divider/Divider.vue
index ae70479c3..1d3d8c761 100644
--- a/components/lib/divider/Divider.vue
+++ b/components/lib/divider/Divider.vue
@@ -8,6 +8,7 @@
 
 <script>
 import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Divider',
     extends: BaseComponent,
diff --git a/components/lib/dock/Dock.d.ts b/components/lib/dock/Dock.d.ts
index c0f0814bd..2c11c73bb 100644
--- a/components/lib/dock/Dock.d.ts
+++ b/components/lib/dock/Dock.d.ts
@@ -11,6 +11,95 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type DockPassThroughOptionType = DockPassThroughAttributes | ((options: DockPassThroughMethodOptions) => DockPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DockPassThroughMethodOptions {
+    props: DockProps;
+    state: DockState;
+    context: DockContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DockProps.pt}
+ */
+export interface DockPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: DockPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface DockPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Dock component.
+ */
+export interface DockState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current index as a number.
+     * @defaultvalue -3
+     */
+    currentIndex: number;
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item index as a number.
+     * @defaultvalue -1
+     */
+    focusedOptionIndex: number;
+}
+
+/**
+ * Defines current options in Dock component.
+ */
+export interface DockContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
+
 /**
  * Defines tooltip options
  */
@@ -77,6 +166,11 @@ export interface DockProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DockPassThroughOptions}
+     */
+    pt?: DockPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/dock/Dock.vue b/components/lib/dock/Dock.vue
index 3ffb265b9..44e6b2adf 100644
--- a/components/lib/dock/Dock.vue
+++ b/components/lib/dock/Dock.vue
@@ -1,14 +1,16 @@
 <template>
-    <div :class="containerClass" :style="style">
-        <DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex"></DockSub>
+    <div :class="containerClass" :style="style" v-bind="ptm('root')">
+        <DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex" :pt="pt"></DockSub>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import DockSub from './DockSub.vue';
 
 export default {
     name: 'Dock',
+    extends: BaseComponent,
     props: {
         position: {
             type: String,
diff --git a/components/lib/dock/DockSub.vue b/components/lib/dock/DockSub.vue
index fe7322f36..98be1c103 100644
--- a/components/lib/dock/DockSub.vue
+++ b/components/lib/dock/DockSub.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-dock-list-container">
+    <div class="p-dock-list-container" v-bind="ptm('container')">
         <ul
             ref="list"
             :id="id"
@@ -14,6 +14,7 @@
             @blur="onListBlur"
             @keydown="onListKeyDown"
             @mouseleave="onListMouseLeave"
+            v-bind="ptm('menu')"
         >
             <template v-for="(processedItem, index) of model" :key="index">
                 <li
@@ -24,8 +25,9 @@
                     :aria-disabled="disabled(processedItem)"
                     @click="onItemClick($event, processedItem)"
                     @mouseenter="onItemMouseEnter(index)"
+                    v-bind="getPTOptions(getItemId(index), 'menuitem')"
                 >
-                    <div class="p-menuitem-content">
+                    <div class="p-menuitem-content" v-bind="getPTOptions(getItemId(index), 'content')">
                         <template v-if="!templates['item']">
                             <router-link v-if="processedItem.to && !disabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="processedItem.to" custom>
                                 <a
@@ -36,16 +38,26 @@
                                     tabindex="-1"
                                     aria-hidden="true"
                                     @click="onItemActionClick($event, processedItem, navigate)"
+                                    v-bind="getPTOptions(getItemId(index), 'action')"
                                 >
                                     <template v-if="!templates['icon']">
-                                        <span v-ripple :class="['p-dock-icon', processedItem.icon]"></span>
+                                        <span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
                                     </template>
                                     <component v-else :is="templates['icon']" :item="processedItem"></component>
                                 </a>
                             </router-link>
-                            <a v-else v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }" :href="processedItem.url" :class="linkClass()" :target="processedItem.target" tabindex="-1" aria-hidden="true">
+                            <a
+                                v-else
+                                v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }"
+                                :href="processedItem.url"
+                                :class="linkClass()"
+                                :target="processedItem.target"
+                                tabindex="-1"
+                                aria-hidden="true"
+                                v-bind="getPTOptions(getItemId(index), 'action')"
+                            >
                                 <template v-if="!templates['icon']">
-                                    <span v-ripple :class="['p-dock-icon', processedItem.icon]"></span>
+                                    <span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
                                 </template>
                                 <component v-else :is="templates['icon']" :item="processedItem"></component>
                             </a>
@@ -59,12 +71,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'DockSub',
+    extends: BaseComponent,
     emits: ['focus', 'blur'],
     props: {
         position: {
@@ -124,9 +138,19 @@ export default {
         getItemProp(processedItem, name) {
             return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
         },
+        getPTOptions(id, key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.isItemActive(id)
+                }
+            });
+        },
         isSameMenuItem(event) {
             return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('.p-menuitem')));
         },
+        isItemActive(id) {
+            return id === this.focusedOptionIndex;
+        },
         onListMouseLeave() {
             this.currentIndex = -3;
         },
@@ -248,7 +272,7 @@ export default {
             return [
                 'p-dock-item',
                 {
-                    'p-focus': id === this.focusedOptionIndex,
+                    'p-focus': this.isItemActive(id),
                     'p-disabled': this.disabled(item),
                     'p-dock-item-second-prev': this.currentIndex - 2 === index,
                     'p-dock-item-prev': this.currentIndex - 1 === index,
diff --git a/components/lib/dropdown/Dropdown.d.ts b/components/lib/dropdown/Dropdown.d.ts
index 5821dfd28..a3647500a 100755
--- a/components/lib/dropdown/Dropdown.d.ts
+++ b/components/lib/dropdown/Dropdown.d.ts
@@ -9,7 +9,18 @@
  */
 import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
-import { VirtualScrollerItemOptions, VirtualScrollerProps } from '../virtualscroller';
+import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
+
+export declare type DropdownPassThroughOptionType = DropdownPassThroughAttributes | ((options: DropdownPassThroughMethodOptions) => DropdownPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DropdownPassThroughMethodOptions {
+    props: DropdownProps;
+    state: DropdownState;
+    context: DropdownContext;
+}
 
 /**
  * Custom change event.
@@ -41,6 +52,151 @@ export interface DropdownFilterEvent {
     value: any;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DropdownProps.pt}
+ */
+export interface DropdownPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the clear icon's DOM element.
+     */
+    clearIcon?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the trigger' DOM element.
+     */
+    trigger?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter container's DOM element.
+     */
+    filterContainer?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter input's DOM element.
+     */
+    filterInput?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter icon's DOM element.
+     */
+    filterIcon?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the VirtualScroller component.
+     * @see {@link VirtualScrollerPassThroughOptionType}
+     */
+    virtualScroller?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item group's DOM element.
+     */
+    itemGroup?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the emptyMessage's DOM element.
+     */
+    emptyMessage?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden first focusable element's DOM element.
+     */
+    hiddenFirstFocusableEl?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden filter result's DOM element.
+     */
+    hiddenFilterResult?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden selected message's DOM element.
+     */
+    hiddenSelectedMessage?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden last focusable element's DOM element.
+     */
+    hiddenLastFocusableEl?: DropdownPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface DropdownPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Dropdown component.
+ */
+export interface DropdownState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item index as a number.
+     * @defaultvalue -1
+     */
+    focusedOptionIndex: number;
+    /**
+     * Current filter value state as a string.
+     */
+    filterValue: string;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+}
+
+/**
+ * Defines current options in Dropdown component.
+ */
+export interface DropdownContext {
+    /**
+     * Current selection state of the item as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current focus state of the item as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in Dropdown component.
  */
@@ -157,6 +313,7 @@ export interface DropdownProps {
     filterInputProps?: InputHTMLAttributes | undefined;
     /**
      * Uses to pass all properties of the HTMLElement to the clear icon inside the component.
+     * @deprecated since v3.26.0. Use 'pt' peroperty.
      */
     clearIconProps?: HTMLAttributes | undefined;
     /**
@@ -171,22 +328,22 @@ export interface DropdownProps {
     loading?: boolean | undefined;
     /**
      * Icon to display in clear button.
-     * @defaultValue pi pi-times
+     * @deprecated since v3.27.0. Use 'clearicon' slot.
      */
     clearIcon?: string | undefined;
     /**
      * Icon to display in the dropdown.
-     * @defaultValue pi pi-chevron-down
+     * @deprecated since v3.27.0. Use 'dropdownicon' slot.
      */
     dropdownIcon?: string | undefined;
     /**
      * Icon to display in filter input.
-     * @defaultValue pi pi-search
+     * @deprecated since v3.27.0. Use 'filtericon' slot.
      */
     filterIcon?: string | undefined;
     /**
      * Icon to display in loading state.
-     * @defaultValue pi pi-spinner pi-spin
+     * @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
     /**
@@ -250,6 +407,11 @@ export interface DropdownProps {
      * Identifier of the underlying input element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DropdownPassThroughOptions}
+     */
+    pt?: DropdownPassThroughOptions;
 }
 
 /**
@@ -272,6 +434,7 @@ export interface DropdownSlots {
     }): VNode[];
     /**
      * Custom indicator template.
+     * @deprecated since v3.27.0. Use 'dropdownicon or loadingicon' slots.
      */
     indicator(): VNode[];
     /**
@@ -373,6 +536,40 @@ export interface DropdownSlots {
          */
         options: any[];
     }): VNode[];
+    /**
+     * Custom clear icon template.
+     * @param {Object} scope - clear icon slot's params.
+     */
+    clearicon(scope: {
+        /**
+         * Clear icon click function.
+         */
+        onClick: void;
+    }): VNode[];
+    /**
+     * Custom dropdown icon template.
+     * @param {Object} scope - dropdown icon slot's params.
+     */
+    dropdownicon(scope: {
+        /**
+         * Style class of the component
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom loading icon template.
+     * @param {Object} scope - loading icon slot's params.
+     */
+    loadingicon(scope: {
+        /**
+         * Style class of the component
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom filter icon template.
+     */
+    filtericon(): VNode[];
 }
 
 /**
diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue
index fb7d133b3..eca50c7bc 100755
--- a/components/lib/dropdown/Dropdown.vue
+++ b/components/lib/dropdown/Dropdown.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :id="id" :class="containerClass" @click="onContainerClick">
+    <div ref="container" :id="id" :class="containerClass" @click="onContainerClick" v-bind="ptm('root')">
         <input
             v-if="editable"
             ref="focusInput"
@@ -23,7 +23,7 @@
             @blur="onBlur"
             @keydown="onKeyDown"
             @input="onEditableInput"
-            v-bind="inputProps"
+            v-bind="{ ...inputProps, ...ptm('input') }"
         />
         <span
             v-else
@@ -43,26 +43,29 @@
             @focus="onFocus"
             @blur="onBlur"
             @keydown="onKeyDown"
-            v-bind="inputProps"
+            v-bind="{ ...inputProps, ...ptm('input') }"
         >
             <slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot>
         </span>
-        <slot v-if="showClear && modelValue != null" name="clearicon">
-            <component :is="clearIcon ? 'i' : 'TimesIcon'" :class="['p-dropdown-clear-icon', clearIcon]" @click="onClearClick" v-bind="clearIconProps" />
+        <slot v-if="showClear && modelValue != null" name="clearicon" :onClick="onClearClick">
+            <component :is="clearIcon ? 'i' : 'TimesIcon'" :class="['p-dropdown-clear-icon', clearIcon]" @click="onClearClick" v-bind="{ ...clearIconProps, ...ptm('clearIcon') }" />
         </slot>
-        <div class="p-dropdown-trigger">
-            <slot name="indicator">
-                <component v-if="loading" :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-dropdown-trigger-icon', loadingIcon]" aria-hidden="true" />
-                <component v-else :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-dropdown-trigger-icon', dropdownIcon]" aria-hidden="true" />
+        <div class="p-dropdown-trigger" v-bind="ptm('trigger')">
+            <slot v-if="loading" name="loadingicon" class="p-dropdown-trigger-icon">
+                <span v-if="loadingIcon" :class="['p-dropdown-trigger-icon pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
+                <SpinnerIcon v-else class="p-dropdown-trigger-icon" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
+            </slot>
+            <slot v-else name="dropdownicon" class="p-dropdown-trigger-icon">
+                <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-dropdown-trigger-icon', dropdownIcon]" aria-hidden="true" v-bind="ptm('dropdownIcon')" />
             </slot>
         </div>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div v-if="overlayVisible" :ref="overlayRef" :style="panelStyle" :class="panelStyleClass" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="panelProps">
-                    <span ref="firstHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onFirstHiddenFocus"></span>
+                <div v-if="overlayVisible" :ref="overlayRef" :style="panelStyle" :class="panelStyleClass" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="{ ...panelProps, ...ptm('panel') }">
+                    <span ref="firstHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onFirstHiddenFocus" v-bind="ptm('hiddenFirstFocusableEl')"></span>
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
-                    <div v-if="filter" class="p-dropdown-header">
-                        <div class="p-dropdown-filter-container">
+                    <div v-if="filter" class="p-dropdown-header" v-bind="ptm('header')">
+                        <div class="p-dropdown-filter-container" v-bind="ptm('filterContainer')">
                             <input
                                 ref="filterInput"
                                 type="text"
@@ -77,22 +80,29 @@
                                 @keydown="onFilterKeyDown"
                                 @blur="onFilterBlur"
                                 @input="onFilterChange"
-                                v-bind="filterInputProps"
+                                v-bind="{ ...filterInputProps, ...ptm('filterInput') }"
                             />
                             <slot name="filtericon">
-                                <component :is="filterIcon ? 'span' : 'FilterIcon'" :class="['p-dropdown-filter-icon', filterIcon]" />
+                                <component :is="filterIcon ? 'span' : 'FilterIcon'" :class="['p-dropdown-filter-icon', filterIcon]" v-bind="ptm('filterIcon')" />
                             </slot>
                         </div>
-                        <span role="status" aria-live="polite" class="p-hidden-accessible">
+                        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')">
                             {{ filterResultMessageText }}
                         </span>
                     </div>
-                    <div class="p-dropdown-items-wrapper" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }">
-                        <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled">
+                    <div class="p-dropdown-items-wrapper" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')">
+                        <VirtualScroller :ref="virtualScrollerRef" v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled">
                             <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
-                                <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-dropdown-items', styleClass]" :style="contentStyle" role="listbox">
+                                <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-dropdown-items', styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')">
                                     <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
-                                        <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" class="p-dropdown-item-group" role="option">
+                                        <li
+                                            v-if="isOptionGroup(option)"
+                                            :id="id + '_' + getOptionIndex(i, getItemOptions)"
+                                            :style="{ height: itemSize ? itemSize + 'px' : undefined }"
+                                            class="p-dropdown-item-group"
+                                            role="option"
+                                            v-bind="ptm('itemGroup')"
+                                        >
                                             <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
                                         </li>
                                         <li
@@ -109,14 +119,15 @@
                                             :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
                                             @click="onOptionSelect($event, option)"
                                             @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
+                                            v-bind="getPTOptions(option, getItemOptions, i, 'item')"
                                         >
                                             <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
                                         </li>
                                     </template>
-                                    <li v-if="filterValue && (!items || (items && items.length === 0))" class="p-dropdown-empty-message" role="option">
+                                    <li v-if="filterValue && (!items || (items && items.length === 0))" class="p-dropdown-empty-message" role="option" v-bind="ptm('emptyMessage')">
                                         <slot name="emptyfilter">{{ emptyFilterMessageText }}</slot>
                                     </li>
-                                    <li v-else-if="!options || (options && options.length === 0)" class="p-dropdown-empty-message" role="option">
+                                    <li v-else-if="!options || (options && options.length === 0)" class="p-dropdown-empty-message" role="option" v-bind="ptm('emptyMessage')">
                                         <slot name="empty">{{ emptyMessageText }}</slot>
                                     </li>
                                 </ul>
@@ -127,13 +138,13 @@
                         </VirtualScroller>
                     </div>
                     <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
-                    <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible">
+                    <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('emptyMessage')">
                         {{ emptyMessageText }}
                     </span>
-                    <span role="status" aria-live="polite" class="p-hidden-accessible">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')">
                         {{ selectedMessageText }}
                     </span>
-                    <span ref="lastHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onLastHiddenFocus"></span>
+                    <span ref="lastHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onLastHiddenFocus" v-bind="ptm('hiddenLastFocusableEl')"></span>
                 </div>
             </transition>
         </Portal>
@@ -142,10 +153,11 @@
 
 <script>
 import { FilterService } from 'primevue/api';
-import ChevronDownIcon from 'primevue/icon/chevrondown';
-import FilterIcon from 'primevue/icon/filter';
-import SpinnerIcon from 'primevue/icon/spinner';
-import TimesIcon from 'primevue/icon/times';
+import BaseComponent from 'primevue/basecomponent';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import FilterIcon from 'primevue/icons/filter';
+import SpinnerIcon from 'primevue/icons/spinner';
+import TimesIcon from 'primevue/icons/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
@@ -154,6 +166,7 @@ import VirtualScroller from 'primevue/virtualscroller';
 
 export default {
     name: 'Dropdown',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter'],
     props: {
         modelValue: null,
@@ -374,6 +387,15 @@ export default {
         getOptionRenderKey(option, index) {
             return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
         },
+        getPTOptions(option, itemOptions, index, key) {
+            return this.ptm(key, {
+                context: {
+                    selected: this.isSelected(option),
+                    focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),
+                    disabled: this.isOptionDisabled(option)
+                }
+            });
+        },
         isOptionDisabled(option) {
             return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
         },
@@ -947,7 +969,7 @@ export default {
                     'p-disabled': this.disabled,
                     'p-dropdown-clearable': this.showClear && !this.disabled,
                     'p-focus': this.focused,
-                    'p-inputwrapper-filled': this.modelValue,
+                    'p-inputwrapper-filled': this.hasSelectedOption,
                     'p-inputwrapper-focus': this.focused || this.overlayVisible,
                     'p-overlay-open': this.overlayVisible
                 }
diff --git a/components/lib/dynamicdialog/DynamicDialog.vue b/components/lib/dynamicdialog/DynamicDialog.vue
index edaee4eee..5ad25f5d8 100644
--- a/components/lib/dynamicdialog/DynamicDialog.vue
+++ b/components/lib/dynamicdialog/DynamicDialog.vue
@@ -1,6 +1,6 @@
 <template>
     <template v-for="(instance, key) in instanceMap" :key="key">
-        <DDialog v-model:visible="instance.visible" :_instance="instance" v-bind="instance.options.props" @hide="onDialogHide(instance)" @after-hide="onDialogAfterHide">
+        <DDialog v-model:visible="instance.visible" :_instance="instance" v-bind="instance.options.props" :pt="pt" @hide="onDialogHide(instance)" @after-hide="onDialogAfterHide">
             <template v-if="instance.options.templates && instance.options.templates.header" #header>
                 <component v-for="(header, index) in getTemplateItems(instance.options.templates.header)" :is="header" :key="index + '_header'"></component>
             </template>
@@ -13,12 +13,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Dialog from 'primevue/dialog';
 import DynamicDialogEventBus from 'primevue/dynamicdialogeventbus';
 import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'DynamicDialog',
+    extends: BaseComponent,
     inheritAttrs: false,
     data() {
         return {
diff --git a/components/lib/editor/Editor.d.ts b/components/lib/editor/Editor.d.ts
index 7aee7c2c8..4b04f3693 100755
--- a/components/lib/editor/Editor.d.ts
+++ b/components/lib/editor/Editor.d.ts
@@ -9,6 +9,15 @@
  */
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+export declare type EditorPassThroughOptionType = EditorPassThroughAttributes | ((options: EditorPassThroughMethodOptions) => EditorPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface EditorPassThroughMethodOptions {
+    props: EditorProps;
+    state: EditorState;
+}
 
 /**
  * Custom text change event.
@@ -77,6 +86,59 @@ export interface EditorLoadEvent {
     instance: any;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link EditorProps.pt}
+ */
+export interface EditorPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: EditorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toolbar's DOM element.
+     */
+    toolbar?: EditorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the formats's DOM element.
+     */
+    formats?: EditorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the select's DOM element.
+     */
+    select?: EditorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the option's DOM element.
+     */
+    option?: EditorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button's DOM element.
+     */
+    button?: EditorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: EditorPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface EditorPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Editor component.
+ */
+export interface EditorState {
+    /**
+     * Current rerendered color key as a number.
+     * @defaultValue 0
+     */
+    reRenderColorKey: number;
+}
+
 /**
  * Defines valid properties in Editor component.
  */
@@ -106,6 +168,11 @@ export interface EditorProps {
      * Modules configuration, see [here](https://quilljs.com/docs/modules/) for available options.
      */
     modules?: any;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {EditorPassThroughOptions}
+     */
+    pt?: EditorPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/editor/Editor.vue b/components/lib/editor/Editor.vue
index 18e81e8a6..b41e2bfe6 100755
--- a/components/lib/editor/Editor.vue
+++ b/components/lib/editor/Editor.vue
@@ -1,53 +1,54 @@
 <template>
-    <div class="p-editor-container">
-        <div ref="toolbarElement" class="p-editor-toolbar">
+    <div class="p-editor-container" v-bind="ptm('root')">
+        <div ref="toolbarElement" class="p-editor-toolbar" v-bind="ptm('toolbar')">
             <slot name="toolbar">
-                <span class="ql-formats">
-                    <select class="ql-header" defaultValue="0">
-                        <option value="1">Heading</option>
-                        <option value="2">Subheading</option>
-                        <option value="0">Normal</option>
+                <span class="ql-formats" v-bind="ptm('formats')">
+                    <select class="ql-header" defaultValue="0" v-bind="ptm('select')">
+                        <option value="1" v-bind="ptm('option')">Heading</option>
+                        <option value="2" v-bind="ptm('option')">Subheading</option>
+                        <option value="0" v-bind="ptm('option')">Normal</option>
                     </select>
-                    <select class="ql-font">
-                        <option></option>
-                        <option value="serif"></option>
-                        <option value="monospace"></option>
+                    <select class="ql-font" v-bind="ptm('select')">
+                        <option v-bind="ptm('option')"></option>
+                        <option value="serif" v-bind="ptm('option')"></option>
+                        <option value="monospace" v-bind="ptm('option')"></option>
                     </select>
                 </span>
-                <span class="ql-formats">
-                    <button class="ql-bold" type="button"></button>
-                    <button class="ql-italic" type="button"></button>
-                    <button class="ql-underline" type="button"></button>
+                <span class="ql-formats" v-bind="ptm('formats')">
+                    <button class="ql-bold" type="button" v-bind="ptm('button')"></button>
+                    <button class="ql-italic" type="button" v-bind="ptm('button')"></button>
+                    <button class="ql-underline" type="button" v-bind="ptm('button')"></button>
                 </span>
-                <span :key="reRenderColorKey" class="ql-formats">
-                    <select class="ql-color"></select>
-                    <select class="ql-background"></select>
+                <span :key="reRenderColorKey" class="ql-formats" v-bind="ptm('formats')">
+                    <select class="ql-color" v-bind="ptm('select')"></select>
+                    <select class="ql-background" v-bind="ptm('select')"></select>
                 </span>
-                <span class="ql-formats">
-                    <button class="ql-list" value="ordered" type="button"></button>
-                    <button class="ql-list" value="bullet" type="button"></button>
-                    <select class="ql-align">
-                        <option defaultValue></option>
-                        <option value="center"></option>
-                        <option value="right"></option>
-                        <option value="justify"></option>
+                <span class="ql-formats" v-bind="ptm('formats')">
+                    <button class="ql-list" value="ordered" type="button" v-bind="ptm('button')"></button>
+                    <button class="ql-list" value="bullet" type="button" v-bind="ptm('button')"></button>
+                    <select class="ql-align" v-bind="ptm('select')">
+                        <option defaultValue v-bind="ptm('option')"></option>
+                        <option value="center" v-bind="ptm('option')"></option>
+                        <option value="right" v-bind="ptm('option')"></option>
+                        <option value="justify" v-bind="ptm('option')"></option>
                     </select>
                 </span>
-                <span class="ql-formats">
-                    <button class="ql-link" type="button"></button>
-                    <button class="ql-image" type="button"></button>
-                    <button class="ql-code-block" type="button"></button>
+                <span class="ql-formats" v-bind="ptm('formats')">
+                    <button class="ql-link" type="button" v-bind="ptm('button')"></button>
+                    <button class="ql-image" type="button" v-bind="ptm('button')"></button>
+                    <button class="ql-code-block" type="button" v-bind="ptm('button')"></button>
                 </span>
-                <span class="ql-formats">
-                    <button class="ql-clean" type="button"></button>
+                <span class="ql-formats" v-bind="ptm('formats')">
+                    <button class="ql-clean" type="button" v-bind="ptm('button')"></button>
                 </span>
             </slot>
         </div>
-        <div ref="editorElement" class="p-editor-content" :style="editorStyle"></div>
+        <div ref="editorElement" class="p-editor-content" :style="editorStyle" v-bind="ptm('content')"></div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler } from 'primevue/utils';
 
 const QuillJS = (function () {
@@ -60,6 +61,7 @@ const QuillJS = (function () {
 
 export default {
     name: 'Editor',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'text-change', 'selection-change', 'load'],
     props: {
         modelValue: String,
diff --git a/components/lib/fieldset/Fieldset.d.ts b/components/lib/fieldset/Fieldset.d.ts
index 61f3f4bb5..735acd792 100755
--- a/components/lib/fieldset/Fieldset.d.ts
+++ b/components/lib/fieldset/Fieldset.d.ts
@@ -55,15 +55,15 @@ export interface FieldsetPassThroughOptions {
     /**
      * Uses to pass attributes to the toggler icon's DOM element.
      */
-    togglericon?: FieldsetPassThroughOptionType;
+    togglerIcon?: FieldsetPassThroughOptionType;
     /**
      * Uses to pass attributes to the legend title's DOM element.
      */
-    legendtitle?: FieldsetPassThroughOptionType;
+    legendTitle?: FieldsetPassThroughOptionType;
     /**
      * Uses to pass attributes to the toggleable content's DOM element.
      */
-    toggleablecontent?: FieldsetPassThroughOptionType;
+    toggleableContent?: FieldsetPassThroughOptionType;
     /**
      * Uses to pass attributes to the content's DOM element.
      */
diff --git a/components/lib/fieldset/Fieldset.vue b/components/lib/fieldset/Fieldset.vue
index e570ec442..d4c34a14e 100755
--- a/components/lib/fieldset/Fieldset.vue
+++ b/components/lib/fieldset/Fieldset.vue
@@ -18,7 +18,7 @@
                 v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
             >
                 <slot name="togglericon" :collapsed="d_collapsed">
-                    <span :class="iconClass" v-bind="ptm('togglericon')"></span>
+                    <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" class="p-fieldset-toggler" v-bind="ptm('togglericon')" />
                 </slot>
                 <slot name="legend">
                     <span class="p-fieldset-legend-text" v-bind="ptm('legendtitle')">{{ legend }}</span>
@@ -37,6 +37,8 @@
 
 <script>
 import BaseComponent from 'primevue/basecomponent';
+import MinusIcon from 'primevue/icons/minus';
+import PlusIcon from 'primevue/icons/plus';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId } from 'primevue/utils';
 
@@ -80,15 +82,6 @@ export default {
         }
     },
     computed: {
-        iconClass() {
-            return [
-                'p-fieldset-toggler pi ',
-                {
-                    'pi-minus': !this.d_collapsed,
-                    'pi-plus': this.d_collapsed
-                }
-            ];
-        },
         ariaId() {
             return UniqueComponentId();
         },
@@ -98,6 +91,10 @@ export default {
     },
     directives: {
         ripple: Ripple
+    },
+    components: {
+        PlusIcon,
+        MinusIcon
     }
 };
 </script>
diff --git a/components/lib/fileupload/FileContent.vue b/components/lib/fileupload/FileContent.vue
index 8d744862b..e15af9ea7 100644
--- a/components/lib/fileupload/FileContent.vue
+++ b/components/lib/fileupload/FileContent.vue
@@ -1,22 +1,30 @@
 <template>
-    <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-fileupload-file">
-        <img role="presentation" class="p-fileupload-file-thumbnail" :alt="file.name" :src="file.objectURL" :width="previewWidth" />
-        <div class="p-fileupload-file-details">
-            <div class="p-fileupload-file-name">{{ file.name }}</div>
-            <span class="p-fileupload-file-size">{{ formatSize(file.size) }}</span>
-            <FileUploadBadge :value="badgeValue" class="p-fileupload-file-badge" :severity="badgeSeverity" />
+    <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-fileupload-file" v-bind="ptm('file')">
+        <img role="presentation" class="p-fileupload-file-thumbnail" :alt="file.name" :src="file.objectURL" :width="previewWidth" v-bind="ptm('thumbnail')" />
+        <div class="p-fileupload-file-details" v-bind="ptm('details')">
+            <div class="p-fileupload-file-name" v-bind="ptm('fileName')">{{ file.name }}</div>
+            <span class="p-fileupload-file-size" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span>
+            <FileUploadBadge :value="badgeValue" class="p-fileupload-file-badge" :severity="badgeSeverity" :pt="ptm('badge')" />
         </div>
-        <div class="p-fileupload-file-actions">
-            <FileUploadButton icon="pi pi-times" @click="$emit('remove', index)" class="p-fileupload-file-remove p-button-text p-button-danger p-button-rounded"></FileUploadButton>
+        <div class="p-fileupload-file-actions" v-bind="ptm('actions')">
+            <FileUploadButton @click="$emit('remove', index)" text rounded severity="danger" class="p-fileupload-file-remove" :pt="ptm('removeButton')">
+                <template #icon="iconProps">
+                    <component v-if="templates.fileremoveicon" :is="templates.fileremoveicon" :class="iconProps.class" :file="file" :index="index" />
+                    <TimesIcon v-else :class="iconProps.class" aria-hidden="true" v-bind="ptm('removeButton')['icon']" />
+                </template>
+            </FileUploadButton>
         </div>
     </div>
 </template>
 
 <script>
 import Badge from 'primevue/badge';
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
+import TimesIcon from 'primevue/icons/times';
 
 export default {
+    extends: BaseComponent,
     emits: ['remove'],
     props: {
         files: {
@@ -34,6 +42,10 @@ export default {
         previewWidth: {
             type: Number,
             default: 50
+        },
+        templates: {
+            type: null,
+            default: null
         }
     },
     methods: {
@@ -52,7 +64,8 @@ export default {
     },
     components: {
         FileUploadButton: Button,
-        FileUploadBadge: Badge
+        FileUploadBadge: Badge,
+        TimesIcon
     }
 };
 </script>
diff --git a/components/lib/fileupload/FileUpload.d.ts b/components/lib/fileupload/FileUpload.d.ts
index 561b7efbd..9e2f94b1f 100755
--- a/components/lib/fileupload/FileUpload.d.ts
+++ b/components/lib/fileupload/FileUpload.d.ts
@@ -8,8 +8,20 @@
  *
  */
 import { VNode } from 'vue';
+import { ButtonPassThroughOptions } from '../button';
+import { MessagePassThroughOptions } from '../message';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type FileUploadPassThroughOptionType = FileUploadPassThroughAttributes | ((options: FileUploadPassThroughMethodOptions) => FileUploadPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface FileUploadPassThroughMethodOptions {
+    props: FileUploadProps;
+    state: FileUploadState;
+}
+
 /**
  * Custom select event.
  * @see {@link FileUploadEmits.select}
@@ -138,6 +150,143 @@ export interface FileUploadRemoveUploadedFile {
     files: File[];
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link FileUploadProps.pt}
+ */
+export interface FileUploadPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the buttonbar's DOM element.
+     */
+    buttonbar?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the choose button's DOM element.
+     */
+    chooseButton?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the choose icon's DOM element.
+     */
+    chooseIcon?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the choose button label's DOM element.
+     */
+    chooseButtonLabel?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the upload button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    uploadButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the cancel button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    cancelButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the progressbar's DOM element.
+     */
+    progressbar?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the messages' DOM element.
+     * @see {@link MessagePassThroughOptions}
+     */
+    message?: MessagePassThroughOptions;
+    /**
+     * Uses to pass attributes to the file's DOM element.
+     */
+    file?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail's DOM element.
+     */
+    thumbnail?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the details's DOM element.
+     */
+    details?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the fileName's DOM element.
+     */
+    fileName?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the fileSize's DOM element.
+     */
+    fileSize?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the badge's DOM element.
+     */
+    badge?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the actions's DOM element.
+     */
+    actions?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the remove button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    removeButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the empty's DOM element.
+     */
+    empty?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the basic button's DOM element.
+     */
+    basicButton?: FileUploadPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the upload icon's DOM element.
+     */
+    uploadIcon?: FileUploadPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface FileUploadPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in FileUpload component.
+ */
+export interface FileUploadState {
+    /**
+     * Current uploaded file count state as a number.
+     * @defaultValue 0
+     */
+    uploadedFileCount: number;
+    /**
+     * Current files.
+     */
+    files: any[];
+    /**
+     * Current messages.
+     */
+    messages: any[];
+    /**
+     * Current progress state as a number.
+     */
+    progress: number;
+    /**
+     * Current uploaded files.
+     */
+    uploadedFiles: any[];
+}
+
 /**
  * Defines valid properties in FileUpload component.
  */
@@ -236,17 +385,17 @@ export interface FileUploadProps {
     showCancelButton?: boolean | undefined;
     /**
      * Icon of the choose button.
-     * @defaultValue pi pi-fw pi-plus
+     * @deprecated since v3.27.0. Use 'chooseicon' slot.
      */
     chooseIcon?: string | undefined;
     /**
      * Icon of the upload button.
-     * @defaultValue pi pi-fw pi-upload
+     * @deprecated since v3.27.0. Use 'updateicon' slot.
      */
     uploadIcon?: string | undefined;
     /**
      * Icon of the cancel button.
-     * @defaultValue pi pi-fw pi-times
+     * @deprecated since v3.27.0. Use 'cancelicon' slot.
      */
     cancelIcon?: string | undefined;
     /**
@@ -257,6 +406,11 @@ export interface FileUploadProps {
      * Style class of the component.
      */
     class?: any;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {FileUploadPassThroughOptions}
+     */
+    pt?: FileUploadPassThroughOptions;
 }
 
 /**
@@ -321,6 +475,31 @@ export interface FileUploadSlots {
      * Custom content when there is no selected file.
      */
     empty(): VNode[];
+    /**
+     * Custom choose icon template.
+     */
+    chooseicon(): VNode[];
+    /**
+     * Custom upload icon template.
+     */
+    uploadicon(): VNode[];
+    /**
+     * Custom cancel icon template.
+     */
+    cancelicon(): VNode[];
+    /**
+     * Custom remove icon template for each file.
+     */
+    fileremoveicon(scope: {
+        /**
+         * File to upload.
+         */
+        file: File;
+        /**
+         * The index of file
+         */
+        index: number;
+    }): VNode[];
 }
 
 export interface FileUploadEmits {
diff --git a/components/lib/fileupload/FileUpload.vue b/components/lib/fileupload/FileUpload.vue
index 9f180880f..4a630dfb3 100755
--- a/components/lib/fileupload/FileUpload.vue
+++ b/components/lib/fileupload/FileUpload.vue
@@ -1,40 +1,63 @@
 <template>
-    <div v-if="isAdvanced" class="p-fileupload p-fileupload-advanced p-component">
-        <input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" />
-        <div class="p-fileupload-buttonbar">
+    <div v-if="isAdvanced" class="p-fileupload p-fileupload-advanced p-component" v-bind="ptm('root')">
+        <input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" v-bind="ptm('input')" />
+        <div class="p-fileupload-buttonbar" v-bind="ptm('buttonbar')">
             <slot name="header" :files="files" :uploadedFiles="uploadedFiles" :chooseCallback="choose" :uploadCallback="upload" :clearCallback="clear">
-                <span v-ripple :class="advancedChooseButtonClass" :style="style" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0">
-                    <span :class="advancedChooseIconClass"></span>
-                    <span class="p-button-label">{{ chooseButtonLabel }}</span>
+                <span v-ripple :class="advancedChooseButtonClass" :style="style" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0" v-bind="ptm('chooseButton')">
+                    <slot name="chooseicon">
+                        <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="['p-button-icon p-button-icon-left', chooseIcon]" aria-hidden="true" v-bind="ptm('chooseIcon')" />
+                    </slot>
+                    <span class="p-button-label" v-bind="ptm('chooseButtonLabel')">{{ chooseButtonLabel }}</span>
                 </span>
-                <FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" :icon="uploadIcon" @click="upload" :disabled="uploadDisabled" />
-                <FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" :icon="cancelIcon" @click="clear" :disabled="cancelDisabled" />
+                <FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :pt="ptm('uploadButton')">
+                    <template #icon="iconProps">
+                        <slot name="uploadicon">
+                            <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('uploadButton')['icon']" />
+                        </slot>
+                    </template>
+                </FileUploadButton>
+                <FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :pt="ptm('cancelButton')">
+                    <template #icon="iconProps">
+                        <slot name="cancelicon">
+                            <component :is="cancelIcon ? 'span' : 'TimesIcon'" :class="[iconProps.class, cancelIcon]" aria-hidden="true" v-bind="ptm('cancelButton')['icon']" />
+                        </slot>
+                    </template>
+                </FileUploadButton>
             </slot>
         </div>
-        <div ref="content" class="p-fileupload-content" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
+        <div ref="content" class="p-fileupload-content" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop" v-bind="ptm('content')">
             <slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages">
-                <FileUploadProgressBar v-if="hasFiles" :value="progress" :showValue="false" />
-                <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose">{{ msg }}</FileUploadMessage>
-                <FileContent v-if="hasFiles" :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" />
-                <FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" />
+                <FileUploadProgressBar v-if="hasFiles" :value="progress" :showValue="false" :pt="ptm('progressbar')" />
+                <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :pt="ptm('message')">{{ msg }}</FileUploadMessage>
+                <FileContent v-if="hasFiles" :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :pt="pt" />
+                <FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" :pt="pt" />
             </slot>
-            <div v-if="$slots.empty && !hasFiles && !hasUploadedFiles" class="p-fileupload-empty">
+            <div v-if="$slots.empty && !hasFiles && !hasUploadedFiles" class="p-fileupload-empty" v-bind="ptm('empty')">
                 <slot name="empty"></slot>
             </div>
         </div>
     </div>
-    <div v-else-if="isBasic" class="p-fileupload p-fileupload-basic p-component">
-        <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose">{{ msg }}</FileUploadMessage>
-        <span v-ripple :class="basicChooseButtonClass" :style="style" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0">
-            <span :class="basicChooseButtonIconClass"></span>
-            <span class="p-button-label">{{ basicChooseButtonLabel }}</span>
-            <input v-if="!hasFiles" ref="fileInput" type="file" :accept="accept" :disabled="disabled" :multiple="multiple" @change="onFileSelect" @focus="onFocus" @blur="onBlur" />
+    <div v-else-if="isBasic" class="p-fileupload p-fileupload-basic p-component" v-bind="ptm('root')">
+        <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :pt="ptm('messages')">{{ msg }}</FileUploadMessage>
+        <span v-ripple :class="basicChooseButtonClass" :style="style" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0" v-bind="ptm('basicButton')">
+            <slot v-if="!hasFiles || auto" name="uploadicon">
+                <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="['p-button-icon p-button-icon-left', uploadIcon]" aria-hidden="true" v-bind="ptm('uploadIcon')" />
+            </slot>
+            <slot v-else name="chooseicon">
+                <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="['p-button-icon p-button-icon-left', chooseIcon]" aria-hidden="true" v-bind="ptm('chooseIcon')" />
+            </slot>
+            <span class="p-button-label" v-bind="ptm('label')">{{ basicChooseButtonLabel }}</span>
+            <input v-if="!hasFiles" ref="fileInput" type="file" :accept="accept" :disabled="disabled" :multiple="multiple" @change="onFileSelect" @focus="onFocus" @blur="onBlur" v-bind="ptm('input')" />
         </span>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
+import PlusIcon from 'primevue/icons/plus';
+import TimesIcon from 'primevue/icons/times';
+import UploadIcon from 'primevue/icons/upload';
 import Message from 'primevue/message';
 import ProgressBar from 'primevue/progressbar';
 import Ripple from 'primevue/ripple';
@@ -43,6 +66,7 @@ import FileContent from './FileContent.vue';
 
 export default {
     name: 'FileUpload',
+    extends: BaseComponent,
     emits: ['select', 'uploader', 'before-upload', 'progress', 'upload', 'error', 'before-send', 'clear', 'remove', 'remove-uploaded-file'],
     props: {
         name: {
@@ -127,15 +151,15 @@ export default {
         },
         chooseIcon: {
             type: String,
-            default: 'pi pi-plus'
+            default: undefined
         },
         uploadIcon: {
             type: String,
-            default: 'pi pi-upload'
+            default: undefined
         },
         cancelIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         style: null,
         class: null
@@ -450,12 +474,6 @@ export default {
                 }
             ];
         },
-        advancedChooseIconClass() {
-            return ['p-button-icon p-button-icon-left pi-fw', this.chooseIcon];
-        },
-        basicChooseButtonIconClass() {
-            return ['p-button-icon p-button-icon-left', !this.hasFiles || this.auto ? this.uploadIcon : this.chooseIcon];
-        },
         basicChooseButtonLabel() {
             return this.auto ? this.chooseButtonLabel : this.hasFiles ? this.files.map((f) => f.name).join(', ') : this.chooseButtonLabel;
         },
@@ -494,7 +512,10 @@ export default {
         FileUploadButton: Button,
         FileUploadProgressBar: ProgressBar,
         FileUploadMessage: Message,
-        FileContent
+        FileContent,
+        PlusIcon,
+        UploadIcon,
+        TimesIcon
     },
     directives: {
         ripple: Ripple
diff --git a/components/lib/galleria/Galleria.d.ts b/components/lib/galleria/Galleria.d.ts
index 37797415f..163e1b797 100755
--- a/components/lib/galleria/Galleria.d.ts
+++ b/components/lib/galleria/Galleria.d.ts
@@ -9,6 +9,15 @@
  */
 import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+export declare type GalleriaPassThroughOptionType = GalleriaPassThroughAttributes | ((options: GalleriaPassThroughMethodOptions) => GalleriaPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface GalleriaPassThroughMethodOptions {
+    props: GalleriaProps;
+    state: GalleriaState;
+}
 
 export interface GalleriaResponsiveOptions {
     /**
@@ -21,6 +30,188 @@ export interface GalleriaResponsiveOptions {
     numVisible: number;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link GalleriaProps.pt}
+ */
+export interface GalleriaPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item wrapper's DOM element.
+     */
+    itemWrapper?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item container's DOM element.
+     */
+    itemContainer?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous item button's DOM element.
+     */
+    previousItemButton?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous item icon's DOM element.
+     */
+    previousItemIcon?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next item button's DOM element.
+     */
+    nextItemButton?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next item icon's DOM element.
+     */
+    nextItemIcon?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the caption's DOM element.
+     */
+    caption?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the indicators's DOM element.
+     */
+    indicators?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the indicator's DOM element.
+     */
+    indicator?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail wrapper's DOM element.
+     */
+    thumbnailWrapper?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail container's DOM element.
+     */
+    thumbnailContainer?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous thumbnail button's DOM element.
+     */
+    previousThumbnailButton?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous thumbnail icon's DOM element.
+     */
+    previousThumbnailIcon?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail items container's DOM element.
+     */
+    thumbnailItemsContainer?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail items' DOM element.
+     */
+    thumbnailItems?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail item's DOM element.
+     */
+    thumbnailItem?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thumbnail item content's DOM element.
+     */
+    thumbnailItemContent?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next thumbnail button's DOM element.
+     */
+    nextThumbnailButton?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next thumbnail icon's DOM element.
+     */
+    nextThumbnailIcon?: GalleriaPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: GalleriaPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface GalleriaPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Galleria component.
+ */
+export interface GalleriaState {
+    /**
+     * Current container visible state as a boolean.
+     * @defaultValue false
+     */
+    containerVisible: boolean;
+    /**
+     * Style id of the component.
+     */
+    id: string;
+    /**
+     * Index of the first item as a number.
+     * @defaultValue 0
+     */
+    activeIndex: number;
+    /**
+     * Number of items per page as a number.
+     * @defaultValue 3
+     */
+    numVisible: number;
+    /**
+     * Current slide active state as a boolean.
+     * @defaultValue false
+     */
+    slideShowActive: boolean;
+    /**
+     * Number of items per page as a number.
+     * @defaultValue 3
+     */
+    d_numVisible: number;
+    /**
+     * Old number of items per page as a number.
+     * @defaultValue 3
+     */
+    d_oldNumVisible: number;
+    /**
+     * Current active item index as a number.
+     * @defaultValue 0
+     */
+    d_activeIndex: number;
+    /**
+     * The previous active item index as a number.
+     * @defaultValue 0
+     */
+    d_oldActiveItemIndex: number;
+    /**
+     * Index of the first item.
+     * @defaultValue 0
+     */
+    page: number;
+    /**
+     * Total shifted items' count as a number.
+     * @defaultValue 0
+     */
+    totalShiftedItems: number;
+}
+
 /**
  * Defines valid properties in Galleria component.
  */
@@ -152,6 +343,11 @@ export interface GalleriaProps {
      * Uses to pass all properties of the HTMLButtonElement to the next navigation button.
      */
     nextButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {GalleriaPassThroughOptions}
+     */
+    pt?: GalleriaPassThroughOptions;
 }
 /**
  * Defines valid slots in Galleria slots.
@@ -212,7 +408,7 @@ export interface GalleriaSlots {
     /**
      * Custom navigator previous item icon template.
      */
-    previtemicon(): VNode[];
+    previousitemicon(): VNode[];
     /**
      * Custom navigator next item icon template.
      */
@@ -220,7 +416,7 @@ export interface GalleriaSlots {
     /**
      * Custom thumbnail previous icon template.
      */
-    prevthumbnailicon(): VNode[];
+    previousthumbnailicon(): VNode[];
     /**
      * Custom thumbnail next item template.
      */
diff --git a/components/lib/galleria/Galleria.vue b/components/lib/galleria/Galleria.vue
index c4fcf35de..766fbbfee 100755
--- a/components/lib/galleria/Galleria.vue
+++ b/components/lib/galleria/Galleria.vue
@@ -1,15 +1,16 @@
 <template>
     <Portal v-if="fullScreen">
-        <div v-if="containerVisible" :ref="maskRef" :class="maskContentClass" :role="fullScreen ? 'dialog' : 'region'" :aria-modal="fullScreen ? 'true' : undefined">
+        <div v-if="containerVisible" :ref="maskRef" :class="maskContentClass" :role="fullScreen ? 'dialog' : 'region'" :aria-modal="fullScreen ? 'true' : undefined" v-bind="ptm('mask')">
             <transition name="p-galleria" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" appear>
-                <GalleriaContent v-if="visible" :ref="containerRef" v-focustrap @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" v-bind="$props" />
+                <GalleriaContent v-if="visible" :ref="containerRef" v-focustrap @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" v-bind="$props" />
             </transition>
         </div>
     </Portal>
-    <GalleriaContent v-else :templates="$slots" @activeitem-change="onActiveItemChange" v-bind="$props" />
+    <GalleriaContent v-else :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" v-bind="$props" />
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
@@ -17,6 +18,7 @@ import GalleriaContent from './GalleriaContent.vue';
 
 export default {
     name: 'Galleria',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['update:activeIndex', 'update:visible'],
     props: {
diff --git a/components/lib/galleria/GalleriaContent.vue b/components/lib/galleria/GalleriaContent.vue
index 83bee1e08..250a20f33 100755
--- a/components/lib/galleria/GalleriaContent.vue
+++ b/components/lib/galleria/GalleriaContent.vue
@@ -1,12 +1,12 @@
 <template>
-    <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="galleriaClass" :style="$attrs.containerStyle" v-bind="$attrs.containerProps">
-        <button v-if="$attrs.fullScreen" v-ripple autofocus type="button" class="p-galleria-close p-link" :aria-label="closeAriaLabel" @click="$emit('mask-hide')">
-            <component :is="$attrs.templates['closeicon'] || 'TimesIcon'" class="p-galleria-close-icon" />
+    <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="galleriaClass" :style="$attrs.containerStyle" v-bind="{ ...$attrs.containerProps, ...ptm('root') }">
+        <button v-if="$attrs.fullScreen" v-ripple autofocus type="button" class="p-galleria-close p-link" :aria-label="closeAriaLabel" @click="$emit('mask-hide')" v-bind="ptm('closeButton')">
+            <component :is="$attrs.templates['closeicon'] || 'TimesIcon'" class="p-galleria-close-icon" v-bind="ptm('closeIcon')" />
         </button>
-        <div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header">
+        <div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header" v-bind="ptm('header')">
             <component :is="$attrs.templates['header']" />
         </div>
-        <div class="p-galleria-content" :aria-live="$attrs.autoPlay ? 'polite' : 'off'">
+        <div class="p-galleria-content" :aria-live="$attrs.autoPlay ? 'polite' : 'off'" v-bind="ptm('content')">
             <GalleriaItem
                 :id="id"
                 v-model:activeIndex="activeIndex"
@@ -20,6 +20,7 @@
                 :autoPlay="$attrs.autoPlay"
                 @start-slideshow="startSlideShow"
                 @stop-slideshow="stopSlideShow"
+                :pt="pt"
             />
 
             <GalleriaThumbnails
@@ -38,16 +39,18 @@
                 :prevButtonProps="$attrs.prevButtonProps"
                 :nextButtonProps="$attrs.nextButtonProps"
                 @stop-slideshow="stopSlideShow"
+                :pt="pt"
             />
         </div>
-        <div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer">
+        <div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer" v-bind="ptm('footer')">
             <component :is="$attrs.templates['footer']" />
         </div>
     </div>
 </template>
 
 <script>
-import TimesIcon from 'primevue/icon/times';
+import BaseComponent from 'primevue/basecomponent';
+import TimesIcon from 'primevue/icons/times';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId } from 'primevue/utils';
 import GalleriaItem from './GalleriaItem.vue';
@@ -55,6 +58,7 @@ import GalleriaThumbnails from './GalleriaThumbnails.vue';
 
 export default {
     name: 'GalleriaContent',
+    extends: BaseComponent,
     inheritAttrs: false,
     interval: null,
     emits: ['activeitem-change', 'mask-hide'],
diff --git a/components/lib/galleria/GalleriaItem.vue b/components/lib/galleria/GalleriaItem.vue
index 8f8f9cff9..3f608fd6f 100755
--- a/components/lib/galleria/GalleriaItem.vue
+++ b/components/lib/galleria/GalleriaItem.vue
@@ -1,20 +1,20 @@
 <template>
-    <div class="p-galleria-item-wrapper">
-        <div class="p-galleria-item-container">
-            <button v-if="showItemNavigators" v-ripple type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
-                <component :is="templates.itemprevicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" />
+    <div class="p-galleria-item-wrapper" v-bind="ptm('itemWrapper')">
+        <div class="p-galleria-item-container" v-bind="ptm('itemContainer')">
+            <button v-if="showItemNavigators" v-ripple type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('previousItemButton')">
+                <component :is="templates.previousitemicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" v-bind="ptm('previousItemIcon')" />
             </button>
-            <div :id="id + '_item_' + activeIndex" class="p-galleria-item" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel">
+            <div :id="id + '_item_' + activeIndex" class="p-galleria-item" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel" v-bind="ptm('item')">
                 <component v-if="templates.item" :is="templates.item" :item="activeItem" />
             </div>
-            <button v-if="showItemNavigators" v-ripple type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
-                <component :is="templates.itemnexticon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" />
+            <button v-if="showItemNavigators" v-ripple type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-bind="ptm('nextItemButton')">
+                <component :is="templates.nextitemicon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" v-bind="ptm('nextItemIcon')" />
             </button>
-            <div v-if="templates['caption']" class="p-galleria-caption">
+            <div v-if="templates['caption']" class="p-galleria-caption" v-bind="ptm('caption')">
                 <component v-if="templates.caption" :is="templates.caption" :item="activeItem" />
             </div>
         </div>
-        <ul v-if="showIndicators" class="p-galleria-indicators p-reset">
+        <ul v-if="showIndicators" class="p-galleria-indicators p-reset" v-bind="ptm('indicators')">
             <li
                 v-for="(item, index) of value"
                 :key="`p-galleria-indicator-${index}`"
@@ -26,6 +26,7 @@
                 @click="onIndicatorClick(index)"
                 @mouseenter="onIndicatorMouseEnter(index)"
                 @keydown="onIndicatorKeyDown($event, index)"
+                v-bind="ptm('indicator')"
             >
                 <button v-if="!templates['indicator']" type="button" tabindex="-1" class="p-link"></button>
                 <component v-if="templates.indicator" :is="templates.indicator" :index="index" />
@@ -35,12 +36,14 @@
 </template>
 
 <script>
-import ChevronLeftIcon from 'primevue/icon/chevronleft';
-import ChevronRightIcon from 'primevue/icon/chevronright';
+import BaseComponent from 'primevue/basecomponent';
+import ChevronLeftIcon from 'primevue/icons/chevronleft';
+import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'GalleriaItem',
+    extends: BaseComponent,
     emits: ['start-slideshow', 'stop-slideshow', 'update:activeIndex'],
     props: {
         circular: {
diff --git a/components/lib/galleria/GalleriaThumbnails.vue b/components/lib/galleria/GalleriaThumbnails.vue
index 41e4d7ed7..101eb3d06 100755
--- a/components/lib/galleria/GalleriaThumbnails.vue
+++ b/components/lib/galleria/GalleriaThumbnails.vue
@@ -1,11 +1,29 @@
 <template>
-    <div class="p-galleria-thumbnail-wrapper">
-        <div class="p-galleria-thumbnail-container">
-            <button v-if="showThumbnailNavigators" v-ripple :class="navBackwardClass" :disabled="isNavBackwardDisabled()" type="button" :aria-label="ariaPrevButtonLabel" @click="navBackward($event)" v-bind="prevButtonProps">
-                <component :is="templates.prevthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" class="p-galleria-thumbnail-prev-icon" />
+    <div class="p-galleria-thumbnail-wrapper" v-bind="ptm('thumbnailWrapper')">
+        <div class="p-galleria-thumbnail-container" v-bind="ptm('thumbnailContainer')">
+            <button
+                v-if="showThumbnailNavigators"
+                v-ripple
+                :class="navBackwardClass"
+                :disabled="isNavBackwardDisabled()"
+                type="button"
+                :aria-label="ariaPrevButtonLabel"
+                @click="navBackward($event)"
+                v-bind="{ ...prevButtonProps, ...ptm('previousThumbnailButton') }"
+            >
+                <component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" class="p-galleria-thumbnail-prev-icon" v-bind="ptm('previousThumbnailIcon')" />
             </button>
-            <div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }">
-                <div ref="itemsContainer" class="p-galleria-thumbnail-items" role="tablist" @transitionend="onTransitionEnd" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
+            <div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }" v-bind="ptm('thumbnailItemsContainer')">
+                <div
+                    ref="itemsContainer"
+                    class="p-galleria-thumbnail-items"
+                    role="tablist"
+                    @transitionend="onTransitionEnd"
+                    @touchstart="onTouchStart($event)"
+                    @touchmove="onTouchMove($event)"
+                    @touchend="onTouchEnd($event)"
+                    v-bind="ptm('thumbnailItems')"
+                >
                     <div
                         v-for="(item, index) of value"
                         :key="`p-galleria-thumbnail-item-${index}`"
@@ -22,30 +40,49 @@
                         :aria-selected="activeIndex === index"
                         :aria-controls="containerId + '_item_' + index"
                         @keydown="onThumbnailKeydown($event, index)"
+                        v-bind="ptm('thumbnailItem')"
                     >
-                        <div class="p-galleria-thumbnail-item-content" :tabindex="activeIndex === index ? '0' : '-1'" :aria-label="ariaPageLabel(index + 1)" :aria-current="activeIndex === index ? 'page' : undefined" @click="onItemClick(index)">
+                        <div
+                            class="p-galleria-thumbnail-item-content"
+                            :tabindex="activeIndex === index ? '0' : '-1'"
+                            :aria-label="ariaPageLabel(index + 1)"
+                            :aria-current="activeIndex === index ? 'page' : undefined"
+                            @click="onItemClick(index)"
+                            v-bind="ptm('thumbnailItemContent')"
+                        >
                             <component v-if="templates.thumbnail" :is="templates.thumbnail" :item="item" />
                         </div>
                     </div>
                 </div>
             </div>
-            <button v-if="showThumbnailNavigators" v-ripple :class="navForwardClass" :disabled="isNavForwardDisabled()" type="button" :aria-label="ariaNextButtonLabel" @click="navForward($event)" v-bind="nextButtonProps">
-                <component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-galleria-thumbnail-prev-icon" />
+            <button
+                v-if="showThumbnailNavigators"
+                v-ripple
+                :class="navForwardClass"
+                :disabled="isNavForwardDisabled()"
+                type="button"
+                :aria-label="ariaNextButtonLabel"
+                @click="navForward($event)"
+                v-bind="{ ...nextButtonProps, ...ptm('nextThumbnailButton') }"
+            >
+                <component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-galleria-thumbnail-next-icon" v-bind="ptm('nextThumbnailIcon')" />
             </button>
         </div>
     </div>
 </template>
 
 <script>
-import ChevronDownIcon from 'primevue/icon/chevrondown';
-import ChevronLeftIcon from 'primevue/icon/chevronleft';
-import ChevronRightIcon from 'primevue/icon/chevronright';
-import ChevronUpIcon from 'primevue/icon/chevronup';
+import BaseComponent from 'primevue/basecomponent';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronLeftIcon from 'primevue/icons/chevronleft';
+import ChevronRightIcon from 'primevue/icons/chevronright';
+import ChevronUpIcon from 'primevue/icons/chevronup';
 import Ripple from 'primevue/ripple';
 import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'GalleriaThumbnails',
+    extends: BaseComponent,
     emits: ['stop-slideshow', 'update:activeIndex'],
     props: {
         containerId: {
diff --git a/components/lib/icon/angledown/index.vue b/components/lib/icon/angledown/index.vue
deleted file mode 100644
index 8481df488..000000000
--- a/components/lib/icon/angledown/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
-        <path
-            d="M7 9.95946C6.88043 9.96002 6.76196 9.9367 6.65152 9.89086C6.54109 9.84502 6.44093 9.77758 6.35691 9.69251L2.14645 5.44565C2.03556 5.27462 1.9853 5.07131 2.00373 4.8683C2.02216 4.6653 2.10821 4.47436 2.24808 4.32609C2.38796 4.17782 2.57357 4.0808 2.77516 4.05059C2.97674 4.02037 3.18264 4.05872 3.35984 4.15946L7 7.79963L10.6402 4.15946C10.8174 4.05872 11.0233 4.02037 11.2248 4.05059C11.4264 4.0808 11.612 4.17782 11.7519 4.32609C11.8918 4.47436 11.9778 4.6653 11.9963 4.8683C12.0147 5.07131 11.9644 5.27462 11.8535 5.44565L7.60669 9.69251C7.44591 9.85561 7.22888 9.9511 7 9.95946Z"
-            fill="currentColor"
-        />
-    </svg>
-</template>
-<script>
-import BaseIcon from 'primevue/baseicon';
-
-export default {
-    name: 'AngleDownIcon',
-    extends: BaseIcon
-};
-</script>
diff --git a/components/lib/icon/angledoubledown/index.d.ts b/components/lib/icons/angledoubledown/index.d.ts
similarity index 100%
rename from components/lib/icon/angledoubledown/index.d.ts
rename to components/lib/icons/angledoubledown/index.d.ts
diff --git a/components/lib/icon/angledoubledown/index.vue b/components/lib/icons/angledoubledown/index.vue
similarity index 100%
rename from components/lib/icon/angledoubledown/index.vue
rename to components/lib/icons/angledoubledown/index.vue
diff --git a/components/lib/icon/angledoubledown/package.json b/components/lib/icons/angledoubledown/package.json
similarity index 100%
rename from components/lib/icon/angledoubledown/package.json
rename to components/lib/icons/angledoubledown/package.json
diff --git a/components/lib/icon/angledoubleleft/index.d.ts b/components/lib/icons/angledoubleleft/index.d.ts
similarity index 88%
rename from components/lib/icon/angledoubleleft/index.d.ts
rename to components/lib/icons/angledoubleleft/index.d.ts
index fa7ada598..b81bd406a 100644
--- a/components/lib/icon/angledoubleleft/index.d.ts
+++ b/components/lib/icons/angledoubleleft/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class AngleDoubleLeftIcon extends Icon {}
 
diff --git a/components/lib/icon/angledoubleleft/index.vue b/components/lib/icons/angledoubleleft/index.vue
similarity index 100%
rename from components/lib/icon/angledoubleleft/index.vue
rename to components/lib/icons/angledoubleleft/index.vue
diff --git a/components/lib/icon/angledoubleleft/package.json b/components/lib/icons/angledoubleleft/package.json
similarity index 100%
rename from components/lib/icon/angledoubleleft/package.json
rename to components/lib/icons/angledoubleleft/package.json
diff --git a/components/lib/icon/angledoubleright/index.d.ts b/components/lib/icons/angledoubleright/index.d.ts
similarity index 88%
rename from components/lib/icon/angledoubleright/index.d.ts
rename to components/lib/icons/angledoubleright/index.d.ts
index 21f84bb4d..20a97ac20 100644
--- a/components/lib/icon/angledoubleright/index.d.ts
+++ b/components/lib/icons/angledoubleright/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class AngleDoubleRightIcon extends Icon {}
 
diff --git a/components/lib/icon/angledoubleright/index.vue b/components/lib/icons/angledoubleright/index.vue
similarity index 100%
rename from components/lib/icon/angledoubleright/index.vue
rename to components/lib/icons/angledoubleright/index.vue
diff --git a/components/lib/icon/angledoubleright/package.json b/components/lib/icons/angledoubleright/package.json
similarity index 100%
rename from components/lib/icon/angledoubleright/package.json
rename to components/lib/icons/angledoubleright/package.json
diff --git a/components/lib/icon/angledoubleup/index.d.ts b/components/lib/icons/angledoubleup/index.d.ts
similarity index 87%
rename from components/lib/icon/angledoubleup/index.d.ts
rename to components/lib/icons/angledoubleup/index.d.ts
index 04b5ea03d..642614d5f 100644
--- a/components/lib/icon/angledoubleup/index.d.ts
+++ b/components/lib/icons/angledoubleup/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class AngleDoubleUpIcon extends Icon {}
 
diff --git a/components/lib/icon/angledoubleup/index.vue b/components/lib/icons/angledoubleup/index.vue
similarity index 100%
rename from components/lib/icon/angledoubleup/index.vue
rename to components/lib/icons/angledoubleup/index.vue
diff --git a/components/lib/icon/angledoubleup/package.json b/components/lib/icons/angledoubleup/package.json
similarity index 100%
rename from components/lib/icon/angledoubleup/package.json
rename to components/lib/icons/angledoubleup/package.json
diff --git a/components/lib/icon/angledown/index.d.ts b/components/lib/icons/angledown/index.d.ts
similarity index 87%
rename from components/lib/icon/angledown/index.d.ts
rename to components/lib/icons/angledown/index.d.ts
index 6c20d7300..079531d54 100644
--- a/components/lib/icon/angledown/index.d.ts
+++ b/components/lib/icons/angledown/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class AngleDownIcon extends Icon {}
 
diff --git a/components/lib/icons/angledown/index.vue b/components/lib/icons/angledown/index.vue
new file mode 100644
index 000000000..e5848a8ad
--- /dev/null
+++ b/components/lib/icons/angledown/index.vue
@@ -0,0 +1,16 @@
+<template>
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
+        <path
+            d="M3.58659 4.5007C3.68513 4.50023 3.78277 4.51945 3.87379 4.55723C3.9648 4.59501 4.04735 4.65058 4.11659 4.7207L7.11659 7.7207L10.1166 4.7207C10.2619 4.65055 10.4259 4.62911 10.5843 4.65956C10.7427 4.69002 10.8871 4.77074 10.996 4.88976C11.1049 5.00877 11.1726 5.15973 11.1889 5.32022C11.2052 5.48072 11.1693 5.6422 11.0866 5.7807L7.58659 9.2807C7.44597 9.42115 7.25534 9.50004 7.05659 9.50004C6.85784 9.50004 6.66722 9.42115 6.52659 9.2807L3.02659 5.7807C2.88614 5.64007 2.80725 5.44945 2.80725 5.2507C2.80725 5.05195 2.88614 4.86132 3.02659 4.7207C3.09932 4.64685 3.18675 4.58911 3.28322 4.55121C3.37969 4.51331 3.48305 4.4961 3.58659 4.5007Z"
+            fill="currentColor"
+        />
+    </svg>
+</template>
+<script>
+import BaseIcon from 'primevue/baseicon';
+
+export default {
+    name: 'AngleDownIcon',
+    extends: BaseIcon
+};
+</script>
diff --git a/components/lib/icon/angledown/package.json b/components/lib/icons/angledown/package.json
similarity index 100%
rename from components/lib/icon/angledown/package.json
rename to components/lib/icons/angledown/package.json
diff --git a/components/lib/icon/angleleft/index.d.ts b/components/lib/icons/angleleft/index.d.ts
similarity index 87%
rename from components/lib/icon/angleleft/index.d.ts
rename to components/lib/icons/angleleft/index.d.ts
index 412e1beab..6ddb1164d 100644
--- a/components/lib/icon/angleleft/index.d.ts
+++ b/components/lib/icons/angleleft/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class AngleLeftIcon extends Icon {}
 
diff --git a/components/lib/icon/angleleft/index.vue b/components/lib/icons/angleleft/index.vue
similarity index 100%
rename from components/lib/icon/angleleft/index.vue
rename to components/lib/icons/angleleft/index.vue
diff --git a/components/lib/icon/angleleft/package.json b/components/lib/icons/angleleft/package.json
similarity index 100%
rename from components/lib/icon/angleleft/package.json
rename to components/lib/icons/angleleft/package.json
diff --git a/components/lib/icon/angleright/index.d.ts b/components/lib/icons/angleright/index.d.ts
similarity index 87%
rename from components/lib/icon/angleright/index.d.ts
rename to components/lib/icons/angleright/index.d.ts
index a69e3196d..78aafbaa0 100644
--- a/components/lib/icon/angleright/index.d.ts
+++ b/components/lib/icons/angleright/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class AngleRightIcon extends Icon {}
 
diff --git a/components/lib/icon/angleright/index.vue b/components/lib/icons/angleright/index.vue
similarity index 100%
rename from components/lib/icon/angleright/index.vue
rename to components/lib/icons/angleright/index.vue
diff --git a/components/lib/icon/angleright/package.json b/components/lib/icons/angleright/package.json
similarity index 100%
rename from components/lib/icon/angleright/package.json
rename to components/lib/icons/angleright/package.json
diff --git a/components/lib/icon/angleup/index.d.ts b/components/lib/icons/angleup/index.d.ts
similarity index 86%
rename from components/lib/icon/angleup/index.d.ts
rename to components/lib/icons/angleup/index.d.ts
index a9f2a7875..3e04985c5 100644
--- a/components/lib/icon/angleup/index.d.ts
+++ b/components/lib/icons/angleup/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class AngleUpIcon extends Icon {}
 
diff --git a/components/lib/icon/angleup/index.vue b/components/lib/icons/angleup/index.vue
similarity index 100%
rename from components/lib/icon/angleup/index.vue
rename to components/lib/icons/angleup/index.vue
diff --git a/components/lib/icon/angleup/package.json b/components/lib/icons/angleup/package.json
similarity index 100%
rename from components/lib/icon/angleup/package.json
rename to components/lib/icons/angleup/package.json
diff --git a/components/lib/icon/arrowdown/index.d.ts b/components/lib/icons/arrowdown/index.d.ts
similarity index 87%
rename from components/lib/icon/arrowdown/index.d.ts
rename to components/lib/icons/arrowdown/index.d.ts
index 11ee3c17a..3770b6f5e 100644
--- a/components/lib/icon/arrowdown/index.d.ts
+++ b/components/lib/icons/arrowdown/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class ArrowDownIcon extends Icon {}
 
diff --git a/components/lib/icon/arrowdown/index.vue b/components/lib/icons/arrowdown/index.vue
similarity index 100%
rename from components/lib/icon/arrowdown/index.vue
rename to components/lib/icons/arrowdown/index.vue
diff --git a/components/lib/icon/arrowdown/package.json b/components/lib/icons/arrowdown/package.json
similarity index 100%
rename from components/lib/icon/arrowdown/package.json
rename to components/lib/icons/arrowdown/package.json
diff --git a/components/lib/icon/arrowup/index.d.ts b/components/lib/icons/arrowup/index.d.ts
similarity index 86%
rename from components/lib/icon/arrowup/index.d.ts
rename to components/lib/icons/arrowup/index.d.ts
index 75ec5c4e5..c68801d43 100644
--- a/components/lib/icon/arrowup/index.d.ts
+++ b/components/lib/icons/arrowup/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class ArrowUpIcon extends Icon {}
 
diff --git a/components/lib/icon/arrowup/index.vue b/components/lib/icons/arrowup/index.vue
similarity index 100%
rename from components/lib/icon/arrowup/index.vue
rename to components/lib/icons/arrowup/index.vue
diff --git a/components/lib/icon/arrowup/package.json b/components/lib/icons/arrowup/package.json
similarity index 100%
rename from components/lib/icon/arrowup/package.json
rename to components/lib/icons/arrowup/package.json
diff --git a/components/lib/icon/ban/index.d.ts b/components/lib/icons/ban/index.d.ts
similarity index 86%
rename from components/lib/icon/ban/index.d.ts
rename to components/lib/icons/ban/index.d.ts
index b145fbeba..cb0da1937 100644
--- a/components/lib/icon/ban/index.d.ts
+++ b/components/lib/icons/ban/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class BanIcon extends Icon {}
 
diff --git a/components/lib/icon/ban/index.vue b/components/lib/icons/ban/index.vue
similarity index 100%
rename from components/lib/icon/ban/index.vue
rename to components/lib/icons/ban/index.vue
diff --git a/components/lib/icon/ban/package.json b/components/lib/icons/ban/package.json
similarity index 100%
rename from components/lib/icon/ban/package.json
rename to components/lib/icons/ban/package.json
diff --git a/components/lib/icon/bars/index.d.ts b/components/lib/icons/bars/index.d.ts
similarity index 86%
rename from components/lib/icon/bars/index.d.ts
rename to components/lib/icons/bars/index.d.ts
index 3ed26b10d..dcbb5f9e7 100644
--- a/components/lib/icon/bars/index.d.ts
+++ b/components/lib/icons/bars/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class BarsIcon extends Icon {}
 
diff --git a/components/lib/icon/bars/index.vue b/components/lib/icons/bars/index.vue
similarity index 100%
rename from components/lib/icon/bars/index.vue
rename to components/lib/icons/bars/index.vue
diff --git a/components/lib/icon/bars/package.json b/components/lib/icons/bars/package.json
similarity index 100%
rename from components/lib/icon/bars/package.json
rename to components/lib/icons/bars/package.json
diff --git a/components/lib/icon/calendar/index.d.ts b/components/lib/icons/calendar/index.d.ts
similarity index 86%
rename from components/lib/icon/calendar/index.d.ts
rename to components/lib/icons/calendar/index.d.ts
index d8c13db8b..f58f9aabd 100644
--- a/components/lib/icon/calendar/index.d.ts
+++ b/components/lib/icons/calendar/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class CalendarIcon extends Icon {}
 
diff --git a/components/lib/icon/calendar/index.vue b/components/lib/icons/calendar/index.vue
similarity index 100%
rename from components/lib/icon/calendar/index.vue
rename to components/lib/icons/calendar/index.vue
diff --git a/components/lib/icon/calendar/package.json b/components/lib/icons/calendar/package.json
similarity index 100%
rename from components/lib/icon/calendar/package.json
rename to components/lib/icons/calendar/package.json
diff --git a/components/lib/icon/check/index.d.ts b/components/lib/icons/check/index.d.ts
similarity index 86%
rename from components/lib/icon/check/index.d.ts
rename to components/lib/icons/check/index.d.ts
index 87d690d22..1aa5ef9c6 100644
--- a/components/lib/icon/check/index.d.ts
+++ b/components/lib/icons/check/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class CheckIcon extends Icon {}
 
diff --git a/components/lib/icon/check/index.vue b/components/lib/icons/check/index.vue
similarity index 100%
rename from components/lib/icon/check/index.vue
rename to components/lib/icons/check/index.vue
diff --git a/components/lib/icon/check/package.json b/components/lib/icons/check/package.json
similarity index 100%
rename from components/lib/icon/check/package.json
rename to components/lib/icons/check/package.json
diff --git a/components/lib/icon/chevrondown/index.d.ts b/components/lib/icons/chevrondown/index.d.ts
similarity index 87%
rename from components/lib/icon/chevrondown/index.d.ts
rename to components/lib/icons/chevrondown/index.d.ts
index 5c4d5626f..4b3abd83b 100644
--- a/components/lib/icon/chevrondown/index.d.ts
+++ b/components/lib/icons/chevrondown/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class ChevronDownIcon extends Icon {}
 
diff --git a/components/lib/icon/chevrondown/index.vue b/components/lib/icons/chevrondown/index.vue
similarity index 100%
rename from components/lib/icon/chevrondown/index.vue
rename to components/lib/icons/chevrondown/index.vue
diff --git a/components/lib/icon/chevrondown/package.json b/components/lib/icons/chevrondown/package.json
similarity index 100%
rename from components/lib/icon/chevrondown/package.json
rename to components/lib/icons/chevrondown/package.json
diff --git a/components/lib/icon/chevronleft/index.d.ts b/components/lib/icons/chevronleft/index.d.ts
similarity index 87%
rename from components/lib/icon/chevronleft/index.d.ts
rename to components/lib/icons/chevronleft/index.d.ts
index dfc4e66f9..d53b77e74 100644
--- a/components/lib/icon/chevronleft/index.d.ts
+++ b/components/lib/icons/chevronleft/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class ChevronLeftIcon extends Icon {}
 
diff --git a/components/lib/icon/chevronleft/index.vue b/components/lib/icons/chevronleft/index.vue
similarity index 100%
rename from components/lib/icon/chevronleft/index.vue
rename to components/lib/icons/chevronleft/index.vue
diff --git a/components/lib/icon/chevronleft/package.json b/components/lib/icons/chevronleft/package.json
similarity index 100%
rename from components/lib/icon/chevronleft/package.json
rename to components/lib/icons/chevronleft/package.json
diff --git a/components/lib/icon/chevronright/index.d.ts b/components/lib/icons/chevronright/index.d.ts
similarity index 87%
rename from components/lib/icon/chevronright/index.d.ts
rename to components/lib/icons/chevronright/index.d.ts
index 2465554da..86a349334 100644
--- a/components/lib/icon/chevronright/index.d.ts
+++ b/components/lib/icons/chevronright/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class ChevronRightIcon extends Icon {}
 
diff --git a/components/lib/icon/chevronright/index.vue b/components/lib/icons/chevronright/index.vue
similarity index 100%
rename from components/lib/icon/chevronright/index.vue
rename to components/lib/icons/chevronright/index.vue
diff --git a/components/lib/icon/chevronright/package.json b/components/lib/icons/chevronright/package.json
similarity index 100%
rename from components/lib/icon/chevronright/package.json
rename to components/lib/icons/chevronright/package.json
diff --git a/components/lib/icon/chevronup/index.d.ts b/components/lib/icons/chevronup/index.d.ts
similarity index 87%
rename from components/lib/icon/chevronup/index.d.ts
rename to components/lib/icons/chevronup/index.d.ts
index f242f660b..7ea2eb703 100644
--- a/components/lib/icon/chevronup/index.d.ts
+++ b/components/lib/icons/chevronup/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class ChevronUpIcon extends Icon {}
 
diff --git a/components/lib/icon/chevronup/index.vue b/components/lib/icons/chevronup/index.vue
similarity index 100%
rename from components/lib/icon/chevronup/index.vue
rename to components/lib/icons/chevronup/index.vue
diff --git a/components/lib/icon/chevronup/package.json b/components/lib/icons/chevronup/package.json
similarity index 100%
rename from components/lib/icon/chevronup/package.json
rename to components/lib/icons/chevronup/package.json
diff --git a/components/lib/icon/exclamationtriangle/index.d.ts b/components/lib/icons/exclamationtriangle/index.d.ts
similarity index 88%
rename from components/lib/icon/exclamationtriangle/index.d.ts
rename to components/lib/icons/exclamationtriangle/index.d.ts
index 3a39a1f02..c10a36919 100644
--- a/components/lib/icon/exclamationtriangle/index.d.ts
+++ b/components/lib/icons/exclamationtriangle/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class ExclamationTriangleIcon extends Icon {}
 
diff --git a/components/lib/icon/exclamationtriangle/index.vue b/components/lib/icons/exclamationtriangle/index.vue
similarity index 100%
rename from components/lib/icon/exclamationtriangle/index.vue
rename to components/lib/icons/exclamationtriangle/index.vue
diff --git a/components/lib/icon/exclamationtriangle/package.json b/components/lib/icons/exclamationtriangle/package.json
similarity index 100%
rename from components/lib/icon/exclamationtriangle/package.json
rename to components/lib/icons/exclamationtriangle/package.json
diff --git a/components/lib/icon/eye/index.d.ts b/components/lib/icons/eye/index.d.ts
similarity index 86%
rename from components/lib/icon/eye/index.d.ts
rename to components/lib/icons/eye/index.d.ts
index 84dc057d2..911a2df16 100644
--- a/components/lib/icon/eye/index.d.ts
+++ b/components/lib/icons/eye/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class EyeIcon extends Icon {}
 
diff --git a/components/lib/icon/eye/index.vue b/components/lib/icons/eye/index.vue
similarity index 100%
rename from components/lib/icon/eye/index.vue
rename to components/lib/icons/eye/index.vue
diff --git a/components/lib/icon/eye/package.json b/components/lib/icons/eye/package.json
similarity index 100%
rename from components/lib/icon/eye/package.json
rename to components/lib/icons/eye/package.json
diff --git a/components/lib/icon/eyeslash/index.d.ts b/components/lib/icons/eyeslash/index.d.ts
similarity index 86%
rename from components/lib/icon/eyeslash/index.d.ts
rename to components/lib/icons/eyeslash/index.d.ts
index 00212b06e..f69989ea7 100644
--- a/components/lib/icon/eyeslash/index.d.ts
+++ b/components/lib/icons/eyeslash/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class EyeSlashIcon extends Icon {}
 
diff --git a/components/lib/icon/eyeslash/index.vue b/components/lib/icons/eyeslash/index.vue
similarity index 100%
rename from components/lib/icon/eyeslash/index.vue
rename to components/lib/icons/eyeslash/index.vue
diff --git a/components/lib/icon/eyeslash/package.json b/components/lib/icons/eyeslash/package.json
similarity index 100%
rename from components/lib/icon/eyeslash/package.json
rename to components/lib/icons/eyeslash/package.json
diff --git a/components/lib/icon/filter/index.d.ts b/components/lib/icons/filter/index.d.ts
similarity index 86%
rename from components/lib/icon/filter/index.d.ts
rename to components/lib/icons/filter/index.d.ts
index 491b0deb8..c1dd50cc9 100644
--- a/components/lib/icon/filter/index.d.ts
+++ b/components/lib/icons/filter/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class FilterIcon extends Icon {}
 
diff --git a/components/lib/icon/filter/index.vue b/components/lib/icons/filter/index.vue
similarity index 100%
rename from components/lib/icon/filter/index.vue
rename to components/lib/icons/filter/index.vue
diff --git a/components/lib/icon/filter/package.json b/components/lib/icons/filter/package.json
similarity index 100%
rename from components/lib/icon/filter/package.json
rename to components/lib/icons/filter/package.json
diff --git a/components/lib/icon/filterslash/index.d.ts b/components/lib/icons/filterslash/index.d.ts
similarity index 87%
rename from components/lib/icon/filterslash/index.d.ts
rename to components/lib/icons/filterslash/index.d.ts
index ec55358a6..562f4fddd 100644
--- a/components/lib/icon/filterslash/index.d.ts
+++ b/components/lib/icons/filterslash/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class FilterSlashIcon extends Icon {}
 
diff --git a/components/lib/icon/filterslash/index.vue b/components/lib/icons/filterslash/index.vue
similarity index 100%
rename from components/lib/icon/filterslash/index.vue
rename to components/lib/icons/filterslash/index.vue
diff --git a/components/lib/icon/filterslash/package.json b/components/lib/icons/filterslash/package.json
similarity index 100%
rename from components/lib/icon/filterslash/package.json
rename to components/lib/icons/filterslash/package.json
diff --git a/components/lib/icon/index.d.ts b/components/lib/icons/index.d.ts
similarity index 100%
rename from components/lib/icon/index.d.ts
rename to components/lib/icons/index.d.ts
diff --git a/components/lib/icon/infocircle/index.d.ts b/components/lib/icons/infocircle/index.d.ts
similarity index 87%
rename from components/lib/icon/infocircle/index.d.ts
rename to components/lib/icons/infocircle/index.d.ts
index c3ebebdb3..246fc46f2 100644
--- a/components/lib/icon/infocircle/index.d.ts
+++ b/components/lib/icons/infocircle/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class InfoCircleIcon extends Icon {}
 
diff --git a/components/lib/icon/infocircle/index.vue b/components/lib/icons/infocircle/index.vue
similarity index 100%
rename from components/lib/icon/infocircle/index.vue
rename to components/lib/icons/infocircle/index.vue
diff --git a/components/lib/icon/infocircle/package.json b/components/lib/icons/infocircle/package.json
similarity index 100%
rename from components/lib/icon/infocircle/package.json
rename to components/lib/icons/infocircle/package.json
diff --git a/components/lib/icon/minus/index.d.ts b/components/lib/icons/minus/index.d.ts
similarity index 86%
rename from components/lib/icon/minus/index.d.ts
rename to components/lib/icons/minus/index.d.ts
index 97a20b829..72e4b222e 100644
--- a/components/lib/icon/minus/index.d.ts
+++ b/components/lib/icons/minus/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class MinusIcon extends Icon {}
 
diff --git a/components/lib/icon/minus/index.vue b/components/lib/icons/minus/index.vue
similarity index 100%
rename from components/lib/icon/minus/index.vue
rename to components/lib/icons/minus/index.vue
diff --git a/components/lib/icon/minus/package.json b/components/lib/icons/minus/package.json
similarity index 100%
rename from components/lib/icon/minus/package.json
rename to components/lib/icons/minus/package.json
diff --git a/components/lib/icon/pencil/index.d.ts b/components/lib/icons/pencil/index.d.ts
similarity index 86%
rename from components/lib/icon/pencil/index.d.ts
rename to components/lib/icons/pencil/index.d.ts
index 8dc3f0810..7d7a9b619 100644
--- a/components/lib/icon/pencil/index.d.ts
+++ b/components/lib/icons/pencil/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class PencilIcon extends Icon {}
 
diff --git a/components/lib/icon/pencil/index.vue b/components/lib/icons/pencil/index.vue
similarity index 100%
rename from components/lib/icon/pencil/index.vue
rename to components/lib/icons/pencil/index.vue
diff --git a/components/lib/icon/pencil/package.json b/components/lib/icons/pencil/package.json
similarity index 100%
rename from components/lib/icon/pencil/package.json
rename to components/lib/icons/pencil/package.json
diff --git a/components/lib/icon/plus/index.d.ts b/components/lib/icons/plus/index.d.ts
similarity index 86%
rename from components/lib/icon/plus/index.d.ts
rename to components/lib/icons/plus/index.d.ts
index baa896372..110c55c35 100644
--- a/components/lib/icon/plus/index.d.ts
+++ b/components/lib/icons/plus/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class PlusIcon extends Icon {}
 
diff --git a/components/lib/icon/plus/index.vue b/components/lib/icons/plus/index.vue
similarity index 100%
rename from components/lib/icon/plus/index.vue
rename to components/lib/icons/plus/index.vue
diff --git a/components/lib/icon/plus/package.json b/components/lib/icons/plus/package.json
similarity index 100%
rename from components/lib/icon/plus/package.json
rename to components/lib/icons/plus/package.json
diff --git a/components/lib/icon/refresh/index.d.ts b/components/lib/icons/refresh/index.d.ts
similarity index 86%
rename from components/lib/icon/refresh/index.d.ts
rename to components/lib/icons/refresh/index.d.ts
index 9df208233..af35799cb 100644
--- a/components/lib/icon/refresh/index.d.ts
+++ b/components/lib/icons/refresh/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class RefreshIcon extends Icon {}
 
diff --git a/components/lib/icon/refresh/index.vue b/components/lib/icons/refresh/index.vue
similarity index 100%
rename from components/lib/icon/refresh/index.vue
rename to components/lib/icons/refresh/index.vue
diff --git a/components/lib/icon/refresh/package.json b/components/lib/icons/refresh/package.json
similarity index 100%
rename from components/lib/icon/refresh/package.json
rename to components/lib/icons/refresh/package.json
diff --git a/components/lib/icon/search/index.d.ts b/components/lib/icons/search/index.d.ts
similarity index 86%
rename from components/lib/icon/search/index.d.ts
rename to components/lib/icons/search/index.d.ts
index 8244fae44..2016f7df6 100644
--- a/components/lib/icon/search/index.d.ts
+++ b/components/lib/icons/search/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class SearchIcon extends Icon {}
 
diff --git a/components/lib/icon/search/index.vue b/components/lib/icons/search/index.vue
similarity index 100%
rename from components/lib/icon/search/index.vue
rename to components/lib/icons/search/index.vue
diff --git a/components/lib/icon/search/package.json b/components/lib/icons/search/package.json
similarity index 100%
rename from components/lib/icon/search/package.json
rename to components/lib/icons/search/package.json
diff --git a/components/lib/icon/searchminus/index.d.ts b/components/lib/icons/searchminus/index.d.ts
similarity index 87%
rename from components/lib/icon/searchminus/index.d.ts
rename to components/lib/icons/searchminus/index.d.ts
index fdc82ecaf..1fb951b16 100644
--- a/components/lib/icon/searchminus/index.d.ts
+++ b/components/lib/icons/searchminus/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class SearchMinusIcon extends Icon {}
 
diff --git a/components/lib/icon/searchminus/index.vue b/components/lib/icons/searchminus/index.vue
similarity index 100%
rename from components/lib/icon/searchminus/index.vue
rename to components/lib/icons/searchminus/index.vue
diff --git a/components/lib/icon/searchminus/package.json b/components/lib/icons/searchminus/package.json
similarity index 100%
rename from components/lib/icon/searchminus/package.json
rename to components/lib/icons/searchminus/package.json
diff --git a/components/lib/icon/searchplus/index.d.ts b/components/lib/icons/searchplus/index.d.ts
similarity index 87%
rename from components/lib/icon/searchplus/index.d.ts
rename to components/lib/icons/searchplus/index.d.ts
index 45bb28097..27f241f06 100644
--- a/components/lib/icon/searchplus/index.d.ts
+++ b/components/lib/icons/searchplus/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class SearchPlusIcon extends Icon {}
 
diff --git a/components/lib/icon/searchplus/index.vue b/components/lib/icons/searchplus/index.vue
similarity index 100%
rename from components/lib/icon/searchplus/index.vue
rename to components/lib/icons/searchplus/index.vue
diff --git a/components/lib/icon/searchplus/package.json b/components/lib/icons/searchplus/package.json
similarity index 100%
rename from components/lib/icon/searchplus/package.json
rename to components/lib/icons/searchplus/package.json
diff --git a/components/lib/icon/sortalt/index.d.ts b/components/lib/icons/sortalt/index.d.ts
similarity index 86%
rename from components/lib/icon/sortalt/index.d.ts
rename to components/lib/icons/sortalt/index.d.ts
index 25741a5b2..46c24b5c3 100644
--- a/components/lib/icon/sortalt/index.d.ts
+++ b/components/lib/icons/sortalt/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class SortAltIcon extends Icon {}
 
diff --git a/components/lib/icon/sortalt/index.vue b/components/lib/icons/sortalt/index.vue
similarity index 100%
rename from components/lib/icon/sortalt/index.vue
rename to components/lib/icons/sortalt/index.vue
diff --git a/components/lib/icon/sortalt/package.json b/components/lib/icons/sortalt/package.json
similarity index 100%
rename from components/lib/icon/sortalt/package.json
rename to components/lib/icons/sortalt/package.json
diff --git a/components/lib/icon/sortamountdown/index.d.ts b/components/lib/icons/sortamountdown/index.d.ts
similarity index 87%
rename from components/lib/icon/sortamountdown/index.d.ts
rename to components/lib/icons/sortamountdown/index.d.ts
index 9843149d7..60ff8dc95 100644
--- a/components/lib/icon/sortamountdown/index.d.ts
+++ b/components/lib/icons/sortamountdown/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class SortAmountDownIcon extends Icon {}
 
diff --git a/components/lib/icon/sortamountdown/index.vue b/components/lib/icons/sortamountdown/index.vue
similarity index 100%
rename from components/lib/icon/sortamountdown/index.vue
rename to components/lib/icons/sortamountdown/index.vue
diff --git a/components/lib/icon/sortamountdown/package.json b/components/lib/icons/sortamountdown/package.json
similarity index 100%
rename from components/lib/icon/sortamountdown/package.json
rename to components/lib/icons/sortamountdown/package.json
diff --git a/components/lib/icon/sortamountupalt/index.d.ts b/components/lib/icons/sortamountupalt/index.d.ts
similarity index 88%
rename from components/lib/icon/sortamountupalt/index.d.ts
rename to components/lib/icons/sortamountupalt/index.d.ts
index 7b6e00136..d1747f4b9 100644
--- a/components/lib/icon/sortamountupalt/index.d.ts
+++ b/components/lib/icons/sortamountupalt/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class SortAmountUpAltIcon extends Icon {}
 
diff --git a/components/lib/icon/sortamountupalt/index.vue b/components/lib/icons/sortamountupalt/index.vue
similarity index 100%
rename from components/lib/icon/sortamountupalt/index.vue
rename to components/lib/icons/sortamountupalt/index.vue
diff --git a/components/lib/icon/sortamountupalt/package.json b/components/lib/icons/sortamountupalt/package.json
similarity index 100%
rename from components/lib/icon/sortamountupalt/package.json
rename to components/lib/icons/sortamountupalt/package.json
diff --git a/components/lib/icon/spinner/index.d.ts b/components/lib/icons/spinner/index.d.ts
similarity index 86%
rename from components/lib/icon/spinner/index.d.ts
rename to components/lib/icons/spinner/index.d.ts
index 92a4bcab9..d1b0d8ee7 100644
--- a/components/lib/icon/spinner/index.d.ts
+++ b/components/lib/icons/spinner/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class SpinnerIcon extends Icon {}
 
diff --git a/components/lib/icon/spinner/index.vue b/components/lib/icons/spinner/index.vue
similarity index 100%
rename from components/lib/icon/spinner/index.vue
rename to components/lib/icons/spinner/index.vue
diff --git a/components/lib/icon/spinner/package.json b/components/lib/icons/spinner/package.json
similarity index 100%
rename from components/lib/icon/spinner/package.json
rename to components/lib/icons/spinner/package.json
diff --git a/components/lib/icon/star/index.d.ts b/components/lib/icons/star/index.d.ts
similarity index 86%
rename from components/lib/icon/star/index.d.ts
rename to components/lib/icons/star/index.d.ts
index 228057026..ea8832dc8 100644
--- a/components/lib/icon/star/index.d.ts
+++ b/components/lib/icons/star/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class StarIcon extends Icon {}
 
diff --git a/components/lib/icon/star/index.vue b/components/lib/icons/star/index.vue
similarity index 100%
rename from components/lib/icon/star/index.vue
rename to components/lib/icons/star/index.vue
diff --git a/components/lib/icon/star/package.json b/components/lib/icons/star/package.json
similarity index 100%
rename from components/lib/icon/star/package.json
rename to components/lib/icons/star/package.json
diff --git a/components/lib/icon/starfill/index.d.ts b/components/lib/icons/starfill/index.d.ts
similarity index 86%
rename from components/lib/icon/starfill/index.d.ts
rename to components/lib/icons/starfill/index.d.ts
index 15d181f38..d9a309e8b 100644
--- a/components/lib/icon/starfill/index.d.ts
+++ b/components/lib/icons/starfill/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class StarFillIcon extends Icon {}
 
diff --git a/components/lib/icon/starfill/index.vue b/components/lib/icons/starfill/index.vue
similarity index 100%
rename from components/lib/icon/starfill/index.vue
rename to components/lib/icons/starfill/index.vue
diff --git a/components/lib/icon/starfill/package.json b/components/lib/icons/starfill/package.json
similarity index 100%
rename from components/lib/icon/starfill/package.json
rename to components/lib/icons/starfill/package.json
diff --git a/components/lib/icon/thlarge/index.d.ts b/components/lib/icons/thlarge/index.d.ts
similarity index 86%
rename from components/lib/icon/thlarge/index.d.ts
rename to components/lib/icons/thlarge/index.d.ts
index 1e4eb7541..f736f5b69 100644
--- a/components/lib/icon/thlarge/index.d.ts
+++ b/components/lib/icons/thlarge/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class ThLargeIcon extends Icon {}
 
diff --git a/components/lib/icon/thlarge/index.vue b/components/lib/icons/thlarge/index.vue
similarity index 100%
rename from components/lib/icon/thlarge/index.vue
rename to components/lib/icons/thlarge/index.vue
diff --git a/components/lib/icon/thlarge/package.json b/components/lib/icons/thlarge/package.json
similarity index 100%
rename from components/lib/icon/thlarge/package.json
rename to components/lib/icons/thlarge/package.json
diff --git a/components/lib/icon/times/index.d.ts b/components/lib/icons/times/index.d.ts
similarity index 86%
rename from components/lib/icon/times/index.d.ts
rename to components/lib/icons/times/index.d.ts
index d3c2162f2..8df622b65 100644
--- a/components/lib/icon/times/index.d.ts
+++ b/components/lib/icons/times/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class TimesIcon extends Icon {}
 
diff --git a/components/lib/icon/times/index.vue b/components/lib/icons/times/index.vue
similarity index 100%
rename from components/lib/icon/times/index.vue
rename to components/lib/icons/times/index.vue
diff --git a/components/lib/icon/times/package.json b/components/lib/icons/times/package.json
similarity index 100%
rename from components/lib/icon/times/package.json
rename to components/lib/icons/times/package.json
diff --git a/components/lib/icon/timescircle/index.d.ts b/components/lib/icons/timescircle/index.d.ts
similarity index 87%
rename from components/lib/icon/timescircle/index.d.ts
rename to components/lib/icons/timescircle/index.d.ts
index 36ff42c86..ecab9b280 100644
--- a/components/lib/icon/timescircle/index.d.ts
+++ b/components/lib/icons/timescircle/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class TimesCircleIcon extends Icon {}
 
diff --git a/components/lib/icon/timescircle/index.vue b/components/lib/icons/timescircle/index.vue
similarity index 100%
rename from components/lib/icon/timescircle/index.vue
rename to components/lib/icons/timescircle/index.vue
diff --git a/components/lib/icon/timescircle/package.json b/components/lib/icons/timescircle/package.json
similarity index 100%
rename from components/lib/icon/timescircle/package.json
rename to components/lib/icons/timescircle/package.json
diff --git a/components/lib/icon/trash/index.d.ts b/components/lib/icons/trash/index.d.ts
similarity index 86%
rename from components/lib/icon/trash/index.d.ts
rename to components/lib/icons/trash/index.d.ts
index defc7356a..3b9622fa3 100644
--- a/components/lib/icon/trash/index.d.ts
+++ b/components/lib/icons/trash/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class TrashIcon extends Icon {}
 
diff --git a/components/lib/icon/trash/index.vue b/components/lib/icons/trash/index.vue
similarity index 100%
rename from components/lib/icon/trash/index.vue
rename to components/lib/icons/trash/index.vue
diff --git a/components/lib/icon/trash/package.json b/components/lib/icons/trash/package.json
similarity index 100%
rename from components/lib/icon/trash/package.json
rename to components/lib/icons/trash/package.json
diff --git a/components/lib/icon/undo/index.d.ts b/components/lib/icons/undo/index.d.ts
similarity index 86%
rename from components/lib/icon/undo/index.d.ts
rename to components/lib/icons/undo/index.d.ts
index 379362021..30c20238e 100644
--- a/components/lib/icon/undo/index.d.ts
+++ b/components/lib/icons/undo/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class UndoIcon extends Icon {}
 
diff --git a/components/lib/icon/undo/index.vue b/components/lib/icons/undo/index.vue
similarity index 100%
rename from components/lib/icon/undo/index.vue
rename to components/lib/icons/undo/index.vue
diff --git a/components/lib/icon/undo/package.json b/components/lib/icons/undo/package.json
similarity index 100%
rename from components/lib/icon/undo/package.json
rename to components/lib/icons/undo/package.json
diff --git a/components/lib/icon/upload/index.d.ts b/components/lib/icons/upload/index.d.ts
similarity index 86%
rename from components/lib/icon/upload/index.d.ts
rename to components/lib/icons/upload/index.d.ts
index e1057669f..c1bf1b27f 100644
--- a/components/lib/icon/upload/index.d.ts
+++ b/components/lib/icons/upload/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class UploadIcon extends Icon {}
 
diff --git a/components/lib/icon/upload/index.vue b/components/lib/icons/upload/index.vue
similarity index 100%
rename from components/lib/icon/upload/index.vue
rename to components/lib/icons/upload/index.vue
diff --git a/components/lib/icon/upload/package.json b/components/lib/icons/upload/package.json
similarity index 100%
rename from components/lib/icon/upload/package.json
rename to components/lib/icons/upload/package.json
diff --git a/components/lib/icon/windowmaximize/index.d.ts b/components/lib/icons/windowmaximize/index.d.ts
similarity index 87%
rename from components/lib/icon/windowmaximize/index.d.ts
rename to components/lib/icons/windowmaximize/index.d.ts
index ac22b3937..0ff26b742 100644
--- a/components/lib/icon/windowmaximize/index.d.ts
+++ b/components/lib/icons/windowmaximize/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class WindowMaximizeIcon extends Icon {}
 
diff --git a/components/lib/icon/windowmaximize/index.vue b/components/lib/icons/windowmaximize/index.vue
similarity index 100%
rename from components/lib/icon/windowmaximize/index.vue
rename to components/lib/icons/windowmaximize/index.vue
diff --git a/components/lib/icon/windowmaximize/package.json b/components/lib/icons/windowmaximize/package.json
similarity index 100%
rename from components/lib/icon/windowmaximize/package.json
rename to components/lib/icons/windowmaximize/package.json
diff --git a/components/lib/icon/windowminimize/index.d.ts b/components/lib/icons/windowminimize/index.d.ts
similarity index 87%
rename from components/lib/icon/windowminimize/index.d.ts
rename to components/lib/icons/windowminimize/index.d.ts
index 5704adfe7..9eafc0be2 100644
--- a/components/lib/icon/windowminimize/index.d.ts
+++ b/components/lib/icons/windowminimize/index.d.ts
@@ -1,5 +1,5 @@
+import { Icon } from '../../icons/index';
 import { GlobalComponentConstructor } from '../../ts-helpers';
-import { Icon } from '../index';
 
 declare class WindowMinimizeIcon extends Icon {}
 
diff --git a/components/lib/icon/windowminimize/index.vue b/components/lib/icons/windowminimize/index.vue
similarity index 100%
rename from components/lib/icon/windowminimize/index.vue
rename to components/lib/icons/windowminimize/index.vue
diff --git a/components/lib/icon/windowminimize/package.json b/components/lib/icons/windowminimize/package.json
similarity index 100%
rename from components/lib/icon/windowminimize/package.json
rename to components/lib/icons/windowminimize/package.json
diff --git a/components/lib/image/Image.d.ts b/components/lib/image/Image.d.ts
index d03035c99..8e18afe06 100644
--- a/components/lib/image/Image.d.ts
+++ b/components/lib/image/Image.d.ts
@@ -9,6 +9,127 @@
  */
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+export declare type ImagePassThroughOptionType = ImagePassThroughAttributes | ((options: ImagePassThroughMethodOptions) => ImagePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ImagePassThroughMethodOptions {
+    props: ImageProps;
+    state: ImageState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ImageProps.pt}
+ */
+export interface ImagePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the image's DOM element.
+     */
+    image?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button's DOM element.
+     */
+    button?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toolbar's DOM element.
+     */
+    toolbar?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rotate right button's DOM element.
+     */
+    rotateRightButton?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rotate right icon's DOM element.
+     */
+    rotateRightIcon?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rotate left button's DOM element.
+     */
+    rotateLeftButton?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rotate left icon's DOM element.
+     */
+    rotateLeftIcon?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the zoom out button's DOM element.
+     */
+    zoomOutButton?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the zoom out icon's DOM element.
+     */
+    zoomOutIcon?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the zoom in button's DOM element.
+     */
+    zoomInButton?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the zoom in icon's DOM element.
+     */
+    zoomInIcon?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the preview container's DOM element.
+     */
+    previewContainer?: ImagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the preview's DOM element.
+     */
+    preview?: ImagePassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ImagePassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Image component.
+ */
+export interface ImageState {
+    /**
+     * Mask visible state as a boolean.
+     * @defaultValue false
+     */
+    maskVisible: boolean;
+    /**
+     * Preview visible state as a boolean.
+     * @defaultValue false
+     */
+    previewVisible: boolean;
+    /**
+     * Rotate state as a number.
+     * @defaultValue 0
+     */
+    rotate: number;
+    /**
+     * Scale state as a boolean.
+     * @defaultValue 1
+     */
+    scale: number;
+}
 
 /**
  * Defines valid properties in Image component.
@@ -29,7 +150,7 @@ export interface ImageProps {
     imageClass?: any;
     /**
      * Custom indicator icon.
-     * @defaultValue pi pi-eye
+     * @deprecated since v3.27.0. Use 'indicator' slot.
      */
     indicatorIcon?: string;
     /**
@@ -42,6 +163,11 @@ export interface ImageProps {
      * @defaultValue false
      */
     zoomOutDisabled?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ImagePassThroughOptions}
+     */
+    pt?: ImagePassThroughOptions;
 }
 
 /**
@@ -72,6 +198,40 @@ export interface ImageSlots {
      * Custom close template.
      */
     close(): VNode[];
+    /**
+     * Custom image template.
+     */
+    image(scope: {
+        /**
+         * Style class of the image element.
+         */
+        class: any;
+        /**
+         * Style of the image element.
+         */
+        style: any;
+        /**
+         * Image error function.
+         */
+        onError: void;
+    }): VNode[];
+    /**
+     * Custom preview template.
+     */
+    preview(scope: {
+        /**
+         * Style class of the preview image element.
+         */
+        class: any;
+        /**
+         * Style of the preview image element.
+         */
+        style: any;
+        /**
+         * Preview click function.
+         */
+        onClick: void;
+    }): VNode[];
 }
 
 export interface ImageEmits {}
diff --git a/components/lib/image/Image.vue b/components/lib/image/Image.vue
index 2479992d4..0f6770bb8 100644
--- a/components/lib/image/Image.vue
+++ b/components/lib/image/Image.vue
@@ -1,47 +1,51 @@
 <template>
-    <span :class="containerClass" :style="style">
-        <img v-bind="$attrs" :style="imageStyle" :class="imageClass" @error="onError" />
-        <button v-if="preview" ref="previewButton" class="p-image-preview-indicator" @click="onImageClick" v-bind="previewButtonProps">
-            <slot name="indicator">
-                <component :is="indicatorIcon ? 'i' : 'EyeIcon'" class="p-image-preview-icon" />
+    <span :class="containerClass" :style="style" v-bind="ptm('root')">
+        <slot name="image" :class="imageClass" :style="imageStyle" :onError="onError">
+            <img :style="imageStyle" :class="imageClass" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
+        </slot>
+        <button v-if="preview" ref="previewButton" class="p-image-preview-indicator" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
+            <slot name="indicatoricon">
+                <component :is="indicatorIcon ? 'i' : 'EyeIcon'" class="p-image-preview-icon" v-bind="ptm('icon')" />
             </slot>
         </button>
         <Portal>
-            <div v-if="maskVisible" :ref="maskRef" v-focustrap role="dialog" :class="maskClass" :aria-modal="maskVisible" @click="onMaskClick" @keydown="onMaskKeydown">
-                <div class="p-image-toolbar">
-                    <button class="p-image-action p-link" @click="rotateRight" type="button" :aria-label="rightAriaLabel">
+            <div v-if="maskVisible" :ref="maskRef" v-focustrap role="dialog" :class="maskClass" :aria-modal="maskVisible" @click="onMaskClick" @keydown="onMaskKeydown" v-bind="ptm('mask')">
+                <div class="p-image-toolbar" v-bind="ptm('toolbar')">
+                    <button class="p-image-action p-link" @click="rotateRight" type="button" :aria-label="rightAriaLabel" v-bind="ptm('rotateRightButton')">
                         <slot name="refresh">
-                            <RefreshIcon />
+                            <RefreshIcon v-bind="ptm('rotateRightIcon')" />
                         </slot>
                     </button>
 
-                    <button class="p-image-action p-link" @click="rotateLeft" type="button" :aria-label="leftAriaLabel">
+                    <button class="p-image-action p-link" @click="rotateLeft" type="button" :aria-label="leftAriaLabel" v-bind="ptm('rotateLeftButton')">
                         <slot name="undo">
-                            <UndoIcon />
+                            <UndoIcon v-bind="ptm('rotateLeftIcon')" />
                         </slot>
                     </button>
 
-                    <button class="p-image-action p-link" @click="zoomOut" type="button" :disabled="isZoomOutDisabled" :aria-label="zoomOutAriaLabel">
+                    <button class="p-image-action p-link" @click="zoomOut" type="button" :disabled="isZoomOutDisabled" :aria-label="zoomOutAriaLabel" v-bind="ptm('zoomOutButton')">
                         <slot name="zoomout">
-                            <SearchMinusIcon />
+                            <SearchMinusIcon v-bind="ptm('zoomOutIcon')" />
                         </slot>
                     </button>
 
-                    <button class="p-image-action p-link" @click="zoomIn" type="button" :disabled="isZoomInDisabled" :aria-label="zoomInAriaLabel">
+                    <button class="p-image-action p-link" @click="zoomIn" type="button" :disabled="isZoomInDisabled" :aria-label="zoomInAriaLabel" v-bind="ptm('zoomInButton')">
                         <slot name="zoomin">
-                            <SearchPlusIcon />
+                            <SearchPlusIcon v-bind="ptm('zoomInIcon')" />
                         </slot>
                     </button>
 
-                    <button class="p-image-action p-link" type="button" @click="hidePreview" :aria-label="closeAriaLabel" autofocus>
+                    <button class="p-image-action p-link" type="button" @click="hidePreview" :aria-label="closeAriaLabel" autofocus v-bind="ptm('closeButton')">
                         <slot name="close">
-                            <TimesIcon />
+                            <TimesIcon v-bind="ptm('closeIcon')" />
                         </slot>
                     </button>
                 </div>
                 <transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave">
-                    <div v-if="previewVisible">
-                        <img :src="$attrs.src" class="p-image-preview" :style="imagePreviewStyle" @click="onPreviewImageClick" />
+                    <div v-if="previewVisible" v-bind="ptm('previewContainer')">
+                        <slot name="preview" class="p-image-preview" :style="imagePreviewStyle" :onClick="onPreviewImageClick">
+                            <img :src="$attrs.src" class="p-image-preview" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('preview')" />
+                        </slot>
                     </div>
                 </transition>
             </div>
@@ -50,18 +54,20 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import FocusTrap from 'primevue/focustrap';
-import EyeIcon from 'primevue/icon/eye';
-import RefreshIcon from 'primevue/icon/refresh';
-import SearchMinusIcon from 'primevue/icon/searchminus';
-import SearchPlusIcon from 'primevue/icon/searchplus';
-import TimesIcon from 'primevue/icon/times';
-import UndoIcon from 'primevue/icon/undo';
+import EyeIcon from 'primevue/icons/eye';
+import RefreshIcon from 'primevue/icons/refresh';
+import SearchMinusIcon from 'primevue/icons/searchminus';
+import SearchPlusIcon from 'primevue/icons/searchplus';
+import TimesIcon from 'primevue/icons/times';
+import UndoIcon from 'primevue/icons/undo';
 import Portal from 'primevue/portal';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
 
 export default {
     name: 'Image',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['show', 'hide', 'error'],
     props: {
@@ -294,10 +300,6 @@ export default {
     transition: opacity 0.3s;
 }
 
-.p-image-preview-icon {
-    font-size: 1.5rem;
-}
-
 .p-image-preview-container:hover > .p-image-preview-indicator {
     opacity: 1;
     cursor: pointer;
diff --git a/components/lib/inlinemessage/InlineMessage.d.ts b/components/lib/inlinemessage/InlineMessage.d.ts
index 2adf7fb36..4b8e93dcf 100755
--- a/components/lib/inlinemessage/InlineMessage.d.ts
+++ b/components/lib/inlinemessage/InlineMessage.d.ts
@@ -10,6 +10,53 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type InlineMessagePassThroughOptionType = InlineMessagePassThroughAttributes | ((options: InlineMessagePassThroughMethodOptions) => InlineMessagePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InlineMessagePassThroughMethodOptions {
+    props: InlineMessageProps;
+    state: InlineMessageState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InlineMessageProps.pt}
+ */
+export interface InlineMessagePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InlineMessagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: InlineMessagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the text's DOM element.
+     */
+    text?: InlineMessagePassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InlineMessagePassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in InlineMessage component.
+ */
+export interface InlineMessageState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+}
+
 /**
  * Defines valid properties in InlineMessage component.
  */
@@ -21,8 +68,14 @@ export interface InlineMessageProps {
     severity?: 'success' | 'info' | 'warn' | 'error' | string | undefined;
     /**
      * Display a custom icon for the message.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     icon?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InlineMessagePassThroughOptions}
+     */
+    pt?: InlineMessagePassThroughOptions;
 }
 /**
  * Defines valid slots in InlineMessage slots.
@@ -35,7 +88,7 @@ export interface InlineMessageSlots {
     /**
      * Custom message icon template.
      */
-    messageicon(): VNode[];
+    icon(): VNode[];
 }
 
 export interface InlineMessageEmits {}
diff --git a/components/lib/inlinemessage/InlineMessage.vue b/components/lib/inlinemessage/InlineMessage.vue
index 2964400d6..450726ca8 100755
--- a/components/lib/inlinemessage/InlineMessage.vue
+++ b/components/lib/inlinemessage/InlineMessage.vue
@@ -1,19 +1,24 @@
 <template>
-    <div aria-live="polite" :class="containerClass">
-        <slot name="messageicon">
-            <component :is="icon ? 'i' : iconComponent" :class="['p-inline-message-icon', icon]"></component>
+    <div aria-live="polite" :class="containerClass" v-bind="ptm('root')">
+        <slot name="icon">
+            <component :is="icon ? 'span' : iconComponent" :class="['p-inline-message-icon', icon]" v-bind="ptm('icon')"></component>
         </slot>
-        <span class="p-inline-message-text"><slot>&nbsp;</slot></span>
+        <span class="p-inline-message-text" v-bind="ptm('text')">
+            <slot>&nbsp;</slot>
+        </span>
     </div>
 </template>
 
 <script>
-import InfoCircleIcon from 'primevue/icon/infocircle';
-import CheckIcon from 'primevue/icon/check';
-import ExclamationTriangleIcon from 'primevue/icon/exclamationtriangle';
-import TimesCircleIcon from 'primevue/icon/timescircle';
+import BaseComponent from 'primevue/basecomponent';
+import CheckIcon from 'primevue/icons/check';
+import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
+import InfoCircleIcon from 'primevue/icons/infocircle';
+import TimesCircleIcon from 'primevue/icons/timescircle';
+
 export default {
     name: 'InlineMessage',
+    extends: BaseComponent,
     props: {
         severity: {
             type: String,
diff --git a/components/lib/inplace/Inplace.d.ts b/components/lib/inplace/Inplace.d.ts
index ed5a00e0c..7141a548a 100755
--- a/components/lib/inplace/Inplace.d.ts
+++ b/components/lib/inplace/Inplace.d.ts
@@ -7,9 +7,63 @@
  * @module inplace
  *
  */
+
 import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
+import { ButtonPassThroughOptions } from '../button';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type InplacePassThroughOptionType = InplacePassThroughAttributes | ((options: InplacePassThroughMethodOptions) => InplacePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InplacePassThroughMethodOptions {
+    props: InplaceProps;
+    state: InplaceState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InplaceProps.pt}
+ */
+export interface InplacePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InplacePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the display's DOM element.
+     */
+    display?: InplacePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: InplacePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    closeButton?: ButtonPassThroughOptions;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InplacePassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Inplace component.
+ */
+export interface InplaceState {
+    /**
+     * Current active state as a boolean.
+     * @defaultValue false
+     */
+    d_active: boolean;
+}
+
 /**
  * Defines valid properties in Inplace component.
  */
@@ -31,7 +85,7 @@ export interface InplaceProps {
     disabled?: boolean | undefined;
     /**
      * Icon to display in the close button.
-     * @defaultValue pi pi-times
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**
@@ -42,6 +96,11 @@ export interface InplaceProps {
      * Uses to pass all properties of the HTMLButtonElement to the close button.
      */
     closeButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InplacePassThroughOptions}
+     */
+    pt?: InplacePassThroughOptions;
 }
 
 /**
@@ -56,6 +115,10 @@ export interface InplaceSlots {
      * Custom content template.
      */
     content(): VNode[];
+    /**
+     * Custom close icon template.
+     */
+    closeicon(): VNode[];
 }
 
 /**
diff --git a/components/lib/inplace/Inplace.spec.js b/components/lib/inplace/Inplace.spec.js
index add7f5de4..a4adb3809 100644
--- a/components/lib/inplace/Inplace.spec.js
+++ b/components/lib/inplace/Inplace.spec.js
@@ -1,19 +1,7 @@
-import { config, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import InputText from 'primevue/inputtext';
 import Inplace from './Inplace.vue';
 
-config.global.mocks = {
-    $primevue: {
-        config: {
-            locale: {
-                aria: {
-                    close: 'Close'
-                }
-            }
-        }
-    }
-};
-
 describe('Inplace.vue', () => {
     it('should exist', () => {
         const wrapper = mount(Inplace);
@@ -70,11 +58,12 @@ describe('Inplace.vue', () => {
         await wrapper.vm.open({});
 
         expect(wrapper.find('.p-inputtext').exists()).toBe(true);
-        expect(wrapper.find('.pi.pi-times').exists()).toBe(true);
+        expect(wrapper.find('.p-inplace-content').exists()).toBe(true);
 
         await wrapper.vm.close({});
 
-        expect(wrapper.find('.pi.pi-times').exists()).toBe(false);
+        expect(wrapper.find('.p-inplace-display').exists()).toBe(true);
+        expect(wrapper.find('.p-inplace-content').exists()).toBe(false);
     });
 
     it('should have custom close icon', async () => {
diff --git a/components/lib/inplace/Inplace.vue b/components/lib/inplace/Inplace.vue
index 67c21dfd4..b757cd82f 100755
--- a/components/lib/inplace/Inplace.vue
+++ b/components/lib/inplace/Inplace.vue
@@ -1,21 +1,30 @@
 <template>
-    <div v-focustrap :class="containerClass" aria-live="polite">
-        <div v-if="!d_active" ref="display" :class="displayClass" :tabindex="$attrs.tabindex || '0'" role="button" @click="open" @keydown.enter="open" v-bind="displayProps">
+    <div v-focustrap :class="containerClass" aria-live="polite" v-bind="ptm('root')">
+        <div v-if="!d_active" ref="display" :class="displayClass" :tabindex="$attrs.tabindex || '0'" role="button" @click="open" @keydown.enter="open" v-bind="{ ...displayProps, ...ptm('display') }">
             <slot name="display"></slot>
         </div>
-        <div v-else class="p-inplace-content">
+        <div v-else class="p-inplace-content" v-bind="ptm('content')">
             <slot name="content"></slot>
-            <IPButton v-if="closable" :icon="closeIcon" :aria-label="closeAriaLabel" @click="close" v-bind="closeButtonProps" />
+            <IPButton v-if="closable" :aria-label="closeAriaLabel" @click="close" :pt="ptm('closeButton')" v-bind="closeButtonProps">
+                <template #icon>
+                    <slot name="closeicon">
+                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="closeIcon" v-bind="ptm('closeButton')['icon']"></component>
+                    </slot>
+                </template>
+            </IPButton>
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import FocusTrap from 'primevue/focustrap';
+import TimesIcon from 'primevue/icons/times';
 
 export default {
     name: 'Inplace',
+    extends: BaseComponent,
     emits: ['open', 'close', 'update:active'],
     props: {
         closable: {
@@ -32,7 +41,7 @@ export default {
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         displayProps: {
             type: null,
@@ -84,7 +93,8 @@ export default {
         }
     },
     components: {
-        IPButton: Button
+        IPButton: Button,
+        TimesIcon
     },
     directives: {
         focustrap: FocusTrap
diff --git a/components/lib/inputmask/InputMask.d.ts b/components/lib/inputmask/InputMask.d.ts
index b6ceadf06..fdb65de4e 100755
--- a/components/lib/inputmask/InputMask.d.ts
+++ b/components/lib/inputmask/InputMask.d.ts
@@ -9,6 +9,26 @@
  */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type InputMaskPassThroughOptionType = InputMaskPassThroughAttributes | null | undefined;
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputMaskProps.pt}
+ */
+export interface InputMaskPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InputMaskPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InputMaskPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in InputMask component.
  */
@@ -41,6 +61,11 @@ export interface InputMaskProps {
      * @defaultValue false
      */
     readonly?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InputMaskPassThroughOptions}
+     */
+    pt?: InputMaskPassThroughOptions;
 }
 
 export interface InputMaskSlots {}
diff --git a/components/lib/inputmask/InputMask.vue b/components/lib/inputmask/InputMask.vue
index f03955e97..930b887a5 100755
--- a/components/lib/inputmask/InputMask.vue
+++ b/components/lib/inputmask/InputMask.vue
@@ -1,12 +1,14 @@
 <template>
-    <input :class="inputClass" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" />
+    <input :class="inputClass" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptm('root')" />
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'InputMask',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'focus', 'blur', 'keydown', 'complete', 'keypress', 'paste'],
     props: {
         modelValue: null,
diff --git a/components/lib/inputnumber/InputNumber.d.ts b/components/lib/inputnumber/InputNumber.d.ts
index 193f838fb..3cb6edd5f 100755
--- a/components/lib/inputnumber/InputNumber.d.ts
+++ b/components/lib/inputnumber/InputNumber.d.ts
@@ -8,8 +8,20 @@
  *
  */
 import { ButtonHTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
+import { ButtonPassThroughOptionType } from '../button';
+import { InputTextPassThroughOptionType } from '../inputtext';
 import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
 
+export declare type InputNumberPassThroughOptionType = InputNumberPassThroughAttributes | ((options: InputNumberPassThroughMethodOptions) => InputNumberPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputNumberPassThroughMethodOptions {
+    props: InputNumberProps;
+    state: InputNumberState;
+}
+
 /**
  * Custom input event.
  * @see {@link InputNumberEmits.input}
@@ -40,6 +52,58 @@ export interface InputNumberBlurEvent {
     value: string;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputNumberProps.pt}
+ */
+export interface InputNumberPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InputNumberPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Input component.
+     * @see {@link InputTextPassThroughOptionType}
+     */
+    input?: InputTextPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button group's DOM element.
+     */
+    buttonGroup?: InputNumberPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    incrementButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    decrementButton?: ButtonPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InputNumberPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in InputNumber component.
+ */
+export interface InputNumberState {
+    /**
+     * Current value state as a number.
+     */
+    d_modelValue: number;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in InputNumber component.
  */
@@ -73,10 +137,12 @@ export interface InputNumberProps {
     decrementButtonClass?: string | undefined;
     /**
      * Style class of the increment button.
+     * @deprecated since v3.27.0. Use 'incrementbuttonicon' slot.
      */
     incrementButtonIcon?: string | undefined;
     /**
      * Style class of the decrement button.
+     * @deprecated since v3.27.0. Use 'decrementbuttonicon' slot.
      */
     decrementButtonIcon?: string | undefined;
     /**
@@ -196,6 +262,11 @@ export interface InputNumberProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InputNumberPassThroughOptions}
+     */
+    pt?: InputNumberPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/inputnumber/InputNumber.vue b/components/lib/inputnumber/InputNumber.vue
index 2eb64a37d..7b0b4cfe1 100755
--- a/components/lib/inputnumber/InputNumber.vue
+++ b/components/lib/inputnumber/InputNumber.vue
@@ -1,5 +1,5 @@
 <template>
-    <span :class="containerClass">
+    <span :class="containerClass" v-bind="ptm('root')">
         <INInputText
             ref="input"
             :id="inputId"
@@ -23,42 +23,52 @@
             @click="onInputClick"
             @focus="onInputFocus"
             @blur="onInputBlur"
-            v-bind="inputProps"
+            v-bind="{ ...inputProps, ...ptm('input') }"
         />
-        <span v-if="showButtons && buttonLayout === 'stacked'" class="p-inputnumber-button-group">
-            <INButton :class="upButtonClass" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps">
-                <slot name="incrementbuttonicon">
-                    <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" />
-                </slot>
+        <span v-if="showButtons && buttonLayout === 'stacked'" class="p-inputnumber-button-group" v-bind="ptm('buttonGroup')">
+            <INButton :class="upButtonClass" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="{ ...incrementButtonProps, ...ptm('incrementButton') }">
+                <template #icon>
+                    <slot name="incrementbuttonicon">
+                        <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButton')['icon']" />
+                    </slot>
+                </template>
             </INButton>
-            <INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps">
-                <slot name="decrementbuttonicon">
-                    <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" />
-                </slot>
+            <INButton :class="downButtonClass" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="{ ...decrementButtonProps, ...ptm('decrementButton') }">
+                <template #icon>
+                    <slot name="decrementbuttonicon">
+                        <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButton')['icon']" />
+                    </slot>
+                </template>
             </INButton>
         </span>
-        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps">
-            <slot name="incrementbuttonicon">
-                <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" />
-            </slot>
+        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="upButtonClass" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="{ ...incrementButtonProps, ...ptm('incrementButton') }">
+            <template #icon>
+                <slot name="incrementbuttonicon">
+                    <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButton')['icon']" />
+                </slot>
+            </template>
         </INButton>
-        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps">
-            <slot name="decrementbuttonicon">
-                <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" />
-            </slot>
+        <INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="downButtonClass" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="{ ...decrementButtonProps, ...ptm('decrementButton') }">
+            <template #icon>
+                <slot name="decrementbuttonicon">
+                    <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButton')['icon']" />
+                </slot>
+            </template>
         </INButton>
     </span>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
-import AngleDownIcon from 'primevue/icon/angledown';
-import AngleUpIcon from 'primevue/icon/angleup';
+import AngleDownIcon from 'primevue/icons/angledown';
+import AngleUpIcon from 'primevue/icons/angleup';
 import InputText from 'primevue/inputtext';
 import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'InputNumber',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'input', 'focus', 'blur'],
     props: {
         modelValue: {
diff --git a/components/lib/inputswitch/InputSwitch.d.ts b/components/lib/inputswitch/InputSwitch.d.ts
index 6b280cc50..bfb6dc5fd 100755
--- a/components/lib/inputswitch/InputSwitch.d.ts
+++ b/components/lib/inputswitch/InputSwitch.d.ts
@@ -10,6 +10,57 @@
 import { InputHTMLAttributes } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type InputSwitchPassThroughOptionType = InputSwitchPassThroughAttributes | ((options: InputSwitchPassThroughMethodOptions) => InputSwitchPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputSwitchPassThroughMethodOptions {
+    props: InputSwitchProps;
+    state: InputSwitchState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputSwitchProps.pt}
+ */
+export interface InputSwitchPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InputSwitchPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the slider's DOM element.
+     */
+    slider?: InputSwitchPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: InputSwitchPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: InputSwitchPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InputSwitchPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in InputSwitch component.
+ */
+export interface InputSwitchState {
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in InputSwitch component.
  */
diff --git a/components/lib/inputswitch/InputSwitch.vue b/components/lib/inputswitch/InputSwitch.vue
index d213b50a8..0741c61ed 100755
--- a/components/lib/inputswitch/InputSwitch.vue
+++ b/components/lib/inputswitch/InputSwitch.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :class="containerClass" @click="onClick($event)">
-        <div class="p-hidden-accessible">
+    <div :class="containerClass" @click="onClick($event)" v-bind="ptm('root')">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
             <input
                 ref="input"
                 :id="inputId"
@@ -15,16 +15,19 @@
                 :aria-label="ariaLabel"
                 @focus="onFocus($event)"
                 @blur="onBlur($event)"
-                v-bind="inputProps"
+                v-bind="ptm('hiddenInput')"
             />
         </div>
-        <span class="p-inputswitch-slider"></span>
+        <span class="p-inputswitch-slider" v-bind="{ ...inputProps, ...ptm('slider') }"></span>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'InputSwitch',
+    extends: BaseComponent,
     emits: ['click', 'update:modelValue', 'change', 'input', 'focus', 'blur'],
     props: {
         modelValue: {
diff --git a/components/lib/inputtext/InputText.css b/components/lib/inputtext/InputText.css
index 6d120b788..946091252 100755
--- a/components/lib/inputtext/InputText.css
+++ b/components/lib/inputtext/InputText.css
@@ -91,7 +91,9 @@
 }
 
 .p-input-icon-left > i,
-.p-input-icon-right > i {
+.p-input-icon-left > svg,
+.p-input-icon-right > i,
+.p-input-icon-right > svg {
     position: absolute;
     top: 50%;
     margin-top: -.5rem;
diff --git a/components/lib/inputtext/InputText.d.ts b/components/lib/inputtext/InputText.d.ts
index 9dba4ca93..65afbd458 100755
--- a/components/lib/inputtext/InputText.d.ts
+++ b/components/lib/inputtext/InputText.d.ts
@@ -10,6 +10,26 @@
 import { InputHTMLAttributes } from 'vue';
 import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
 
+export declare type InputTextPassThroughOptionType = InputTextPassThroughAttributes | null | undefined;
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputTextProps.pt}
+ */
+export interface InputTextPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InputTextPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InputTextPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in InputText component.
  */
@@ -18,6 +38,11 @@ export interface InputTextProps extends InputHTMLAttributes {
      * Value of the component.
      */
     modelValue?: Nullable<string>;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InputTextPassThroughOptions}
+     */
+    pt?: InputTextPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/inputtext/InputText.vue b/components/lib/inputtext/InputText.vue
index 18d5ba27e..d15a15b4c 100755
--- a/components/lib/inputtext/InputText.vue
+++ b/components/lib/inputtext/InputText.vue
@@ -1,10 +1,13 @@
 <template>
-    <input :class="['p-inputtext p-component', { 'p-filled': filled }]" :value="modelValue" @input="onInput" />
+    <input :class="['p-inputtext p-component', { 'p-filled': filled }]" :value="modelValue" @input="onInput" v-bind="ptm('root')" />
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'InputText',
+    extends: BaseComponent,
     emits: ['update:modelValue'],
     props: {
         modelValue: null
diff --git a/components/lib/knob/Knob.d.ts b/components/lib/knob/Knob.d.ts
index 9e7c16512..b12751a51 100644
--- a/components/lib/knob/Knob.d.ts
+++ b/components/lib/knob/Knob.d.ts
@@ -9,6 +9,79 @@
  */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type KnobPassThroughOptionType = KnobPassThroughAttributes | ((options: KnobPassThroughMethodOptions) => KnobPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface KnobPassThroughMethodOptions {
+    props: KnobProps;
+    state: KnobState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link KnobProps.pt}
+ */
+export interface KnobPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: KnobPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the svg's DOM element.
+     */
+    svg?: KnobPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the range's DOM element.
+     */
+    range?: KnobPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the value' DOM element.
+     */
+    value?: KnobPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: KnobPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface KnobPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Knob component.
+ */
+export interface KnobState {
+    /**
+     * Current radius state as a number.
+     * @defaultValue 40
+     */
+    radius: number;
+    /**
+     * Current middle x axis state as a number.
+     * @defaultValue 50
+     */
+    midX: number;
+    /**
+     * Current middle y axis state as a number.
+     * @defaultValue 50
+     */
+    midY: number;
+    /**
+     * Current minimum radian state as a number.
+     */
+    minRadians: number;
+    /**
+     * Current maximum radian state as a number.
+     */
+    maxRadians: number;
+}
+
 /**
  * Defines valid properties in Knob component.
  */
@@ -90,6 +163,11 @@ export interface KnobProps {
      * Used to define a string that labels the element.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {KnobPassThroughOptions}
+     */
+    pt?: KnobPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/knob/Knob.vue b/components/lib/knob/Knob.vue
index c7cb14cdb..10c05f0c2 100644
--- a/components/lib/knob/Knob.vue
+++ b/components/lib/knob/Knob.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass">
+    <div :class="containerClass" v-bind="ptm('root')">
         <svg
             viewBox="0 0 100 100"
             role="slider"
@@ -17,17 +17,21 @@
             @mouseup="onMouseUp"
             @touchstart="onTouchStart"
             @touchend="onTouchEnd"
+            v-bind="ptm('svg')"
         >
-            <path :d="rangePath" :stroke-width="strokeWidth" :stroke="rangeColor" class="p-knob-range"></path>
-            <path :d="valuePath" :stroke-width="strokeWidth" :stroke="valueColor" class="p-knob-value"></path>
-            <text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" class="p-knob-text">{{ valueToDisplay }}</text>
+            <path :d="rangePath" :stroke-width="strokeWidth" :stroke="rangeColor" class="p-knob-range" v-bind="ptm('range')"></path>
+            <path :d="valuePath" :stroke-width="strokeWidth" :stroke="valueColor" class="p-knob-value" v-bind="ptm('value')"></path>
+            <text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" class="p-knob-text" v-bind="ptm('label')">{{ valueToDisplay }}</text>
         </svg>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Knob',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change'],
     props: {
         modelValue: {
diff --git a/components/lib/listbox/Listbox.d.ts b/components/lib/listbox/Listbox.d.ts
index 2ec226744..15d50b974 100755
--- a/components/lib/listbox/Listbox.d.ts
+++ b/components/lib/listbox/Listbox.d.ts
@@ -9,7 +9,18 @@
  */
 import { InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
-import { VirtualScrollerItemOptions, VirtualScrollerProps } from '../virtualscroller';
+import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
+
+export declare type ListboxPassThroughOptionType = ListboxPassThroughAttributes | ((options: ListboxPassThroughMethodOptions) => ListboxPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ListboxPassThroughMethodOptions {
+    props: ListboxProps;
+    state: ListboxState;
+    context: ListboxContext;
+}
 
 /**
  * Custom change event.
@@ -41,6 +52,126 @@ export interface ListboxFilterEvent {
     value: string;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ListboxProps.pt}
+ */
+export interface ListboxPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter container's DOM element.
+     */
+    filterContainer?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter input's DOM element.
+     */
+    filterInput?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter icon's DOM element.
+     */
+    filterIcon?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the VirtualScroller component.
+     * @see {@link VirtualScrollerPassThroughOptionType}
+     */
+    virtualScroller?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item group's DOM element.
+     */
+    itemGroup?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the emptyMessage's DOM element.
+     */
+    emptyMessage?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden first focusable element's DOM element.
+     */
+    hiddenFirstFocusableEl?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden filter result's DOM element.
+     */
+    hiddenFilterResult?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden selected message's DOM element.
+     */
+    hiddenSelectedMessage?: ListboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden last focusable element's DOM element.
+     */
+    hiddenLastFocusableEl?: ListboxPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ListboxPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Listbox component.
+ */
+export interface ListboxState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current filter value state as a string.
+     */
+    filterValue: string;
+    /**
+     * Current focused item index as a number.
+     * @defaultValue -1
+     */
+    focusedOptionIndex: number;
+}
+
+/**
+ * Defines current options in Listbox component.
+ */
+export interface ListboxContext {
+    /**
+     * Current selection state of the item as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current focus state of the item as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in Listbox component.
  */
@@ -94,7 +225,7 @@ export interface ListboxProps {
     /**
      * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually.
      * On touch enabled devices, metaKeySelection is turned off automatically.
-     * @defaultValue true
+     * @defaultValue false
      */
     metaKeySelection?: boolean | undefined;
     /**
@@ -169,7 +300,7 @@ export interface ListboxProps {
     tabindex?: number | string | undefined;
     /**
      * Icon to display in filter input.
-     * @defaultValue ß
+     * @deprecated since v3.27.0. Use 'filtericon' slot.
      */
     filterIcon?: string | undefined;
     /**
@@ -180,6 +311,11 @@ export interface ListboxProps {
      * Identifier of the underlying input element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ListboxPassThroughOptions}
+     */
+    pt?: ListboxPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/listbox/Listbox.spec.js b/components/lib/listbox/Listbox.spec.js
index dc5c88a82..9c1b69c6c 100644
--- a/components/lib/listbox/Listbox.spec.js
+++ b/components/lib/listbox/Listbox.spec.js
@@ -1,20 +1,6 @@
-import { config, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Listbox from './Listbox.vue';
 
-config.global.mocks = {
-    $primevue: {
-        config: {
-            locale: {
-                aria: {
-                    trueLabel: 'trueLabel',
-                    falseLabel: 'falseLabel',
-                    nullLabel: 'nullLabel'
-                }
-            }
-        }
-    }
-};
-
 describe('Listbox.vue', () => {
     let wrapper;
 
diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue
index fb5be9f79..e41a64751 100755
--- a/components/lib/listbox/Listbox.vue
+++ b/components/lib/listbox/Listbox.vue
@@ -1,9 +1,9 @@
 <template>
-    <div :id="id" :class="containerClass" @focusout="onFocusout">
-        <span ref="firstHiddenFocusableElement" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="!disabled ? tabindex : -1" @focus="onFirstHiddenFocus"></span>
+    <div :id="id" :class="containerClass" @focusout="onFocusout" v-bind="ptm('root')">
+        <span ref="firstHiddenFocusableElement" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="!disabled ? tabindex : -1" @focus="onFirstHiddenFocus" v-bind="ptm('hiddenFirstFocusableEl')"></span>
         <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
-        <div v-if="filter" class="p-listbox-header">
-            <div class="p-listbox-filter-container">
+        <div v-if="filter" class="p-listbox-header" v-bind="ptm('header')">
+            <div class="p-listbox-filter-container" v-bind="ptm('filterContainer')">
                 <input
                     ref="filterInput"
                     v-model="filterValue"
@@ -18,19 +18,19 @@
                     @input="onFilterChange"
                     @blur="onFilterBlur"
                     @keydown="onFilterKeyDown"
-                    v-bind="filterInputProps"
+                    v-bind="{ ...filterInputProps, ...ptm('filterInput') }"
                 />
 
                 <slot name="filtericon">
-                    <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-listbox-filter-icon', filterIcon]" />
+                    <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-listbox-filter-icon', filterIcon]" v-bind="ptm('filterIcon')" />
                 </slot>
             </div>
-            <span role="status" aria-live="polite" class="p-hidden-accessible">
+            <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')">
                 {{ filterResultMessageText }}
             </span>
         </div>
-        <div ref="listWrapper" class="p-listbox-list-wrapper" :style="listStyle">
-            <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="listStyle" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
+        <div ref="listWrapper" class="p-listbox-list-wrapper" :style="listStyle" v-bind="ptm('wrapper')">
+            <VirtualScroller :ref="virtualScrollerRef" v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }" :style="listStyle" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
                 <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
                     <ul
                         :ref="(el) => listRef(el, contentRef)"
@@ -47,9 +47,10 @@
                         @focus="onListFocus"
                         @blur="onListBlur"
                         @keydown="onListKeyDown"
+                        v-bind="ptm('list')"
                     >
                         <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
-                            <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" class="p-listbox-item-group" role="option">
+                            <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" class="p-listbox-item-group" role="option" v-bind="ptm('itemGroup')">
                                 <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
                             </li>
                             <li
@@ -68,14 +69,15 @@
                                 @mousedown="onOptionMouseDown($event, getOptionIndex(i, getItemOptions))"
                                 @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
                                 @touchend="onOptionTouchEnd()"
+                                v-bind="getPTOptions(option, getItemOptions, i, 'item')"
                             >
                                 <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
                             </li>
                         </template>
-                        <li v-if="filterValue && (!items || (items && items.length === 0))" class="p-listbox-empty-message" role="option">
+                        <li v-if="filterValue && (!items || (items && items.length === 0))" class="p-listbox-empty-message" role="option" v-bind="ptm('emptyMessage')">
                             <slot name="emptyfilter">{{ emptyFilterMessageText }}</slot>
                         </li>
-                        <li v-else-if="!options || (options && options.length === 0)" class="p-listbox-empty-message" role="option">
+                        <li v-else-if="!options || (options && options.length === 0)" class="p-listbox-empty-message" role="option" v-bind="ptm('emptyMessage')">
                             <slot name="empty">{{ emptyMessageText }}</slot>
                         </li>
                     </ul>
@@ -86,25 +88,27 @@
             </VirtualScroller>
         </div>
         <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
-        <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible">
+        <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('emptyMessage')">
             {{ emptyMessageText }}
         </span>
-        <span role="status" aria-live="polite" class="p-hidden-accessible">
+        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')">
             {{ selectedMessageText }}
         </span>
-        <span ref="lastHiddenFocusableElement" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="!disabled ? tabindex : -1" @focus="onLastHiddenFocus"></span>
+        <span ref="lastHiddenFocusableElement" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="!disabled ? tabindex : -1" @focus="onLastHiddenFocus" v-bind="ptm('hiddenLastFocusableEl')"></span>
     </div>
 </template>
 
 <script>
 import { FilterService } from 'primevue/api';
-import SearchIcon from 'primevue/icon/search';
+import BaseComponent from 'primevue/basecomponent';
+import SearchIcon from 'primevue/icons/search';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
 
 export default {
     name: 'Listbox',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'filter'],
     props: {
         modelValue: null,
@@ -221,6 +225,15 @@ export default {
         getOptionRenderKey(option, index) {
             return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
         },
+        getPTOptions(option, itemOptions, index, key) {
+            return this.ptm(key, {
+                context: {
+                    selected: this.isSelected(option),
+                    focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),
+                    disabled: this.isOptionDisabled(option)
+                }
+            });
+        },
         isOptionDisabled(option) {
             return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
         },
diff --git a/components/lib/megamenu/MegaMenu.d.ts b/components/lib/megamenu/MegaMenu.d.ts
index 3f33559f8..d2dfe3b69 100755
--- a/components/lib/megamenu/MegaMenu.d.ts
+++ b/components/lib/megamenu/MegaMenu.d.ts
@@ -11,6 +11,150 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type MegaMenuPassThroughOptionType = MegaMenuPassThroughAttributes | ((options: MegaMenuPassThroughMethodOptions) => MegaMenuPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MegaMenuPassThroughMethodOptions {
+    props: MegaMenuProps;
+    state: MegaMenuState;
+    context: MegaMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MegaMenuProps.pt}
+ */
+export interface MegaMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MegaMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: MegaMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: MegaMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: MegaMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: MegaMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: MegaMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: MegaMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuIcon?: MegaMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: MegaMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the grid's DOM element.
+     */
+    grid?: MegaMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the column's DOM element.
+     */
+    column?: MegaMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenu header's DOM element.
+     */
+    submenuHeader?: MegaMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: MegaMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the start of the component.
+     */
+    start?: MegaMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the end of the component.
+     */
+    end?: MegaMenuPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface MegaMenuPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines focused item info
+ */
+export interface MegaMenuFocusedItemInfo {
+    /**
+     * Active item index
+     */
+    index: number;
+    /**
+     * Active item level
+     */
+    level: number;
+    /**
+     * Parent key info
+     */
+    parentKey: string;
+}
+
+/**
+ * Defines current inline state in MegaMenu component.
+ */
+export interface MegaMenuState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item info.
+     * @type {MegaMenuFocusedItemInfo}
+     */
+    focusedItemInfo: MegaMenuFocusedItemInfo;
+    /**
+     * Active item path.
+     * @type {MenuItem}
+     */
+    activeItem: MenuItem;
+}
+
+/**
+ * Defines current options in MegaMenu component.
+ */
+export interface MegaMenuContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in MegaMenu component.
  */
@@ -46,6 +190,11 @@ export interface MegaMenuProps {
      * Identifier of the underlying menu element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MegaMenuPassThroughOptions}
+     */
+    pt?: MegaMenuPassThroughOptions;
 }
 
 /**
@@ -79,6 +228,20 @@ export interface MegaMenuSlots {
          */
         active: boolean;
     }): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/megamenu/MegaMenu.vue b/components/lib/megamenu/MegaMenu.vue
index c0530c8b3..c9fd0fc78 100755
--- a/components/lib/megamenu/MegaMenu.vue
+++ b/components/lib/megamenu/MegaMenu.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :ref="containerRef" :id="id" :class="containerClass">
-        <div v-if="$slots.start" class="p-megamenu-start">
+    <div :ref="containerRef" :id="id" :class="containerClass" v-bind="ptm('root')">
+        <div v-if="$slots.start" class="p-megamenu-start" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
         <MegaMenuSub
@@ -18,28 +18,31 @@
             :focusedItemId="focused ? focusedItemId : undefined"
             :items="processedItems"
             :horizontal="horizontal"
-            :template="$slots"
+            :templates="$slots"
             :activeItem="activeItem"
             :exact="exact"
             :level="0"
+            :pt="pt"
             @focus="onFocus"
             @blur="onBlur"
             @keydown="onKeyDown"
             @item-click="onItemClick"
             @item-mouseenter="onItemMouseEnter"
         />
-        <div v-if="$slots.end" class="p-megamenu-end">
+        <div v-if="$slots.end" class="p-megamenu-end" v-bind="ptm('end')">
             <slot name="end"></slot>
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import MegaMenuSub from './MegaMenuSub.vue';
 
 export default {
     name: 'MegaMenu',
+    extends: BaseComponent,
     emits: ['focus', 'blur'],
     props: {
         model: {
diff --git a/components/lib/megamenu/MegaMenuSub.vue b/components/lib/megamenu/MegaMenuSub.vue
index 06fab2993..2cc6f877e 100644
--- a/components/lib/megamenu/MegaMenuSub.vue
+++ b/components/lib/megamenu/MegaMenuSub.vue
@@ -1,6 +1,6 @@
 <template>
-    <ul>
-        <li v-if="submenu" :class="getSubmenuHeaderClass(submenu)" :style="getItemProp(submenu, 'style')" role="presentation">{{ getItemLabel(submenu) }}</li>
+    <ul v-bind="ptm('menu')">
+        <li v-if="submenu" :class="getSubmenuHeaderClass(submenu)" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuHeader')">{{ getItemLabel(submenu) }}</li>
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
@@ -15,26 +15,41 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
+                v-bind="getPTOptions(processedItem, 'menuitem')"
             >
-                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)">
-                    <template v-if="!template.item">
+                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                    <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                                <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
-                                <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
+                            <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
-                            <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
-                            <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
-                            <component v-if="isItemGroup(processedItem)" :is="template.submenuicon || (horizontal ? 'AngleDownIcon' : 'AngleRightIcon')" :active="isItemActive(processedItem)" class="p-submenu-icon" />
+                        <a
+                            v-else
+                            v-ripple
+                            :href="getItemProp(processedItem, 'url')"
+                            :class="getItemActionClass(processedItem)"
+                            :target="getItemProp(processedItem, 'target')"
+                            tabindex="-1"
+                            aria-hidden="true"
+                            v-bind="getPTOptions(processedItem, 'action')"
+                        >
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <template v-if="isItemGroup(processedItem)">
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                            </template>
                         </a>
                     </template>
-                    <component v-else :is="template.item" :item="processedItem.item"></component>
+                    <component v-else :is="templates.item" :item="processedItem.item"></component>
                 </div>
-                <div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" class="p-megamenu-panel">
-                    <div class="p-megamenu-grid">
-                        <div v-for="col of processedItem.items" :key="getItemKey(col)" :class="getColumnClass(processedItem)">
+                <div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" class="p-megamenu-panel" v-bind="ptm('panel')">
+                    <div class="p-megamenu-grid" v-bind="ptm('grid')">
+                        <div v-for="col of processedItem.items" :key="getItemKey(col)" :class="getColumnClass(processedItem)" v-bind="ptm('column')">
                             <MegaMenuSub
                                 v-for="submenu of col"
                                 :key="getSubListKey(submenu)"
@@ -45,9 +60,10 @@
                                 :focusedItemId="focusedItemId"
                                 :submenu="submenu"
                                 :items="submenu.items"
-                                :template="template"
+                                :templates="templates"
                                 :exact="exact"
                                 :level="level + 1"
+                                :pt="pt"
                                 @item-click="$emit('item-click', $event)"
                                 @item-mouseenter="$emit('item-mouseenter', $event)"
                             />
@@ -55,19 +71,28 @@
                     </div>
                 </div>
             </li>
-            <li v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" :id="getItemId(processedItem)" :style="getItemProp(processedItem, 'style')" :class="getSeparatorItemClass(processedItem)" role="separator"></li>
+            <li
+                v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
+                :id="getItemId(processedItem)"
+                :style="getItemProp(processedItem, 'style')"
+                :class="getSeparatorItemClass(processedItem)"
+                role="separator"
+                v-bind="ptm('separator')"
+            ></li>
         </template>
     </ul>
 </template>
 
 <script>
-import AngleDownIcon from 'primevue/icon/angledown';
-import AngleRightIcon from 'primevue/icon/angleright';
+import BaseComponent from 'primevue/basecomponent';
+import AngleDownIcon from 'primevue/icons/angledown';
+import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'MegaMenuSub',
+    extends: BaseComponent,
     emits: ['item-click', 'item-mouseenter'],
     props: {
         menuId: {
@@ -94,7 +119,7 @@ export default {
             type: Number,
             default: 0
         },
-        template: {
+        templates: {
             type: Object,
             default: null
         },
@@ -126,6 +151,14 @@ export default {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
+        getPTOptions(processedItem, key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.isItemActive(processedItem),
+                    focused: this.isItemFocused(processedItem)
+                }
+            });
+        },
         isItemActive(processedItem) {
             return ObjectUtils.isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false;
         },
diff --git a/components/lib/menu/Menu.d.ts b/components/lib/menu/Menu.d.ts
index cc02860cb..3e22b5384 100755
--- a/components/lib/menu/Menu.d.ts
+++ b/components/lib/menu/Menu.d.ts
@@ -11,6 +11,114 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type MenuPassThroughOptionType = MenuPassThroughAttributes | ((options: MenuPassThroughMethodOptions) => MenuPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MenuPassThroughMethodOptions {
+    props: MenuProps;
+    state: MenuState;
+    context: MenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MenuProps.pt}
+ */
+export interface MenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenu header's DOM element.
+     */
+    submenuHeader?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the start of the component.
+     */
+    start?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the end of the component.
+     */
+    end?: MenuPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface MenuPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Menu component.
+ */
+export interface MenuState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Focused option index.
+     */
+    focusedOptionIndex: number;
+    /**
+     * Selected option index.
+     */
+    selectedOptionIndex: number;
+}
+
+/**
+ * Defines current options in Menu component.
+ */
+export interface MenuContext {
+    /**
+     * Current focused state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in Menu component.
  */
@@ -56,6 +164,11 @@ export interface MenuProps {
      * Identifier of the underlying input element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MenuPassThroughOptions}
+     */
+    pt?: MenuPassThroughOptions;
 }
 
 /**
@@ -80,6 +193,20 @@ export interface MenuSlots {
          */
         item: MenuItem;
     }): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/menu/Menu.vue b/components/lib/menu/Menu.vue
index 84910f1eb..e8cffe0d4 100644
--- a/components/lib/menu/Menu.vue
+++ b/components/lib/menu/Menu.vue
@@ -1,8 +1,8 @@
 <template>
     <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div v-if="popup ? overlayVisible : true" :ref="containerRef" :id="id" :class="containerClass" v-bind="$attrs" @click="onOverlayClick">
-                <div v-if="$slots.start" class="p-menu-start">
+            <div v-if="popup ? overlayVisible : true" :ref="containerRef" :id="id" :class="containerClass" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }">
+                <div v-if="$slots.start" class="p-menu-start" v-bind="ptm('start')">
                     <slot name="start"></slot>
                 </div>
                 <ul
@@ -17,22 +17,23 @@
                     @focus="onListFocus"
                     @blur="onListBlur"
                     @keydown="onListKeyDown"
+                    v-bind="ptm('menu')"
                 >
                     <template v-for="(item, i) of model" :key="label(item) + i.toString()">
                         <template v-if="item.items && visible(item) && !item.separator">
-                            <li v-if="item.items" :id="id + '_' + i" class="p-submenu-header" role="none">
+                            <li v-if="item.items" :id="id + '_' + i" class="p-submenu-header" role="none" v-bind="ptm('submenuHeader')">
                                 <slot name="item" :item="item">{{ label(item) }}</slot>
                             </li>
                             <template v-for="(child, j) of item.items" :key="child.label + i + '_' + j">
-                                <PVMenuitem v-if="visible(child) && !child.separator" :id="id + '_' + i + '_' + j" :item="child" :template="$slots.item" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" />
-                                <li v-else-if="visible(child) && child.separator" :key="'separator' + i + j" :class="separatorClass(item)" :style="child.style" role="separator"></li>
+                                <PVMenuitem v-if="visible(child) && !child.separator" :id="id + '_' + i + '_' + j" :item="child" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" />
+                                <li v-else-if="visible(child) && child.separator" :key="'separator' + i + j" :class="separatorClass(item)" :style="child.style" role="separator" v-bind="ptm('separator')"></li>
                             </template>
                         </template>
-                        <li v-else-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="separatorClass(item)" :style="item.style" role="separator"></li>
-                        <PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :template="$slots.item" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" />
+                        <li v-else-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="separatorClass(item)" :style="item.style" role="separator" v-bind="ptm('separator')"></li>
+                        <PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" />
                     </template>
                 </ul>
-                <div v-if="$slots.end" class="p-menu-end">
+                <div v-if="$slots.end" class="p-menu-end" v-bind="ptm('end')">
                     <slot name="end"></slot>
                 </div>
             </div>
@@ -41,6 +42,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
@@ -48,6 +50,7 @@ import Menuitem from './Menuitem.vue';
 
 export default {
     name: 'Menu',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['show', 'hide', 'focus', 'blur'],
     props: {
diff --git a/components/lib/menu/Menuitem.vue b/components/lib/menu/Menuitem.vue
index a95a14d07..293da0c81 100644
--- a/components/lib/menu/Menuitem.vue
+++ b/components/lib/menu/Menuitem.vue
@@ -1,34 +1,38 @@
 <template>
-    <li v-if="visible()" :id="id" :class="containerClass()" role="menuitem" :style="item.style" :aria-label="label()" :aria-disabled="disabled()">
-        <div class="p-menuitem-content" @click="onItemClick($event)">
-            <template v-if="!template">
+    <li v-if="visible()" :id="id" :class="containerClass()" role="menuitem" :style="item.style" :aria-label="label()" :aria-disabled="disabled()" v-bind="getPTOptions('menuitem')">
+        <div class="p-menuitem-content" @click="onItemClick($event)" v-bind="getPTOptions('content')">
+            <template v-if="!templates.item">
                 <router-link v-if="item.to && !disabled()" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
-                    <a v-ripple :href="href" :class="linkClass({ isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                        <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
-                        <span class="p-menuitem-text">{{ label() }}</span>
+                    <a v-ripple :href="href" :class="linkClass({ isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions('action')">
+                        <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="iconClass" />
+                        <span v-else-if="item.icon" :class="iconClass" v-bind="getPTOptions('icon')" />
+                        <span class="p-menuitem-text" v-bind="getPTOptions('label')">{{ label() }}</span>
                     </a>
                 </router-link>
-                <a v-else v-ripple :href="item.url" :class="linkClass()" :target="item.target" tabindex="-1" aria-hidden="true">
-                    <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
-                    <span class="p-menuitem-text">{{ label() }}</span>
+                <a v-else v-ripple :href="item.url" :class="linkClass()" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action')">
+                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="iconClass" />
+                    <span v-else-if="item.icon" :class="iconClass" v-bind="getPTOptions('icon')" />
+                    <span class="p-menuitem-text" v-bind="getPTOptions('label')">{{ label() }}</span>
                 </a>
             </template>
-            <component v-else :is="template" :item="item"></component>
+            <component v-else :is="templates.item" :item="item"></component>
         </div>
     </li>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Menuitem',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['item-click'],
     props: {
         item: null,
-        template: null,
+        templates: null,
         exact: null,
         id: null,
         focusedOptionId: null
@@ -37,6 +41,16 @@ export default {
         getItemProp(processedItem, name) {
             return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
         },
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    focused: this.isItemFocused()
+                }
+            });
+        },
+        isItemFocused() {
+            return this.focusedOptionId === this.id;
+        },
         onItemActionClick(event, navigate) {
             navigate && navigate(event);
         },
@@ -68,6 +82,11 @@ export default {
             return typeof this.item.label === 'function' ? this.item.label() : this.item.label;
         }
     },
+    computed: {
+        iconClass() {
+            return ['p-menuitem-icon', this.item.icon];
+        }
+    },
     directives: {
         ripple: Ripple
     }
diff --git a/components/lib/menubar/Menubar.d.ts b/components/lib/menubar/Menubar.d.ts
index 0c2070a26..7f248d4a6 100755
--- a/components/lib/menubar/Menubar.d.ts
+++ b/components/lib/menubar/Menubar.d.ts
@@ -11,6 +11,147 @@ import { ButtonHTMLAttributes, VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type MenubarPassThroughOptionType = MenubarPassThroughAttributes | ((options: MenubarPassThroughMethodOptions) => MenubarPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MenubarPassThroughMethodOptions {
+    props: MenubarProps;
+    state: MenubarState;
+    context: MenubarContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MenubarProps.pt}
+ */
+export interface MenubarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuIcon?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the mobile popup menu button's DOM element.
+     */
+    button?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the mobile popup menu button icon's DOM element.
+     */
+    popupIcon?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the start of the component.
+     */
+    start?: MenubarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the end of the component.
+     */
+    end?: MenubarPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface MenubarPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines focused item info
+ */
+export interface MenubarFocusedItemInfo {
+    /**
+     * Active item index
+     */
+    index: number;
+    /**
+     * Active item level
+     */
+    level: number;
+    /**
+     * Parent key info
+     */
+    parentKey: string;
+}
+
+/**
+ * Defines current inline state in Menubar component.
+ */
+export interface MenubarState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current mobile menu active state as a boolean.
+     * @defaultValue false
+     */
+    mobileActive: boolean;
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item info.
+     * @type {MenubarFocusedItemInfo}
+     */
+    focusedItemInfo: MenubarFocusedItemInfo;
+    /**
+     * Active item path.
+     * @type {MenubarFocusedItemInfo}
+     */
+    activeItemPath: MenubarFocusedItemInfo[];
+}
+
+/**
+ * Defines current options in Menubar component.
+ */
+export interface MenubarContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in Menubar component.
  */
@@ -36,6 +177,11 @@ export interface MenubarProps {
      * Identifier of the underlying input element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MenubarPassThroughOptions}
+     */
+    pt?: MenubarPassThroughOptions;
 }
 
 /**
@@ -61,9 +207,9 @@ export interface MenubarSlots {
         item: MenuItem;
     }): VNode[];
     /**
-     * Custom bar icon template.
+     * Custom popup icon template on responsive mode.
      */
-    baricon(): VNode[];
+    popupicon(): VNode[];
     /**
      * Custom submenu icon template.
      */
@@ -77,6 +223,20 @@ export interface MenubarSlots {
          */
         active: boolean;
     }): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/menubar/Menubar.spec.js b/components/lib/menubar/Menubar.spec.js
index 1a7124fc4..9c3e39c65 100644
--- a/components/lib/menubar/Menubar.spec.js
+++ b/components/lib/menubar/Menubar.spec.js
@@ -1,18 +1,6 @@
-import { config, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Menubar from './Menubar.vue';
 
-config.global.mocks = {
-    $primevue: {
-        config: {
-            locale: {
-                aria: {
-                    navigation: 'Navigation'
-                }
-            }
-        }
-    }
-};
-
 describe('Menubar.vue', () => {
     let wrapper;
 
diff --git a/components/lib/menubar/Menubar.vue b/components/lib/menubar/Menubar.vue
index a7ffcf325..7f8193129 100755
--- a/components/lib/menubar/Menubar.vue
+++ b/components/lib/menubar/Menubar.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :ref="containerRef" :class="containerClass">
-        <div v-if="$slots.start" class="p-menubar-start">
+    <div :ref="containerRef" :class="containerClass" v-bind="ptm('root')">
+        <div v-if="$slots.start" class="p-menubar-start" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
         <a
@@ -15,10 +15,10 @@
             :aria-label="$primevue.config.locale.aria.navigation"
             @click="menuButtonClick($event)"
             @keydown="menuButtonKeydown($event)"
-            v-bind="buttonProps"
+            v-bind="{ ...buttonProps, ...ptm('button') }"
         >
-            <slot name="baricon">
-                <component :is="'BarsIcon'" />
+            <slot name="popupicon">
+                <BarsIcon v-bind="ptm('popupIcon')" />
             </slot>
         </a>
         <MenubarSub
@@ -27,7 +27,7 @@
             class="p-menubar-root-list"
             role="menubar"
             :items="processedItems"
-            :template="$slots"
+            :templates="$slots"
             :root="true"
             :mobileActive="mobileActive"
             tabindex="0"
@@ -39,25 +39,28 @@
             :level="0"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
+            :pt="pt"
             @focus="onFocus"
             @blur="onBlur"
             @keydown="onKeyDown"
             @item-click="onItemClick"
             @item-mouseenter="onItemMouseEnter"
         />
-        <div v-if="$slots.end" class="p-menubar-end">
+        <div v-if="$slots.end" class="p-menubar-end" v-bind="ptm('end')">
             <slot name="end"></slot>
         </div>
     </div>
 </template>
 
 <script>
-import BarsIcon from 'primevue/icon/bars';
+import BaseComponent from 'primevue/basecomponent';
+import BarsIcon from 'primevue/icons/bars';
 import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
 import MenubarSub from './MenubarSub.vue';
 
 export default {
     name: 'Menubar',
+    extends: BaseComponent,
     emits: ['focus', 'blur'],
     props: {
         model: {
diff --git a/components/lib/menubar/MenubarSub.vue b/components/lib/menubar/MenubarSub.vue
index bdca322ea..fbf563d7f 100755
--- a/components/lib/menubar/MenubarSub.vue
+++ b/components/lib/menubar/MenubarSub.vue
@@ -1,5 +1,5 @@
 <template>
-    <ul>
+    <ul v-bind="ptm('menu')">
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
@@ -14,22 +14,37 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
+                v-bind="getPTOptions(processedItem, 'menuitem')"
             >
-                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)">
-                    <template v-if="!template.item">
+                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                    <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                                <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
-                                <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
+                            <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
-                            <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
-                            <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
-                            <component v-if="getItemProp(processedItem, 'items')" :is="template.submenuicon || (root ? 'AngleDownIcon' : 'AngleRightIcon')" :root="root" :active="isItemActive(processedItem)" class="p-submenu-icon" />
+                        <a
+                            v-else
+                            v-ripple
+                            :href="getItemProp(processedItem, 'url')"
+                            :class="getItemActionClass(processedItem)"
+                            :target="getItemProp(processedItem, 'target')"
+                            tabindex="-1"
+                            aria-hidden="true"
+                            v-bind="getPTOptions(processedItem, 'action')"
+                        >
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <template v-if="getItemProp(processedItem, 'items')">
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" class="p-submenu-icon" />
+                                <component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                            </template>
                         </a>
                     </template>
-                    <component v-else :is="template.item" :item="processedItem.item"></component>
+                    <component v-else :is="templates.item" :item="processedItem.item"></component>
                 </div>
                 <MenubarSub
                     v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
@@ -40,26 +55,36 @@
                     :items="processedItem.items"
                     :mobileActive="mobileActive"
                     :activeItemPath="activeItemPath"
-                    :template="template"
+                    :templates="templates"
                     :exact="exact"
                     :level="level + 1"
+                    :pt="pt"
                     @item-click="$emit('item-click', $event)"
                     @item-mouseenter="$emit('item-mouseenter', $event)"
                 />
             </li>
-            <li v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" :id="getItemId(processedItem)" :style="getItemProp(processedItem, 'style')" :class="getSeparatorItemClass(processedItem)" role="separator"></li>
+            <li
+                v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
+                :id="getItemId(processedItem)"
+                :style="getItemProp(processedItem, 'style')"
+                :class="getSeparatorItemClass(processedItem)"
+                role="separator"
+                v-bind="ptm('separator')"
+            ></li>
         </template>
     </ul>
 </template>
 
 <script>
-import AngleDownIcon from 'primevue/icon/angledown';
-import AngleRightIcon from 'primevue/icon/angleright';
+import BaseComponent from 'primevue/basecomponent';
+import AngleDownIcon from 'primevue/icons/angledown';
+import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'MenubarSub',
+    extends: BaseComponent,
     emits: ['item-mouseenter', 'item-click'],
     props: {
         items: {
@@ -78,7 +103,7 @@ export default {
             type: Boolean,
             default: false
         },
-        template: {
+        templates: {
             type: Object,
             default: null
         },
@@ -117,6 +142,14 @@ export default {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
+        getPTOptions(processedItem, key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.isItemActive(processedItem),
+                    focused: this.isItemFocused(processedItem)
+                }
+            });
+        },
         isItemActive(processedItem) {
             return this.activeItemPath.some((path) => path.key === processedItem.key);
         },
diff --git a/components/lib/message/Message.d.ts b/components/lib/message/Message.d.ts
index cf4febf11..099b4c88a 100755
--- a/components/lib/message/Message.d.ts
+++ b/components/lib/message/Message.d.ts
@@ -10,6 +10,65 @@
 import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type MessagePassThroughOptionType = MessagePassThroughAttributes | ((options: MessagePassThroughMethodOptions) => MessagePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MessagePassThroughMethodOptions {
+    props: MessageProps;
+    state: MessageState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MessageProps.pt}
+ */
+export interface MessagePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MessagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: MessagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: MessagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the text's DOM element.
+     */
+    text?: MessagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button's DOM element.
+     */
+    button?: MessagePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button icon's DOM element.
+     */
+    buttonIcon?: MessagePassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface MessagePassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Message component.
+ */
+export interface MessageState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+}
+
 /**
  * Defines valid properties in Message component.
  */
@@ -40,12 +99,18 @@ export interface MessageProps {
     icon?: string | undefined;
     /**
      * Icon to display in the message close button.
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**
      * Uses to pass all properties of the HTMLButtonElement to the close button.
      */
     closeButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MessagePassThroughOptions}
+     */
+    pt?: MessagePassThroughOptions;
 }
 
 /**
@@ -59,11 +124,21 @@ export interface MessageSlots {
     /**
      * Custom message icon template.
      */
-    messageicon(): VNode[];
+    messageicon(scope: {
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
     /**
      * Custom close icon template.
      */
-    closeicon(): VNode[];
+    closeicon(scope: {
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/message/Message.spec.js b/components/lib/message/Message.spec.js
index ac0e7e89d..523fbd47b 100644
--- a/components/lib/message/Message.spec.js
+++ b/components/lib/message/Message.spec.js
@@ -1,19 +1,6 @@
-import { config, mount } from '@vue/test-utils';
-import PrimeVue from 'primevue/config';
+import { mount } from '@vue/test-utils';
 import Message from './Message.vue';
 
-config.global.mocks = {
-    $primevue: {
-        config: {
-            locale: {
-                aria: {
-                    close: 'Close'
-                }
-            }
-        }
-    }
-};
-
 describe('Message.vue', () => {
     let wrapper;
 
diff --git a/components/lib/message/Message.vue b/components/lib/message/Message.vue
index f447df6e0..2727dd94f 100755
--- a/components/lib/message/Message.vue
+++ b/components/lib/message/Message.vue
@@ -1,16 +1,17 @@
 <template>
     <transition name="p-message" appear>
-        <div v-show="visible" :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true">
-            <div class="p-message-wrapper">
-                <slot name="messageicon">
-                    <component :is="icon ? 'i' : iconComponent" :class="['p-message-icon', icon]"></component>
+        <div v-show="visible" :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('root')">
+            <div class="p-message-wrapper" v-bind="ptm('wrapper')">
+                <slot name="messageicon" class="p-message-icon">
+                    <component :is="icon ? 'span' : iconComponent" :class="['p-message-icon', icon]" v-bind="ptm('icon')"></component>
                 </slot>
-                <div class="p-message-text">
+                <div class="p-message-text" v-bind="ptm('text')">
                     <slot></slot>
                 </div>
-                <button v-if="closable" v-ripple class="p-message-close p-link" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="closeButtonProps">
-                    <slot name="closeicon">
-                        <component :is="closeIcon ? 'i' : 'TimesIcon'" :class="['p-message-close-icon', closeIcon]"></component>
+                <button v-if="closable" v-ripple class="p-message-close p-link" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="{ ...closeButtonProps, ...ptm('button') }">
+                    <slot name="closeicon" class="p-message-close-icon">
+                        <i v-if="closeIcon" :class="['p-message-close-icon', closeIcon]" v-bind="ptm('buttonIcon')" />
+                        <TimesIcon v-else class="p-message-close-icon" v-bind="ptm('buttonIcon')" />
                     </slot>
                 </button>
             </div>
@@ -19,15 +20,17 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import CheckIcon from 'primevue/icons/check';
+import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
+import InfoCircleIcon from 'primevue/icons/infocircle';
+import TimesIcon from 'primevue/icons/times';
+import TimesCircleIcon from 'primevue/icons/timescircle';
 import Ripple from 'primevue/ripple';
-import TimesIcon from 'primevue/icon/times';
-import InfoCircleIcon from 'primevue/icon/infocircle';
-import CheckIcon from 'primevue/icon/check';
-import ExclamationTriangleIcon from 'primevue/icon/exclamationtriangle';
-import TimesCircleIcon from 'primevue/icon/timescircle';
 
 export default {
     name: 'Message',
+    extends: BaseComponent,
     emits: ['close'],
     props: {
         severity: {
diff --git a/components/lib/multiselect/MultiSelect.d.ts b/components/lib/multiselect/MultiSelect.d.ts
index 38c46e635..44556fb42 100755
--- a/components/lib/multiselect/MultiSelect.d.ts
+++ b/components/lib/multiselect/MultiSelect.d.ts
@@ -9,7 +9,18 @@
  */
 import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
-import { VirtualScrollerItemOptions, VirtualScrollerProps } from '../virtualscroller';
+import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
+
+export declare type MultiSelectPassThroughOptionType = MultiSelectPassThroughAttributes | ((options: MultiSelectPassThroughMethodOptions) => MultiSelectPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MultiSelectPassThroughMethodOptions {
+    props: MultiSelectProps;
+    state: MultiSelectState;
+    context: MultiSelectContext;
+}
 
 /**
  * Custom change event.
@@ -56,6 +67,212 @@ export interface MultiSelectFilterEvent {
     value: string;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MultiSelectProps.pt}
+ */
+export interface MultiSelectPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label container's DOM element.
+     */
+    labelContainer?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the token's DOM element.
+     */
+    token?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the token label's DOM element.
+     */
+    tokenLabel?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the remove token icon's DOM element.
+     */
+    removeTokenIcon?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the trigger's DOM element.
+     */
+    trigger?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the trigger icon's DOM element.
+     */
+    triggerIcon?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the dropdown icon's DOM element.
+     */
+    dropdownIcon?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header checkbox container's DOM element.
+     */
+    headerCheckboxContainer?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header checkbox's DOM element.
+     */
+    headerCheckbox?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter container's DOM element.
+     */
+    filterContainer?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter input's DOM element.
+     */
+    filterInput?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter icon's DOM element.
+     */
+    filterIcon?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the VirtualScroller component.
+     * @see {@link VirtualScrollerPassThroughOptionType}
+     */
+    virtualScroller?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item group's DOM element.
+     */
+    itemGroup?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox container's DOM element.
+     */
+    checkboxContainer?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox's DOM element.
+     */
+    checkbox?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox icon's DOM element.
+     */
+    checkboxIcon?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the option's DOM element.
+     */
+    option?: MultiSelectPassThroughOptionType;
+
+    /**
+     * Uses to pass attributes to the emptyMessage's DOM element.
+     */
+    emptyMessage?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden first focusable element's DOM element.
+     */
+    hiddenFirstFocusableEl?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden filter result's DOM element.
+     */
+    hiddenFilterResult?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden selected message's DOM element.
+     */
+    hiddenSelectedMessage?: MultiSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden last focusable element's DOM element.
+     */
+    hiddenLastFocusableEl?: MultiSelectPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface MultiSelectPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in MultiSelect component.
+ */
+export interface MultiSelectState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item index as a number.
+     * @defaultvalue -1
+     */
+    focusedOptionIndex: number;
+    /**
+     * Current filter value state as a string.
+     */
+    filterValue: string;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+}
+
+/**
+ * Defines current options in MultiSelect component.
+ */
+export interface MultiSelectContext {
+    /**
+     * Current selection state of the item as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current focus state of the item as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in MultiSelect component.
  */
@@ -191,26 +408,32 @@ export interface MultiSelectProps {
     loading?: boolean | undefined;
     /**
      * Icon to display in the checkboxes.
+     * @deprecated since v3.27.0. Use 'checkboxicon' slot.
      */
     checkboxIcon?: string | undefined;
     /**
      * Icon to display in the dropdown close button.
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**
      * Icon to display in the dropdown.
+     * @deprecated since v3.27.0. Use 'dropdownicon' slot.
      */
     dropdownIcon?: string | undefined;
     /**
      * Icon to display in filter input.
+     * @deprecated since v3.27.0. Use 'filtericon' slot.
      */
     filterIcon?: string | undefined;
     /**
      * Icon to display in loading state.
+     * @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
     /**
      * Icon to display in chip remove action.
+     * @deprecated since v3.27.0. Use 'removetokenicon' slot.
      */
     removeTokenIcon?: string | undefined;
     /**
@@ -275,6 +498,11 @@ export interface MultiSelectProps {
      * Identifier of the underlying input element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MultiSelectPassThroughOptions}
+     */
+    pt?: MultiSelectPassThroughOptions;
 }
 
 /**
@@ -307,6 +535,7 @@ export interface MultiSelectSlots {
     }): VNode[];
     /**
      * Custom indicator template.
+     * @deprecated since v3.27.0. Use 'loadingicon and dropdownicon' slot.
      */
     indicator(): VNode[];
     /**
@@ -411,7 +640,16 @@ export interface MultiSelectSlots {
     /**
      * Custom remove token icon template.
      */
-    removetokenicon(): VNode[];
+    removetokenicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+        /**
+         * Remove token icon function.
+         */
+        onClick: void;
+    }): VNode[];
     /**
      * Custom header checkbox icon template.
      * @param {Object} scope - header checkbox icon slot's params.
@@ -421,15 +659,29 @@ export interface MultiSelectSlots {
          * Options of the loader items for virtualscroller
          */
         allSelected: boolean;
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
     }): VNode[];
     /**
      * Custom filter icon template.
      */
-    filtericon(): VNode[];
+    filtericon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom close icon template.
      */
-    closeicon(): VNode[];
+    closeicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom item checkbox icon template.
      * @param {Object} scope - header checkbox icon slot's params.
@@ -439,6 +691,29 @@ export interface MultiSelectSlots {
          * Options of the loader items for virtualscroller
          */
         selected: boolean;
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom loading icon template.
+     * @param {Object} scope - loading icon slot's params.
+     */
+    loadingicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom dropdown icon template.
+     */
+    dropdownicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
     }): VNode[];
 }
 
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index 8128d6f9e..208fdeae8 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -1,6 +1,6 @@
 <template>
-    <div ref="container" :class="containerClass" @click="onContainerClick">
-        <div class="p-hidden-accessible">
+    <div ref="container" :class="containerClass" @click="onContainerClick" v-bind="ptm('root')">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
             <input
                 ref="focusInput"
                 :id="inputId"
@@ -19,22 +19,23 @@
                 @focus="onFocus"
                 @blur="onBlur"
                 @keydown="onKeyDown"
-                v-bind="inputProps"
+                v-bind="{ ...inputProps, ...ptm('input') }"
             />
         </div>
-        <div class="p-multiselect-label-container">
-            <div :class="labelClass">
+        <div class="p-multiselect-label-container" v-bind="ptm('labelContainer')">
+            <div :class="labelClass" v-bind="ptm('label')">
                 <slot name="value" :value="modelValue" :placeholder="placeholder">
                     <template v-if="display === 'comma'">
                         {{ label || 'empty' }}
                     </template>
                     <template v-else-if="display === 'chip'">
-                        <div v-for="item of chipSelectedItems" :key="getLabelByValue(item)" class="p-multiselect-token">
+                        <div v-for="item of chipSelectedItems" :key="getLabelByValue(item)" class="p-multiselect-token" v-bind="ptm('token')">
                             <slot name="chip" :value="item">
-                                <span class="p-multiselect-token-label">{{ getLabelByValue(item) }}</span>
+                                <span class="p-multiselect-token-label" v-bind="ptm('tokenLabel')">{{ getLabelByValue(item) }}</span>
                             </slot>
-                            <slot v-if="!disabled" name="removetokenicon">
-                                <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-multiselect-token-icon', removeTokenIcon]" @click.stop="removeOption($event, item)" />
+                            <slot v-if="!disabled" name="removetokenicon" class="p-multiselect-token-icon" :onClick="(event) => removeOption(event, item)">
+                                <span v-if="removeTokenIcon" :class="['p-multiselect-token-icon', removeTokenIcon]" @click.stop="removeOption($event, item)" v-bind="ptm('removeTokenIcon')" />
+                                <TimesCircleIcon v-else class="p-multiselect-token-icon" @click.stop="removeOption($event, item)" v-bind="ptm('removeTokenIcon')" />
                             </slot>
                         </div>
                         <template v-if="!modelValue || modelValue.length === 0">{{ placeholder || 'empty' }}</template>
@@ -42,29 +43,32 @@
                 </slot>
             </div>
         </div>
-        <div class="p-multiselect-trigger">
-            <slot name="indicator">
-                <component v-if="loading" :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-multiselect-trigger-icon', loadingIcon]" aria-hidden="true" />
-                <component v-else :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-multiselect-trigger-icon', dropdownIcon]" aria-hidden="true" />
+        <div class="p-multiselect-trigger" v-bind="ptm('trigger')">
+            <slot v-if="loading" name="loadingicon" class="p-multiselect-trigger-icon">
+                <span v-if="loadingIcon" :class="['p-multiselect-trigger-icon pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('triggerIcon')" />
+                <SpinnerIcon v-else class="p-multiselect-trigger-icon" spin aria-hidden="true" v-bind="ptm('triggerIcon')" />
+            </slot>
+            <slot v-else name="dropdownicon" class="p-multiselect-trigger-icon">
+                <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-multiselect-trigger-icon', dropdownIcon]" aria-hidden="true" v-bind="ptm('dropdownIcon')" />
             </slot>
         </div>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div v-if="overlayVisible" :ref="overlayRef" :style="panelStyle" :class="panelStyleClass" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="panelProps">
-                    <span ref="firstHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onFirstHiddenFocus"></span>
+                <div v-if="overlayVisible" :ref="overlayRef" :style="panelStyle" :class="panelStyleClass" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="{ ...panelProps, ...ptm('panel') }">
+                    <span ref="firstHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onFirstHiddenFocus" v-bind="ptm('hiddenFirstFocusableEl')"></span>
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
-                    <div v-if="(showToggleAll && selectionLimit == null) || filter" class="p-multiselect-header">
-                        <div v-if="showToggleAll && selectionLimit == null" :class="headerCheckboxClass" @click="onToggleAll">
-                            <div class="p-hidden-accessible">
-                                <input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur" />
+                    <div v-if="(showToggleAll && selectionLimit == null) || filter" class="p-multiselect-header" v-bind="ptm('header')">
+                        <div v-if="showToggleAll && selectionLimit == null" :class="headerCheckboxClass" @click="onToggleAll" v-bind="ptm('headerCheckboxContainer')">
+                            <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
+                                <input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur" v-bind="ptm('headerCheckbox')" />
                             </div>
-                            <div :class="['p-checkbox-box', { 'p-highlight': allSelected, 'p-focus': headerCheckboxFocused }]">
-                                <slot name="headercheckboxicon" :allSelected="allSelected">
-                                    <component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: allSelected }]" />
+                            <div :class="['p-checkbox-box', { 'p-highlight': allSelected, 'p-focus': headerCheckboxFocused }]" v-bind="getHeaderCheckboxPTOptions('headerCheckbox')">
+                                <slot name="headercheckboxicon" :allSelected="allSelected" class="p-checkbox-icon">
+                                    <component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: allSelected }]" v-bind="getHeaderCheckboxPTOptions('headerCheckboxIcon')" />
                                 </slot>
                             </div>
                         </div>
-                        <div v-if="filter" class="p-multiselect-filter-container">
+                        <div v-if="filter" class="p-multiselect-filter-container" v-bind="ptm('filterContainer')">
                             <input
                                 ref="filterInput"
                                 type="text"
@@ -79,27 +83,34 @@
                                 @keydown="onFilterKeyDown"
                                 @blur="onFilterBlur"
                                 @input="onFilterChange"
-                                v-bind="filterInputProps"
+                                v-bind="{ ...filterInputProps, ...ptm('filterInput') }"
                             />
-                            <slot name="filtericon">
-                                <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-multiselect-filter-icon', filterIcon]" />
+                            <slot name="filtericon" class="p-multiselect-filter-icon">
+                                <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-multiselect-filter-icon', filterIcon]" v-bind="ptm('filterIcon')" />
                             </slot>
                         </div>
-                        <span v-if="filter" role="status" aria-live="polite" class="p-hidden-accessible">
+                        <span v-if="filter" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')">
                             {{ filterResultMessageText }}
                         </span>
-                        <button v-ripple class="p-multiselect-close p-link" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="closeButtonProps">
-                            <slot name="closeicon">
-                                <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-multiselect-close-icon', closeIcon]" />
+                        <button v-ripple class="p-multiselect-close p-link" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="{ ...closeButtonProps, ...ptm('closeButton') }">
+                            <slot name="closeicon" class="p-multiselect-close-icon">
+                                <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-multiselect-close-icon', closeIcon]" v-bind="ptm('closeIcon')" />
                             </slot>
                         </button>
                     </div>
-                    <div class="p-multiselect-items-wrapper" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }">
-                        <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled">
+                    <div class="p-multiselect-items-wrapper" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')">
+                        <VirtualScroller :ref="virtualScrollerRef" v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled">
                             <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
-                                <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-multiselect-items p-component', styleClass]" :style="contentStyle" role="listbox" aria-multiselectable="true">
+                                <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-multiselect-items p-component', styleClass]" :style="contentStyle" role="listbox" aria-multiselectable="true" v-bind="ptm('list')">
                                     <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
-                                        <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" class="p-multiselect-item-group" role="option">
+                                        <li
+                                            v-if="isOptionGroup(option)"
+                                            :id="id + '_' + getOptionIndex(i, getItemOptions)"
+                                            :style="{ height: itemSize ? itemSize + 'px' : undefined }"
+                                            class="p-multiselect-item-group"
+                                            role="option"
+                                            v-bind="ptm('itemGroup')"
+                                        >
                                             <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
                                         </li>
                                         <li
@@ -116,23 +127,28 @@
                                             :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
                                             @click="onOptionSelect($event, option, getOptionIndex(i, getItemOptions), true)"
                                             @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
+                                            v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'item')"
                                         >
-                                            <div class="p-checkbox p-component">
-                                                <div :class="['p-checkbox-box', { 'p-highlight': isSelected(option) }]">
-                                                    <slot name="itemcheckboxicon" :selected="isSelected(option)">
-                                                        <component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: isSelected(option) }]" />
+                                            <div class="p-checkbox p-component" v-bind="ptm('checkboxContainer')">
+                                                <div :class="['p-checkbox-box', { 'p-highlight': isSelected(option) }]" v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'checkbox')">
+                                                    <slot name="itemcheckboxicon" :selected="isSelected(option)" class="p-checkbox-icon">
+                                                        <component
+                                                            :is="checkboxIcon ? 'span' : 'CheckIcon'"
+                                                            :class="['p-checkbox-icon', { [checkboxIcon]: isSelected(option) }]"
+                                                            v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'checkboxIcon')"
+                                                        />
                                                     </slot>
                                                 </div>
                                             </div>
                                             <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
-                                                <span>{{ getOptionLabel(option) }}</span>
+                                                <span v-bind="ptm('option')">{{ getOptionLabel(option) }}</span>
                                             </slot>
                                         </li>
                                     </template>
-                                    <li v-if="filterValue && (!items || (items && items.length === 0))" class="p-multiselect-empty-message" role="option">
+                                    <li v-if="filterValue && (!items || (items && items.length === 0))" class="p-multiselect-empty-message" role="option" v-bind="ptm('emptyMessage')">
                                         <slot name="emptyfilter">{{ emptyFilterMessageText }}</slot>
                                     </li>
-                                    <li v-else-if="!options || (options && options.length === 0)" class="p-multiselect-empty-message" role="option">
+                                    <li v-else-if="!options || (options && options.length === 0)" class="p-multiselect-empty-message" role="option" v-bind="ptm('emptyMessage')">
                                         <slot name="empty">{{ emptyMessageText }}</slot>
                                     </li>
                                 </ul>
@@ -143,13 +159,13 @@
                         </VirtualScroller>
                     </div>
                     <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
-                    <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible">
+                    <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('emptyMessage')">
                         {{ emptyMessageText }}
                     </span>
-                    <span role="status" aria-live="polite" class="p-hidden-accessible">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')">
                         {{ selectedMessageText }}
                     </span>
-                    <span ref="lastHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onLastHiddenFocus"></span>
+                    <span ref="lastHiddenFocusableElementOnOverlay" role="presentation" aria-hidden="true" class="p-hidden-accessible p-hidden-focusable" :tabindex="0" @focus="onLastHiddenFocus" v-bind="ptm('hiddenLastFocusableEl')"></span>
                 </div>
             </transition>
         </Portal>
@@ -158,12 +174,13 @@
 
 <script>
 import { FilterService } from 'primevue/api';
-import CheckIcon from 'primevue/icon/check';
-import ChevronDownIcon from 'primevue/icon/chevrondown';
-import SearchIcon from 'primevue/icon/search';
-import SpinnerIcon from 'primevue/icon/spinner';
-import TimesIcon from 'primevue/icon/times';
-import TimesCircleIcon from 'primevue/icon/timescircle';
+import BaseComponent from 'primevue/basecomponent';
+import CheckIcon from 'primevue/icons/check';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import SearchIcon from 'primevue/icons/search';
+import SpinnerIcon from 'primevue/icons/spinner';
+import TimesIcon from 'primevue/icons/times';
+import TimesCircleIcon from 'primevue/icons/timescircle';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
@@ -172,6 +189,7 @@ import VirtualScroller from 'primevue/virtualscroller';
 
 export default {
     name: 'MultiSelect',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter', 'selectall-change'],
     props: {
         modelValue: null,
@@ -393,6 +411,23 @@ export default {
         getOptionRenderKey(option) {
             return this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option);
         },
+        getHeaderCheckboxPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    selected: this.allSelected,
+                    focused: this.headerCheckboxFocused
+                }
+            });
+        },
+        getCheckboxPTOptions(option, itemOptions, index, key) {
+            return this.ptm(key, {
+                context: {
+                    selected: this.isSelected(option),
+                    focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),
+                    disabled: this.isOptionDisabled(option)
+                }
+            });
+        },
         isOptionDisabled(option) {
             if (this.maxSelectionLimitReached && !this.isSelected(option)) {
                 return true;
diff --git a/components/lib/orderlist/OrderList.d.ts b/components/lib/orderlist/OrderList.d.ts
index c4f92c2fc..0d276f0fb 100755
--- a/components/lib/orderlist/OrderList.d.ts
+++ b/components/lib/orderlist/OrderList.d.ts
@@ -8,8 +8,19 @@
  *
  */
 import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
+import { ButtonPassThroughOptionType } from '../button';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type OrderListPassThroughOptionType = OrderListPassThroughAttributes | ((options: OrderListPassThroughMethodOptions) => OrderListPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface OrderListPassThroughMethodOptions {
+    props: OrderListProps;
+    state: OrderListState;
+}
+
 /**
  * Custom reorder event
  * @see {@link OrderListEmits.reorder}
@@ -44,6 +55,84 @@ export interface OrderListSelectionChangeEvent {
     value: any[];
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link OrderListProps.pt}
+ */
+export interface OrderListPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: OrderListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the controls' DOM element.
+     */
+    controls?: OrderListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveUpButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveTopButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveDownButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveBottomButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: OrderListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: OrderListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: OrderListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: OrderListPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface OrderListPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in OrderList component.
+ */
+export interface OrderListState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current id state as a string.
+     */
+    d_selection: any[];
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item index as a number.
+     * @defaultvalue -1
+     */
+    focusedOptionIndex: number;
+}
+
 /**
  * Defines valid properties in OrderList component.
  */
@@ -117,6 +206,11 @@ export interface OrderListProps {
      * Identifier of the underlying list element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {OrderListPassThroughOptions}
+     */
+    pt?: OrderListPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue
index b4eb1d9bc..61c5f2c44 100755
--- a/components/lib/orderlist/OrderList.vue
+++ b/components/lib/orderlist/OrderList.vue
@@ -1,31 +1,39 @@
 <template>
-    <div :class="containerClass">
-        <div class="p-orderlist-controls">
+    <div :class="containerClass" v-bind="ptm('root')">
+        <div class="p-orderlist-controls" v-bind="ptm('controls')">
             <slot name="controlsstart"></slot>
-            <OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps">
-                <slot>
-                    <component :is="$slots.moveupicon || 'AngleUpIcon'" />
-                </slot>
+            <OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps" :pt="ptm('moveUpButton')">
+                <template #icon>
+                    <slot name="moveupicon">
+                        <AngleUpIcon v-bind="ptm('moveUpButton')['icon']" />
+                    </slot>
+                </template>
             </OLButton>
-            <OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps">
-                <slot name="movetopicon">
-                    <AngleDoubleUpIcon />
-                </slot>
+            <OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps" :pt="ptm('moveTopButton')">
+                <template #icon>
+                    <slot name="movetopicon">
+                        <AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" />
+                    </slot>
+                </template>
             </OLButton>
-            <OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps">
-                <slot name="movedownicon">
-                    <AngleDownIcon />
-                </slot>
+            <OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps" :pt="ptm('moveDownButton')">
+                <template #icon>
+                    <slot name="movedownicon">
+                        <AngleDownIcon v-bind="ptm('moveDownButton')['icon']" />
+                    </slot>
+                </template>
             </OLButton>
-            <OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps">
-                <slot name="movebottomicon">
-                    <AngleDoubleDownIcon />
-                </slot>
+            <OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps" :pt="ptm('moveBottomButton')">
+                <template #icon>
+                    <slot name="movebottomicon">
+                        <AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" />
+                    </slot>
+                </template>
             </OLButton>
             <slot name="controlsend"></slot>
         </div>
-        <div class="p-orderlist-list-container">
-            <div v-if="$slots.header" class="p-orderlist-header">
+        <div class="p-orderlist-list-container" v-bind="ptm('container')">
+            <div v-if="$slots.header" class="p-orderlist-header" v-bind="ptm('header')">
                 <slot name="header"></slot>
             </div>
             <transition-group
@@ -44,10 +52,20 @@
                 @focus="onListFocus"
                 @blur="onListBlur"
                 @keydown="onListKeyDown"
-                v-bind="listProps"
+                v-bind="{ ...listProps, ...ptm('list') }"
             >
                 <template v-for="(item, i) of modelValue" :key="getItemKey(item, i)">
-                    <li :id="id + '_' + i" v-ripple role="option" :class="itemClass(item, `${id}_${i}`)" @click="onItemClick($event, item, i)" @touchend="onItemTouchEnd" :aria-selected="isSelected(item)" @mousedown="onOptionMouseDown(i)">
+                    <li
+                        :id="id + '_' + i"
+                        v-ripple
+                        role="option"
+                        :class="itemClass(item, `${id}_${i}`)"
+                        @click="onItemClick($event, item, i)"
+                        @touchend="onItemTouchEnd"
+                        :aria-selected="isSelected(item)"
+                        @mousedown="onOptionMouseDown(i)"
+                        v-bind="getPTOptions(item, 'item')"
+                    >
                         <slot name="item" :item="item" :index="i"> </slot>
                     </li>
                 </template>
@@ -57,16 +75,18 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
-import AngleDoubleDownIcon from 'primevue/icon/angledoubledown';
-import AngleDoubleUpIcon from 'primevue/icon/angledoubleup';
-import AngleDownIcon from 'primevue/icon/angledown';
-import AngleUpIcon from 'primevue/icon/angleup';
+import AngleDoubleDownIcon from 'primevue/icons/angledoubledown';
+import AngleDoubleUpIcon from 'primevue/icons/angledoubleup';
+import AngleDownIcon from 'primevue/icons/angledown';
+import AngleUpIcon from 'primevue/icons/angleup';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'OrderList',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'focus', 'blur'],
     props: {
         modelValue: {
@@ -171,6 +191,14 @@ export default {
         getItemKey(item, index) {
             return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
         },
+        getPTOptions(item, key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.isSelected(item),
+                    focused: this.id === this.focusedOptionId
+                }
+            });
+        },
         isSelected(item) {
             return ObjectUtils.findIndexInList(item, this.d_selection) != -1;
         },
diff --git a/components/lib/organizationchart/OrganizationChart.d.ts b/components/lib/organizationchart/OrganizationChart.d.ts
index 69f002836..5196bb04a 100755
--- a/components/lib/organizationchart/OrganizationChart.d.ts
+++ b/components/lib/organizationchart/OrganizationChart.d.ts
@@ -10,6 +10,17 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type OrganizationChartPassThroughOptionType = OrganizationChartPassThroughAttributes | ((options: OrganizationChartPassThroughMethodOptions) => OrganizationChartPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface OrganizationChartPassThroughMethodOptions {
+    props: OrganizationChartProps;
+    state: OrganizationChartState;
+    context: OrganizationChartContext;
+}
+
 /**
  * Defines valid properties in OrganizationChartNode.
  */
@@ -64,6 +75,119 @@ export interface OrganizationChartCollapsedKeys {
     [key: string]: any;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link OrganizationChartProps.pt}
+ */
+export interface OrganizationChartPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table's DOM element.
+     */
+    table?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the body's DOM element.
+     */
+    body?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row' DOM element.
+     */
+    row?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the cell's DOM element.
+     */
+    cell?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the node's DOM element.
+     */
+    node?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the nodeToggler's DOM element.
+     */
+    nodeToggler?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the nodeTogglerIcon's DOM element.
+     */
+    nodeTogglerIcon?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the lines's DOM element.
+     */
+    lines?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the lineCell's DOM element.
+     */
+    lineCell?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the lineDown's DOM element.
+     */
+    lineDown?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the nodes's DOM element.
+     */
+    nodes?: OrganizationChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the nodeCell's DOM element.
+     */
+    nodeCell?: OrganizationChartPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface OrganizationChartPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in OrganizationChart component.
+ */
+export interface OrganizationChartState {
+    /**
+     * Current collapsed keys' state.
+     * @defaultValue false
+     */
+    d_collapsedKeys: OrganizationChartCollapsedKeys;
+}
+
+/**
+ * Defines current options in OrganizationChart component.
+ */
+export interface OrganizationChartContext {
+    /**
+     * Current focus expanded of the node as a boolean.
+     * @defaultValue false
+     */
+    expanded: boolean;
+    /**
+     * Current selectable state of the node as a boolean.
+     * @defaultValue false
+     */
+    selectable: boolean;
+    /**
+     * Current selection state of the node as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current toggleable state of the node as a boolean.
+     * @defaultValue false
+     */
+    toggleable: boolean;
+    /**
+     * Current active state of the node as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current being top line state of the node as a boolean.
+     * @defaultValue false
+     */
+    lineTop: boolean;
+}
+
 /**
  * Defines valid properties in OrganizationChart component.
  */
@@ -89,6 +213,11 @@ export interface OrganizationChartProps {
      * @defaultValue false
      */
     collapsible?: boolean;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {OrganizationChartPassThroughOptions}
+     */
+    pt?: OrganizationChartPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/organizationchart/OrganizationChart.vue b/components/lib/organizationchart/OrganizationChart.vue
index 3b23b0122..2393b0673 100755
--- a/components/lib/organizationchart/OrganizationChart.vue
+++ b/components/lib/organizationchart/OrganizationChart.vue
@@ -1,14 +1,26 @@
 <template>
-    <div class="p-organizationchart p-component">
-        <OrganizationChartNode :node="value" :templates="$slots" @node-toggle="onNodeToggle" :collapsedKeys="d_collapsedKeys" :collapsible="collapsible" @node-click="onNodeClick" :selectionMode="selectionMode" :selectionKeys="selectionKeys" />
+    <div class="p-organizationchart p-component" v-bind="ptm('root')">
+        <OrganizationChartNode
+            :node="value"
+            :templates="$slots"
+            @node-toggle="onNodeToggle"
+            :collapsedKeys="d_collapsedKeys"
+            :collapsible="collapsible"
+            @node-click="onNodeClick"
+            :selectionMode="selectionMode"
+            :selectionKeys="selectionKeys"
+            :pt="pt"
+        />
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import OrganizationChartNode from './OrganizationChartNode.vue';
 
 export default {
     name: 'OrganizationChart',
+    extends: BaseComponent,
     emits: ['node-unselect', 'node-select', 'update:selectionKeys', 'node-expand', 'node-collapse', 'update:collapsedKeys'],
     props: {
         value: {
diff --git a/components/lib/organizationchart/OrganizationChartNode.vue b/components/lib/organizationchart/OrganizationChartNode.vue
index 0cc1b7fac..959d94681 100755
--- a/components/lib/organizationchart/OrganizationChartNode.vue
+++ b/components/lib/organizationchart/OrganizationChartNode.vue
@@ -1,36 +1,37 @@
 <template>
-    <table class="p-organizationchart-table">
-        <tbody>
-            <tr v-if="node">
-                <td :colspan="colspan">
-                    <div :class="nodeContentClass" @click="onNodeClick">
+    <table class="p-organizationchart-table" v-bind="ptm('table')">
+        <tbody v-bind="ptm('body')">
+            <tr v-if="node" v-bind="ptm('row')">
+                <td :colspan="colspan" v-bind="ptm('cell')">
+                    <div :class="nodeContentClass" @click="onNodeClick" v-bind="getPTOptions('node')">
                         <component :is="templates[node.type] || templates['default']" :node="node" />
-                        <a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown="onKeydown">
-                            <component :is="templates.togglericon || (expanded ? 'ChevronDownIcon' : 'ChevronUpIcon')" :expanded="expanded" class="p-node-toggler-icon" />
+                        <a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggler')">
+                            <component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" class="p-node-toggler-icon" />
+                            <component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" class="p-node-toggler-icon" v-bind="getPTOptions('nodeTogglerIcon')" />
                         </a>
                     </div>
                 </td>
             </tr>
-            <tr :style="childStyle" class="p-organizationchart-lines">
+            <tr :style="childStyle" class="p-organizationchart-lines" v-bind="ptm('lines')">
                 <td :colspan="colspan">
-                    <div class="p-organizationchart-line-down"></div>
+                    <div class="p-organizationchart-line-down" v-bind="ptm('lineDown')"></div>
                 </td>
             </tr>
-            <tr :style="childStyle" class="p-organizationchart-lines">
+            <tr :style="childStyle" class="p-organizationchart-lines" v-bind="ptm('lines')">
                 <template v-if="node.children && node.children.length === 1">
-                    <td :colspan="colspan">
-                        <div class="p-organizationchart-line-down"></div>
+                    <td :colspan="colspan" v-bind="ptm('lineCell')">
+                        <div class="p-organizationchart-line-down" v-bind="ptm('lineDown')"></div>
                     </td>
                 </template>
                 <template v-if="node.children && node.children.length > 1">
                     <template v-for="(child, i) of node.children" :key="child.key">
-                        <td class="p-organizationchart-line-left" :class="{ 'p-organizationchart-line-top': !(i === 0) }">&nbsp;</td>
-                        <td class="p-organizationchart-line-right" :class="{ 'p-organizationchart-line-top': !(i === node.children.length - 1) }">&nbsp;</td>
+                        <td class="p-organizationchart-line-left" :class="{ 'p-organizationchart-line-top': !(i === 0) }" v-bind="getNodeOptions(!(i === 0), 'lineLeft')">&nbsp;</td>
+                        <td class="p-organizationchart-line-right" :class="{ 'p-organizationchart-line-top': !(i === node.children.length - 1) }" v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')">&nbsp;</td>
                     </template>
                 </template>
             </tr>
-            <tr :style="childStyle" class="p-organizationchart-nodes">
-                <td v-for="child of node.children" :key="child.key" colspan="2">
+            <tr :style="childStyle" class="p-organizationchart-nodes" v-bind="ptm('nodes')">
+                <td v-for="child of node.children" :key="child.key" colspan="2" v-bind="ptm('nodeCell')">
                     <OrganizationChartNode
                         :node="child"
                         :templates="templates"
@@ -40,6 +41,7 @@
                         :selectionMode="selectionMode"
                         :selectionKeys="selectionKeys"
                         @node-click="onChildNodeClick"
+                        :pt="pt"
                     />
                 </td>
             </tr>
@@ -48,12 +50,14 @@
 </template>
 
 <script>
-import ChevronDownIcon from 'primevue/icon/chevrondown';
-import ChevronUpIcon from 'primevue/icon/chevronup';
+import BaseComponent from 'primevue/basecomponent';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronUpIcon from 'primevue/icons/chevronup';
 import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'OrganizationChartNode',
+    extends: BaseComponent,
     emits: ['node-click', 'node-toggle'],
     props: {
         node: {
@@ -82,6 +86,24 @@ export default {
         }
     },
     methods: {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    expanded: this.expanded,
+                    selectable: this.selectable,
+                    selected: this.selected,
+                    toggleable: this.toggleable,
+                    active: this.selected
+                }
+            });
+        },
+        getNodeOptions(lineTop, key) {
+            return this.ptm(key, {
+                context: {
+                    lineTop
+                }
+            });
+        },
         onNodeClick(event) {
             if (DomHandler.hasClass(event.target, 'p-node-toggler') || DomHandler.hasClass(event.target, 'p-node-toggler-icon')) {
                 return;
diff --git a/components/lib/overlaypanel/OverlayPanel.d.ts b/components/lib/overlaypanel/OverlayPanel.d.ts
index 333888ac1..4a1a4a65a 100755
--- a/components/lib/overlaypanel/OverlayPanel.d.ts
+++ b/components/lib/overlaypanel/OverlayPanel.d.ts
@@ -10,6 +10,57 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type OverlayPanelPassThroughOptionType = OverlayPanelPassThroughAttributes | ((options: OverlayPanelPassThroughMethodOptions) => OverlayPanelPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface OverlayPanelPassThroughMethodOptions {
+    props: OverlayPanelProps;
+    state: OverlayPanelState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link OverlayPanelProps.pt}
+ */
+export interface OverlayPanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: OverlayPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: OverlayPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: OverlayPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: OverlayPanelPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface OverlayPanelPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in OverlayPanel component.
+ */
+export interface OverlayPanelState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+}
+
 /**
  * OverlayPanel breakpoint metadata.
  */
@@ -67,8 +118,14 @@ export interface OverlayPanelProps {
     breakpoints?: OverlayPanelBreakpoints;
     /**
      * Icon to display in the overlaypanel close button.
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {OverlayPanelPassThroughOptions}
+     */
+    pt?: OverlayPanelPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/overlaypanel/OverlayPanel.vue b/components/lib/overlaypanel/OverlayPanel.vue
index 0a78f546a..7bc3cf126 100755
--- a/components/lib/overlaypanel/OverlayPanel.vue
+++ b/components/lib/overlaypanel/OverlayPanel.vue
@@ -1,13 +1,13 @@
 <template>
     <Portal :appendTo="appendTo">
         <transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div v-if="visible" :ref="containerRef" v-focustrap role="dialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" v-bind="$attrs">
-                <div class="p-overlaypanel-content" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown">
+            <div v-if="visible" :ref="containerRef" v-focustrap role="dialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }">
+                <div class="p-overlaypanel-content" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown" v-bind="ptm('content')">
                     <slot></slot>
                 </div>
-                <button v-if="showCloseIcon" v-ripple class="p-overlaypanel-close p-link" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown">
+                <button v-if="showCloseIcon" v-ripple class="p-overlaypanel-close p-link" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown" v-bind="ptm('closeButton')">
                     <slot name="closeicon">
-                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-overlaypanel-close-icon ', closeIcon]"></component>
+                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-overlaypanel-close-icon ', closeIcon]" v-bind="ptm('closeIcon')"></component>
                     </slot>
                 </button>
             </div>
@@ -16,15 +16,17 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import FocusTrap from 'primevue/focustrap';
+import TimesIcon from 'primevue/icons/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
-import TimesIcon from 'primevue/icon/times';
 
 export default {
     name: 'OverlayPanel',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['show', 'hide'],
     props: {
diff --git a/components/lib/paginator/CurrentPageReport.vue b/components/lib/paginator/CurrentPageReport.vue
index 0210b76b0..ed4da044e 100755
--- a/components/lib/paginator/CurrentPageReport.vue
+++ b/components/lib/paginator/CurrentPageReport.vue
@@ -1,9 +1,13 @@
 <template>
-    <span class="p-paginator-current">{{ text }}</span>
+    <span class="p-paginator-current" v-bind="ptm('current')">{{ text }}</span>
 </template>
+
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'CurrentPageReport',
+    extends: BaseComponent,
     props: {
         pageCount: {
             type: Number,
diff --git a/components/lib/paginator/FirstPageLink.vue b/components/lib/paginator/FirstPageLink.vue
index 3616fc185..db29d8126 100755
--- a/components/lib/paginator/FirstPageLink.vue
+++ b/components/lib/paginator/FirstPageLink.vue
@@ -1,21 +1,32 @@
 <template>
-    <button v-ripple :class="containerClass" type="button">
-        <component :is="template || 'AngleDoubleLeftIcon'" class="p-paginator-icon" />
+    <button v-ripple :class="containerClass" type="button" v-bind="getPTOptions('firstPageButton')">
+        <component :is="template || 'AngleDoubleLeftIcon'" class="p-paginator-icon" v-bind="getPTOptions('firstPageIcon')" />
     </button>
 </template>
 
 <script>
-import AngleDoubleLeftIcon from 'primevue/icon/angledoubleleft';
+import BaseComponent from 'primevue/basecomponent';
+import AngleDoubleLeftIcon from 'primevue/icons/angledoubleleft';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'FirstPageLink',
+    extends: BaseComponent,
     props: {
         template: {
             type: Function,
             default: null
         }
     },
+    methods: {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    disabled: this.$attrs.disabled
+                }
+            });
+        }
+    },
     computed: {
         containerClass() {
             return [
diff --git a/components/lib/paginator/JumpToPageDropdown.vue b/components/lib/paginator/JumpToPageDropdown.vue
index f828625cf..3248d00fe 100644
--- a/components/lib/paginator/JumpToPageDropdown.vue
+++ b/components/lib/paginator/JumpToPageDropdown.vue
@@ -1,12 +1,14 @@
 <template>
-    <JTPDropdown :modelValue="page" :options="pageOptions" optionLabel="label" optionValue="value" @update:modelValue="onChange($event)" class="p-paginator-page-options" :disabled="disabled"></JTPDropdown>
+    <JTPDropdown :modelValue="page" :options="pageOptions" optionLabel="label" optionValue="value" @update:modelValue="onChange($event)" class="p-paginator-page-options" :disabled="disabled" :pt="ptm('JTPDropdown')"></JTPDropdown>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Dropdown from 'primevue/dropdown';
 
 export default {
     name: 'JumpToPageDropdown',
+    extends: BaseComponent,
     emits: ['page-change'],
     props: {
         page: Number,
diff --git a/components/lib/paginator/JumpToPageInput.vue b/components/lib/paginator/JumpToPageInput.vue
index 7b5ec3f76..dc933daed 100644
--- a/components/lib/paginator/JumpToPageInput.vue
+++ b/components/lib/paginator/JumpToPageInput.vue
@@ -1,12 +1,14 @@
 <template>
-    <JTPInput ref="jtpInput" :modelValue="d_page" class="p-paginator-page-input" :aria-label="inputArialabel" :disabled="disabled" @update:modelValue="onChange"></JTPInput>
+    <JTPInput ref="jtpInput" :modelValue="d_page" class="p-paginator-page-input" :aria-label="inputArialabel" :disabled="disabled" @update:modelValue="onChange" :pt="ptm('JTPInput')"></JTPInput>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import InputNumber from 'primevue/inputnumber';
 
 export default {
     name: 'JumpToPageInput',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['page-change'],
     props: {
diff --git a/components/lib/paginator/LastPageLink.vue b/components/lib/paginator/LastPageLink.vue
index 72ae25317..37ee9be8f 100755
--- a/components/lib/paginator/LastPageLink.vue
+++ b/components/lib/paginator/LastPageLink.vue
@@ -1,21 +1,32 @@
 <template>
-    <button v-ripple :class="containerClass" type="button">
-        <component :is="template || 'AngleDoubleRightIcon'" class="p-paginator-icon" />
+    <button v-ripple :class="containerClass" type="button" v-bind="getPTOptions('lastPageButton')">
+        <component :is="template || 'AngleDoubleRightIcon'" class="p-paginator-icon" v-bind="getPTOptions('lastPageIcon')" />
     </button>
 </template>
 
 <script>
-import AngleDoubleRightIcon from 'primevue/icon/angledoubleright';
+import BaseComponent from 'primevue/basecomponent';
+import AngleDoubleRightIcon from 'primevue/icons/angledoubleright';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'LastPageLink',
+    extends: BaseComponent,
     props: {
         template: {
             type: Function,
             default: null
         }
     },
+    methods: {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    disabled: this.$attrs.disabled
+                }
+            });
+        }
+    },
     computed: {
         containerClass() {
             return [
diff --git a/components/lib/paginator/NextPageLink.vue b/components/lib/paginator/NextPageLink.vue
index c260f9fda..5d36bba8b 100755
--- a/components/lib/paginator/NextPageLink.vue
+++ b/components/lib/paginator/NextPageLink.vue
@@ -1,21 +1,32 @@
 <template>
-    <button v-ripple :class="containerClass" type="button">
-        <component :is="template || 'AngleRightIcon'" class="p-paginator-icon" />
+    <button v-ripple :class="containerClass" type="button" v-bind="getPTOptions('nextPageButton')">
+        <component :is="template || 'AngleRightIcon'" class="p-paginator-icon" v-bind="getPTOptions('nextPageIcon')" />
     </button>
 </template>
 
 <script>
-import AngleRightIcon from 'primevue/icon/angleright';
+import BaseComponent from 'primevue/basecomponent';
+import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'NextPageLink',
+    extends: BaseComponent,
     props: {
         template: {
             type: Function,
             default: null
         }
     },
+    methods: {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    disabled: this.$attrs.disabled
+                }
+            });
+        }
+    },
     computed: {
         containerClass() {
             return [
diff --git a/components/lib/paginator/PageLinks.vue b/components/lib/paginator/PageLinks.vue
index 953a4b397..ab5a0e09e 100755
--- a/components/lib/paginator/PageLinks.vue
+++ b/components/lib/paginator/PageLinks.vue
@@ -1,5 +1,5 @@
 <template>
-    <span class="p-paginator-pages">
+    <span class="p-paginator-pages" v-bind="ptm('pages')">
         <button
             v-for="pageLink of value"
             :key="pageLink"
@@ -9,16 +9,20 @@
             :aria-label="ariaPageLabel(pageLink)"
             :aria-current="pageLink - 1 === page ? 'page' : undefined"
             @click="onPageLinkClick($event, pageLink)"
+            v-bind="getPTOptions(pageLink - 1, 'pageButton')"
         >
             {{ pageLink }}
         </button>
     </span>
 </template>
+
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'PageLinks',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['click'],
     props: {
@@ -26,6 +30,13 @@ export default {
         page: Number
     },
     methods: {
+        getPTOptions(pageLink, key) {
+            return this.ptm(key, {
+                context: {
+                    active: pageLink === this.page
+                }
+            });
+        },
         onPageLinkClick(event, pageLink) {
             this.$emit('click', {
                 originalEvent: event,
@@ -36,7 +47,6 @@ export default {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g, value) : undefined;
         }
     },
-    computed: {},
     directives: {
         ripple: Ripple
     }
diff --git a/components/lib/paginator/Paginator.d.ts b/components/lib/paginator/Paginator.d.ts
index a220c0d1a..e9dea3ece 100755
--- a/components/lib/paginator/Paginator.d.ts
+++ b/components/lib/paginator/Paginator.d.ts
@@ -8,8 +8,136 @@
  *
  */
 import { VNode } from 'vue';
+import { DropdownPassThroughOptionType } from '../dropdown';
+import { InputNumberPassThroughOptionType } from '../inputnumber';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type PaginatorPassThroughOptionType = PaginatorPassThroughAttributes | ((options: PaginatorPassThroughMethodOptions) => PaginatorPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PaginatorPassThroughMethodOptions {
+    props: PaginatorProps;
+    state: PaginatorState;
+    context: PaginatorContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PaginatorProps.pt}
+ */
+export interface PaginatorPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the left's DOM element.
+     */
+    left?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the first page button's DOM element.
+     */
+    firstPageButton?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the first page icon's DOM element.
+     */
+    firstPageIcon?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the prev page button's DOM element.
+     */
+    prevPageButton?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the prev page icon's DOM element.
+     */
+    prevPageIcon?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next page button's DOM element.
+     */
+    nextPageButton?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next page icon's DOM element.
+     */
+    nextPageIcon?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the last page button's DOM element.
+     */
+    lastPageButton?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the last page icon's DOM element.
+     */
+    lastPageIcon?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the pages's DOM element.
+     */
+    pages?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the page button's DOM element.
+     */
+    pageButton?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the current's DOM element.
+     */
+    current?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * @see {@link DropdownPassThroughOptionType}
+     */
+    RPPDropdown?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * @see {@link DropdownPassThroughOptionType}
+     */
+    JTPDropdown?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * @see {@link InputNumberPassThroughOptionType}
+     */
+    JTPInput?: InputNumberPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the end's DOM element.
+     */
+    end?: PaginatorPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface PaginatorPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Paginator component.
+ */
+export interface PaginatorState {
+    /**
+     * Current index of first record as a number.
+     */
+    d_first: number;
+    /**
+     * Current number of rows to display in new page as a number.
+     */
+    d_rows: number;
+}
+
+/**
+ * Defines current options in Paginator component.
+ */
+export interface PaginatorContext {
+    /**
+     * Current active state as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current disabled state of the button as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Paginator page state metadata.
  */
@@ -92,6 +220,11 @@ export interface PaginatorProps {
      * @defaultValue true
      */
     alwaysShow?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PaginatorPassThroughOptions}
+     */
+    pt?: PaginatorPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/paginator/Paginator.vue b/components/lib/paginator/Paginator.vue
index 72d6885d0..3126dd41f 100755
--- a/components/lib/paginator/Paginator.vue
+++ b/components/lib/paginator/Paginator.vue
@@ -1,15 +1,15 @@
 <template>
-    <nav v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1">
-        <div v-for="(value, key) in templateItems" :key="key" ref="paginator" class="p-paginator p-component" :class="getPaginatorClasses(key)">
-            <div v-if="$slots.start" class="p-paginator-left-content">
+    <nav v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1" v-bind="ptm('root')">
+        <div v-for="(value, key) in templateItems" :key="key" ref="paginator" class="p-paginator p-component" :class="getPaginatorClasses(key)" v-bind="ptm('paginator')">
+            <div v-if="$slots.start" class="p-paginator-left-content" v-bind="ptm('left')">
                 <slot name="start" :state="currentState"></slot>
             </div>
             <template v-for="item in value" :key="item">
-                <FirstPageLink v-if="item === 'FirstPageLink'" :aria-label="getAriaLabel('firstPageLabel')" :template="$slots.firstpagelinkicon" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" />
-                <PrevPageLink v-else-if="item === 'PrevPageLink'" :aria-label="getAriaLabel('prevPageLabel')" :template="$slots.prevpagelinkicon" @click="changePageToPrev($event)" :disabled="isFirstPage || empty" />
-                <NextPageLink v-else-if="item === 'NextPageLink'" :aria-label="getAriaLabel('nextPageLabel')" :template="$slots.nextpagelinkicon" @click="changePageToNext($event)" :disabled="isLastPage || empty" />
-                <LastPageLink v-else-if="item === 'LastPageLink'" :aria-label="getAriaLabel('lastPageLabel')" :template="$slots.lastpagelinkicon" @click="changePageToLast($event)" :disabled="isLastPage || empty" />
-                <PageLinks v-else-if="item === 'PageLinks'" :aria-label="getAriaLabel('pageLabel')" :value="pageLinks" :page="page" @click="changePageLink($event)" />
+                <FirstPageLink v-if="item === 'FirstPageLink'" :aria-label="getAriaLabel('firstPageLabel')" :template="$slots.firstpagelinkicon" @click="changePageToFirst($event)" :disabled="isFirstPage || empty" :pt="pt" />
+                <PrevPageLink v-else-if="item === 'PrevPageLink'" :aria-label="getAriaLabel('prevPageLabel')" :template="$slots.prevpagelinkicon" @click="changePageToPrev($event)" :disabled="isFirstPage || empty" :pt="pt" />
+                <NextPageLink v-else-if="item === 'NextPageLink'" :aria-label="getAriaLabel('nextPageLabel')" :template="$slots.nextpagelinkicon" @click="changePageToNext($event)" :disabled="isLastPage || empty" :pt="pt" />
+                <LastPageLink v-else-if="item === 'LastPageLink'" :aria-label="getAriaLabel('lastPageLabel')" :template="$slots.lastpagelinkicon" @click="changePageToLast($event)" :disabled="isLastPage || empty" :pt="pt" />
+                <PageLinks v-else-if="item === 'PageLinks'" :aria-label="getAriaLabel('pageLabel')" :value="pageLinks" :page="page" @click="changePageLink($event)" :pt="pt" />
                 <CurrentPageReport
                     v-else-if="item === 'CurrentPageReport'"
                     aria-live="polite"
@@ -20,12 +20,21 @@
                     :first="d_first"
                     :rows="d_rows"
                     :totalRecords="totalRecords"
+                    :pt="pt"
                 />
-                <RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :aria-label="getAriaLabel('rowsPerPageLabel')" :rows="d_rows" :options="rowsPerPageOptions" @rows-change="onRowChange($event)" :disabled="empty" />
-                <JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :aria-label="getAriaLabel('jumpToPageDropdownLabel')" :page="page" :pageCount="pageCount" @page-change="changePage($event)" :disabled="empty" />
-                <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" />
+                <RowsPerPageDropdown
+                    v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions"
+                    :aria-label="getAriaLabel('rowsPerPageLabel')"
+                    :rows="d_rows"
+                    :options="rowsPerPageOptions"
+                    @rows-change="onRowChange($event)"
+                    :disabled="empty"
+                    :pt="pt"
+                />
+                <JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :aria-label="getAriaLabel('jumpToPageDropdownLabel')" :page="page" :pageCount="pageCount" @page-change="changePage($event)" :disabled="empty" :pt="pt" />
+                <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" :pt="pt" />
             </template>
-            <div v-if="$slots.end" class="p-paginator-right-content">
+            <div v-if="$slots.end" class="p-paginator-right-content" v-bind="ptm('end')">
                 <slot name="end" :state="currentState"></slot>
             </div>
         </div>
@@ -33,6 +42,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { UniqueComponentId } from 'primevue/utils';
 import CurrrentPageReport from './CurrentPageReport.vue';
 import FirstPageLink from './FirstPageLink.vue';
@@ -46,6 +56,7 @@ import RowsPerPageDropdown from './RowsPerPageDropdown.vue';
 
 export default {
     name: 'Paginator',
+    extends: BaseComponent,
     emits: ['update:first', 'update:rows', 'page'],
     props: {
         totalRecords: {
diff --git a/components/lib/paginator/PrevPageLink.vue b/components/lib/paginator/PrevPageLink.vue
index 86d101abf..1df47f848 100755
--- a/components/lib/paginator/PrevPageLink.vue
+++ b/components/lib/paginator/PrevPageLink.vue
@@ -1,21 +1,32 @@
 <template>
-    <button v-ripple :class="containerClass" type="button">
-        <component :is="template || 'AngleLeftIcon'" class="p-paginator-icon" />
+    <button v-ripple :class="containerClass" type="button" v-bind="getPTOptions('prevPageButton')">
+        <component :is="template || 'AngleLeftIcon'" class="p-paginator-icon" v-bind="getPTOptions('prevPageIcon')" />
     </button>
 </template>
 
 <script>
-import AngleLeftIcon from 'primevue/icon/angleleft';
+import BaseComponent from 'primevue/basecomponent';
+import AngleLeftIcon from 'primevue/icons/angleleft';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'PrevPageLink',
+    extends: BaseComponent,
     props: {
         template: {
             type: Function,
             default: null
         }
     },
+    methods: {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    disabled: this.$attrs.disabled
+                }
+            });
+        }
+    },
     computed: {
         containerClass() {
             return [
diff --git a/components/lib/paginator/RowsPerPageDropdown.vue b/components/lib/paginator/RowsPerPageDropdown.vue
index 6b600a186..a83b8d6a1 100755
--- a/components/lib/paginator/RowsPerPageDropdown.vue
+++ b/components/lib/paginator/RowsPerPageDropdown.vue
@@ -1,12 +1,14 @@
 <template>
-    <RPPDropdown :modelValue="rows" :options="rowsOptions" optionLabel="label" optionValue="value" @update:modelValue="onChange($event)" class="p-paginator-rpp-options" :disabled="disabled"></RPPDropdown>
+    <RPPDropdown :modelValue="rows" :options="rowsOptions" optionLabel="label" optionValue="value" @update:modelValue="onChange($event)" class="p-paginator-rpp-options" :disabled="disabled" :pt="ptm('RPPDropdown')"></RPPDropdown>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Dropdown from 'primevue/dropdown';
 
 export default {
     name: 'RowsPerPageDropdown',
+    extends: BaseComponent,
     emits: ['rows-change'],
     props: {
         options: Array,
diff --git a/components/lib/panel/Panel.d.ts b/components/lib/panel/Panel.d.ts
index 993c6ddea..d274b53ef 100755
--- a/components/lib/panel/Panel.d.ts
+++ b/components/lib/panel/Panel.d.ts
@@ -53,7 +53,7 @@ export interface PanelPassThroughOptions {
      */
     title?: PanelPassThroughOptionType;
     /**
-     * Uses to pass attributes to the title's DOM element.
+     * Uses to pass attributes to the icons' DOM element.
      */
     icons?: PanelPassThroughOptionType;
     /**
@@ -63,11 +63,11 @@ export interface PanelPassThroughOptions {
     /**
      * Uses to pass attributes to the togglericon's DOM element.
      */
-    togglericon?: PanelPassThroughOptionType;
+    togglerIcon?: PanelPassThroughOptionType;
     /**
      * Uses to pass attributes to the toggleablecontent's DOM element.
      */
-    toggleablecontent?: PanelPassThroughOptionType;
+    toggleableContent?: PanelPassThroughOptionType;
     /**
      * Uses to pass attributes to the content's DOM element.
      */
@@ -137,7 +137,16 @@ export interface PanelSlots {
     /**
      * Custom header template.
      */
-    header(): VNode[];
+    header(scope: {
+        /**
+         * Current id state as a string
+         */
+        id: boolean;
+        /**
+         * Style class of the icon
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom icons template.
      */
diff --git a/components/lib/panel/Panel.vue b/components/lib/panel/Panel.vue
index b73f4050a..721ad43ec 100755
--- a/components/lib/panel/Panel.vue
+++ b/components/lib/panel/Panel.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="containerClass" v-bind="ptm('root')">
         <div class="p-panel-header" v-bind="ptm('header')">
-            <slot name="header">
+            <slot :id="ariaId + '_header'" name="header" class="p-panel-title">
                 <span v-if="header" :id="ariaId + '_header'" class="p-panel-title" v-bind="ptm('title')">{{ header }}</span>
             </slot>
             <div class="p-panel-icons" v-bind="ptm('icons')">
@@ -41,8 +41,8 @@
 
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import MinusIcon from 'primevue/icon/minus';
-import PlusIcon from 'primevue/icon/plus';
+import MinusIcon from 'primevue/icons/minus';
+import PlusIcon from 'primevue/icons/plus';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId } from 'primevue/utils';
 
diff --git a/components/lib/panelmenu/PanelMenu.d.ts b/components/lib/panelmenu/PanelMenu.d.ts
index 94cb98495..eadd4eda7 100755
--- a/components/lib/panelmenu/PanelMenu.d.ts
+++ b/components/lib/panelmenu/PanelMenu.d.ts
@@ -11,6 +11,130 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type PanelMenuPassThroughOptionType = PanelMenuPassThroughAttributes | ((options: PanelMenuPassThroughMethodOptions) => PanelMenuPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PanelMenuPassThroughMethodOptions {
+    props: PanelMenuProps;
+    state: PanelMenuState;
+    context: PanelMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PanelMenuProps.pt}
+ */
+export interface PanelMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header content's DOM element.
+     */
+    headerContent?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header action's DOM element.
+     */
+    headerAction?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenuIcon's DOM element.
+     */
+    submenuIcon?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header icon's DOM element.
+     */
+    headerIcon?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header label's DOM element.
+     */
+    headerLabel?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toggleable content's DOM element.
+     */
+    toggleableContent?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the menu content's DOM element.
+     */
+    menuContent?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: PanelMenuPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface PanelMenuPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in PanelMenu component.
+ */
+export interface PanelMenuState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Active item path.
+     * @type {MenuItem}
+     */
+    activeItem: MenuItem[];
+}
+
+/**
+ * Defines current options in PanelMenu component.
+ */
+export interface PanelMenuContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Custom expanded keys metadata.
  * @see {@link PanelMenuProps.expandedKeys}
@@ -64,6 +188,11 @@ export interface PanelMenuProps {
      * Index of the element in tabbing order.
      */
     tabindex?: number | string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PanelMenuPassThroughOptions}
+     */
+    pt?: PanelMenuPassThroughOptions;
 }
 
 /**
@@ -89,6 +218,34 @@ export interface PanelMenuSlots {
          */
         active: boolean;
     }): VNode[];
+    /**
+     * Custom header icon template.
+     * @param {Object} scope - header icon slot's params.
+     */
+    headericon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue
index 1b926ac0f..0c62dc052 100644
--- a/components/lib/panelmenu/PanelMenu.vue
+++ b/components/lib/panelmenu/PanelMenu.vue
@@ -1,7 +1,7 @@
 <template>
-    <div :id="id" class="p-panelmenu p-component">
+    <div :id="id" class="p-panelmenu p-component" v-bind="ptm('root')">
         <template v-for="(item, index) of model" :key="getPanelKey(index)">
-            <div v-if="isItemVisible(item)" :style="getItemProp(item, 'style')" :class="getPanelClass(item)">
+            <div v-if="isItemVisible(item)" :style="getItemProp(item, 'style')" :class="getPanelClass(item)" v-bind="ptm('panel')">
                 <div
                     :id="getHeaderId(index)"
                     :class="getHeaderClass(item)"
@@ -13,30 +13,42 @@
                     :aria-disabled="isItemDisabled(item)"
                     @click="onHeaderClick($event, item)"
                     @keydown="onHeaderKeyDown($event, item)"
+                    v-bind="getPTOptions(item, 'header')"
                 >
-                    <div class="p-panelmenu-header-content">
+                    <div class="p-panelmenu-header-content" v-bind="getPTOptions(item, 'headerContent')">
                         <template v-if="!$slots.item">
                             <router-link v-if="getItemProp(item, 'to') && !isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(item, 'to')" custom>
-                                <a :href="href" :class="getHeaderActionClass(item, { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)">
-                                    <span v-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)"></span>
-                                    <span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
+                                <a :href="href" :class="getHeaderActionClass(item, { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)" v-bind="getPTOptions(item, 'headerAction')">
+                                    <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
+                                    <span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" v-bind="getPTOptions(item, 'headerIcon')" />
+                                    <span class="p-menuitem-text" v-bind="getPTOptions(item, 'headerLabel')">{{ getItemLabel(item) }}</span>
                                 </a>
                             </router-link>
-                            <a v-else :href="getItemProp(item, 'url')" :class="getHeaderActionClass(item)" :tabindex="-1">
+                            <a v-else :href="getItemProp(item, 'url')" :class="getHeaderActionClass(item)" :tabindex="-1" v-bind="getPTOptions(item, 'headerAction')">
                                 <slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)">
-                                    <component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" />
+                                    <component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" v-bind="getPTOptions(item, 'submenuIcon')" />
                                 </slot>
-                                <span v-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)"></span>
-                                <span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
+                                <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
+                                <span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" v-bind="getPTOptions(item, 'headerIcon')" />
+                                <span class="p-menuitem-text" v-bind="getPTOptions(item, 'headerLabel')">{{ getItemLabel(item) }}</span>
                             </a>
                         </template>
                         <component v-else :is="$slots.item" :item="item"></component>
                     </div>
                 </div>
                 <transition name="p-toggleable-content">
-                    <div v-show="isItemActive(item)" :id="getContentId(index)" class="p-toggleable-content" role="region" :aria-labelledby="getHeaderId(index)">
-                        <div v-if="getItemProp(item, 'items')" class="p-panelmenu-content">
-                            <PanelMenuList :panelId="getPanelId(index)" :items="getItemProp(item, 'items')" :template="$slots" :expandedKeys="expandedKeys" @item-toggle="changeExpandedKeys" @header-focus="updateFocusedHeader" :exact="exact" />
+                    <div v-show="isItemActive(item)" :id="getContentId(index)" class="p-toggleable-content" role="region" :aria-labelledby="getHeaderId(index)" v-bind="ptm('toggleableContent')">
+                        <div v-if="getItemProp(item, 'items')" class="p-panelmenu-content" v-bind="ptm('menuContent')">
+                            <PanelMenuList
+                                :panelId="getPanelId(index)"
+                                :items="getItemProp(item, 'items')"
+                                :templates="$slots"
+                                :expandedKeys="expandedKeys"
+                                @item-toggle="changeExpandedKeys"
+                                @header-focus="updateFocusedHeader"
+                                :exact="exact"
+                                :pt="pt"
+                            />
                         </div>
                     </div>
                 </transition>
@@ -46,13 +58,15 @@
 </template>
 
 <script>
-import ChevronDownIcon from 'primevue/icon/chevrondown';
-import ChevronRightIcon from 'primevue/icon/chevronright';
+import BaseComponent from 'primevue/basecomponent';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import PanelMenuList from './PanelMenuList.vue';
 
 export default {
     name: 'PanelMenu',
+    extends: BaseComponent,
     emits: ['update:expandedKeys', 'panel-open', 'panel-close'],
     props: {
         model: {
@@ -93,6 +107,14 @@ export default {
         getItemLabel(item) {
             return this.getItemProp(item, 'label');
         },
+        getPTOptions(item, key) {
+            return this.ptm(key, {
+                options: {
+                    active: this.isItemActive(item),
+                    focused: this.isItemFocused(item)
+                }
+            });
+        },
         isItemActive(item) {
             return this.expandedKeys ? this.expandedKeys[this.getItemProp(item, 'key')] : ObjectUtils.equals(item, this.activeItem);
         },
@@ -102,6 +124,9 @@ export default {
         isItemDisabled(item) {
             return this.getItemProp(item, 'disabled');
         },
+        isItemFocused(item) {
+            return ObjectUtils.equals(item, this.activeItem);
+        },
         getPanelId(index) {
             return `${this.id}_${index}`;
         },
diff --git a/components/lib/panelmenu/PanelMenuList.vue b/components/lib/panelmenu/PanelMenuList.vue
index 05cf8acb7..50f26f789 100644
--- a/components/lib/panelmenu/PanelMenuList.vue
+++ b/components/lib/panelmenu/PanelMenuList.vue
@@ -8,22 +8,25 @@
         :panelId="panelId"
         :focusedItemId="focused ? focusedItemId : undefined"
         :items="processedItems"
-        :template="template"
+        :templates="templates"
         :activeItemPath="activeItemPath"
         :exact="exact"
         @focus="onFocus"
         @blur="onBlur"
         @keydown="onKeyDown"
         @item-toggle="onItemToggle"
+        :pt="pt"
     />
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 import PanelMenuSub from './PanelMenuSub.vue';
 
 export default {
     name: 'PanelMenuList',
+    extends: BaseComponent,
     emits: ['item-toggle', 'header-focus'],
     props: {
         panelId: {
@@ -34,7 +37,7 @@ export default {
             type: Array,
             default: null
         },
-        template: {
+        templates: {
             type: Object,
             default: null
         },
diff --git a/components/lib/panelmenu/PanelMenuSub.vue b/components/lib/panelmenu/PanelMenuSub.vue
index 3fe6b64ed..84f87b190 100755
--- a/components/lib/panelmenu/PanelMenuSub.vue
+++ b/components/lib/panelmenu/PanelMenuSub.vue
@@ -1,5 +1,5 @@
 <template>
-    <ul class="p-submenu-list">
+    <ul class="p-submenu-list" v-bind="ptm('menu')">
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
@@ -12,25 +12,40 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
+                v-bind="getPTOptions(processedItem, 'menuitem')"
             >
-                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)">
-                    <template v-if="!template.item">
+                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                    <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                                <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
-                                <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
+                            <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
-                            <component v-if="isItemGroup(processedItem)" :is="template.submenuicon || (isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon')" class="p-submenu-icon pi-fw" :active="isItemActive(processedItem)" />
-                            <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
-                            <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
+                        <a
+                            v-else
+                            v-ripple
+                            :href="getItemProp(processedItem, 'url')"
+                            :class="getItemActionClass(processedItem)"
+                            :target="getItemProp(processedItem, 'target')"
+                            tabindex="-1"
+                            aria-hidden="true"
+                            v-bind="getPTOptions(processedItem, 'action')"
+                        >
+                            <template v-if="isItemGroup(processedItem)">
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                            </template>
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                         </a>
                     </template>
-                    <component v-else :is="template.item" :item="processedItem.item"></component>
+                    <component v-else :is="templates.item" :item="processedItem.item"></component>
                 </div>
                 <transition name="p-toggleable-content">
-                    <div v-show="isItemActive(processedItem)" class="p-toggleable-content">
+                    <div v-show="isItemActive(processedItem)" class="p-toggleable-content" v-bind="ptm('toggleableContent')">
                         <PanelMenuSub
                             v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
                             :id="getItemId(processedItem) + '_list'"
@@ -39,27 +54,30 @@
                             :focusedItemId="focusedItemId"
                             :items="processedItem.items"
                             :level="level + 1"
-                            :template="template"
+                            :templates="templates"
                             :activeItemPath="activeItemPath"
                             :exact="exact"
                             @item-toggle="onItemToggle"
+                            :pt="pt"
                         />
                     </div>
                 </transition>
             </li>
-            <li v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" :style="getItemProp(processedItem, 'style')" :class="getSeparatorItemClass(processedItem)" role="separator"></li>
+            <li v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" :style="getItemProp(processedItem, 'style')" :class="getSeparatorItemClass(processedItem)" role="separator" v-bind="ptm('separator')"></li>
         </template>
     </ul>
 </template>
 
 <script>
-import ChevronDownIcon from 'primevue/icon/chevrondown';
-import ChevronRightIcon from 'primevue/icon/chevronright';
+import BaseComponent from 'primevue/basecomponent';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'PanelMenuSub',
+    extends: BaseComponent,
     emits: ['item-toggle'],
     props: {
         panelId: {
@@ -78,7 +96,7 @@ export default {
             type: Number,
             default: 0
         },
-        template: {
+        templates: {
             type: Object,
             default: null
         },
@@ -104,6 +122,14 @@ export default {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
+        getPTOptions(processedItem, key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.isItemActive(processedItem),
+                    focused: this.isItemFocused(processedItem)
+                }
+            });
+        },
         isItemActive(processedItem) {
             return this.activeItemPath.some((path) => path.key === processedItem.key);
         },
diff --git a/components/lib/password/Password.d.ts b/components/lib/password/Password.d.ts
index 5e7045a17..79482c484 100755
--- a/components/lib/password/Password.d.ts
+++ b/components/lib/password/Password.d.ts
@@ -8,8 +8,107 @@
  *
  */
 import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
+import { InputTextPassThroughOptionType } from '../inputtext';
 import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
 
+export declare type PasswordPassThroughOptionType = PasswordPassThroughAttributes | ((options: PasswordPassThroughMethodOptions) => PasswordPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PasswordPassThroughMethodOptions {
+    props: PasswordProps;
+    state: PasswordState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PasswordProps.pt}
+ */
+export interface PasswordPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PasswordPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the InputText component.
+     * @see {@link InputTextPassThroughOptionType}
+     */
+    input?: PasswordPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hide icon's DOM element.
+     */
+    hideIcon?: PasswordPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the show icon's DOM element.
+     */
+    showIcon?: PasswordPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: PasswordPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the meter's DOM element.
+     */
+    meter?: PasswordPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the info's DOM element.
+     */
+    info?: PasswordPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden accessible DOM element.
+     */
+    hiddenAccesible?: PasswordPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface PasswordPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Password component.
+ */
+export interface PasswordState {
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current overlay visible state as a boolean.
+     * @see {@link PasswordMeterStateOptions}
+     */
+    meter: PasswordMeterStateOptions;
+    /**
+     * Current info test state as a string.
+     */
+    infoText: string;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current unmasked state as a boolean.
+     * @defaultValue false
+     */
+    unmasked: boolean;
+}
+
+export interface PasswordMeterStateOptions {
+    /**
+     * Current strength of the meter state as a string.
+     */
+    strength: string;
+    /**
+     * Current width of the meter state as a string.
+     */
+    width: string;
+}
+
 /**
  * Defines valid properties in Password component.
  */
@@ -61,10 +160,12 @@ export interface PasswordProps extends InputHTMLAttributes {
     toggleMask?: boolean | undefined;
     /**
      * Icon to hide displaying the password as plain text.
+     * @deprecated since v3.27.0. Use 'hideicon' slot.
      */
     hideIcon?: string | undefined;
     /**
      * Icon to show displaying the password as plain text.
+     * @deprecated since v3.27.0. Use 'showicon' slot.
      */
     showIcon?: string | undefined;
     /**
@@ -121,6 +222,11 @@ export interface PasswordProps extends InputHTMLAttributes {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PasswordPassThroughOptions}
+     */
+    pt?: PasswordPassThroughOptions;
 }
 
 /**
@@ -142,11 +248,21 @@ export interface PasswordSlots {
     /**
      * Custom hide icon template.
      */
-    hideicon(): VNode[];
+    hideicon(scope: {
+        /**
+         * Hide icon click event
+         */
+        onClick(): void;
+    }): VNode[];
     /**
      * Custom show icon template.
      */
-    showicon(): VNode[];
+    showicon(scope: {
+        /**
+         * Show icon click event
+         */
+        onClick(): void;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/password/Password.spec.js b/components/lib/password/Password.spec.js
index 8e9165f60..adaaee56a 100644
--- a/components/lib/password/Password.spec.js
+++ b/components/lib/password/Password.spec.js
@@ -1,17 +1,6 @@
-import { config, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Password from './Password.vue';
 
-config.global.mocks = {
-    $primevue: {
-        config: {
-            'z-index': 5,
-            inputStyle: 'filled',
-            ripple: false,
-            locale: {}
-        }
-    }
-};
-
 describe('Password.vue', () => {
     let wrapper;
     const event = { target: { value: 'P' } };
@@ -43,11 +32,11 @@ describe('Password.vue', () => {
     });
 
     it('should meter update', async () => {
-        expect(wrapper.find('.p-password-info').text()).toBe('');
+        expect(wrapper.find('.p-password-info').text()).toBe('Enter a password');
 
         await wrapper.vm.onKeyUp(event);
 
-        expect(wrapper.find('.p-password-info').text()).toBe('');
+        expect(wrapper.find('.p-password-info').text()).toBe('Weak');
 
         expect(wrapper.find('.p-password-strength').classes()).toContain('weak');
     });
diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue
index c7be8a1bc..201de82f1 100755
--- a/components/lib/password/Password.vue
+++ b/components/lib/password/Password.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass">
+    <div :class="containerClass" v-bind="ptm('root')">
         <PInputText
             ref="input"
             :id="inputId"
@@ -19,26 +19,26 @@
             @blur="onBlur"
             @keyup="onKeyUp"
             @invalid="onInvalid"
-            v-bind="inputProps"
+            v-bind="{ ...inputProps, ...ptm('input') }"
         />
-        <slot v-if="toggleMask && unmasked" name="hideicon">
-            <component :is="hideIcon ? 'i' : 'EyeSlashIcon'" :class="hideIcon" @click="onMaskToggle" />
+        <slot v-if="toggleMask && unmasked" name="hideicon" :onClick="onMaskToggle">
+            <component :is="hideIcon ? 'i' : 'EyeSlashIcon'" :class="hideIcon" @click="onMaskToggle" v-bind="ptm('hideIcon')" />
         </slot>
-        <slot v-if="toggleMask && !unmasked" name="showicon">
-            <component :is="showIcon ? 'i' : 'EyeIcon'" :class="showIcon" @click="onMaskToggle" />
+        <slot v-if="toggleMask && !unmasked" name="showicon" :onClick="onMaskToggle">
+            <component :is="showIcon ? 'i' : 'EyeIcon'" :class="showIcon" @click="onMaskToggle" v-bind="ptm('showIcon')" />
         </slot>
-        <span class="p-hidden-accessible" aria-live="polite">
+        <span class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenAccesible')">
             {{ infoText }}
         </span>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div v-if="overlayVisible" :ref="overlayRef" :id="panelId || panelUniqueId" :class="panelStyleClass" :style="panelStyle" @click="onOverlayClick" v-bind="panelProps">
+                <div v-if="overlayVisible" :ref="overlayRef" :id="panelId || panelUniqueId" :class="panelStyleClass" :style="panelStyle" @click="onOverlayClick" v-bind="{ ...panelProps, ...ptm('panel') }">
                     <slot name="header"></slot>
                     <slot name="content">
-                        <div class="p-password-meter">
-                            <div :class="strengthClass" :style="{ width: meter ? meter.width : '' }"></div>
+                        <div class="p-password-meter" v-bind="ptm('meter')">
+                            <div :class="strengthClass" :style="{ width: meter ? meter.width : '' }" v-bind="ptm('meterLabel')"></div>
                         </div>
-                        <div class="p-password-info">{{ infoText }}</div>
+                        <div class="p-password-info" v-bind="ptm('info')">{{ infoText }}</div>
                     </slot>
                     <slot name="footer"></slot>
                 </div>
@@ -48,8 +48,9 @@
 </template>
 
 <script>
-import EyeIcon from 'primevue/icon/eye';
-import EyeSlashIcon from 'primevue/icon/eyeslash';
+import BaseComponent from 'primevue/basecomponent';
+import EyeIcon from 'primevue/icons/eye';
+import EyeSlashIcon from 'primevue/icons/eyeslash';
 import InputText from 'primevue/inputtext';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
@@ -57,6 +58,7 @@ import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUti
 
 export default {
     name: 'Password',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change', 'focus', 'blur', 'invalid'],
     props: {
         modelValue: String,
diff --git a/components/lib/picklist/PickList.d.ts b/components/lib/picklist/PickList.d.ts
index d6607f3d3..16de1cca7 100755
--- a/components/lib/picklist/PickList.d.ts
+++ b/components/lib/picklist/PickList.d.ts
@@ -8,8 +8,19 @@
  *
  */
 import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
+import { ButtonPassThroughOptionType } from '../button';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type PickListPassThroughOptionType = PickListPassThroughAttributes | ((options: PickListPassThroughMethodOptions) => PickListPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PickListPassThroughMethodOptions {
+    props: PickListProps;
+    state: PickListState;
+}
+
 /**
  * Custom reorder event.
  * @see {@link PickListEmits.reorder}
@@ -84,6 +95,150 @@ export interface PickListMoveToSourceEvent extends PickListMoveToTargetEvent {}
  */
 export interface PickListMoveAllToSourceEvent extends PickListMoveToTargetEvent {}
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PickListProps.pt}
+ */
+export interface PickListPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PickListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the source controls' DOM element.
+     */
+    sourceControls?: PickListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    sourceMoveUpButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    sourceMoveTopButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    sourceMoveDownButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    sourceMoveBottomButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the source wrapper's DOM element.
+     */
+    sourceWrapper?: PickListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the source header's DOM element.
+     */
+    sourceHeader?: PickListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the source list's DOM element.
+     */
+    sourceList?: PickListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the buttons' DOM element.
+     */
+    buttons?: PickListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveToTargetButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveAllToTargetButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveToSourceButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveAllToSourceButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the target wrapper's DOM element.
+     */
+    targetWrapper?: PickListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the target header's DOM element.
+     */
+    targetHeader?: PickListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the target list's DOM element.
+     */
+    targetList?: PickListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the target controls' DOM element.
+     */
+    targetControls?: PickListPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    targetMoveUpButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    targetMoveTopButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    targetMoveDownButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    targetMoveBottomButton?: ButtonPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface PickListPassThroughAttributes {
+    [key: string]: any;
+}
+
+export interface PickListFocusedState {
+    /**
+     * Current source list's focused state as a boolean.
+     * @defaultValue false
+     */
+    sourceList: boolean;
+    /**
+     * Current target list's focused state as a boolean.
+     * @defaultValue false
+     */
+    targetList: boolean;
+}
+
+/**
+ * Defines current inline state in PickList component.
+ */
+export interface PickListState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current id state as a string.
+     */
+    d_selection: any[];
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue [false, false]
+     */
+    focused: boolean;
+    /**
+     * Current focused item index as a number.
+     * @defaultvalue -1
+     */
+    focusedOptionIndex: number;
+    /**
+     * Current view change state as a boolean.
+     * @defaultValue false
+     */
+    viewChanged: boolean;
+}
+
 /**
  * Defines valid properties in PickList component.
  */
@@ -180,6 +335,11 @@ export interface PickListProps {
      * Uses to pass all properties of the HTMLButtonElement to the move all to source button inside the component.
      */
     moveAllToSourceProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PickListPassThroughOptions}
+     */
+    pt?: PickListPassThroughOptions;
 }
 
 /**
@@ -254,20 +414,44 @@ export interface PickListSlots {
     movebottomicon(): VNode[];
     /**
      * Custom move to target icon template.
+     * @param {Object} scope - movetotargeticon slot's params.
      */
-    movetotargeticon(): VNode[];
+    movetotargeticon(scope: {
+        /**
+         * Whether view change.
+         */
+        viewChanged: boolean;
+    }): VNode[];
     /**
      * Custom move all to target icon template.
+     * @param {Object} scope - movealltotargeticon slot's params.
      */
-    movealltotargeticon(): VNode[];
+    movealltotargeticon(scope: {
+        /**
+         * Whether view change.
+         */
+        viewChanged: boolean;
+    }): VNode[];
     /**
      * Custom move to source icon template.
+     * @param {Object} scope - movetosourceicon slot's params.
      */
-    movetosourceicon(): VNode[];
+    movetosourceicon(scope: {
+        /**
+         * Whether view change.
+         */
+        viewChanged: boolean;
+    }): VNode[];
     /**
      * Custom move all to source icon template.
+     * @param {Object} scope - movealltosourceicon slot's params.
      */
-    movealltosourceicon(): VNode[];
+    movealltosourceicon(scope: {
+        /**
+         * Whether view change.
+         */
+        viewChanged: boolean;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/picklist/PickList.spec.js b/components/lib/picklist/PickList.spec.js
index b371e9b14..3a319936e 100644
--- a/components/lib/picklist/PickList.spec.js
+++ b/components/lib/picklist/PickList.spec.js
@@ -1,20 +1,6 @@
-import { mount, config } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import PickList from './PickList.vue';
 
-config.global.mocks = {
-    $primevue: {
-        config: {
-            locale: {
-                aria: {
-                    moveUp: 'Move Up',
-                    moveDown: 'Move Down',
-                    moveTop: 'Move Top',
-                    moveBottom: 'Move Bottom'
-                }
-            }
-        }
-    }
-};
 describe('PickList.vue', () => {
     let wrapper;
 
diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue
index 0b6d6b8b6..a05710dd7 100755
--- a/components/lib/picklist/PickList.vue
+++ b/components/lib/picklist/PickList.vue
@@ -1,31 +1,39 @@
 <template>
-    <div :class="containerClass">
-        <div v-if="showSourceControls" class="p-picklist-buttons p-picklist-source-controls">
+    <div :class="containerClass" v-bind="ptm('root')">
+        <div v-if="showSourceControls" class="p-picklist-buttons p-picklist-source-controls" v-bind="ptm('sourceControls')">
             <slot name="sourcecontrolsstart"></slot>
-            <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" v-bind="moveUpButtonProps">
-                <slot name="moveupicon">
-                    <AngleUpIcon />
-                </slot>
+            <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" v-bind="moveUpButtonProps" :pt="ptm('sourceMoveUpButton')">
+                <template #icon>
+                    <slot name="moveupicon">
+                        <AngleUpIcon v-bind="ptm('sourceMoveUpButton')['icon']" />
+                    </slot>
+                </template>
             </PLButton>
-            <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" v-bind="moveTopButtonProps">
-                <slot name="movetopicon">
-                    <AngleDoubleUpIcon />
-                </slot>
+            <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" v-bind="moveTopButtonProps" :pt="ptm('sourceMoveTopButton')">
+                <template #icon>
+                    <slot name="movetopicon">
+                        <AngleDoubleUpIcon v-bind="ptm('sourceMoveTopButton')['icon']" />
+                    </slot>
+                </template>
             </PLButton>
-            <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" v-bind="moveDownButtonProps">
-                <slot name="movedownicon">
-                    <AngleDownIcon />
-                </slot>
+            <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" v-bind="moveDownButtonProps" :pt="ptm('sourceMoveDownButton')">
+                <template #icon>
+                    <slot name="movedownicon">
+                        <AngleDownIcon v-bind="ptm('sourceMoveDownButton')['icon']" />
+                    </slot>
+                </template>
             </PLButton>
-            <PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveBottom($event, 0)" v-bind="moveBottomButtonProps">
-                <slot name="movebottomicon">
-                    <AngleDoubleDownIcon />
-                </slot>
+            <PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveBottom($event, 0)" v-bind="moveBottomButtonProps" :pt="ptm('sourceMoveBottomButton')">
+                <template #icon>
+                    <slot name="movebottomicon">
+                        <AngleDoubleDownIcon v-bind="ptm('sourceMoveBottomButton')['icon']" />
+                    </slot>
+                </template>
             </PLButton>
             <slot name="sourcecontrolsend"></slot>
         </div>
-        <div class="p-picklist-list-wrapper p-picklist-source-wrapper">
-            <div v-if="$slots.sourceheader" class="p-picklist-header">
+        <div class="p-picklist-list-wrapper p-picklist-source-wrapper" v-bind="ptm('sourceWrapper')">
+            <div v-if="$slots.sourceheader" class="p-picklist-header" v-bind="ptm('sourceHeader')">
                 <slot name="sourceheader"></slot>
             </div>
             <transition-group
@@ -42,7 +50,7 @@
                 @focus="onListFocus($event, 'sourceList')"
                 @blur="onListBlur($event, 'sourceList')"
                 @keydown="onItemKeyDown($event, 'sourceList')"
-                v-bind="sourceListProps"
+                v-bind="{ ...sourceListProps, ...ptm('sourceList') }"
             >
                 <template v-for="(item, i) of sourceList" :key="getItemKey(item, i)">
                     <li
@@ -55,38 +63,47 @@
                         @mousedown="onOptionMouseDown(i, 'sourceList')"
                         role="option"
                         :aria-selected="isSelected(item, 0)"
+                        v-bind="getPTOptions(item, 'item')"
                     >
                         <slot name="item" :item="item" :index="i"> </slot>
                     </li>
                 </template>
             </transition-group>
         </div>
-        <div class="p-picklist-buttons p-picklist-transfer-buttons">
+        <div class="p-picklist-buttons p-picklist-transfer-buttons" v-bind="ptm('buttons')">
             <slot name="movecontrolsstart"></slot>
-            <PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="moveToTargetProps">
-                <slot name="movetotargeticon">
-                    <AngleRightIcon />
-                </slot>
+            <PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="moveToTargetProps" :pt="ptm('moveToTargetButton')">
+                <template #icon>
+                    <slot name="movetotargeticon" :viewChanged="viewChanged">
+                        <component :is="viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'" v-bind="ptm('moveToTargetButton')['icon']" />
+                    </slot>
+                </template>
             </PLButton>
-            <PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="moveAllToTargetProps">
-                <slot name="movealltotargeticon">
-                    <AngleDoubleRightIcon />
-                </slot>
+            <PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="moveAllToTargetProps" :pt="ptm('moveAllToTargetButton')">
+                <template #icon>
+                    <slot name="movealltotargeticon" :viewChanged="viewChanged">
+                        <component :is="viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'" v-bind="ptm('moveAllToTargetButton')['icon']" />
+                    </slot>
+                </template>
             </PLButton>
-            <PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="moveToSourceProps">
-                <slot name="movetosourceicon">
-                    <AngleLeftIcon />
-                </slot>
+            <PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="moveToSourceProps" :pt="ptm('moveToSourceButton')">
+                <template #icon>
+                    <slot name="movetosourceicon" :viewChanged="viewChanged">
+                        <component :is="viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'" v-bind="ptm('moveToSourceButton')['icon']" />
+                    </slot>
+                </template>
             </PLButton>
-            <PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveSourceDisabled('targetList')" v-bind="moveAllToSourceProps">
-                <slot name="movealltosourceicon">
-                    <AngleDoubleLeftIcon />
-                </slot>
+            <PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveSourceDisabled('targetList')" v-bind="moveAllToSourceProps" :pt="ptm('moveAllToSourceButton')">
+                <template #icon>
+                    <slot name="movealltosourceicon" :viewChanged="viewChanged">
+                        <component :is="viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'" v-bind="ptm('moveAllToSourceButton')['icon']" />
+                    </slot>
+                </template>
             </PLButton>
             <slot name="movecontrolsend"></slot>
         </div>
-        <div class="p-picklist-list-wrapper p-picklist-target-wrapper">
-            <div v-if="$slots.targetheader" class="p-picklist-header">
+        <div class="p-picklist-list-wrapper p-picklist-target-wrapper" v-bind="ptm('targetWrapper')">
+            <div v-if="$slots.targetheader" class="p-picklist-header" v-bind="ptm('targetHeader')">
                 <slot name="targetheader"></slot>
             </div>
             <transition-group
@@ -103,7 +120,7 @@
                 @focus="onListFocus($event, 'targetList')"
                 @blur="onListBlur($event, 'targetList')"
                 @keydown="onItemKeyDown($event, 'targetList')"
-                v-bind="targetListProps"
+                v-bind="{ ...targetListProps, ...ptm('targetList') }"
             >
                 <template v-for="(item, i) of targetList" :key="getItemKey(item, i)">
                     <li
@@ -117,33 +134,42 @@
                         @touchend="onItemTouchEnd"
                         role="option"
                         :aria-selected="isSelected(item, 1)"
+                        v-bind="getPTOptions(item, 'item')"
                     >
                         <slot name="item" :item="item" :index="i"> </slot>
                     </li>
                 </template>
             </transition-group>
         </div>
-        <div v-if="showTargetControls" class="p-picklist-buttons p-picklist-target-controls">
+        <div v-if="showTargetControls" class="p-picklist-buttons p-picklist-target-controls" v-bind="ptm('targetControls')">
             <slot name="targetcontrolsstart"></slot>
-            <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" v-bind="moveUpButtonProps">
-                <slot name="moveupicon">
-                    <AngleUpIcon />
-                </slot>
+            <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" v-bind="moveUpButtonProps" :pt="ptm('targetMoveUpButton')">
+                <template #icon>
+                    <slot name="moveupicon">
+                        <AngleUpIcon v-bind="ptm('targetMoveUpButton')['icon']" />
+                    </slot>
+                </template>
             </PLButton>
-            <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" v-bind="moveTopButtonProps">
-                <slot name="movetopicon">
-                    <AngleDoubleUpIcon />
-                </slot>
+            <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" v-bind="moveTopButtonProps" :pt="ptm('targetMoveTopButton')">
+                <template #icon>
+                    <slot name="movetopicon">
+                        <AngleDoubleUpIcon v-bind="ptm('targetMoveTopButton')['icon']" />
+                    </slot>
+                </template>
             </PLButton>
-            <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" v-bind="moveDownButtonProps">
-                <slot name="movedownicon">
-                    <AngleDownIcon />
-                </slot>
+            <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" v-bind="moveDownButtonProps" :pt="ptm('targetMoveDownButton')">
+                <template #icon>
+                    <slot name="movedownicon">
+                        <AngleDownIcon v-bind="ptm('targetMoveDownButton')['icon']" />
+                    </slot>
+                </template>
             </PLButton>
-            <PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveBottom($event, 1)" v-bind="moveBottomButtonProps">
-                <slot name="movebottomicon">
-                    <AngleDoubleDownIcon />
-                </slot>
+            <PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveBottom($event, 1)" v-bind="moveBottomButtonProps" :pt="ptm('targetMoveBottomButton')">
+                <template #icon>
+                    <slot name="movebottomicon">
+                        <AngleDoubleDownIcon v-bind="ptm('targetMoveBottomButton')['icon']" />
+                    </slot>
+                </template>
             </PLButton>
             <slot name="targetcontrolsend"></slot>
         </div>
@@ -151,20 +177,22 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
-import AngleDoubleDownIcon from 'primevue/icon/angledoubledown';
-import AngleDoubleLeftIcon from 'primevue/icon/angledoubleleft';
-import AngleDoubleRightIcon from 'primevue/icon/angledoubleright';
-import AngleDoubleUpIcon from 'primevue/icon/angledoubleup';
-import AngleDownIcon from 'primevue/icon/angledown';
-import AngleLeftIcon from 'primevue/icon/angleleft';
-import AngleRightIcon from 'primevue/icon/angleright';
-import AngleUpIcon from 'primevue/icon/angleup';
+import AngleDoubleDownIcon from 'primevue/icons/angledoubledown';
+import AngleDoubleLeftIcon from 'primevue/icons/angledoubleleft';
+import AngleDoubleRightIcon from 'primevue/icons/angledoubleright';
+import AngleDoubleUpIcon from 'primevue/icons/angledoubleup';
+import AngleDownIcon from 'primevue/icons/angledown';
+import AngleLeftIcon from 'primevue/icons/angleleft';
+import AngleRightIcon from 'primevue/icons/angleright';
+import AngleUpIcon from 'primevue/icons/angleup';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'PickList',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'move-to-target', 'move-to-source', 'move-all-to-target', 'move-all-to-source', 'focus', 'blur'],
     props: {
         modelValue: {
@@ -255,6 +283,8 @@ export default {
     itemTouched: false,
     reorderDirection: null,
     styleElement: null,
+    media: null,
+    mediaChangeListener: null,
     data() {
         return {
             id: this.$attrs.id,
@@ -263,7 +293,8 @@ export default {
                 sourceList: false,
                 targetList: false
             },
-            focusedOptionIndex: -1
+            focusedOptionIndex: -1,
+            viewChanged: false
         };
     },
     watch: {
@@ -272,6 +303,10 @@ export default {
         },
         selection(newValue) {
             this.d_selection = newValue;
+        },
+        breakpoint(newValue) {
+            this.destroyMedia();
+            this.initMedia();
         }
     },
     updated() {
@@ -283,18 +318,28 @@ export default {
     },
     beforeUnmount() {
         this.destroyStyle();
+        this.destroyMedia();
     },
     mounted() {
         this.id = this.id || UniqueComponentId();
 
         if (this.responsive) {
             this.createStyle();
+            this.initMedia();
         }
     },
     methods: {
         getItemKey(item, index) {
             return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
         },
+        getPTOptions(item, key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.isSelected(item),
+                    focused: this.id === this.focusedOptionId
+                }
+            });
+        },
         isSelected(item, listIndex) {
             return ObjectUtils.findIndexInList(item, this.d_selection[listIndex]) != -1;
         },
@@ -788,6 +833,29 @@ export default {
                 }
             }
         },
+        initMedia() {
+            this.media = window.matchMedia(`(max-width: ${this.breakpoint})`);
+            this.viewChanged = this.media.matches;
+            this.bindMediaChangeListener();
+        },
+        destroyMedia() {
+            this.unbindMediaChangeListener();
+        },
+        bindMediaChangeListener() {
+            if (this.media && !this.mediaChangeListener) {
+                this.mediaChangeListener = (event) => {
+                    this.viewChanged = event.matches;
+                };
+
+                this.media.addEventListener('change', this.mediaChangeListener);
+            }
+        },
+        unbindMediaChangeListener() {
+            if (this.media && this.mediaChangeListener) {
+                this.media.removeEventListener('change', this.mediaChangeListener);
+                this.mediaChangeListener = null;
+            }
+        },
         createStyle() {
             if (!this.styleElement) {
                 this.$el.setAttribute(this.attributeSelector, '');
@@ -814,22 +882,6 @@ export default {
     .p-picklist[${this.attributeSelector}] .p-picklist-buttons .p-button:last-child {
         margin-right: 0;
     }
-
-    .p-picklist[${this.attributeSelector}] .pi-angle-right:before {
-        content: "\\e930"
-    }
-
-    .p-picklist[${this.attributeSelector}] .pi-angle-double-right:before {
-        content: "\\e92c"
-    }
-
-    .p-picklist[${this.attributeSelector}] .pi-angle-left:before {
-        content: "\\e933"
-    }
-
-    .p-picklist[${this.attributeSelector}] .pi-angle-double-left:before {
-        content: "\\e92f"
-    }
 }
 `;
 
diff --git a/components/lib/progressbar/ProgressBar.d.ts b/components/lib/progressbar/ProgressBar.d.ts
index 954483230..2fbee93be 100755
--- a/components/lib/progressbar/ProgressBar.d.ts
+++ b/components/lib/progressbar/ProgressBar.d.ts
@@ -10,6 +10,41 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ProgressBarPassThroughOptionType = ProgressBarPassThroughAttributes | ((options: ProgressBarPassThroughMethodOptions) => ProgressBarPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ProgressBarPassThroughMethodOptions {
+    props: ProgressBarProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ProgressBarProps.pt}
+ */
+export interface ProgressBarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ProgressBarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the value's DOM element.
+     */
+    value?: ProgressBarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ProgressBarPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ProgressBarPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in ProgressBar component.
  */
@@ -28,6 +63,11 @@ export interface ProgressBarProps {
      * @defaultValue true
      */
     showValue?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ProgressBarPassThroughOptions}
+     */
+    pt?: ProgressBarPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/progressbar/ProgressBar.vue b/components/lib/progressbar/ProgressBar.vue
index fd5beacb4..4d3eb56e9 100755
--- a/components/lib/progressbar/ProgressBar.vue
+++ b/components/lib/progressbar/ProgressBar.vue
@@ -1,19 +1,22 @@
 <template>
-    <div role="progressbar" :class="containerClass" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100">
-        <div v-if="determinate" class="p-progressbar-value p-progressbar-value-animate" :style="progressStyle">
-            <div v-if="value != null && value !== 0 && showValue" class="p-progressbar-label">
+    <div role="progressbar" :class="containerClass" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100" v-bind="ptm('root')">
+        <div v-if="determinate" class="p-progressbar-value p-progressbar-value-animate" :style="progressStyle" v-bind="ptm('value')">
+            <div v-if="value != null && value !== 0 && showValue" class="p-progressbar-label" v-bind="ptm('label')">
                 <slot>{{ value + '%' }}</slot>
             </div>
         </div>
-        <div v-if="indeterminate" class="p-progressbar-indeterminate-container">
-            <div class="p-progressbar-value p-progressbar-value-animate"></div>
+        <div v-if="indeterminate" class="p-progressbar-indeterminate-container" v-bind="ptm('root')">
+            <div class="p-progressbar-value p-progressbar-value-animate" v-bind="ptm('value')"></div>
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'ProgressBar',
+    extends: BaseComponent,
     props: {
         value: {
             type: Number,
diff --git a/components/lib/progressspinner/ProgressSpinner.d.ts b/components/lib/progressspinner/ProgressSpinner.d.ts
index 533875822..23fb36c1d 100755
--- a/components/lib/progressspinner/ProgressSpinner.d.ts
+++ b/components/lib/progressspinner/ProgressSpinner.d.ts
@@ -9,6 +9,41 @@
  */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ProgressSpinnerPassThroughOptionType = ProgressSpinnerPassThroughAttributes | ((options: ProgressSpinnerPassThroughMethodOptions) => ProgressSpinnerPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ProgressSpinnerPassThroughMethodOptions {
+    props: ProgressSpinnerProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ProgressSpinnerProps.pt}
+ */
+export interface ProgressSpinnerPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ProgressSpinnerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the spinner's DOM element.
+     */
+    spinner?: ProgressSpinnerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the circle's DOM element.
+     */
+    circle?: ProgressSpinnerPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ProgressSpinnerPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in ProgressSpinner component.
  */
@@ -27,6 +62,11 @@ export interface ProgressSpinnerProps {
      * @defaultValue 2s
      */
     animationDuration?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ProgressSpinnerPassThroughOptions}
+     */
+    pt?: ProgressSpinnerPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/progressspinner/ProgressSpinner.vue b/components/lib/progressspinner/ProgressSpinner.vue
index 37a304eb8..c10da4e18 100755
--- a/components/lib/progressspinner/ProgressSpinner.vue
+++ b/components/lib/progressspinner/ProgressSpinner.vue
@@ -1,14 +1,17 @@
 <template>
-    <div class="p-progress-spinner" role="progressbar">
-        <svg class="p-progress-spinner-svg" viewBox="25 25 50 50" :style="svgStyle">
-            <circle class="p-progress-spinner-circle" cx="50" cy="50" r="20" :fill="fill" :stroke-width="strokeWidth" strokeMiterlimit="10" />
+    <div class="p-progress-spinner" role="progressbar" v-bind="ptm('root')">
+        <svg class="p-progress-spinner-svg" viewBox="25 25 50 50" :style="svgStyle" v-bind="ptm('spinner')">
+            <circle class="p-progress-spinner-circle" cx="50" cy="50" r="20" :fill="fill" :stroke-width="strokeWidth" strokeMiterlimit="10" v-bind="ptm('circle')" />
         </svg>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'ProgressSpinner',
+    extends: BaseComponent,
     props: {
         strokeWidth: {
             type: String,
diff --git a/components/lib/radiobutton/RadioButton.d.ts b/components/lib/radiobutton/RadioButton.d.ts
index 5550884ec..22b13b872 100755
--- a/components/lib/radiobutton/RadioButton.d.ts
+++ b/components/lib/radiobutton/RadioButton.d.ts
@@ -10,6 +10,61 @@
 import { InputHTMLAttributes } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type RadioButtonPassThroughOptionType = RadioButtonPassThroughAttributes | ((options: RadioButtonPassThroughMethodOptions) => RadioButtonPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface RadioButtonPassThroughMethodOptions {
+    props: RadioButtonProps;
+    state: RadioButtonState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link RadioButtonProps.pt}
+ */
+export interface RadioButtonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: RadioButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: RadioButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: RadioButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden accessible DOM element wrapper.
+     */
+    hiddenInputWrapper?: RadioButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden accessible DOM element.
+     */
+    hiddenInput?: RadioButtonPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface RadioButtonPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in RadioButton component.
+ */
+export interface RadioButtonState {
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in RadioButton component.
  */
diff --git a/components/lib/radiobutton/RadioButton.vue b/components/lib/radiobutton/RadioButton.vue
index 7fec2faae..6eddfab2e 100755
--- a/components/lib/radiobutton/RadioButton.vue
+++ b/components/lib/radiobutton/RadioButton.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :class="containerClass" @click="onClick($event)">
-        <div class="p-hidden-accessible">
+    <div :class="containerClass" @click="onClick($event)" v-bind="ptm('root')">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
             <input
                 ref="input"
                 :id="inputId"
@@ -15,20 +15,22 @@
                 :aria-label="ariaLabel"
                 @focus="onFocus"
                 @blur="onBlur"
-                v-bind="inputProps"
+                v-bind="ptm('hiddenInput')"
             />
         </div>
-        <div ref="box" :class="['p-radiobutton-box', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]">
-            <div class="p-radiobutton-icon"></div>
+        <div ref="box" :class="['p-radiobutton-box', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]" v-bind="{ ...inputProps, ...ptm('input') }">
+            <div class="p-radiobutton-icon" v-bind="ptm('icon')"></div>
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'RadioButton',
+    extends: BaseComponent,
     emits: ['click', 'update:modelValue', 'change', 'focus', 'blur'],
     props: {
         value: null,
diff --git a/components/lib/rating/Rating.d.ts b/components/lib/rating/Rating.d.ts
index 45bb5aa32..0fea3232f 100755
--- a/components/lib/rating/Rating.d.ts
+++ b/components/lib/rating/Rating.d.ts
@@ -10,6 +10,97 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type RatingPassThroughOptionType = RatingPassThroughAttributes | ((options: RatingPassThroughMethodOptions) => RatingPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface RatingPassThroughMethodOptions {
+    props: RatingProps;
+    state: RatingState;
+    context: RatingContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link RatingProps.pt}
+ */
+export interface RatingPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the cancel icon's DOM element.
+     */
+    cancelIcon?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the on icon's DOM element.
+     */
+    onIcon?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the off icon's DOM element.
+     */
+    offIcon?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden cancel inputW wapper's DOM element.
+     */
+    hiddenCancelInputWrapper?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden cancel input's DOM element.
+     */
+    hiddenCancelInput?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden item input wrapper's DOM element.
+     */
+    hiddenItemInputWrapper?: RatingPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden item input's DOM element.
+     */
+    hiddenItemInput?: RatingPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface RatingPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Rating component.
+ */
+export interface RatingState {
+    /**
+     * name state as a number.
+     */
+    name: string;
+    /**
+     * focusedOptionIndex state as a number.
+     */
+    focusedOptionIndex: number;
+}
+
+/**
+ * Defines current options in Rating component.
+ */
+export interface RatingContext {
+    /**
+     * Current active state of the item as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state of item as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Custom change event.
  * @see {@link RatingEmits.change}
@@ -59,16 +150,24 @@ export interface RatingProps {
     cancel?: boolean | undefined;
     /**
      * Icon for the on state.
+     * @deprecated since v3.27.0. Use 'onicon' slot.
      */
     onIcon?: string | undefined;
     /**
      * Icon for the off state.
+     * @deprecated since v3.27.0. Use 'officon' slot.
      */
     offIcon?: string | undefined;
     /**
      * Icon for the cancelable state.
+     * @deprecated since v3.27.0. Use 'cancelicon' slot.
      */
     cancelIcon?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {RatingPassThroughOptions}
+     */
+    pt?: RatingPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/rating/Rating.spec.js b/components/lib/rating/Rating.spec.js
index f7718a649..0ab65c6f5 100644
--- a/components/lib/rating/Rating.spec.js
+++ b/components/lib/rating/Rating.spec.js
@@ -1,18 +1,7 @@
-import { config, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { expect } from 'vitest';
 import Rating from './Rating.vue';
 
-config.global.mocks = {
-    $primevue: {
-        config: {
-            locale: {
-                aria: {
-                    stars: '5'
-                }
-            }
-        }
-    }
-};
 describe('Rating.vue', () => {
     let wrapper;
 
diff --git a/components/lib/rating/Rating.vue b/components/lib/rating/Rating.vue
index d9ba5034a..92a5fedd7 100755
--- a/components/lib/rating/Rating.vue
+++ b/components/lib/rating/Rating.vue
@@ -1,16 +1,28 @@
 <template>
-    <div :class="containerClass">
-        <div v-if="cancel" :class="['p-rating-item p-rating-cancel-item', { 'p-focus': focusedOptionIndex === 0 }]" @click="onOptionClick($event, 0)">
-            <span class="p-hidden-accessible">
-                <input type="radio" value="0" :name="name" :checked="modelValue === 0" :disabled="disabled" :readonly="readonly" :aria-label="cancelAriaLabel()" @focus="onFocus($event, 0)" @blur="onBlur" @change="onChange($event, 0)" />
+    <div :class="containerClass" v-bind="ptm('root')">
+        <div v-if="cancel" :class="['p-rating-item p-rating-cancel-item', { 'p-focus': focusedOptionIndex === 0 }]" @click="onOptionClick($event, 0)" v-bind="ptm('cancelItem')">
+            <span class="p-hidden-accessible" v-bind="ptm('hiddenCancelInputWrapper')">
+                <input
+                    type="radio"
+                    value="0"
+                    :name="name"
+                    :checked="modelValue === 0"
+                    :disabled="disabled"
+                    :readonly="readonly"
+                    :aria-label="cancelAriaLabel()"
+                    @focus="onFocus($event, 0)"
+                    @blur="onBlur"
+                    @change="onChange($event, 0)"
+                    v-bind="ptm('hiddenCancelInput')"
+                />
             </span>
             <slot name="cancelicon">
-                <component :is="cancelIcon ? 'span' : 'BanIcon'" :class="['p-rating-icon p-rating-cancel', cancelIcon]" />
+                <component :is="cancelIcon ? 'span' : 'BanIcon'" :class="['p-rating-icon p-rating-cancel', cancelIcon]" v-bind="ptm('cancelIcon')" />
             </slot>
         </div>
         <template v-for="value in stars" :key="value">
-            <div :class="['p-rating-item', { 'p-rating-item-active': value <= modelValue, 'p-focus': value === focusedOptionIndex }]" @click="onOptionClick($event, value)">
-                <span class="p-hidden-accessible">
+            <div :class="['p-rating-item', { 'p-rating-item-active': value <= modelValue, 'p-focus': value === focusedOptionIndex }]" @click="onOptionClick($event, value)" v-bind="getPTOptions(value, 'item')">
+                <span class="p-hidden-accessible" v-bind="ptm('hiddenItemInputWrapper')">
                     <input
                         type="radio"
                         :value="value"
@@ -22,13 +34,14 @@
                         @focus="onFocus($event, value)"
                         @blur="onBlur"
                         @change="onChange($event, value)"
+                        v-bind="ptm('hiddenItemInput')"
                     />
                 </span>
                 <slot v-if="value <= modelValue" name="onicon" :value="value">
-                    <component :is="onIcon ? 'span' : 'StarFillIcon'" :class="['p-rating-icon', onIcon]" />
+                    <component :is="onIcon ? 'span' : 'StarFillIcon'" :class="['p-rating-icon', onIcon]" v-bind="ptm('onIcon')" />
                 </slot>
                 <slot v-else name="officon" :value="value">
-                    <component :is="onIcon ? 'span' : 'StarIcon'" :class="['p-rating-icon', offIcon]" />
+                    <component :is="offIcon ? 'span' : 'StarIcon'" :class="['p-rating-icon', offIcon]" v-bind="ptm('offIcon')" />
                 </slot>
             </div>
         </template>
@@ -36,13 +49,15 @@
 </template>
 
 <script>
-import BanIcon from 'primevue/icon/ban';
-import StarIcon from 'primevue/icon/star';
-import StarFillIcon from 'primevue/icon/starfill';
+import BaseComponent from 'primevue/basecomponent';
+import BanIcon from 'primevue/icons/ban';
+import StarIcon from 'primevue/icons/star';
+import StarFillIcon from 'primevue/icons/starfill';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Rating',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change', 'focus', 'blur'],
     props: {
         modelValue: {
@@ -93,6 +108,14 @@ export default {
         this.name = this.name || UniqueComponentId();
     },
     methods: {
+        getPTOptions(value, key) {
+            return this.ptm(key, {
+                context: {
+                    active: value <= this.modelValue,
+                    focused: value === this.focusedOptionIndex
+                }
+            });
+        },
         onOptionClick(event, value) {
             if (!this.readonly && !this.disabled) {
                 this.onOptionSelect(event, value);
diff --git a/components/lib/row/Row.d.ts b/components/lib/row/Row.d.ts
index 705b383d4..6c15b16d8 100755
--- a/components/lib/row/Row.d.ts
+++ b/components/lib/row/Row.d.ts
@@ -5,8 +5,37 @@
  *
  * @module row
  */
+import { ColumnGroupPassThroughOptions } from '../columngroup';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type RowPassThroughOptionType = RowPassThroughAttributes | ((options: RowPassThroughMethodOptions) => RowPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface RowPassThroughMethodOptions {
+    props: RowProps;
+    parent: ColumnGroupPassThroughOptions;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link RowProps.pt}
+ */
+export interface RowPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: RowPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface RowPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Row component.
  */
diff --git a/components/lib/row/Row.vue b/components/lib/row/Row.vue
index 5eafa33e9..2b41ecd08 100755
--- a/components/lib/row/Row.vue
+++ b/components/lib/row/Row.vue
@@ -1,6 +1,9 @@
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Row',
+    extends: BaseComponent,
     render() {
         return null;
     }
diff --git a/components/lib/scrollpanel/ScrollPanel.d.ts b/components/lib/scrollpanel/ScrollPanel.d.ts
index 250c433b2..c41848e15 100644
--- a/components/lib/scrollpanel/ScrollPanel.d.ts
+++ b/components/lib/scrollpanel/ScrollPanel.d.ts
@@ -40,11 +40,11 @@ export interface ScrollPanelPassThroughOptions {
     /**
      * Uses to pass attributes to the horizontal panel's DOM element.
      */
-    barx?: ScrollPanelPassThroughOptionType;
+    barX?: ScrollPanelPassThroughOptionType;
     /**
      * Uses to pass attributes to the vertical panel's DOM element.
      */
-    bary?: ScrollPanelPassThroughOptionType;
+    barY?: ScrollPanelPassThroughOptionType;
 }
 
 /**
diff --git a/components/lib/scrolltop/ScrollTop.d.ts b/components/lib/scrolltop/ScrollTop.d.ts
index a6e6595ad..bc65e65d2 100644
--- a/components/lib/scrolltop/ScrollTop.d.ts
+++ b/components/lib/scrolltop/ScrollTop.d.ts
@@ -10,6 +10,49 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ScrollTopPassThroughOptionType = ScrollTopPassThroughAttributes | ((options: ScrollTopPassThroughMethodOptions) => ScrollTopPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ScrollTopPassThroughMethodOptions {
+    props: ScrollTopProps;
+    state: ScrollTopState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ScrollTopProps.pt}
+ */
+export interface ScrollTopPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ScrollTopPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ScrollTopPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ScrollTopPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in ScrollTop component.
+ */
+export interface ScrollTopState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+}
+
 /**
  * Defines valid properties in ScrollTop component.
  */
@@ -26,6 +69,7 @@ export interface ScrollTopProps {
     threshold?: number | undefined;
     /**
      * Icon to display.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     icon?: string | undefined;
     /**
@@ -33,6 +77,11 @@ export interface ScrollTopProps {
      * @defaultValue smooth
      */
     behavior?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ScrollTopPassThroughOptions}
+     */
+    pt?: ScrollTopPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/scrolltop/ScrollTop.vue b/components/lib/scrolltop/ScrollTop.vue
index 63a150771..3e12a1e7d 100644
--- a/components/lib/scrolltop/ScrollTop.vue
+++ b/components/lib/scrolltop/ScrollTop.vue
@@ -1,18 +1,21 @@
 <template>
     <transition name="p-scrolltop" appear @enter="onEnter" @after-leave="onAfterLeave">
-        <button v-if="visible" :ref="containerRef" :class="containerClass" @click="onClick" type="button" :aria-label="scrollTopAriaLabel">
+        <button v-if="visible" :ref="containerRef" :class="containerClass" @click="onClick" type="button" :aria-label="scrollTopAriaLabel" v-bind="ptm('root')">
             <slot name="icon">
-                <component :is="icon ? 'span' : 'ChevronUpIcon'" :class="['p-scrolltop-icon', icon]"></component>
+                <component :is="icon ? 'span' : 'ChevronUpIcon'" :class="['p-scrolltop-icon', icon]" v-bind="ptm('icon')" />
             </slot>
         </button>
     </transition>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import ChevronUpIcon from 'primevue/icons/chevronup';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
-import ChevronUpIcon from 'primevue/icon/chevronup';
+
 export default {
     name: 'ScrollTop',
+    extends: BaseComponent,
     scrollListener: null,
     container: null,
     props: {
diff --git a/components/lib/selectbutton/SelectButton.d.ts b/components/lib/selectbutton/SelectButton.d.ts
index 4b23a0a36..8c2b9f4d4 100755
--- a/components/lib/selectbutton/SelectButton.d.ts
+++ b/components/lib/selectbutton/SelectButton.d.ts
@@ -10,6 +10,43 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type SelectButtonPassThroughOptionType = SelectButtonPassThroughAttributes | ((options: SelectButtonPassThroughMethodOptions) => SelectButtonPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SelectButtonPassThroughMethodOptions {
+    props: SelectButtonProps;
+    state: SelectButtonState;
+    context: SelectButtonContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SelectButtonProps.pt}
+ */
+export interface SelectButtonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SelectButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button's DOM element.
+     */
+    button?: SelectButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: SelectButtonPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface SelectButtonPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Custom change event.
  * @see {@link SelectButtonEmits.change}
@@ -25,6 +62,32 @@ export interface SelectButtonChangeEvent {
     value: any;
 }
 
+/**
+ * Defines current inline state in SelectButton component.
+ */
+export interface SelectButtonState {
+    /**
+     * FocusedIndex state as a number.
+     */
+    focusedIndex: number;
+}
+
+/**
+ * Defines current options in SelectButton component.
+ */
+export interface SelectButtonContext {
+    /**
+     * Current active state of the item as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state of item as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in SelectButton component.
  */
@@ -72,6 +135,11 @@ export interface SelectButtonProps {
      * Identifier of the underlying element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SelectButtonPassThroughOptions}
+     */
+    pt?: SelectButtonPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/selectbutton/SelectButton.vue b/components/lib/selectbutton/SelectButton.vue
index 0a27e2560..0694b990e 100755
--- a/components/lib/selectbutton/SelectButton.vue
+++ b/components/lib/selectbutton/SelectButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="containerClass" role="group" :aria-labelledby="ariaLabelledby">
+    <div ref="container" :class="containerClass" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')">
         <div
             v-for="(option, i) of options"
             :key="getOptionRenderKey(option)"
@@ -14,20 +14,23 @@
             @keydown="onKeydown($event, option, i)"
             @focus="onFocus($event)"
             @blur="onBlur($event, option)"
+            v-bind="getPTOptions(option, 'button')"
         >
             <slot name="option" :option="option" :index="i">
-                <span class="p-button-label">{{ getOptionLabel(option) }}</span>
+                <span class="p-button-label" v-bind="getPTOptions(option, 'label')">{{ getOptionLabel(option) }}</span>
             </slot>
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'SelectButton',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'focus', 'blur', 'change'],
     props: {
         modelValue: null,
@@ -75,6 +78,14 @@ export default {
         getOptionRenderKey(option) {
             return this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option);
         },
+        getPTOptions(option, key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.isSelected(option),
+                    disabled: this.isOptionDisabled(option)
+                }
+            });
+        },
         isOptionDisabled(option) {
             return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
         },
diff --git a/components/lib/sidebar/Sidebar.d.ts b/components/lib/sidebar/Sidebar.d.ts
index 6dc071c69..585e61053 100755
--- a/components/lib/sidebar/Sidebar.d.ts
+++ b/components/lib/sidebar/Sidebar.d.ts
@@ -10,6 +10,69 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type SidebarPassThroughOptionType = SidebarPassThroughAttributes | ((options: SidebarPassThroughMethodOptions) => SidebarPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SidebarPassThroughMethodOptions {
+    props: SidebarProps;
+    state: SidebarState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SidebarProps.pt}
+ */
+export interface SidebarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header content's DOM element.
+     */
+    headerContent?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: SidebarPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface SidebarPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Sidebar component.
+ */
+export interface SidebarState {
+    /**
+     * Current container visible state as a boolean.
+     * @defaultValue false
+     */
+    containerVisible: boolean;
+}
+
 /**
  * Defines valid properties in Sidebar component.
  */
@@ -46,6 +109,7 @@ export interface SidebarProps {
     showCloseIcon?: boolean | undefined;
     /**
      * Icon to display in the sidebar close button.
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**
@@ -58,6 +122,11 @@ export interface SidebarProps {
      * @defaultValue false
      */
     blockScroll?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SidebarPassThroughOptions}
+     */
+    pt?: SidebarPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/sidebar/Sidebar.vue b/components/lib/sidebar/Sidebar.vue
index 140cd9bea..acde9e6f5 100755
--- a/components/lib/sidebar/Sidebar.vue
+++ b/components/lib/sidebar/Sidebar.vue
@@ -1,19 +1,19 @@
 <template>
     <Portal>
-        <div v-if="containerVisible" :ref="maskRef" :class="maskClass" @mousedown="onMaskClick">
+        <div v-if="containerVisible" :ref="maskRef" :class="maskClass" @mousedown="onMaskClick" v-bind="ptm('mask')">
             <transition name="p-sidebar" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
-                <div v-if="visible" :ref="containerRef" v-focustrap :class="containerClass" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="$attrs">
-                    <div :ref="headerContainerRef" class="p-sidebar-header">
-                        <div v-if="$slots.header" class="p-sidebar-header-content">
+                <div v-if="visible" :ref="containerRef" v-focustrap :class="containerClass" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="{ ...$attrs, ...ptm('root') }">
+                    <div :ref="headerContainerRef" class="p-sidebar-header" v-bind="ptm('header')">
+                        <div v-if="$slots.header" class="p-sidebar-header-content" v-bind="ptm('headerContent')">
                             <slot name="header"></slot>
                         </div>
-                        <button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" class="p-sidebar-close p-sidebar-icon p-link" :aria-label="closeAriaLabel" @click="hide">
+                        <button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" class="p-sidebar-close p-sidebar-icon p-link" :aria-label="closeAriaLabel" @click="hide" v-bind="ptm('closeButton')">
                             <slot name="closeicon">
-                                <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-sidebar-close-icon ', closeIcon]"></component>
+                                <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-sidebar-close-icon ', closeIcon]" v-bind="ptm('closeIcon')"></component>
                             </slot>
                         </button>
                     </div>
-                    <div :ref="contentRef" class="p-sidebar-content">
+                    <div :ref="contentRef" class="p-sidebar-content" v-bind="ptm('content')">
                         <slot></slot>
                     </div>
                 </div>
@@ -23,14 +23,16 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import FocusTrap from 'primevue/focustrap';
+import TimesIcon from 'primevue/icons/times';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
-import TimesIcon from 'primevue/icon/times';
 
 export default {
     name: 'Sidebar',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['update:visible', 'show', 'hide', 'after-hide'],
     props: {
diff --git a/components/lib/skeleton/Skeleton.d.ts b/components/lib/skeleton/Skeleton.d.ts
index 26b507822..5035dc031 100644
--- a/components/lib/skeleton/Skeleton.d.ts
+++ b/components/lib/skeleton/Skeleton.d.ts
@@ -9,6 +9,33 @@
  */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type SkeletonPassThroughOptionType = SkeletonPassThroughAttributes | ((options: SkeletonPassThroughMethodOptions) => SkeletonPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SkeletonPassThroughMethodOptions {
+    props: SkeletonProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SkeletonProps.pt}
+ */
+export interface SkeletonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SkeletonPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface SkeletonPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Skeleton component.
  */
@@ -41,6 +68,11 @@ export interface SkeletonProps {
      * @defaultValue wave
      */
     animation?: 'wave' | 'none' | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SkeletonPassThroughOptions}
+     */
+    pt?: SkeletonPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/skeleton/Skeleton.vue b/components/lib/skeleton/Skeleton.vue
index a3c72fc7c..f8bfa5f03 100644
--- a/components/lib/skeleton/Skeleton.vue
+++ b/components/lib/skeleton/Skeleton.vue
@@ -1,10 +1,13 @@
 <template>
-    <div :style="containerStyle" :class="containerClass" aria-hidden="true"></div>
+    <div :style="containerStyle" :class="containerClass" aria-hidden="true" v-bind="ptm('root')"></div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Skeleton',
+    extends: BaseComponent,
     props: {
         shape: {
             type: String,
diff --git a/components/lib/slider/Slider.d.ts b/components/lib/slider/Slider.d.ts
index c31c7b4d9..cd395f4d9 100755
--- a/components/lib/slider/Slider.d.ts
+++ b/components/lib/slider/Slider.d.ts
@@ -9,6 +9,49 @@
  */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type SliderPassThroughOptionType = SliderPassThroughAttributes | ((options: SliderPassThroughMethodOptions) => SliderPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SliderPassThroughMethodOptions {
+    props: SliderProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SliderProps.pt}
+ */
+export interface SliderPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SliderPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the range's DOM element.
+     */
+    range?: SliderPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the handle's DOM element.
+     */
+    handle?: SliderPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the start handler's DOM element.
+     */
+    startHandler?: SliderPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the end handler's DOM element.
+     */
+    endHandler?: SliderPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface SliderPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Custom slide end event.
  * @see {@link SliderEmits.slideend}
@@ -74,6 +117,11 @@ export interface SliderProps {
      * Used to define a string that labels the element.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SliderPassThroughOptions}
+     */
+    pt?: SliderPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/slider/Slider.vue b/components/lib/slider/Slider.vue
index c94637b92..a9a133577 100755
--- a/components/lib/slider/Slider.vue
+++ b/components/lib/slider/Slider.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :class="containerClass" @click="onBarClick">
-        <span class="p-slider-range" :style="rangeStyle"></span>
+    <div :class="containerClass" @click="onBarClick" v-bind="ptm('root')">
+        <span class="p-slider-range" :style="rangeStyle" v-bind="ptm('range')"></span>
         <span
             v-if="!range"
             class="p-slider-handle"
@@ -18,6 +18,7 @@
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
             :aria-orientation="orientation"
+            v-bind="ptm('handle')"
         ></span>
         <span
             v-if="range"
@@ -36,6 +37,7 @@
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
             :aria-orientation="orientation"
+            v-bind="ptm('startHandler')"
         ></span>
         <span
             v-if="range"
@@ -54,15 +56,18 @@
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
             :aria-orientation="orientation"
+            v-bind="ptm('endHandler')"
         ></span>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'Slider',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change', 'slideend'],
     props: {
         modelValue: [Number, Array],
diff --git a/components/lib/speeddial/SpeedDial.d.ts b/components/lib/speeddial/SpeedDial.d.ts
index b0cf692fd..50503e240 100644
--- a/components/lib/speeddial/SpeedDial.d.ts
+++ b/components/lib/speeddial/SpeedDial.d.ts
@@ -8,9 +8,105 @@
  *
  */
 import { VNode } from 'vue';
+import { ButtonPassThroughOptions } from '../button';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type SpeedDialPassThroughOptionType = SpeedDialPassThroughAttributes | ((options: SpeedDialPassThroughMethodOptions) => SpeedDialPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SpeedDialPassThroughMethodOptions {
+    props: SpeedDialProps;
+    state: SpeedDialState;
+    context: SpeedDialContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SpeedDialProps.pt}
+ */
+export interface SpeedDialPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SpeedDialPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     *  @see {@link ButtonPassThroughOptions}
+     */
+    button?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the menu's DOM element.
+     */
+    menu?: SpeedDialPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the menu item's DOM element.
+     */
+    menuitem?: SpeedDialPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: SpeedDialPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action icon's DOM element.
+     */
+    actionIcon?: SpeedDialPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: SpeedDialPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface SpeedDialPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in SpeedDial component.
+ */
+export interface SpeedDialState {
+    /**
+     * List of items' id.
+     */
+    id: string;
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+    /**
+     * Current click state of component as a boolean.
+     * @defaultValue false
+     */
+    isItemClicked: boolean;
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused option index as a number.
+     * @defaultValue -1
+     */
+    focusedOptionIndex: number;
+}
+
+/**
+ * Defines current options in SpeedDial component.
+ */
+export interface SpeedDialContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
+
 /**
  * Defines tooltip options.
  * @see {@link SpeedDialProps.tooltipOptions}
@@ -93,11 +189,12 @@ export interface SpeedDialProps {
     maskClass?: string | undefined;
     /**
      * Show icon of the button element.
-     * @defaultValue pi pi-plus
+     * @deprecated since v3.27.0. Use 'showicon' slot.
      */
     showIcon?: string | undefined;
     /**
      * Hide icon of the button element.
+     * @deprecated since v3.27.0. Use 'hideicon' slot.
      */
     hideIcon?: string | undefined;
     /**
@@ -126,6 +223,11 @@ export interface SpeedDialProps {
      * Identifier of the underlying list element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SpeedDialPassThroughOptions}
+     */
+    pt?: SpeedDialPassThroughOptions;
 }
 
 /**
@@ -153,6 +255,16 @@ export interface SpeedDialSlots {
          */
         toggle(): void;
     }): VNode[];
+    /**
+     * Custom icon template.
+     * @param {Object} scope - icon slot's params.
+     */
+    icon(scope: {
+        /**
+         *
+         */
+        visible: boolean;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue
index bf6671d40..e88b40525 100644
--- a/components/lib/speeddial/SpeedDial.vue
+++ b/components/lib/speeddial/SpeedDial.vue
@@ -1,10 +1,9 @@
 <template>
-    <div :ref="containerRef" :class="containerClass" :style="style">
+    <div :ref="containerRef" :class="containerClass" :style="style" v-bind="ptm('root')">
         <slot name="button" :toggle="onClick">
             <SDButton
                 type="button"
                 :class="buttonClassName"
-                :icon="iconClassName"
                 @click="onClick($event)"
                 :disabled="disabled"
                 @keydown="onTogglerKeydown"
@@ -13,11 +12,28 @@
                 :aria-controls="id + '_list'"
                 :aria-label="ariaLabel"
                 :aria-labelledby="ariaLabelledby"
-            />
+                :pt="ptm('button')"
+            >
+                <template #icon>
+                    <slot name="icon" :visible="d_visible">
+                        <component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" v-bind="ptm('button')['icon']" />
+                        <component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" v-bind="ptm('button')['icon']" />
+                    </slot>
+                </template>
+            </SDButton>
         </slot>
-        <ul :ref="listRef" :id="id + '_list'" class="p-speeddial-list" role="menu" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1">
+        <ul :ref="listRef" :id="id + '_list'" class="p-speeddial-list" role="menu" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1" v-bind="ptm('menu')">
             <template v-for="(item, index) of model" :key="index">
-                <li v-if="isItemVisible(item)" :id="`${id}_${index}`" :aria-controls="`${id}_item`" class="p-speeddial-item" :class="itemClass(`${id}_${index}`)" :style="getItemStyle(index)" role="menuitem">
+                <li
+                    v-if="isItemVisible(item)"
+                    :id="`${id}_${index}`"
+                    :aria-controls="`${id}_item`"
+                    class="p-speeddial-item"
+                    :class="itemClass(`${id}_${index}`)"
+                    :style="getItemStyle(index)"
+                    role="menuitem"
+                    v-bind="getPTOptions(`${id}_${index}`, 'menuitem')"
+                >
                     <template v-if="!$slots.item">
                         <a
                             v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
@@ -29,8 +45,9 @@
                             :target="item.target"
                             @click="onItemClick($event, item)"
                             :aria-label="item.label"
+                            v-bind="getPTOptions(`${id}_${index}`, 'action')"
                         >
-                            <span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]"></span>
+                            <span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]" v-bind="getPTOptions(`${id}_${index}`, 'actionIcon')"></span>
                         </a>
                     </template>
                     <component v-else :is="$slots.item" :item="item"></component>
@@ -39,18 +56,21 @@
         </ul>
     </div>
     <template v-if="mask">
-        <div :class="maskClassName" :style="maskStyle"></div>
+        <div :class="maskClassName" :style="maskStyle" v-bind="ptm('mask')"></div>
     </template>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
+import PlusIcon from 'primevue/icons/plus';
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SpeedDial',
+    extends: BaseComponent,
     emits: ['click', 'show', 'hide', 'focus', 'blur'],
     props: {
         model: null,
@@ -91,9 +111,12 @@ export default {
         maskClass: null,
         showIcon: {
             type: String,
-            default: 'pi pi-plus'
+            default: undefined
+        },
+        hideIcon: {
+            type: String,
+            default: undefined
         },
-        hideIcon: null,
         rotateAnimation: {
             type: Boolean,
             default: true
@@ -154,6 +177,13 @@ export default {
         this.unbindDocumentClickListener();
     },
     methods: {
+        getPTOptions(id, key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.isItemActive(id)
+                }
+            });
+        },
         onFocus(event) {
             this.focused = true;
 
@@ -474,6 +504,9 @@ export default {
         isItemVisible(item) {
             return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
+        isItemActive(id) {
+            return id === this.focusedOptionId;
+        },
         containerRef(el) {
             this.container = el;
         },
@@ -483,7 +516,7 @@ export default {
         itemClass(id) {
             return [
                 {
-                    'p-focus': id === this.focusedOptionId
+                    'p-focus': this.isItemActive(id)
                 }
             ];
         }
@@ -509,9 +542,6 @@ export default {
                 this.buttonClass
             ];
         },
-        iconClassName() {
-            return this.d_visible && !!this.hideIcon ? this.hideIcon : this.showIcon;
-        },
         maskClassName() {
             return [
                 'p-speeddial-mask',
@@ -526,7 +556,8 @@ export default {
         }
     },
     components: {
-        SDButton: Button
+        SDButton: Button,
+        PlusIcon: PlusIcon
     },
     directives: {
         ripple: Ripple,
diff --git a/components/lib/splitbutton/SplitButton.d.ts b/components/lib/splitbutton/SplitButton.d.ts
index d78ed3a86..9b7482387 100755
--- a/components/lib/splitbutton/SplitButton.d.ts
+++ b/components/lib/splitbutton/SplitButton.d.ts
@@ -8,9 +8,64 @@
  *
  */
 import { ButtonHTMLAttributes, VNode } from 'vue';
+import { ButtonPassThroughOptions } from '../button';
 import { MenuItem } from '../menuitem';
+import { TieredMenuPassThroughOptions } from '../tieredmenu';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type SplitButtonPassThroughOptionType = SplitButtonPassThroughAttributes | ((options: SplitButtonPassThroughMethodOptions) => SplitButtonPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SplitButtonPassThroughMethodOptions {
+    props: SplitButtonProps;
+    state: SplitButtonState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SplitButtonProps.pt}
+ */
+export interface SplitButtonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SplitButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button's DOM element.
+     */
+    button?: SplitButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    menuButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the TieredMenu component.
+     * @see {@link TieredMenuPassThroughOptions}
+     */
+    menu?: TieredMenuPassThroughOptions;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface SplitButtonPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in SplitButton component.
+ */
+export interface SplitButtonState {
+    /**
+     * Current blocked state as a boolean.
+     * @defaultValue false
+     */
+    isBlocked: boolean;
+}
+
 /**
  * Defines valid properties in SplitButton component.
  */
@@ -21,6 +76,7 @@ export interface SplitButtonProps {
     label?: string | undefined;
     /**
      * Name of the icon.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     icon?: string | undefined;
     /**
@@ -66,6 +122,7 @@ export interface SplitButtonProps {
     menuButtonProps?: ButtonHTMLAttributes | undefined;
     /**
      * Name of the menu button icon.
+     * @deprecated since v3.27.0. Use 'menubuttonicon' slot.
      */
     menuButtonIcon?: string | undefined;
     /**
@@ -101,6 +158,11 @@ export interface SplitButtonProps {
      * @defaultValue false
      */
     plain?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SplitButtonPassThroughOptions}
+     */
+    pt?: SplitButtonPassThroughOptions;
 }
 
 /**
@@ -111,6 +173,14 @@ export interface SplitButtonSlots {
      * Button part of the content can easily be customized with the default slot instead of using the built-in modes.
      */
     default(): VNode[];
+    /**
+     * Custom menu button icon template.
+     */
+    icon(): VNode[];
+    /**
+     * Custom menu button icon template.
+     */
+    menubuttonicon(): VNode[];
 }
 
 /**
diff --git a/components/lib/splitbutton/SplitButton.vue b/components/lib/splitbutton/SplitButton.vue
index 2d5d152c9..56dc1438f 100755
--- a/components/lib/splitbutton/SplitButton.vue
+++ b/components/lib/splitbutton/SplitButton.vue
@@ -1,32 +1,47 @@
 <template>
-    <div :class="containerClass" :style="style">
+    <div :class="containerClass" :style="style" v-bind="ptm('root')">
         <slot>
-            <PVSButton type="button" class="p-splitbutton-defaultbutton" :icon="icon" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps" />
+            <PVSButton type="button" class="p-splitbutton-defaultbutton" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" :pt="ptm('button')" v-bind="buttonProps">
+                <template #icon="slotProps">
+                    <slot name="icon">
+                        <span :class="[icon, slotProps.class]" v-bind="ptm('button')['icon']" />
+                    </slot>
+                </template>
+            </PVSButton>
         </slot>
         <PVSButton
             ref="button"
             type="button"
             class="p-splitbutton-menubutton"
-            :icon="menuButtonIcon"
             :disabled="disabled"
             aria-haspopup="true"
             :aria-expanded="isExpanded"
             :aria-controls="ariaId + '_overlay'"
             @click="onDropdownButtonClick"
             @keydown="onDropdownKeydown"
+            :pt="ptm('menuButton')"
             v-bind="menuButtonProps"
-        />
-        <PVSMenu ref="menu" :id="ariaId + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" />
+        >
+            <template #icon="slotProps">
+                <slot name="menubuttonicon">
+                    <component :is="menuButtonIcon ? 'span' : 'ChevronDownIcon'" :class="[menuButtonIcon, slotProps.class]" v-bind="ptm('menuButton')['icon']" />
+                </slot>
+            </template>
+        </PVSButton>
+        <PVSMenu ref="menu" :id="ariaId + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" :pt="ptm('menu')" />
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
 import TieredMenu from 'primevue/tieredmenu';
 import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SplitButton',
+    extends: BaseComponent,
     emits: ['click'],
     props: {
         label: {
@@ -75,7 +90,7 @@ export default {
         },
         menuButtonIcon: {
             type: String,
-            default: 'pi pi-chevron-down'
+            default: undefined
         },
         severity: {
             type: String,
@@ -152,7 +167,8 @@ export default {
     },
     components: {
         PVSButton: Button,
-        PVSMenu: TieredMenu
+        PVSMenu: TieredMenu,
+        ChevronDownIcon: ChevronDownIcon
     }
 };
 </script>
diff --git a/components/lib/splitter/Splitter.d.ts b/components/lib/splitter/Splitter.d.ts
index efdaf4743..444e33a8e 100644
--- a/components/lib/splitter/Splitter.d.ts
+++ b/components/lib/splitter/Splitter.d.ts
@@ -22,7 +22,7 @@ export interface SplitterPassThroughMethodOptions {
 
 /**
  * Custom resize start event.
- * @see {@link SplitterEmits.resizestar}
+ * @see {@link SplitterEmits.resizestart}
  */
 export interface SplitterResizeStartEvent {
     /**
@@ -37,7 +37,7 @@ export interface SplitterResizeStartEvent {
 
 /**
  * Custom resize end event.
- * @see {@link PickListEmits.resizeend}
+ * @see {@link SplitterEmits.resizeend}
  */
 export interface SplitterResizeEndEvent {
     /**
@@ -66,7 +66,7 @@ export interface SplitterPassThroughOptions {
     /**
      * Uses to pass attributes to the gutter handler's DOM element.
      */
-    gutterhandler?: SplitterPassThroughOptionType;
+    gutterHandler?: SplitterPassThroughOptionType;
 }
 
 /**
@@ -139,7 +139,7 @@ export interface SplitterEmits {
      * Callback to invoke when resize starts.
      * @param {SplitterResizeStartEvent} event - Custom resize start event.
      */
-    resizestar(event: SplitterResizeStartEvent): void;
+    resizestart(event: SplitterResizeStartEvent): void;
     /**
      * Callback to invoke when resize ends.
      * @param {SplitterResizeEndEvent} event - Custom resize end event.
diff --git a/components/lib/steps/Steps.d.ts b/components/lib/steps/Steps.d.ts
index caab37843..4695b1d9b 100755
--- a/components/lib/steps/Steps.d.ts
+++ b/components/lib/steps/Steps.d.ts
@@ -11,6 +11,53 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type StepsPassThroughOptionType = StepsPassThroughAttributes | ((options: StepsPassThroughMethodOptions) => StepsPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface StepsPassThroughMethodOptions {
+    props: StepsProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link StepsProps.pt}
+ */
+export interface StepsPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: StepsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: StepsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: StepsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: StepsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the step's DOM element.
+     */
+    step?: StepsPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: StepsPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface StepsPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Steps component.
  */
@@ -33,6 +80,11 @@ export interface StepsProps {
      * @defaultValue true
      */
     exact?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {StepsPassThroughOptions}
+     */
+    pt?: StepsPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/steps/Steps.vue b/components/lib/steps/Steps.vue
index 294fd21f9..7c1ebf33e 100755
--- a/components/lib/steps/Steps.vue
+++ b/components/lib/steps/Steps.vue
@@ -1,8 +1,8 @@
 <template>
-    <nav :id="id" :class="containerClass">
-        <ol ref="list" class="p-steps-list">
+    <nav :id="id" :class="containerClass" v-bind="ptm('root')">
+        <ol ref="list" class="p-steps-list" v-bind="ptm('menu')">
             <template v-for="(item, index) of model" :key="item.to">
-                <li v-if="visible(item)" :class="getItemClass(item)" :style="item.style">
+                <li v-if="visible(item)" :class="getItemClass(item)" :style="item.style" v-bind="ptm('menuitem')">
                     <template v-if="!$slots.item">
                         <router-link v-if="!isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
                             <a
@@ -12,14 +12,15 @@
                                 :aria-current="isExactActive ? 'step' : undefined"
                                 @click="onItemClick($event, item, navigate)"
                                 @keydown="onItemKeydown($event, item, navigate)"
+                                v-bind="ptm('action')"
                             >
-                                <span class="p-steps-number">{{ index + 1 }}</span>
-                                <span class="p-steps-title">{{ label(item) }}</span>
+                                <span class="p-steps-number" v-bind="ptm('step')">{{ index + 1 }}</span>
+                                <span class="p-steps-title" v-bind="ptm('label')">{{ label(item) }}</span>
                             </a>
                         </router-link>
-                        <span v-else :class="linkClass()" @keydown="onItemKeydown($event, item)">
-                            <span class="p-steps-number">{{ index + 1 }}</span>
-                            <span class="p-steps-title">{{ label(item) }}</span>
+                        <span v-else :class="linkClass()" @keydown="onItemKeydown($event, item)" v-bind="ptm('action')">
+                            <span class="p-steps-number" v-bind="ptm('step')">{{ index + 1 }}</span>
+                            <span class="p-steps-title" v-bind="ptm('label')">{{ label(item) }}</span>
                         </span>
                     </template>
                     <component v-else :is="$slots.item" :item="item"></component>
@@ -30,10 +31,12 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Steps',
+    extends: BaseComponent,
     props: {
         id: {
             type: String,
diff --git a/components/lib/tabmenu/TabMenu.d.ts b/components/lib/tabmenu/TabMenu.d.ts
index f6e54f9c8..fe5991fae 100755
--- a/components/lib/tabmenu/TabMenu.d.ts
+++ b/components/lib/tabmenu/TabMenu.d.ts
@@ -11,6 +11,80 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TabMenuPassThroughOptionType = TabMenuPassThroughAttributes | ((options: TabMenuPassThroughMethodOptions) => TabMenuPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabMenuPassThroughMethodOptions {
+    props: TabMenuProps;
+    state: TabMenuState;
+    context: TabMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TabMenuProps.pt}
+ */
+export interface TabMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TabMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: TabMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: TabMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: TabMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: TabMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: TabMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the inkbar's DOM element.
+     */
+    inkbar?: TabMenuPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TabMenuPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in TabMenu component.
+ */
+export interface TabMenuState {
+    /**
+     * Current active index state as a number.
+     * @defaulValue 0
+     */
+    d_activeIndex: number;
+}
+
+/**
+ * Defines current options in TabMenu component.
+ */
+export interface TabMenuContext {
+    /**
+     * Order of the menuitem
+     */
+    order: number;
+}
+
 /**
  * Custom change event.
  * @see {@link TabMenuEmits['tab-change']}
@@ -52,6 +126,11 @@ export interface TabMenuProps {
      * Identifier of the underlying input element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TabMenuPassThroughOptions}
+     */
+    pt?: TabMenuPassThroughOptions;
 }
 
 /**
@@ -68,6 +147,20 @@ export interface TabMenuSlots {
          */
         item: MenuItem;
     }): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/tabmenu/TabMenu.vue b/components/lib/tabmenu/TabMenu.vue
index ad14ccb41..5778ad8e5 100755
--- a/components/lib/tabmenu/TabMenu.vue
+++ b/components/lib/tabmenu/TabMenu.vue
@@ -1,9 +1,9 @@
 <template>
-    <div class="p-tabmenu p-component">
-        <ul ref="nav" class="p-tabmenu-nav p-reset" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel">
+    <div class="p-tabmenu p-component" v-bind="ptm('root')">
+        <ul ref="nav" class="p-tabmenu-nav p-reset" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('menu')">
             <template v-for="(item, i) of model" :key="label(item) + '_' + i.toString()">
                 <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
-                    <li v-if="visible(item)" ref="tab" :class="getRouteItemClass(item, isActive, isExactActive)" :style="item.style" role="presentation">
+                    <li v-if="visible(item)" ref="tab" :class="getRouteItemClass(item, isActive, isExactActive)" :style="item.style" role="presentation" v-bind="getPTOptions('menuitem', i)">
                         <template v-if="!$slots.item">
                             <a
                                 ref="tabLink"
@@ -16,35 +16,40 @@
                                 :tabindex="isExactActive ? '0' : '-1'"
                                 @click="onItemClick($event, item, i, navigate)"
                                 @keydown="onKeydownItem($event, item, i, navigate)"
+                                v-bind="getPTOptions('action', i)"
                             >
-                                <span v-if="item.icon" :class="getItemIcon(item)"></span>
-                                <span class="p-menuitem-text">{{ label(item) }}</span>
+                                <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
+                                <span v-else-if="item.icon" :class="getItemIcon(item)" v-bind="getPTOptions('icon', i)" />
+                                <span class="p-menuitem-text" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
                             </a>
                         </template>
                         <component v-else :is="$slots.item" :item="item" :index="i"></component>
                     </li>
                 </router-link>
-                <li v-else-if="visible(item)" ref="tab" :class="getItemClass(item, i)" role="presentation" @click="onItemClick($event, item, i)" @keydown="onKeydownItem($event, item, i)">
+                <li v-else-if="visible(item)" ref="tab" :class="getItemClass(item, i)" role="presentation" @click="onItemClick($event, item, i)" @keydown="onKeydownItem($event, item, i)" v-bind="getPTOptions('menuitem', i)">
                     <template v-if="!$slots.item">
-                        <a ref="tabLink" v-ripple role="menuitem" :href="item.url" class="p-menuitem-link" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="setTabIndex(i)">
-                            <span v-if="item.icon" :class="getItemIcon(item)"></span>
-                            <span class="p-menuitem-text">{{ label(item) }}</span>
+                        <a ref="tabLink" v-ripple role="menuitem" :href="item.url" class="p-menuitem-link" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="setTabIndex(i)" v-bind="getPTOptions('action', i)">
+                            <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
+                            <span v-else-if="item.icon" :class="getItemIcon(item)" v-bind="getPTOptions('icon', i)" />
+                            <span class="p-menuitem-text" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
                         </a>
                     </template>
                     <component v-else :is="$slots.item" :item="item" :index="i"></component>
                 </li>
             </template>
-            <li ref="inkbar" role="none" class="p-tabmenu-ink-bar"></li>
+            <li ref="inkbar" role="none" class="p-tabmenu-ink-bar" v-bind="ptm('inkbar')"></li>
         </ul>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'TabMenu',
+    extends: BaseComponent,
     emits: ['update:activeIndex', 'tab-change'],
     props: {
         model: {
@@ -92,6 +97,13 @@ export default {
         clearTimeout(this.timeout);
     },
     methods: {
+        getPTOptions(key, index) {
+            return this.ptm(key, {
+                context: {
+                    order: index
+                }
+            });
+        },
         onItemClick(event, item, index, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();
diff --git a/components/lib/tabpanel/TabPanel.d.ts b/components/lib/tabpanel/TabPanel.d.ts
index 91bb5af0d..2bb2b7927 100755
--- a/components/lib/tabpanel/TabPanel.d.ts
+++ b/components/lib/tabpanel/TabPanel.d.ts
@@ -37,11 +37,11 @@ export interface TabPanelPassThroughOptions {
     /**
      * Uses to pass attributes to the header action's DOM element.
      */
-    headeraction?: TabPanelPassThroughOptionType;
+    headerAction?: TabPanelPassThroughOptionType;
     /**
      * Uses to pass attributes to the title's DOM element.
      */
-    headertitle?: TabPanelPassThroughOptionType;
+    headerTitle?: TabPanelPassThroughOptionType;
     /**
      * Uses to pass attributes to the list's DOM element.
      */
@@ -62,12 +62,10 @@ export interface TabPanelProps {
     header?: string | undefined;
     /**
      * Inline style of the tab header.
-     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     headerStyle?: any;
     /**
      * Style class of the tab header.
-     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     headerClass?: any;
     /**
@@ -82,12 +80,10 @@ export interface TabPanelProps {
     headerActionProps?: AnchorHTMLAttributes | undefined;
     /**
      * Inline style of the tab content.
-     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     contentStyle?: any;
     /**
      * Style class of the tab content.
-     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     contentClass?: any;
     /**
@@ -113,11 +109,11 @@ export interface TabPanelSlots {
     /**
      * Custom content template.
      */
-    default: () => VNode[];
+    default(): VNode[];
     /**
      * Custom header template.
      */
-    header: () => VNode[];
+    header(): VNode[];
 }
 
 export interface TabPanelEmits {}
diff --git a/components/lib/tabview/TabView.d.ts b/components/lib/tabview/TabView.d.ts
index e44dd41fc..43ba7491c 100755
--- a/components/lib/tabview/TabView.d.ts
+++ b/components/lib/tabview/TabView.d.ts
@@ -46,11 +46,11 @@ export interface TabViewPassThroughOptions {
     /**
      * Uses to pass attributes to the nav container's DOM element.
      */
-    navcontainer?: TabViewPassThroughOptionType;
+    navContainer?: TabViewPassThroughOptionType;
     /**
      * Uses to pass attributes to the nav content's DOM element.
      */
-    navcontent?: TabViewPassThroughOptionType;
+    navContent?: TabViewPassThroughOptionType;
     /**
      * Uses to pass attributes to the list's DOM element.
      */
@@ -62,23 +62,23 @@ export interface TabViewPassThroughOptions {
     /**
      * Uses to pass attributes to the previous button's DOM element.
      */
-    prevbutton?: TabViewPassThroughOptionType;
+    previousButton?: TabViewPassThroughOptionType;
     /**
      * Uses to pass attributes to the previous button icon's DOM element.
      */
-    previcon?: TabViewPassThroughOptionType;
+    previousIcon?: TabViewPassThroughOptionType;
     /**
-     * Uses to pass attributes to the nex button's DOM element.
+     * Uses to pass attributes to the next button's DOM element.
      */
-    nextbutton?: TabViewPassThroughOptionType;
+    nextButton?: TabViewPassThroughOptionType;
     /**
      * Uses to pass attributes to the next button icon's DOM element.
      */
-    nexticon?: TabViewPassThroughOptionType;
+    nextIcon?: TabViewPassThroughOptionType;
     /**
      * Uses to pass attributes to the panel's DOM element.
      */
-    panelcontainer?: TabViewPassThroughOptionType;
+    panelContainer?: TabViewPassThroughOptionType;
 }
 
 /**
@@ -151,6 +151,16 @@ export interface TabViewProps {
      * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     nextButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Previous icon of the scrollable tabview.
+     * @deprecated since v3.27.0. Use 'previousicon' slot.
+     */
+    prevIcon?: string | undefined;
+    /**
+     * Next icon of the scrollable tabview.
+     * @deprecated since v3.27.0. Use 'next' slot.
+     */
+    nextIcon?: string | undefined;
     /**
      * Uses to pass attributes to DOM elements inside the component.
      * @type {TabViewPassThroughOptions}
@@ -169,7 +179,7 @@ export interface TabViewSlots {
     /**
      * Previous button icon template for the scrollable component.
      */
-    previcon(): VNode[];
+    previousicon(): VNode[];
     /**
      * Next button icon template for the scrollable component.
      */
@@ -181,10 +191,10 @@ export interface TabViewSlots {
  */
 export interface TabViewEmits {
     /**
-     * Emitted when the value changes.
-     * @param {number} value - New value.
+     * Emitted when the activeIndex changes.
+     * @param {number} index - Current activeIndex.
      */
-    'update:modelValue'(value: number): void;
+    'update:activeIndex'(index: number): void;
     /**
      * Callback to invoke when an active tab is changed.
      * @param {TabViewChangeEvent} event - Custom tab change event.
diff --git a/components/lib/tabview/TabView.vue b/components/lib/tabview/TabView.vue
index 195838a75..eeb3cb0e8 100755
--- a/components/lib/tabview/TabView.vue
+++ b/components/lib/tabview/TabView.vue
@@ -13,7 +13,7 @@
                 v-bind="{ ...previousButtonProps, ...ptm('prevbutton') }"
             >
                 <slot name="previcon">
-                    <span class="pi pi-chevron-left" aria-hidden="true" v-bind="ptm('previcon')"></span>
+                    <component :is="prevIcon ? 'span' : 'ChevronLeftIcon'" aria-hidden="true" :class="prevIcon" v-bind="ptm('previcon')" />
                 </slot>
             </button>
             <div ref="content" class="p-tabview-nav-content" @scroll="onScroll" v-bind="ptm('navcontent')">
@@ -59,7 +59,7 @@
                 v-bind="{ ...nextButtonProps, ...ptm('nextbutton') }"
             >
                 <slot name="nexticon">
-                    <span class="pi pi-chevron-right" aria-hidden="true" v-bind="ptm('nexticon')"></span>
+                    <component :is="nextIcon ? 'span' : 'ChevronRightIcon'" aria-hidden="true" :class="nextIcon" v-bind="ptm('nexticon')" />
                 </slot>
             </button>
         </div>
@@ -83,6 +83,8 @@
 
 <script>
 import BaseComponent from 'primevue/basecomponent';
+import ChevronLeftIcon from 'primevue/icons/chevronleft';
+import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
@@ -118,6 +120,14 @@ export default {
         nextButtonProps: {
             type: null,
             default: null
+        },
+        prevIcon: {
+            type: String,
+            default: undefined
+        },
+        nextIcon: {
+            type: String,
+            default: undefined
         }
     },
     data() {
@@ -182,7 +192,7 @@ export default {
         },
         onPrevButtonClick() {
             const content = this.$refs.content;
-            const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+            const width = DomHandler.getWidth(content);
             const pos = content.scrollLeft - width;
 
             content.scrollLeft = pos <= 0 ? 0 : pos;
@@ -391,6 +401,10 @@ export default {
     },
     directives: {
         ripple: Ripple
+    },
+    components: {
+        ChevronLeftIcon,
+        ChevronRightIcon
     }
 };
 </script>
diff --git a/components/lib/tag/Tag.d.ts b/components/lib/tag/Tag.d.ts
index 161f1c033..a26f2be0a 100644
--- a/components/lib/tag/Tag.d.ts
+++ b/components/lib/tag/Tag.d.ts
@@ -10,6 +10,41 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TagPassThroughOptionType = TagPassThroughAttributes | ((options: TagPassThroughMethodOptions) => TagPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TagPassThroughMethodOptions {
+    props: TagProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TagProps.pt}
+ */
+export interface TagPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TagPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: TagPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the value's DOM element.
+     */
+    value?: TagPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TagPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Tag component.
  */
@@ -29,8 +64,14 @@ export interface TagProps {
     rounded?: boolean | undefined;
     /**
      * Icon of the tag to display next to the value.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     icon?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TagPassThroughOptions}
+     */
+    pt?: TagPassThroughOptions;
 }
 
 /**
@@ -41,6 +82,10 @@ export interface TagSlots {
      * Custom content template
      */
     default(): VNode[];
+    /**
+     * Custom icon template
+     */
+    icon(): VNode[];
 }
 
 /**
diff --git a/components/lib/tag/Tag.vue b/components/lib/tag/Tag.vue
index 39304c312..d40a853da 100644
--- a/components/lib/tag/Tag.vue
+++ b/components/lib/tag/Tag.vue
@@ -1,15 +1,19 @@
 <template>
-    <span :class="containerClass">
-        <span v-if="icon" :class="iconClass"></span>
+    <span :class="containerClass" v-bind="ptm('root')">
+        <component v-if="$slots.icon" :is="$slots.icon" class="p-tag-icon" v-bind="ptm('icon')" />
+        <span v-else-if="icon" :class="iconClass" v-bind="ptm('icon')"></span>
         <slot>
-            <span class="p-tag-value">{{ value }}</span>
+            <span class="p-tag-value" v-bind="ptm('value')">{{ value }}</span>
         </slot>
     </span>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Tag',
+    extends: BaseComponent,
     props: {
         value: null,
         severity: null,
diff --git a/components/lib/terminal/Terminal.d.ts b/components/lib/terminal/Terminal.d.ts
index 9844f6358..52de7c213 100755
--- a/components/lib/terminal/Terminal.d.ts
+++ b/components/lib/terminal/Terminal.d.ts
@@ -9,6 +9,80 @@
  */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TerminalPassThroughOptionType = TerminalPassThroughAttributes | ((options: TerminalPassThroughMethodOptions) => TerminalPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TerminalPassThroughMethodOptions {
+    props: TerminalProps;
+    state: TerminalState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TerminalProps.pt}
+ */
+export interface TerminalPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TerminalPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the welcome message's DOM element.
+     */
+    welcomeMessage?: TerminalPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: TerminalPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the commands' DOM element.
+     */
+    commands?: TerminalPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the prompt's DOM element.
+     */
+    prompt?: TerminalPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the command's DOM element.
+     */
+    command?: TerminalPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the response's DOM element.
+     */
+    response?: TerminalPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: TerminalPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the command text's DOM element.
+     */
+    commandText?: TerminalPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TerminalPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Terminal component.
+ */
+export interface TerminalState {
+    /**
+     * Current command text as a string.
+     */
+    commandText: string;
+    /**
+     * Current commands as an array.
+     */
+    commands: string[];
+}
+
 /**
  * Defines valid properties in Terminal component.
  */
@@ -21,6 +95,11 @@ export interface TerminalProps {
      * Prompt text for each command.
      */
     prompt?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TerminalPassThroughOptions}
+     */
+    pt?: TerminalPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/terminal/Terminal.vue b/components/lib/terminal/Terminal.vue
index 0152c49c1..28ae532ac 100755
--- a/components/lib/terminal/Terminal.vue
+++ b/components/lib/terminal/Terminal.vue
@@ -1,25 +1,27 @@
 <template>
-    <div class="p-terminal p-component" @click="onClick">
-        <div v-if="welcomeMessage">{{ welcomeMessage }}</div>
-        <div class="p-terminal-content">
-            <div v-for="(command, i) of commands" :key="command.text + i.toString()">
-                <span class="p-terminal-prompt">{{ prompt }}</span>
-                <span class="p-terminal-command">{{ command.text }}</span>
-                <div class="p-terminal-response" aria-live="polite">{{ command.response }}</div>
+    <div class="p-terminal p-component" @click="onClick" v-bind="ptm('root')">
+        <div v-if="welcomeMessage" v-bind="ptm('welcomeMessage')">{{ welcomeMessage }}</div>
+        <div class="p-terminal-content" v-bind="ptm('content')">
+            <div v-for="(command, i) of commands" :key="command.text + i.toString()" v-bind="ptm('commands')">
+                <span class="p-terminal-prompt" v-bind="ptm('prompt')">{{ prompt }}</span>
+                <span class="p-terminal-command" v-bind="ptm('command')">{{ command.text }}</span>
+                <div class="p-terminal-response" aria-live="polite" v-bind="ptm('response')">{{ command.response }}</div>
             </div>
         </div>
-        <div class="p-terminal-prompt-container">
-            <span class="p-terminal-prompt">{{ prompt }}</span>
-            <input ref="input" v-model="commandText" type="text" class="p-terminal-input" autocomplete="off" @keydown="onKeydown" />
+        <div class="p-terminal-prompt-container" v-bind="ptm('container')">
+            <span class="p-terminal-prompt" v-bind="ptm('prompt')">{{ prompt }}</span>
+            <input ref="input" v-model="commandText" type="text" class="p-terminal-input" autocomplete="off" @keydown="onKeydown" v-bind="ptm('commandText')" />
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import TerminalService from 'primevue/terminalservice';
 
 export default {
     name: 'Terminal',
+    extends: BaseComponent,
     props: {
         welcomeMessage: {
             type: String,
diff --git a/components/lib/textarea/Textarea.d.ts b/components/lib/textarea/Textarea.d.ts
index 23332f145..c7807a3ff 100755
--- a/components/lib/textarea/Textarea.d.ts
+++ b/components/lib/textarea/Textarea.d.ts
@@ -10,6 +10,33 @@
 import { TextareaHTMLAttributes } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TextareaPassThroughOptionType = TextareaPassThroughAttributes | ((options: TextareaPassThroughMethodOptions) => TextareaPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TextareaPassThroughMethodOptions {
+    props: TextareaProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TextareaProps.pt}
+ */
+export interface TextareaPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TextareaPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TextareaPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Textarea component. In addition to these, all properties of TextareaHTMLAttributes can be used in this component.
  * @extends TextareaHTMLAttributes
@@ -24,6 +51,11 @@ export interface TextareaProps extends TextareaHTMLAttributes {
      * @defaultValue false
      */
     autoResize?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TextareaPassThroughOptions}
+     */
+    pt?: TextareaPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/textarea/Textarea.vue b/components/lib/textarea/Textarea.vue
index ac7024031..8dee0b9fe 100755
--- a/components/lib/textarea/Textarea.vue
+++ b/components/lib/textarea/Textarea.vue
@@ -1,10 +1,13 @@
 <template>
-    <textarea :class="['p-inputtextarea p-inputtext p-component', { 'p-filled': filled, 'p-inputtextarea-resizable ': autoResize }]" :value="modelValue" @input="onInput"></textarea>
+    <textarea :class="['p-inputtextarea p-inputtext p-component', { 'p-filled': filled, 'p-inputtextarea-resizable ': autoResize }]" :value="modelValue" @input="onInput" v-bind="ptm('root')"></textarea>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Textarea',
+    extends: BaseComponent,
     emits: ['update:modelValue'],
     props: {
         modelValue: null,
diff --git a/components/lib/tieredmenu/TieredMenu.d.ts b/components/lib/tieredmenu/TieredMenu.d.ts
index a7edfd7c3..679704a75 100755
--- a/components/lib/tieredmenu/TieredMenu.d.ts
+++ b/components/lib/tieredmenu/TieredMenu.d.ts
@@ -11,6 +11,131 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TieredMenuPassThroughOptionType = TieredMenuPassThroughAttributes | ((options: TieredMenuPassThroughMethodOptions) => TieredMenuPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TieredMenuPassThroughMethodOptions {
+    props: TieredMenuProps;
+    state: TieredMenuState;
+    context: TieredMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TieredMenuProps.pt}
+ */
+export interface TieredMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuIcon?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: TieredMenuPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TieredMenuPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines focused item info
+ */
+export interface TieredMenuFocusedItemInfo {
+    /**
+     * Active item index
+     */
+    index: number;
+    /**
+     * Active item level
+     */
+    level: number;
+    /**
+     * Parent key info
+     */
+    parentKey: string;
+}
+
+/**
+ * Defines current inline state in TieredMenu component.
+ */
+export interface TieredMenuState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item info.
+     * @type {TieredMenuFocusedItemInfo}
+     */
+    focusedItemInfo: TieredMenuFocusedItemInfo;
+    /**
+     * Active item path.
+     * @type {TieredMenuFocusedItemInfo}
+     */
+    activeItemPath: TieredMenuFocusedItemInfo[];
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue true
+     */
+    visible: boolean;
+}
+
+/**
+ * Defines current options in TieredMenu component.
+ */
+export interface TieredMenuContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in TieredMenuMenu component.
  */
@@ -61,6 +186,11 @@ export interface TieredMenuProps {
      * Identifier of the underlying menu element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TieredMenuPassThroughOptions}
+     */
+    pt?: TieredMenuPassThroughOptions;
 }
 
 /**
@@ -86,6 +216,20 @@ export interface TieredMenuSlots {
          */
         active: boolean;
     }): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/tieredmenu/TieredMenu.vue b/components/lib/tieredmenu/TieredMenu.vue
index 255056b68..bdbab3e7a 100755
--- a/components/lib/tieredmenu/TieredMenu.vue
+++ b/components/lib/tieredmenu/TieredMenu.vue
@@ -1,7 +1,7 @@
 <template>
     <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div v-if="visible" :ref="containerRef" :id="id" :class="containerClass" @click="onOverlayClick" v-bind="$attrs">
+            <div v-if="visible" :ref="containerRef" :id="id" :class="containerClass" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }">
                 <TieredMenuSub
                     :ref="menubarRef"
                     :id="id + '_list'"
@@ -16,10 +16,11 @@
                     :menuId="id"
                     :focusedItemId="focused ? focusedItemId : undefined"
                     :items="processedItems"
-                    :template="$slots"
+                    :templates="$slots"
                     :activeItemPath="activeItemPath"
                     :exact="exact"
                     :level="0"
+                    :pt="pt"
                     @focus="onFocus"
                     @blur="onBlur"
                     @keydown="onKeyDown"
@@ -32,6 +33,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
@@ -39,6 +41,7 @@ import TieredMenuSub from './TieredMenuSub.vue';
 
 export default {
     name: 'TieredMenu',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['focus', 'blur', 'before-show', 'before-hide', 'hide', 'show'],
     props: {
diff --git a/components/lib/tieredmenu/TieredMenuSub.vue b/components/lib/tieredmenu/TieredMenuSub.vue
index fe189db2c..dcf3574fb 100755
--- a/components/lib/tieredmenu/TieredMenuSub.vue
+++ b/components/lib/tieredmenu/TieredMenuSub.vue
@@ -1,5 +1,5 @@
 <template>
-    <ul>
+    <ul v-bind="ptm('menu')">
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
@@ -14,22 +14,37 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
+                v-bind="getPTOptions(processedItem, 'menuitem')"
             >
-                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)">
-                    <template v-if="!template.item">
+                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                    <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                                <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
-                                <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
+                            <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
-                            <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
-                            <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
-                            <component v-if="getItemProp(processedItem, 'items')" :is="template.submenuicon || 'AngleRightIcon'" class="p-submenu-icon" :active="isItemActive(processedItem)" />
+                        <a
+                            v-else
+                            v-ripple
+                            :href="getItemProp(processedItem, 'url')"
+                            :class="getItemActionClass(processedItem)"
+                            :target="getItemProp(processedItem, 'target')"
+                            tabindex="-1"
+                            aria-hidden="true"
+                            v-bind="getPTOptions(processedItem, 'action')"
+                        >
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <template v-if="getItemProp(processedItem, 'items')">
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <AngleRightIcon v-else class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                            </template>
                         </a>
                     </template>
-                    <component v-else :is="template.item" :item="processedItem.item"></component>
+                    <component v-else :is="templates.item" :item="processedItem.item"></component>
                 </div>
                 <TieredMenuSub
                     v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
@@ -39,26 +54,36 @@
                     :menuId="menuId"
                     :focusedItemId="focusedItemId"
                     :items="processedItem.items"
-                    :template="template"
+                    :templates="templates"
                     :activeItemPath="activeItemPath"
                     :exact="exact"
                     :level="level + 1"
+                    :pt="pt"
                     @item-click="$emit('item-click', $event)"
                     @item-mouseenter="$emit('item-mouseenter', $event)"
                 />
             </li>
-            <li v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" :id="getItemId(processedItem)" :style="getItemProp(processedItem, 'style')" :class="getSeparatorItemClass(processedItem)" role="separator"></li>
+            <li
+                v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
+                :id="getItemId(processedItem)"
+                :style="getItemProp(processedItem, 'style')"
+                :class="getSeparatorItemClass(processedItem)"
+                role="separator"
+                v-bind="ptm('separator')"
+            ></li>
         </template>
     </ul>
 </template>
 
 <script>
-import AngleRightIcon from 'primevue/icon/angleright';
+import BaseComponent from 'primevue/basecomponent';
+import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'TieredMenuSub',
+    extends: BaseComponent,
     emits: ['item-click', 'item-mouseenter'],
     props: {
         menuId: {
@@ -77,7 +102,7 @@ export default {
             type: Number,
             default: 0
         },
-        template: {
+        templates: {
             type: Object,
             default: null
         },
@@ -103,6 +128,14 @@ export default {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
+        getPTOptions(processedItem, key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.isItemActive(processedItem),
+                    focused: this.isItemFocused(processedItem)
+                }
+            });
+        },
         isItemActive(processedItem) {
             return this.activeItemPath.some((path) => path.key === processedItem.key);
         },
diff --git a/components/lib/timeline/Timeline.d.ts b/components/lib/timeline/Timeline.d.ts
index 2639531b2..fc6996397 100644
--- a/components/lib/timeline/Timeline.d.ts
+++ b/components/lib/timeline/Timeline.d.ts
@@ -9,6 +9,50 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TimelinePassThroughOptionType = TimelinePassThroughAttributes | null | undefined;
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TimelineProps.pt}
+ */
+export interface TimelinePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TimelinePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the event's DOM element.
+     */
+    event?: TimelinePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the opposite's DOM element.
+     */
+    opposite?: TimelinePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: TimelinePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the marker's DOM element.
+     */
+    marker?: TimelinePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the connector's DOM element.
+     */
+    connector?: TimelinePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: TimelinePassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TimelinePassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Timeline component.
  */
@@ -31,6 +75,11 @@ export interface TimelineProps {
      * Name of the field that uniquely identifies the a record in the data.
      */
     dataKey?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TimelinePassThroughOptions}
+     */
+    pt?: TimelinePassThroughOptions;
 }
 
 /**
diff --git a/components/lib/timeline/Timeline.vue b/components/lib/timeline/Timeline.vue
index 1ddf00d10..d43359fdc 100644
--- a/components/lib/timeline/Timeline.vue
+++ b/components/lib/timeline/Timeline.vue
@@ -1,18 +1,18 @@
 <template>
-    <div :class="containerClass">
-        <div v-for="(item, index) of value" :key="getKey(item, index)" class="p-timeline-event">
-            <div class="p-timeline-event-opposite">
+    <div :class="containerClass" v-bind="ptm('root')">
+        <div v-for="(item, index) of value" :key="getKey(item, index)" class="p-timeline-event" v-bind="ptm('event')">
+            <div class="p-timeline-event-opposite" v-bind="ptm('opposite')">
                 <slot name="opposite" :item="item" :index="index"></slot>
             </div>
-            <div class="p-timeline-event-separator">
+            <div class="p-timeline-event-separator" v-bind="ptm('separator')">
                 <slot name="marker" :item="item" :index="index">
-                    <div class="p-timeline-event-marker"></div>
+                    <div class="p-timeline-event-marker" v-bind="ptm('marker')"></div>
                 </slot>
                 <slot v-if="index !== value.length - 1" name="connector" :item="item" :index="index">
-                    <div class="p-timeline-event-connector"></div>
+                    <div class="p-timeline-event-connector" v-bind="ptm('connector')"></div>
                 </slot>
             </div>
-            <div class="p-timeline-event-content">
+            <div class="p-timeline-event-content" v-bind="ptm('content')">
                 <slot name="content" :item="item" :index="index"></slot>
             </div>
         </div>
@@ -20,10 +20,12 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Timeline',
+    extends: BaseComponent,
     props: {
         value: null,
         align: {
diff --git a/components/lib/toast/Toast.d.ts b/components/lib/toast/Toast.d.ts
index 66d5eaa8f..ee6289c14 100755
--- a/components/lib/toast/Toast.d.ts
+++ b/components/lib/toast/Toast.d.ts
@@ -10,6 +10,74 @@
 import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ToastPassThroughOptionType = ToastPassThroughAttributes | ((options: ToastPassThroughMethodOptions) => ToastPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ToastPassThroughMethodOptions {
+    props: ToastProps;
+    state: ToastState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ToastProps.pt}
+ */
+export interface ToastPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the message's DOM element.
+     */
+    message?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the text's DOM element.
+     */
+    text?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the summary's DOM element.
+     */
+    summary?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the detail's DOM element.
+     */
+    detail?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button container's DOM element.
+     */
+    buttonContainer?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button's DOM element.
+     */
+    button?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button icon's DOM element.
+     */
+    buttonIcon?: ToastPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ToastPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines message options in Toast component.
  */
@@ -18,7 +86,7 @@ export interface ToastMessageOptions {
      * Severity level of the message.
      * @defaultValue info
      */
-    severity?: 'success' | 'info' | 'warn' | 'error' | string | undefined;
+    severity?: 'success' | 'info' | 'warn' | 'error' | undefined;
     /**
      * Summary content of the message.
      */
@@ -65,6 +133,16 @@ export interface ToastBreakpointsType {
     [key: string]: any;
 }
 
+/**
+ * Defines current inline state in Toast component.
+ */
+export interface ToastState {
+    /**
+     * Current messages.
+     */
+    messages: any[];
+}
+
 /**
  * Defines valid properties in Toast component.
  */
@@ -95,33 +173,39 @@ export interface ToastProps {
     breakpoints?: ToastBreakpointsType;
     /**
      * Icon to display in the toast close button.
-     * @defaultValue pi pi-times
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**
      * Icon to display in the toast with info severity.
-     * @defaultValue pi pi-info-circle
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     infoIcon?: string | undefined;
     /**
      * Icon to display in the toast with warn severity.
-     * @defaultValue pi pi-exclamation-triangle
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     warnIcon?: string | undefined;
     /**
      * Icon to display in the toast with error severity.
-     * @defaultValue pi pi-times
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     errorIcon?: string | undefined;
     /**
      * Icon to display in the toast with success severity.
-     * @defaultValue pi pi-check
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     successIcon?: string | undefined;
     /**
      * Uses to pass all properties of the HTMLButtonElement to the close button.
+     * @deprecated since v3.26.0. Use 'pt' property.
      */
     closeButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ToastPassThroughOptions}
+     */
+    pt?: ToastPassThroughOptions;
 }
 
 /**
@@ -138,6 +222,14 @@ export interface ToastSlots {
          */
         message: any;
     }): VNode[];
+    /**
+     * Custom icon template.
+     */
+    icon(): VNode[];
+    /**
+     * Custom close icon template.
+     */
+    closeicon(): VNode[];
 }
 
 /**
diff --git a/components/lib/toast/Toast.vue b/components/lib/toast/Toast.vue
index 61b798047..3077c7867 100755
--- a/components/lib/toast/Toast.vue
+++ b/components/lib/toast/Toast.vue
@@ -1,12 +1,12 @@
 <template>
     <Portal>
-        <div ref="container" :class="containerClass" v-bind="$attrs">
-            <transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave">
+        <div ref="container" :class="containerClass" v-bind="{ ...$attrs, ...ptm('root') }">
+            <transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave" v-bind="ptm('message')">
                 <ToastMessage
                     v-for="msg of messages"
                     :key="msg.id"
                     :message="msg"
-                    :template="$slots.message"
+                    :templates="$slots"
                     :closeIcon="closeIcon"
                     :infoIcon="infoIcon"
                     :warnIcon="warnIcon"
@@ -14,6 +14,7 @@
                     :successIcon="successIcon"
                     :closeButtonProps="closeButtonProps"
                     @close="remove($event)"
+                    :pt="pt"
                 />
             </transition-group>
         </div>
@@ -21,6 +22,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Portal from 'primevue/portal';
 import ToastEventBus from 'primevue/toasteventbus';
 import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
@@ -30,6 +32,7 @@ var messageIdx = 0;
 
 export default {
     name: 'Toast',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['close', 'life-end'],
     props: {
@@ -55,23 +58,23 @@ export default {
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         infoIcon: {
             type: String,
-            default: 'pi pi-info-circle'
+            default: undefined
         },
         warnIcon: {
             type: String,
-            default: 'pi pi-exclamation-triangle'
+            default: undefined
         },
         errorIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         successIcon: {
             type: String,
-            default: 'pi pi-check'
+            default: undefined
         },
         closeButtonProps: {
             type: null,
diff --git a/components/lib/toast/ToastMessage.vue b/components/lib/toast/ToastMessage.vue
index 246d5f616..57fac4a55 100755
--- a/components/lib/toast/ToastMessage.vue
+++ b/components/lib/toast/ToastMessage.vue
@@ -1,17 +1,17 @@
 <template>
-    <div :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true">
-        <div class="p-toast-message-content" :class="message.contentStyleClass">
-            <template v-if="!template">
-                <span :class="iconClass"></span>
-                <div class="p-toast-message-text">
-                    <span class="p-toast-summary">{{ message.summary }}</span>
-                    <div class="p-toast-detail">{{ message.detail }}</div>
+    <div :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('container')">
+        <div class="p-toast-message-content" :class="message.contentStyleClass" v-bind="ptm('content')">
+            <template v-if="!templates.message">
+                <component :is="templates.icon ? templates.icon : iconComponent.name ? iconComponent : 'span'" :class="iconClass" class="p-toast-message-icon" v-bind="ptm('icon')" />
+                <div class="p-toast-message-text" v-bind="ptm('text')">
+                    <span class="p-toast-summary" v-bind="ptm('summary')">{{ message.summary }}</span>
+                    <div class="p-toast-detail" v-bind="ptm('detail')">{{ message.detail }}</div>
                 </div>
             </template>
-            <component v-else :is="template" :message="message"></component>
-            <div v-if="message.closable !== false">
-                <button v-ripple class="p-toast-icon-close p-link" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="closeButtonProps">
-                    <span :class="['p-toast-icon-close-icon', closeIcon]" />
+            <component v-else :is="templates.message" :message="message"></component>
+            <div v-if="message.closable !== false" v-bind="ptm('buttonContainer')">
+                <button v-ripple class="p-toast-icon-close p-link" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="{ ...closeButtonProps, ...ptm('button') }">
+                    <component :is="templates.closeicon || 'TimesIcon'" :class="['p-toast-icon-close-icon', closeIcon]" v-bind="ptm('buttonIcon')" />
                 </button>
             </div>
         </div>
@@ -19,18 +19,25 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import CheckIcon from 'primevue/icons/check';
+import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
+import InfoCircleIcon from 'primevue/icons/infocircle';
+import TimesIcon from 'primevue/icons/times';
+import TimesCircleIcon from 'primevue/icons/timescircle';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'ToastMessage',
+    extends: BaseComponent,
     emits: ['close'],
     props: {
         message: {
             type: null,
             default: null
         },
-        template: {
-            type: null,
+        templates: {
+            type: Object,
             default: null
         },
         closeIcon: {
@@ -97,9 +104,16 @@ export default {
                 }
             ];
         },
+        iconComponent() {
+            return {
+                info: !this.infoIcon && InfoCircleIcon,
+                success: !this.successIcon && CheckIcon,
+                warn: !this.warnIcon && ExclamationTriangleIcon,
+                error: !this.errorIcon && TimesCircleIcon
+            }[this.message.severity];
+        },
         iconClass() {
             return [
-                'p-toast-message-icon',
                 {
                     [this.infoIcon]: this.message.severity === 'info',
                     [this.warnIcon]: this.message.severity === 'warn',
@@ -112,6 +126,13 @@ export default {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }
     },
+    components: {
+        TimesIcon: TimesIcon,
+        InfoCircleIcon: InfoCircleIcon,
+        CheckIcon: CheckIcon,
+        ExclamationTriangleIcon: ExclamationTriangleIcon,
+        TimesCircleIcon: TimesCircleIcon
+    },
     directives: {
         ripple: Ripple
     }
diff --git a/components/lib/togglebutton/ToggleButton.d.ts b/components/lib/togglebutton/ToggleButton.d.ts
index 25cec1276..648a4ea63 100755
--- a/components/lib/togglebutton/ToggleButton.d.ts
+++ b/components/lib/togglebutton/ToggleButton.d.ts
@@ -7,9 +7,63 @@
  * @module togglebutton
  *
  */
-import { InputHTMLAttributes } from 'vue';
+import { InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ToggleButtonPassThroughOptionType = ToggleButtonPassThroughAttributes | ((options: ToggleButtonPassThroughMethodOptions) => ToggleButtonPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ToggleButtonPassThroughMethodOptions {
+    props: ToggleButtonProps;
+    state: ToggleButtonState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ToggleButtonProps.pt}
+ */
+export interface ToggleButtonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ToggleButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ToggleButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ToggleButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: ToggleButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: ToggleButtonPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ToggleButtonPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in ToggleButton component.
+ */
+export interface ToggleButtonState {
+    /**
+     * Focused state as a number.
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in ToggleButton component.
  */
@@ -21,10 +75,12 @@ export interface ToggleButtonProps {
     modelValue?: boolean | undefined;
     /**
      * Icon for the on state.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     onIcon?: string | undefined;
     /**
      * Icon for the off state.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     offIcon?: string | undefined;
     /**
@@ -75,12 +131,31 @@ export interface ToggleButtonProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ToggleButtonPassThroughOptions}
+     */
+    pt?: ToggleButtonPassThroughOptions;
 }
 
 /**
  * Defines valid slots in ToggleButton component.
  */
-export interface ToggleButtonSlots {}
+export interface ToggleButtonSlots {
+    /**
+     * Custom icon template.
+     */
+    icon(scope: {
+        /**
+         * Current value
+         */
+        value: any;
+        /**
+         * Icon style class
+         */
+        class: any;
+    }): VNode[];
+}
 
 /**
  * Defines valid emits in ToggleButton component.
diff --git a/components/lib/togglebutton/ToggleButton.vue b/components/lib/togglebutton/ToggleButton.vue
index 0005908d8..c1ff13a6d 100755
--- a/components/lib/togglebutton/ToggleButton.vue
+++ b/components/lib/togglebutton/ToggleButton.vue
@@ -1,6 +1,6 @@
 <template>
-    <div ref="container" v-ripple :class="buttonClass" @click="onClick($event)">
-        <span class="p-hidden-accessible">
+    <div ref="container" v-ripple :class="buttonClass" @click="onClick($event)" v-bind="ptm('root')">
+        <span class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
             <input
                 :id="inputId"
                 type="checkbox"
@@ -13,19 +13,23 @@
                 :aria-label="ariaLabel"
                 @focus="onFocus($event)"
                 @blur="onBlur($event)"
-                v-bind="inputProps"
+                v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
             />
         </span>
-        <span v-if="hasIcon" :class="iconClass"></span>
-        <span class="p-button-label">{{ label }}</span>
+        <slot name="icon" :value="modelValue" :class="iconClass">
+            <span v-if="onIcon || offIcon" :class="iconClass" v-bind="ptm('icon')" />
+        </slot>
+        <span class="p-button-label" v-bind="ptm('label')">{{ label }}</span>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'ToggleButton',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'change', 'click', 'focus', 'blur'],
     props: {
         modelValue: Boolean,
@@ -149,7 +153,7 @@ export default {
             return this.onLabel && this.onLabel.length > 0 && this.offLabel && this.offLabel.length > 0;
         },
         hasIcon() {
-            return this.onIcon && this.onIcon.length > 0 && this.offIcon && this.offIcon.length > 0;
+            return this.$slots.icon || (this.onIcon && this.offIcon);
         },
         label() {
             return this.hasLabel ? (this.modelValue ? this.onLabel : this.offLabel) : '&nbsp;';
diff --git a/components/lib/toolbar/Toolbar.d.ts b/components/lib/toolbar/Toolbar.d.ts
index 60b4b2ab9..668180840 100755
--- a/components/lib/toolbar/Toolbar.d.ts
+++ b/components/lib/toolbar/Toolbar.d.ts
@@ -29,17 +29,17 @@ export interface ToolbarPassThroughOptions {
      */
     root?: ToolbarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the groupleft's DOM element.
+     * Uses to pass attributes to the start's DOM element.
      */
-    groupleft?: ToolbarPassThroughOptionType;
+    start?: ToolbarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the groupcenter's DOM element.
+     * Uses to pass attributes to the center's DOM element.
      */
-    groupcenter?: ToolbarPassThroughOptionType;
+    center?: ToolbarPassThroughOptionType;
     /**
-     * Uses to pass attributes to the groupright's DOM element.
+     * Uses to pass attributes to the right's DOM element.
      */
-    groupright?: ToolbarPassThroughOptionType;
+    end?: ToolbarPassThroughOptionType;
 }
 
 /**
diff --git a/components/lib/toolbar/Toolbar.vue b/components/lib/toolbar/Toolbar.vue
index 8328166a8..47a014c3d 100755
--- a/components/lib/toolbar/Toolbar.vue
+++ b/components/lib/toolbar/Toolbar.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="p-toolbar p-component" role="toolbar" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')">
-        <div class="p-toolbar-group-start p-toolbar-group-left" v-bind="ptm('groupleft')">
+        <div class="p-toolbar-group-start p-toolbar-group-left" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
-        <div class="p-toolbar-group-center" v-bind="ptm('groupcenter')">
+        <div class="p-toolbar-group-center" v-bind="ptm('center')">
             <slot name="center"></slot>
         </div>
-        <div class="p-toolbar-group-end p-toolbar-group-right" v-bind="ptm('groupright')">
+        <div class="p-toolbar-group-end p-toolbar-group-right" v-bind="ptm('end')">
             <slot name="end"></slot>
         </div>
     </div>
diff --git a/components/lib/tooltip/Tooltip.d.ts b/components/lib/tooltip/Tooltip.d.ts
index caa5f2a18..b51f73f70 100755
--- a/components/lib/tooltip/Tooltip.d.ts
+++ b/components/lib/tooltip/Tooltip.d.ts
@@ -40,6 +40,16 @@ export interface TooltipOptions {
      * @defaultValue true
      */
     fitContent?: boolean | undefined;
+    /**
+     * When present, it adds a custom delay to the tooltip's display.
+     * @defaultValue 0
+     */
+    showDelay?: number | undefined;
+    /**
+     * When present, it adds a custom delay to the tooltip's hiding.
+     * @defaultValue 0
+     */
+    hideDelay?: number | undefined;
 }
 
 /**
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
index 8824b8971..1ef657fc3 100755
--- a/components/lib/tooltip/Tooltip.js
+++ b/components/lib/tooltip/Tooltip.js
@@ -1,5 +1,7 @@
 import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
 
+let timer;
+
 function bindEvents(el) {
     const modifiers = el.$_ptooltipModifiers;
 
@@ -47,30 +49,45 @@ function unbindScrollListener(el) {
 }
 
 function onMouseEnter(event) {
-    show(event.currentTarget);
+    const el = event.currentTarget;
+    const showDelay = el.$_ptooltipShowDelay;
+
+    show(el, showDelay);
 }
 
 function onMouseLeave(event) {
-    hide(event.currentTarget);
+    const el = event.currentTarget;
+    const hideDelay = el.$_ptooltipHideDelay;
+
+    hide(el, hideDelay);
 }
 
 function onFocus(event) {
-    show(event.currentTarget);
+    const el = event.currentTarget;
+    const showDelay = el.$_ptooltipShowDelay;
+
+    show(el, showDelay);
 }
 
 function onBlur(event) {
-    hide(event.currentTarget);
+    const el = event.currentTarget;
+    const hideDelay = el.$_ptooltipHideDelay;
+
+    hide(el, hideDelay);
 }
 
 function onClick(event) {
-    hide(event.currentTarget);
+    const el = event.currentTarget;
+    const hideDelay = el.$_ptooltipHideDelay;
+
+    hide(el, hideDelay);
 }
 
 function onKeydown(event) {
-    event.code === 'Escape' && hide(event.currentTarget);
+    event.code === 'Escape' && hide(event.currentTarget, hideDelay);
 }
 
-function show(el) {
+function tooltipActions(el) {
     if (el.$_ptooltipDisabled) {
         return;
     }
@@ -92,11 +109,29 @@ function show(el) {
     ZIndexUtils.set('tooltip', tooltipElement, el.$_ptooltipZIndex);
 }
 
-function hide(el) {
+function show(el, showDelay) {
+    if (showDelay !== undefined) {
+        timer = setTimeout(() => tooltipActions(el), showDelay);
+    } else {
+        tooltipActions(el);
+    }
+}
+
+function tooltipRemoval(el) {
     remove(el);
     unbindScrollListener(el);
 }
 
+function hide(el, hideDelay) {
+    clearTimeout(timer);
+
+    if (hideDelay !== undefined) {
+        setTimeout(() => tooltipRemoval(el), hideDelay);
+    } else {
+        tooltipRemoval(el);
+    }
+}
+
 function getTooltipElement(el) {
     return document.getElementById(el.$_ptooltipId);
 }
@@ -321,7 +356,8 @@ const Tooltip = {
             target.$_ptooltipEscape = false;
             target.$_ptooltipClass = null;
             target.$_ptooltipFitContent = true;
-            target.$_ptooltipIdAttr = '';
+            target.$_ptooltipShowDelay = 0;
+            target.$_ptooltipHideDelay = 0;
         } else if (typeof options.value === 'object' && options.value) {
             if (ObjectUtils.isEmpty(options.value.value) || options.value.value.trim() === '') return;
             else {
@@ -332,6 +368,8 @@ const Tooltip = {
                 target.$_ptooltipClass = options.value.class;
                 target.$_ptooltipFitContent = !!options.value.fitContent === options.value.fitContent ? options.value.fitContent : true;
                 target.$_ptooltipIdAttr = options.value.id || '';
+                target.$_ptooltipShowDelay = options.value.showDelay || 0;
+                target.$_ptooltipHideDelay = options.value.hideDelay || 0;
             }
         }
 
@@ -363,6 +401,8 @@ const Tooltip = {
             target.$_ptooltipEscape = false;
             target.$_ptooltipClass = null;
             target.$_ptooltipIdAttr = '';
+            target.$_ptooltipShowDelay = 0;
+            target.$_ptooltipHideDelay = 0;
 
             bindEvents(target);
         } else if (typeof options.value === 'object' && options.value) {
@@ -377,6 +417,8 @@ const Tooltip = {
                 target.$_ptooltipClass = options.value.class;
                 target.$_ptooltipFitContent = !!options.value.fitContent === options.value.fitContent ? options.value.fitContent : true;
                 target.$_ptooltipIdAttr = options.value.id || '';
+                target.$_ptooltipShowDelay = options.value.showDelay || 0;
+                target.$_ptooltipHideDelay = options.value.hideDelay || 0;
 
                 bindEvents(target);
             }
diff --git a/components/lib/tree/Tree.d.ts b/components/lib/tree/Tree.d.ts
index 5c0ae0f6b..a45adc297 100755
--- a/components/lib/tree/Tree.d.ts
+++ b/components/lib/tree/Tree.d.ts
@@ -10,6 +10,17 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TreePassThroughOptionType = TreePassThroughAttributes | ((options: TreePassThroughMethodOptions) => TreePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TreePassThroughMethodOptions {
+    props: TreeProps;
+    state: TreeState;
+    context: TreeContext;
+}
+
 /**
  * Custom TreeNode metadata.
  */
@@ -90,6 +101,127 @@ export interface TreeSelectionKeys {
     [key: string]: any;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TreeProps.pt}
+ */
+export interface TreePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading overlay's DOM element.
+     */
+    loadingOverlay?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter container's DOM element.
+     */
+    filterContainer?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the search icon's DOM element.
+     */
+    searchIcon?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the node's DOM element.
+     */
+    node?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toggler's DOM element.
+     */
+    toggler?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toggler icon's DOM element.
+     */
+    togglerIcon?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox container's DOM element.
+     */
+    checkboxContainer?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox's DOM element.
+     */
+    checkbox?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox icon's DOM element.
+     */
+    checkboxIcon?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the node icon's DOM element.
+     */
+    nodeIcon?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the subgroup's DOM element.
+     */
+    subgroup?: TreePassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TreePassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Tree component.
+ */
+export interface TreeState {
+    /**
+     * Current expanded keys state.
+     */
+    d_expandedKeys: TreeExpandedKeys;
+    /**
+     * Current filter value state as a string.
+     */
+    filterValue: string;
+}
+
+/**
+ * Defines current options in Tree component.
+ */
+export interface TreeContext {
+    /**
+     * Current expanded state of the node as a boolean.
+     * @defaultValue false
+     */
+    expanded: boolean;
+    /**
+     * Current selected state of the node as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current checked state of the node as a boolean.
+     * @defaultValue false
+     */
+    checked: boolean;
+}
+
 /**
  * Defines valid properties in Tree component.
  */
@@ -123,7 +255,7 @@ export interface TreeProps {
     loading?: boolean | undefined;
     /**
      * Icon to display when tree is loading.
-     * @defaultValue pi pi-spin
+     * @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
     /**
@@ -161,6 +293,11 @@ export interface TreeProps {
      * Identifier of the underlying menu element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TreePassThroughOptions}
+     */
+    pt?: TreePassThroughOptions;
 }
 
 /**
diff --git a/components/lib/tree/Tree.vue b/components/lib/tree/Tree.vue
index 74b74823a..2e38a789a 100755
--- a/components/lib/tree/Tree.vue
+++ b/components/lib/tree/Tree.vue
@@ -1,20 +1,21 @@
 <template>
-    <div :class="containerClass">
+    <div :class="containerClass" v-bind="ptm('root')">
         <template v-if="loading">
-            <div class="p-tree-loading-overlay p-component-overlay">
+            <div class="p-tree-loading-overlay p-component-overlay" v-bind="ptm('loadingOverlay')">
                 <slot name="loadingicon">
-                    <component :is="loadingIcon ? 'i' : 'SpinnerIcon'" spin :class="['p-tree-loading-icon', loadingIcon]" />
+                    <i v-if="loadingIcon" :class="['p-tree-loading-icon pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" />
+                    <SpinnerIcon v-else spin class="p-tree-loading-icon" v-bind="ptm('loadingIcon')" />
                 </slot>
             </div>
         </template>
-        <div v-if="filter" class="p-tree-filter-container">
-            <input v-model="filterValue" type="text" autocomplete="off" class="p-tree-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" />
+        <div v-if="filter" class="p-tree-filter-container" v-bind="ptm('filterContainer')">
+            <input v-model="filterValue" type="text" autocomplete="off" class="p-tree-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('input')" />
             <slot name="searchicon">
-                <SearchIcon class="p-tree-filter-icon" />
+                <SearchIcon class="p-tree-filter-icon" v-bind="ptm('searchIcon')" />
             </slot>
         </div>
-        <div class="p-tree-wrapper" :style="{ maxHeight: scrollHeight }">
-            <ul class="p-tree-container" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel">
+        <div class="p-tree-wrapper" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
+            <ul class="p-tree-container" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('container')">
                 <TreeNode
                     v-for="(node, index) of valueToRender"
                     :key="node.key"
@@ -28,6 +29,7 @@
                     :selectionMode="selectionMode"
                     :selectionKeys="selectionKeys"
                     @checkbox-change="onCheckboxChange"
+                    :pt="pt"
                 ></TreeNode>
             </ul>
         </div>
@@ -35,13 +37,15 @@
 </template>
 
 <script>
-import SearchIcon from 'primevue/icon/search';
-import SpinnerIcon from 'primevue/icon/spinner';
+import BaseComponent from 'primevue/basecomponent';
+import SearchIcon from 'primevue/icons/search';
+import SpinnerIcon from 'primevue/icons/spinner';
 import { ObjectUtils } from 'primevue/utils';
 import TreeNode from './TreeNode.vue';
 
 export default {
     name: 'Tree',
+    extends: BaseComponent,
     emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect'],
     props: {
         value: {
diff --git a/components/lib/tree/TreeNode.vue b/components/lib/tree/TreeNode.vue
index 47ae64076..acc95739f 100755
--- a/components/lib/tree/TreeNode.vue
+++ b/components/lib/tree/TreeNode.vue
@@ -12,23 +12,27 @@
         :aria-checked="ariaChecked"
         :tabindex="index === 0 ? 0 : -1"
         @keydown="onKeyDown"
+        v-bind="getPTOptions('node')"
     >
-        <div :class="contentClass" @click="onClick" @touchend="onTouchEnd" :style="node.style">
-            <button v-ripple type="button" class="p-tree-toggler p-link" @click="toggle" tabindex="-1" aria-hidden="true">
-                <component :is="templates['togglericon'] ? templates['togglericon'] : expanded ? node.expandedIcon || 'ChevronDownIcon' : node.collapsedIcon || 'ChevronRightIcon'" :node="node" :expanded="expanded" class="p-tree-toggler-icon pi-fw" />
+        <div :class="contentClass" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('content')">
+            <button v-ripple type="button" class="p-tree-toggler p-link" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('toggler')">
+                <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" class="p-tree-toggler-icon" />
+                <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" class="p-tree-toggler-icon" v-bind="getPTOptions('togglerIcon')" />
+                <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" v-bind="getPTOptions('togglerIcon')" />
             </button>
-            <div v-if="checkboxMode" class="p-checkbox p-component" aria-hidden="true">
-                <div :class="checkboxClass" role="checkbox">
-                    <component :is="templates['checkboxicon'] ? templates['checkboxicon'] : checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
+            <div v-if="checkboxMode" class="p-checkbox p-component" aria-hidden="true" v-bind="getPTOptions('checkboxContainer')">
+                <div :class="checkboxClass" role="checkbox" v-bind="getPTOptions('checkbox')">
+                    <component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
+                    <component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" class="p-checkbox-icon" v-bind="getPTOptions('checkboxIcon')" />
                 </div>
             </div>
-            <span :class="icon"></span>
-            <span class="p-treenode-label">
+            <span :class="icon" v-bind="getPTOptions('nodeIcon')"></span>
+            <span class="p-treenode-label" v-bind="getPTOptions('label')">
                 <component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" />
                 <template v-else>{{ label(node) }}</template>
             </span>
         </div>
-        <ul v-if="hasChildren && expanded" class="p-treenode-children" role="group">
+        <ul v-if="hasChildren && expanded" class="p-treenode-children" role="group" v-bind="ptm('subgroup')">
             <TreeNode
                 v-for="childNode of node.children"
                 :key="childNode.key"
@@ -41,21 +45,24 @@
                 :selectionMode="selectionMode"
                 :selectionKeys="selectionKeys"
                 @checkbox-change="propagateUp"
+                :pt="pt"
             />
         </ul>
     </li>
 </template>
 
 <script>
-import CheckIcon from 'primevue/icon/check';
-import ChevronDownIcon from 'primevue/icon/chevrondown';
-import ChevronRightIcon from 'primevue/icon/chevronright';
-import MinusIcon from 'primevue/icon/minus';
+import BaseComponent from 'primevue/basecomponent';
+import CheckIcon from 'primevue/icons/check';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
+import MinusIcon from 'primevue/icons/minus';
 import Ripple from 'primevue/ripple';
 import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'TreeNode',
+    extends: BaseComponent,
     emits: ['node-toggle', 'node-click', 'checkbox-change'],
     props: {
         node: {
@@ -88,6 +95,7 @@ export default {
         }
     },
     nodeTouched: false,
+    toggleClicked: false,
     mounted() {
         const hasTreeSelectParent = this.$refs.currentNode.closest('.p-treeselect-items-wrapper');
 
@@ -98,6 +106,7 @@ export default {
     methods: {
         toggle() {
             this.$emit('node-toggle', this.node);
+            this.toggleClicked = true;
         },
         label(node) {
             return typeof node.label === 'function' ? node.label() : node.label;
@@ -105,8 +114,19 @@ export default {
         onChildNodeToggle(node) {
             this.$emit('node-toggle', node);
         },
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    expanded: this.expanded,
+                    selected: this.selected,
+                    checked: this.checked
+                }
+            });
+        },
         onClick(event) {
-            if (DomHandler.hasClass(event.target, 'p-tree-toggler') || DomHandler.hasClass(event.target.parentElement, 'p-tree-toggler')) {
+            if (this.toggleClicked || DomHandler.hasClass(event.target, 'p-tree-toggler') || DomHandler.hasClass(event.target.parentElement, 'p-tree-toggler')) {
+                this.toggleClicked = false;
+
                 return;
             }
 
diff --git a/components/lib/treeselect/TreeSelect.d.ts b/components/lib/treeselect/TreeSelect.d.ts
index 80ae9655f..b55d0ce25 100644
--- a/components/lib/treeselect/TreeSelect.d.ts
+++ b/components/lib/treeselect/TreeSelect.d.ts
@@ -8,9 +8,106 @@
  *
  */
 import { InputHTMLAttributes, VNode } from 'vue';
-import { TreeNode } from '../tree';
+import { TreeExpandedKeys, TreeNode, TreePassThroughOptionType } from '../tree';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TreeSelectPassThroughOptionType = TreeSelectPassThroughAttributes | ((options: TreeSelectPassThroughMethodOptions) => TreeSelectPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TreeSelectPassThroughMethodOptions {
+    props: TreeSelectProps;
+    state: TreeSelectState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TreeSelectProps.pt}
+ */
+export interface TreeSelectPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label container's DOM element.
+     */
+    labelContainer?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the token's DOM element.
+     */
+    token?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the token label's DOM element.
+     */
+    tokenLabel?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the trigger's DOM element.
+     */
+    trigger?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the trigger icon's DOM element.
+     */
+    triggerIcon?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the trigger's DOM element.
+     * @see {@link TreePassThroughOptionType}
+     */
+    tree?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: TreeSelectPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: TreeSelectPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TreeSelectPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in TreeSelect component.
+ */
+export interface TreeSelectState {
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current expanded keys state.
+     */
+    expandedKeys: TreeExpandedKeys;
+}
+
 /**
  * Defines valid properties in TreeSelect component.
  */
@@ -94,6 +191,11 @@ export interface TreeSelectProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TreeSelectPassThroughOptions}
+     */
+    pt?: TreeSelectPassThroughOptions;
 }
 
 /**
@@ -148,8 +250,41 @@ export interface TreeSelectSlots {
     empty(): VNode[];
     /**
      * Custom indicator template.
+     * @deprecated since v3.27.0. Use 'triggericon' slot.
      */
     indicator(): VNode[];
+    /**
+     * Custom indicator template.
+     */
+    triggericon(): VNode[];
+    /**
+     * Custom item toggler icon template.
+     * @param {Object} scope - item toggler icon slot's params.
+     */
+    itemtogglericon(scope: {
+        /**
+         * Node instance
+         */
+        node: TreeNode | any;
+        /**
+         * Expanded state of the node
+         */
+        expanded: TreeNode[];
+    }): VNode[];
+    /**
+     * Custom item checkbox icon template.
+     * @param {Object} scope - item checkbox icon slot's params.
+     */
+    itemcheckboxicon(scope: {
+        /**
+         * Check state of the node
+         */
+        checked: boolean;
+        /**
+         * Partial check state of the node
+         */
+        partialChecked: boolean;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
index 5f1479734..4e1659505 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/components/lib/treeselect/TreeSelect.vue
@@ -1,6 +1,6 @@
 <template>
-    <div ref="container" :class="containerClass" @click="onClick">
-        <div class="p-hidden-accessible">
+    <div ref="container" :class="containerClass" @click="onClick" v-bind="ptm('root')">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
             <input
                 ref="focusInput"
                 :id="inputId"
@@ -19,34 +19,34 @@
                 @focus="onFocus($event)"
                 @blur="onBlur($event)"
                 @keydown="onKeyDown($event)"
-                v-bind="inputProps"
+                v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
             />
         </div>
-        <div class="p-treeselect-label-container">
-            <div :class="labelClass">
+        <div class="p-treeselect-label-container" v-bind="ptm('labelContainer')">
+            <div :class="labelClass" v-bind="ptm('label')">
                 <slot name="value" :value="selectedNodes" :placeholder="placeholder">
                     <template v-if="display === 'comma'">
                         {{ label || 'empty' }}
                     </template>
                     <template v-else-if="display === 'chip'">
-                        <div v-for="node of selectedNodes" :key="node.key" class="p-treeselect-token">
-                            <span class="p-treeselect-token-label">{{ node.label }}</span>
+                        <div v-for="node of selectedNodes" :key="node.key" class="p-treeselect-token" v-bind="ptm('token')">
+                            <span class="p-treeselect-token-label" v-bind="ptm('tokenLabel')">{{ node.label }}</span>
                         </div>
                         <template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
                     </template>
                 </slot>
             </div>
         </div>
-        <div class="p-treeselect-trigger" role="button" aria-haspopup="tree" :aria-expanded="overlayVisible">
-            <slot name="indicator">
-                <component :is="'ChevronDownIcon'" class="p-treeselect-trigger-icon" />
+        <div class="p-treeselect-trigger" role="button" aria-haspopup="tree" :aria-expanded="overlayVisible" v-bind="ptm('trigger')">
+            <slot name="triggericon">
+                <component :is="'ChevronDownIcon'" class="p-treeselect-trigger-icon" v-bind="ptm('triggerIcon')" />
             </slot>
         </div>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div v-if="overlayVisible" :ref="overlayRef" @click="onOverlayClick" :class="panelStyleClass" @keydown="onOverlayKeydown" v-bind="panelProps">
+                <div v-if="overlayVisible" :ref="overlayRef" @click="onOverlayClick" :class="panelStyleClass" @keydown="onOverlayKeydown" v-bind="{ ...panelProps, ...ptm('panel') }">
                     <slot name="header" :value="modelValue" :options="options"></slot>
-                    <div class="p-treeselect-items-wrapper" :style="{ 'max-height': scrollHeight }">
+                    <div class="p-treeselect-items-wrapper" :style="{ 'max-height': scrollHeight }" v-bind="ptm('wrapper')">
                         <TSTree
                             ref="tree"
                             :id="listId"
@@ -62,8 +62,16 @@
                             @node-select="onNodeSelect"
                             @node-unselect="onNodeUnselect"
                             :level="0"
-                        />
-                        <div v-if="emptyOptions" class="p-treeselect-empty-message">
+                            :pt="ptm('tree')"
+                        >
+                            <template v-if="$slots.itemtogglericon" #togglericon="iconProps">
+                                <slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
+                            </template>
+                            <template v-if="$slots.itemcheckboxicon" #checkboxicon="iconProps">
+                                <slot name="itemcheckboxicon" :checked="iconProps.checked" :partialChecked="iconProps.partialChecked" :class="iconProps.class" />
+                            </template>
+                        </TSTree>
+                        <div v-if="emptyOptions" class="p-treeselect-empty-message" v-bind="ptm('emptyMessage')">
                             <slot name="empty">{{ emptyMessageText }}</slot>
                         </div>
                     </div>
@@ -75,7 +83,8 @@
 </template>
 
 <script>
-import ChevronDownIcon from 'primevue/icon/chevrondown';
+import BaseComponent from 'primevue/basecomponent';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
@@ -84,6 +93,7 @@ import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUti
 
 export default {
     name: 'TreeSelect',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse', 'focus', 'blur'],
     props: {
         modelValue: null,
@@ -184,6 +194,7 @@ export default {
     scrollHandler: null,
     overlay: null,
     selfChange: false,
+    selfClick: false,
     beforeUnmount() {
         this.unbindOutsideClickListener();
         this.unbindResizeListener();
@@ -324,9 +335,11 @@ export default {
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
-                    if (this.overlayVisible && this.isOutsideClicked(event)) {
+                    if (this.overlayVisible && !this.selfClick && this.isOutsideClicked(event)) {
                         this.hide();
                     }
+
+                    this.selfClick = false;
                 };
 
                 document.addEventListener('click', this.outsideClickListener);
@@ -382,6 +395,8 @@ export default {
                 originalEvent: event,
                 target: this.$el
             });
+
+            this.selfClick = true;
         },
         onOverlayKeydown(event) {
             if (event.code === 'Escape') this.hide();
diff --git a/components/lib/treetable/BodyCell.vue b/components/lib/treetable/BodyCell.vue
index a5e93ac35..a7b639ae9 100644
--- a/components/lib/treetable/BodyCell.vue
+++ b/components/lib/treetable/BodyCell.vue
@@ -1,29 +1,38 @@
 <template>
-    <td :style="containerStyle" :class="containerClass" role="cell">
-        <button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1">
-            <i :class="togglerIcon"></i>
+    <td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
+        <button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPTOptions('rowToggler')">
+            <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" class="p-tree-toggler-icon" />
+            <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" class="p-tree-toggler-icon" v-bind="getColumnPTOptions('rowTogglerIcon')" />
+            <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" v-bind="getColumnPTOptions('rowTogglerIcon')" />
         </button>
-        <div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox">
-            <div class="p-hidden-accessible">
-                <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" />
+        <div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox" v-bind="getColumnPTOptions('checkboxWrapper')">
+            <div class="p-hidden-accessible" v-bind="getColumnPTOptions('hiddenInputWrapper')">
+                <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" v-bind="getColumnPTOptions('hiddenInput')" />
             </div>
-            <div ref="checkboxEl" :class="checkboxClass">
-                <span :class="checkboxIcon"></span>
+            <div ref="checkboxEl" :class="checkboxClass" v-bind="getColumnCheckboxPTOptions('checkbox')">
+                <component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
+                <component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" class="p-checkbox-icon" v-bind="getColumnCheckboxPTOptions('checkboxIcon')" />
             </div>
         </div>
         <component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />
-        <template v-else
-            ><span>{{ resolveFieldData(node.data, columnProp('field')) }}</span></template
-        >
+        <template v-else>
+            <span v-bind="getColumnPTOptions('cellContent')">{{ resolveFieldData(node.data, columnProp('field')) }}</span>
+        </template>
     </td>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import CheckIcon from 'primevue/icons/check';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
+import MinusIcon from 'primevue/icons/minus';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'BodyCell',
+    extends: BaseComponent,
     emits: ['node-toggle', 'checkbox-toggle'],
     props: {
         node: {
@@ -61,6 +70,10 @@ export default {
         partialChecked: {
             type: Boolean,
             default: false
+        },
+        templates: {
+            type: Object,
+            default: null
         }
     },
     data() {
@@ -86,6 +99,32 @@ export default {
         columnProp(prop) {
             return ObjectUtils.getVNodeProp(this.column, prop);
         },
+        getColumnPTOptions(key) {
+            return this.ptmo(this.getColumnProp(), key, {
+                props: this.column.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getColumnCheckboxPTOptions(key) {
+            return this.ptmo(this.getColumnProp(), key, {
+                props: this.column.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                },
+                context: {
+                    checked: this.checked,
+                    focused: this.checkboxFocused,
+                    partialChecked: this.partialChecked
+                }
+            });
+        },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo
+        },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
@@ -146,19 +185,19 @@ export default {
                 visibility: this.leaf ? 'hidden' : 'visible'
             };
         },
-        togglerIcon() {
-            return ['p-treetable-toggler-icon pi', { 'pi-chevron-right': !this.expanded, 'pi-chevron-down': this.expanded }];
-        },
         checkboxSelectionMode() {
             return this.selectionMode === 'checkbox';
         },
         checkboxClass() {
             return ['p-checkbox-box', { 'p-highlight': this.checked, 'p-focus': this.checkboxFocused, 'p-indeterminate': this.partialChecked }];
-        },
-        checkboxIcon() {
-            return ['p-checkbox-icon', { 'pi pi-check': this.checked, 'pi pi-minus': this.partialChecked }];
         }
     },
+    components: {
+        ChevronRightIcon: ChevronRightIcon,
+        ChevronDownIcon: ChevronDownIcon,
+        CheckIcon: CheckIcon,
+        MinusIcon: MinusIcon
+    },
     directives: {
         ripple: Ripple
     }
diff --git a/components/lib/treetable/FooterCell.vue b/components/lib/treetable/FooterCell.vue
index 6897db48f..4289d6953 100644
--- a/components/lib/treetable/FooterCell.vue
+++ b/components/lib/treetable/FooterCell.vue
@@ -1,15 +1,17 @@
 <template>
-    <td :style="containerStyle" :class="containerClass">
+    <td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('footerCell') }">
         <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
         {{ columnProp('footer') }}
     </td>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'FooterCell',
+    extends: BaseComponent,
     props: {
         column: {
             type: Object,
@@ -35,6 +37,18 @@ export default {
         columnProp(prop) {
             return ObjectUtils.getVNodeProp(this.column, prop);
         },
+        getColumnPTOptions(key) {
+            return this.ptmo(this.getColumnProp(), key, {
+                props: this.column.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
+        },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
diff --git a/components/lib/treetable/HeaderCell.vue b/components/lib/treetable/HeaderCell.vue
index 21d90081e..7c13ec7b9 100644
--- a/components/lib/treetable/HeaderCell.vue
+++ b/components/lib/treetable/HeaderCell.vue
@@ -1,18 +1,34 @@
 <template>
-    <th :style="[containerStyle]" :class="containerClass" @click="onClick" @keydown="onKeyDown" :tabindex="columnProp('sortable') ? '0' : null" :aria-sort="ariaSort" role="columnheader">
-        <span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart"></span>
+    <th
+        :style="[containerStyle]"
+        :class="containerClass"
+        @click="onClick"
+        @keydown="onKeyDown"
+        :tabindex="columnProp('sortable') ? '0' : null"
+        :aria-sort="ariaSort"
+        role="columnheader"
+        v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('headerCell') }"
+    >
+        <span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
         <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
-        <span v-if="columnProp('header')" class="p-column-title">{{ columnProp('header') }}</span>
-        <span v-if="columnProp('sortable')" :class="sortableColumnIcon"></span>
-        <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{ getMultiSortMetaIndex() + 1 }}</span>
+        <span v-if="columnProp('header')" class="p-column-title" v-bind="getColumnPTOptions('headerTitle')">{{ columnProp('header') }}</span>
+        <span v-if="columnProp('sortable')" v-bind="getColumnPTOptions('sort')">
+            <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" class="p-sortable-column-icon" />
+        </span>
+        <span v-if="isMultiSorted()" class="p-sortable-column-badge" v-bind="getColumnPTOptions('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
     </th>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import SortAltIcon from 'primevue/icons/sortalt';
+import SortAmountDownIcon from 'primevue/icons/sortamountdown';
+import SortAmountUpAltIcon from 'primevue/icons/sortamountupalt';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'HeaderCell',
+    extends: BaseComponent,
     emits: ['column-click', 'column-resizestart'],
     props: {
         column: {
@@ -59,6 +75,18 @@ export default {
         columnProp(prop) {
             return ObjectUtils.getVNodeProp(this.column, prop);
         },
+        getColumnPTOptions(key) {
+            return this.ptmo(this.getColumnProp(), key, {
+                props: this.column.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+        },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
@@ -146,7 +174,7 @@ export default {
 
             return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject] : [columnStyle, headerStyle];
         },
-        sortableColumnIcon() {
+        sortState() {
             let sorted = false;
             let sortOrder = null;
 
@@ -162,26 +190,36 @@ export default {
                 }
             }
 
-            return [
-                'p-sortable-column-icon pi pi-fw',
-                {
-                    'pi-sort-alt': !sorted,
-                    'pi-sort-amount-up-alt': sorted && sortOrder > 0,
-                    'pi-sort-amount-down': sorted && sortOrder < 0
-                }
-            ];
+            return {
+                sorted,
+                sortOrder
+            };
+        },
+        sortableColumnIcon() {
+            const { sorted, sortOrder } = this.sortState;
+
+            if (!sorted) return SortAltIcon;
+            else if (sorted && sortOrder > 0) return SortAmountUpAltIcon;
+            else if (sorted && sortOrder < 0) return SortAmountDownIcon;
+
+            return null;
         },
         ariaSort() {
             if (this.columnProp('sortable')) {
-                const sortIcon = this.sortableColumnIcon;
+                const { sorted, sortOrder } = this.sortState;
 
-                if (sortIcon[1]['pi-sort-amount-down']) return 'descending';
-                else if (sortIcon[1]['pi-sort-amount-up-alt']) return 'ascending';
+                if (sorted && sortOrder < 0) return 'descending';
+                else if (sorted && sortOrder > 0) return 'ascending';
                 else return 'none';
             } else {
                 return null;
             }
         }
+    },
+    components: {
+        SortAltIcon: SortAltIcon,
+        SortAmountUpAltIcon: SortAmountUpAltIcon,
+        SortAmountDownIcon: SortAmountDownIcon
     }
 };
 </script>
diff --git a/components/lib/treetable/TreeTable.d.ts b/components/lib/treetable/TreeTable.d.ts
index 849f94b61..c308b7738 100755
--- a/components/lib/treetable/TreeTable.d.ts
+++ b/components/lib/treetable/TreeTable.d.ts
@@ -8,9 +8,20 @@
  *
  */
 import { VNode } from 'vue';
+import { PaginatorPassThroughOptionType } from '../paginator';
 import { TreeNode } from '../tree';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TreeTablePassThroughOptionType = TreeTablePassThroughAttributes | ((options: TreeTablePassThroughMethodOptions) => TreeTablePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TreeTablePassThroughMethodOptions {
+    props: TreeTableProps;
+    state: TreeTableState;
+}
+
 /**
  * Custom treetable filter metadata.
  */
@@ -153,6 +164,152 @@ export interface TreeTableSelectionKeys {
     [key: string]: any;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TreeTableProps.pt}
+ */
+export interface TreeTablePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading wrapper's DOM element.
+     */
+    loadingWrapper?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading overlay's DOM element.
+     */
+    loadingOverlay?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Paginator component.
+     * @see {@link PaginatorPassThroughOptionType}
+     */
+    paginator?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the table's DOM element.
+     */
+    table?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the thead's DOM element.
+     */
+    thead?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header row's DOM element.
+     */
+    headerRow?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header cell's DOM element.
+     */
+    headerCell?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the tbody's DOM element.
+     */
+    tbody?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the body cell's DOM element.
+     */
+    bodyCell?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the tfoot's DOM element.
+     */
+    tfoot?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer row's DOM element.
+     */
+    footerRow?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: TreeTablePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the resize helper's DOM element.
+     */
+    resizeHelper?: TreeTablePassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TreeTablePassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in TreeTable component.
+ */
+export interface TreeTableState {
+    /**
+     * Current index of first record as a number.
+     */
+    d_first: number;
+    /**
+     * Current number of rows to display in new page as a number.
+     */
+    d_rows: number;
+    /**
+     * Current sort field.
+     */
+    d_sortField: string | ((item: any) => string) | undefined;
+    /**
+     * Current order to sort the data by default.
+     */
+    d_sortOrder: number;
+    /**
+     * Current sortmeta objects to sort the data.
+     */
+    d_multiSortMeta: TreeTableSortMeta[];
+    /**
+     * Current group sortmeta objects to sort the data.
+     */
+    d_groupRowsSortMeta: TreeTableSortMeta;
+    /**
+     * Current keys of selected rows.
+     */
+    d_selectionKeys: any[];
+    /**
+     * Current keys of rows in expanded state.
+     */
+    d_expandedRowKeys: any[];
+    /**
+     * Current order of the columns.
+     */
+    d_columnOrder: string[];
+    /**
+     * Current keys of editing rows.
+     */
+    d_editingRowKeys: any;
+    /**
+     * Current editing meta data.
+     */
+    d_editingMeta: object;
+    /**
+     * Current filters object.
+     */
+    d_filters: TreeTableFilterMeta;
+    /**
+     * Current editing as a boolean.
+     * @defaultValue false
+     */
+    d_editing: boolean;
+}
+
 /**
  * Defines valid properties in TreeTable component.
  */
@@ -259,7 +416,7 @@ export interface TreeTableProps {
     loading?: boolean | undefined;
     /**
      * The icon to show while indicating data load is in progress.
-     * @defaultValue pi pi-spinner
+     * @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
     /**
@@ -356,6 +513,11 @@ export interface TreeTableProps {
      * Props to pass to the table element.
      */
     tableProps?: any | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TreeTablePassThroughOptions}
+     */
+    pt?: TreeTablePassThroughOptions;
 }
 
 /**
@@ -382,6 +544,47 @@ export interface TreeTableSlots {
      * Custom empty template.
      */
     empty(): VNode[];
+    /**
+     * Custom loading icon template.
+     */
+    loadingicon(): VNode[];
+    /**
+     * Custom toggler icon template.
+     */
+    togglericon(): VNode[];
+    /**
+     * Custom checkbox icon template.
+     */
+    checkboxicon(): VNode[];
+    /**
+     * Custom sort icon template.
+     */
+    sorticon(scope: {
+        /**
+         * Whether or not column is sorted
+         */
+        sorted: TreeNode;
+        /**
+         * Current sort order
+         */
+        sortOrder: boolean;
+    }): VNode[];
+    /**
+     * Custom paginator first page link icon template.
+     */
+    paginatorfirstpagelinkicon(): VNode[];
+    /**
+     * Custom paginator previous page link icon template.
+     */
+    paginatorprevpagelinkicon(): VNode[];
+    /**
+     * Custom paginator next page link icon template.
+     */
+    paginatornextpagelinkicon(): VNode[];
+    /**
+     * Custom paginator last page link icon template.
+     */
+    paginatorlastpagelinkicon(): VNode[];
 }
 
 /**
diff --git a/components/lib/treetable/TreeTable.vue b/components/lib/treetable/TreeTable.vue
index 27447025d..93af9e598 100755
--- a/components/lib/treetable/TreeTable.vue
+++ b/components/lib/treetable/TreeTable.vue
@@ -1,11 +1,13 @@
 <template>
-    <div :class="containerClass" data-scrollselectors=".p-treetable-scrollable-body" role="table">
-        <div v-if="loading" class="p-treetable-loading">
-            <div class="p-treetable-loading-overlay p-component-overlay">
-                <i :class="loadingIconClass"></i>
+    <div :class="containerClass" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptm('root')">
+        <div v-if="loading" class="p-treetable-loading" v-bind="ptm('loadingWrapper')">
+            <div class="p-treetable-loading-overlay p-component-overlay" v-bind="ptm('loadingOverlay')">
+                <slot name="loadingicon">
+                    <component :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-treetable-loading-icon', loadingIcon]" v-bind="ptm('loadingIcon')" />
+                </slot>
             </div>
         </div>
-        <div v-if="$slots.header" class="p-treetable-header">
+        <div v-if="$slots.header" class="p-treetable-header" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
         <TTPaginator
@@ -20,6 +22,7 @@
             class="p-paginator-top"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
+            :pt="ptm('paginator')"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
@@ -27,11 +30,23 @@
             <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
+            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon>
+                <slot name="paginatorfirstpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon>
+                <slot name="paginatorprevpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon>
+                <slot name="paginatornextpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
+                <slot name="paginatorlastpagelinkicon"></slot>
+            </template>
         </TTPaginator>
-        <div class="p-treetable-wrapper" :style="{ maxHeight: scrollHeight }">
-            <table ref="table" role="table" v-bind="tableProps">
-                <thead class="p-treetable-thead" role="rowgroup">
-                    <tr role="row">
+        <div class="p-treetable-wrapper" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
+            <table ref="table" role="table" v-bind="{ ...tableProps, ...ptm('table') }">
+                <thead class="p-treetable-thead" role="rowgroup" v-bind="ptm('thead')">
+                    <tr role="row" v-bind="ptm('headerRow')">
                         <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
                             <TTHeaderCell
                                 v-if="!columnProp(col, 'hidden')"
@@ -43,18 +58,19 @@
                                 :sortMode="sortMode"
                                 @column-click="onColumnHeaderClick"
                                 @column-resizestart="onColumnResizeStart"
+                                :pt="pt"
                             ></TTHeaderCell>
                         </template>
                     </tr>
-                    <tr v-if="hasColumnFilter()">
+                    <tr v-if="hasColumnFilter()" v-bind="ptm('headerRow')">
                         <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
-                            <th v-if="!columnProp(col, 'hidden')" :class="getFilterColumnHeaderClass(col)" :style="[columnProp(col, 'style'), columnProp(col, 'filterHeaderStyle')]">
+                            <th v-if="!columnProp(col, 'hidden')" :class="getFilterColumnHeaderClass(col)" :style="[columnProp(col, 'style'), columnProp(col, 'filterHeaderStyle')]" v-bind="ptm('headerCell')">
                                 <component v-if="col.children && col.children.filter" :is="col.children.filter" :column="col" />
                             </th>
                         </template>
                     </tr>
                 </thead>
-                <tbody class="p-treetable-tbody" role="rowgroup">
+                <tbody class="p-treetable-tbody" role="rowgroup" v-bind="ptm('tbody')">
                     <template v-if="!empty">
                         <TTRow
                             v-for="(node, index) of dataToRender"
@@ -69,21 +85,23 @@
                             :ariaSetSize="dataToRender.length"
                             :ariaPosInset="index + 1"
                             :tabindex="setTabindex(node, index)"
+                            :templates="$slots"
                             @node-toggle="onNodeToggle"
                             @node-click="onNodeClick"
                             @checkbox-change="onCheckboxChange"
+                            :pt="pt"
                         ></TTRow>
                     </template>
-                    <tr v-else class="p-treetable-emptymessage">
-                        <td :colspan="columns.length">
+                    <tr v-else class="p-treetable-emptymessage" v-bind="ptm('emptyMessage')">
+                        <td :colspan="columns.length" v-bind="ptm('bodyCell')">
                             <slot name="empty"></slot>
                         </td>
                     </tr>
                 </tbody>
-                <tfoot v-if="hasFooter" class="p-treetable-tfoot" role="rowgroup">
-                    <tr role="row">
+                <tfoot v-if="hasFooter" class="p-treetable-tfoot" role="rowgroup" v-bind="ptm('tfoot')">
+                    <tr role="row" v-bind="ptm('footerRow')">
                         <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
-                            <TTFooterCell v-if="!columnProp(col, 'hidden')" :column="col"></TTFooterCell>
+                            <TTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt"></TTFooterCell>
                         </template>
                     </tr>
                 </tfoot>
@@ -101,6 +119,7 @@
             class="p-paginator-bottom"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
+            :pt="pt"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
@@ -108,16 +127,30 @@
             <template v-if="$slots.paginatorend" #end>
                 <slot name="paginatorend"></slot>
             </template>
+            <template v-if="$slots.paginatorfirstpagelinkicon" #firstpagelinkicon>
+                <slot name="paginatorfirstpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorprevpagelinkicon" #prevpagelinkicon>
+                <slot name="paginatorprevpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatornextpagelinkicon" #nextpagelinkicon>
+                <slot name="paginatornextpagelinkicon"></slot>
+            </template>
+            <template v-if="$slots.paginatorlastpagelinkicon" #lastpagelinkicon>
+                <slot name="paginatorlastpagelinkicon"></slot>
+            </template>
         </TTPaginator>
-        <div v-if="$slots.footer" class="p-treetable-footer">
+        <div v-if="$slots.footer" class="p-treetable-footer" v-bind="ptm('footer')">
             <slot name="footer"></slot>
         </div>
-        <div ref="resizeHelper" class="p-column-resizer-helper p-highlight" style="display: none"></div>
+        <div ref="resizeHelper" class="p-column-resizer-helper p-highlight" style="display: none" v-bind="ptm('resizeHelper')"></div>
     </div>
 </template>
 
 <script>
 import { FilterService } from 'primevue/api';
+import BaseComponent from 'primevue/basecomponent';
+import SpinnerIcon from 'primevue/icons/spinner';
 import Paginator from 'primevue/paginator';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 import FooterCell from './FooterCell.vue';
@@ -126,6 +159,7 @@ import TreeTableRow from './TreeTableRow.vue';
 
 export default {
     name: 'TreeTable',
+    extends: BaseComponent,
     emits: [
         'node-expand',
         'node-collapse',
@@ -214,7 +248,7 @@ export default {
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner'
+            default: undefined
         },
         rowHover: {
             type: Boolean,
@@ -970,16 +1004,14 @@ export default {
 
                 return data ? data.length : 0;
             }
-        },
-        loadingIconClass() {
-            return ['p-treetable-loading-icon pi-spin', this.loadingIcon];
         }
     },
     components: {
         TTRow: TreeTableRow,
         TTPaginator: Paginator,
         TTHeaderCell: HeaderCell,
-        TTFooterCell: FooterCell
+        TTFooterCell: FooterCell,
+        SpinnerIcon: SpinnerIcon
     }
 };
 </script>
diff --git a/components/lib/treetable/TreeTableRow.vue b/components/lib/treetable/TreeTableRow.vue
index 13c8f09f2..df4954ce2 100755
--- a/components/lib/treetable/TreeTableRow.vue
+++ b/components/lib/treetable/TreeTableRow.vue
@@ -14,6 +14,7 @@
         @click="onClick"
         @keydown="onKeyDown"
         @touchend="onTouchEnd"
+        v-bind="ptm('row')"
     >
         <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
             <TTBodyCell
@@ -27,8 +28,10 @@
                 :selectionMode="selectionMode"
                 :checked="checked"
                 :partialChecked="partialChecked"
+                :templates="templates"
                 @node-toggle="$emit('node-toggle', $event)"
                 @checkbox-toggle="toggleCheckbox"
+                :pt="pt"
             ></TTBodyCell>
         </template>
     </tr>
@@ -46,19 +49,23 @@
             :indentation="indentation"
             :ariaPosInset="node.children.indexOf(childNode) + 1"
             :ariaSetSize="node.children.length"
+            :templates="templates"
             @node-toggle="$emit('node-toggle', $event)"
             @node-click="$emit('node-click', $event)"
             @checkbox-change="onCheckboxChange"
+            :pt="pt"
         />
     </template>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 import BodyCell from './BodyCell.vue';
 
 export default {
     name: 'TreeTableRow',
+    extends: BaseComponent,
     emits: ['node-click', 'node-toggle', 'checkbox-change', 'nodeClick', 'nodeToggle', 'checkboxChange'],
     props: {
         node: {
@@ -104,6 +111,10 @@ export default {
         ariaPosInset: {
             type: Number,
             default: null
+        },
+        templates: {
+            type: Object,
+            default: null
         }
     },
     nodeTouched: false,
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.d.ts b/components/lib/tristatecheckbox/TriStateCheckbox.d.ts
index 538d8b046..04ba9e695 100755
--- a/components/lib/tristatecheckbox/TriStateCheckbox.d.ts
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.d.ts
@@ -10,6 +10,94 @@
 import { InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
 
+export declare type TriStateCheckboxPassThroughOptionType = TriStateCheckboxPassThroughAttributes | ((options: TriStateCheckboxPassThroughMethodOptions) => TriStateCheckboxPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TriStateCheckboxPassThroughMethodOptions {
+    props: TriStateCheckboxProps;
+    state: TriStateCheckboxState;
+    context: TriStateCheckboxContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TriStateCheckboxProps.pt}
+ */
+export interface TriStateCheckboxPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TriStateCheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox box's DOM element.
+     */
+    checbox?: TriStateCheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the check icon's DOM element.
+     */
+    checkIcon?: TriStateCheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the uncheck icon's DOM element.
+     */
+    uncheckIcon?: TriStateCheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the nullable icon's DOM element.
+     */
+    nullableIcon?: TriStateCheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: TriStateCheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: TriStateCheckboxPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the sr only aria's DOM element.
+     */
+    srOnlyAria?: TriStateCheckboxPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TriStateCheckboxPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in TriStateCheckbox component.
+ */
+export interface TriStateCheckboxState {
+    /**
+     * Focused state as a boolean.
+     */
+    focused: boolean;
+}
+
+/**
+ * Defines current options in TriStateCheckbox component.
+ */
+export interface TriStateCheckboxContext {
+    /**
+     * Current active state as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in TriStateCheckbox component.
  */
@@ -34,6 +122,7 @@ export interface TriStateCheckboxProps {
     inputId?: string | undefined;
     /**
      * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
+     * @deprecated since v3.26.0. Use 'pt' property.
      */
     inputProps?: InputHTMLAttributes | undefined;
     /**
@@ -44,6 +133,11 @@ export interface TriStateCheckboxProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TriStateCheckboxPassThroughOptions}
+     */
+    pt?: TriStateCheckboxPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.spec.js b/components/lib/tristatecheckbox/TriStateCheckbox.spec.js
index 0ba1dfc2a..6a7fd9fb2 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.spec.js
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.spec.js
@@ -1,19 +1,6 @@
-import { config, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import TriStateCheckbox from './TriStateCheckbox.vue';
 
-config.global.mocks = {
-    $primevue: {
-        config: {
-            locale: {
-                aria: {
-                    trueLabel: 'trueLabel',
-                    falseLabel: 'falseLabel',
-                    nullLabel: 'nullLabel'
-                }
-            }
-        }
-    }
-};
 let wrapper;
 const modelValues = [true, false, null];
 const emittedResults = [false, null, true];
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.vue b/components/lib/tristatecheckbox/TriStateCheckbox.vue
index 1fdd6d0b6..067fa80fe 100755
--- a/components/lib/tristatecheckbox/TriStateCheckbox.vue
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :class="containerClass" @click="onClick($event)">
-        <div class="p-hidden-accessible">
+    <div :class="containerClass" @click="onClick($event)" v-bind="ptm('root')">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
             <input
                 ref="input"
                 :id="inputId"
@@ -13,28 +13,32 @@
                 @keydown="onKeyDown($event)"
                 @focus="onFocus($event)"
                 @blur="onBlur($event)"
-                v-bind="inputProps"
+                v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
             />
         </div>
-        <span class="p-sr-only" aria-live="polite">{{ ariaValueLabel }}</span>
-        <div ref="box" :class="['p-checkbox-box', { 'p-highlight': modelValue != null, 'p-disabled': disabled, 'p-focus': focused }]">
+        <span class="p-sr-only" aria-live="polite" v-bind="ptm('srOnlyAria')">{{ ariaValueLabel }}</span>
+        <div ref="box" :class="['p-checkbox-box', { 'p-highlight': modelValue != null, 'p-disabled': disabled, 'p-focus': focused }]" v-bind="getPTOptions('checbox')">
             <slot v-if="modelValue === true" name="checkicon">
-                <component :is="'CheckIcon'" class="p-checkbox-icon" />
+                <component :is="'CheckIcon'" class="p-checkbox-icon" v-bind="ptm('checkIcon')" />
             </slot>
             <slot v-else-if="modelValue === false" name="uncheckicon">
-                <component :is="'TimesIcon'" class="p-checkbox-icon" />
+                <component :is="'TimesIcon'" class="p-checkbox-icon" v-bind="ptm('uncheckIcon')" />
+            </slot>
+            <slot v-else name="nullableicon">
+                <span class="p-checkbox-icon" v-bind="ptm('nullableIcon')"></span>
             </slot>
-            <slot v-else name="nullableicon" />
         </div>
     </div>
 </template>
 
 <script>
-import CheckIcon from 'primevue/icon/check';
-import TimesIcon from 'primevue/icon/times';
+import BaseComponent from 'primevue/basecomponent';
+import CheckIcon from 'primevue/icons/check';
+import TimesIcon from 'primevue/icons/times';
 
 export default {
     name: 'TriStateCheckbox',
+    extends: BaseComponent,
     emits: ['click', 'update:modelValue', 'change', 'keydown', 'focus', 'blur'],
     props: {
         modelValue: null,
@@ -69,6 +73,15 @@ export default {
         };
     },
     methods: {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.modelValue !== null,
+                    focused: this.focused,
+                    disabled: this.disabled
+                }
+            });
+        },
         updateModel() {
             if (!this.disabled) {
                 let newValue;
@@ -113,25 +126,6 @@ export default {
         }
     },
     computed: {
-        icon() {
-            let icon;
-
-            switch (this.modelValue) {
-                case true:
-                    icon = 'pi pi-check';
-                    break;
-
-                case false:
-                    icon = 'pi pi-times';
-                    break;
-
-                case null:
-                    icon = null;
-                    break;
-            }
-
-            return icon;
-        },
         containerClass() {
             return [
                 'p-checkbox p-component',
diff --git a/components/lib/ts-helpers.d.ts b/components/lib/ts-helpers.d.ts
index 4c407beed..a2e9f13b9 100644
--- a/components/lib/ts-helpers.d.ts
+++ b/components/lib/ts-helpers.d.ts
@@ -1,4 +1,4 @@
-import { AllowedComponentProps, ComponentCustomProps, ObjectEmitsOptions, VNodeProps } from 'vue';
+import { AllowedComponentProps, ComponentCustomProps, ObjectEmitsOptions, VNode, VNodeProps } from 'vue';
 
 declare type PublicProps = VNodeProps & AllowedComponentProps & ComponentCustomProps;
 
@@ -32,3 +32,5 @@ export declare type Booleanish = boolean | 'true' | 'false';
 export declare type Numberish = number | string;
 
 export declare type Nullable<T = void> = T | null | undefined;
+
+export declare type DefaultPTOptions<T = void> = T | ((instance?: VNode) => T | undefined) | undefined;
diff --git a/components/lib/virtualscroller/VirtualScroller.d.ts b/components/lib/virtualscroller/VirtualScroller.d.ts
index 2898bfa82..deb0f2aad 100644
--- a/components/lib/virtualscroller/VirtualScroller.d.ts
+++ b/components/lib/virtualscroller/VirtualScroller.d.ts
@@ -10,6 +10,16 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type VirtualScrollerPassThroughOptionType = VirtualScrollerPassThroughAttributes | ((options: VirtualScrollerPassThroughMethodOptions) => VirtualScrollerPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface VirtualScrollerPassThroughMethodOptions {
+    props: VirtualScrollerProps;
+    state: VirtualScrollerState;
+}
+
 /**
  * Custom scroll index change event.
  * @see {@link VirtualScrollerEmits['scroll-index-change']}
@@ -92,6 +102,87 @@ export interface VirtualScrollerItemOptions {
     [key: string]: any;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link VirtualScrollerProps.pt}
+ */
+export interface VirtualScrollerPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the spacer's DOM element.
+     */
+    spacer?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loader's DOM element.
+     */
+    loader?: VirtualScrollerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: VirtualScrollerPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface VirtualScrollerPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in VirtualScroller component.
+ */
+export interface VirtualScrollerState {
+    /**
+     * First index of the new data range to be loaded as a number.
+     */
+    first: number;
+    /**
+     * Last index of the new data range to be loaded as a number.
+     */
+    last: number;
+    /**
+     * Index of the first item as a number.
+     */
+    page: number;
+    /**
+     * Visible item count in the viewport as a number.
+     */
+    numItemsInViewport: number;
+    /**
+     * Lastest scroll position as a number.
+     */
+    lastScrollPos: number;
+    /**
+     * Additional elements to add to the DOM outside of the view as a number.
+     */
+    d_numToleratedItems: number;
+    /**
+     * Current loading state as a boolean.
+     * @defaultValue false
+     */
+    d_loading: number;
+    /**
+     * Loadable items array.
+     */
+    loaderArr: any[];
+    /**
+     * The style of spacer element.
+     */
+    spacerStyle: any;
+    /**
+     * The style of content element.
+     */
+    contentStyle: any;
+}
+
 /**
  * Custom virtualscroller loader options
  * @see VirtualScrollerItemOptions
@@ -169,6 +260,7 @@ export interface VirtualScrollerProps {
     loaderDisabled?: boolean | undefined;
     /**
      * Whether to show loader.
+     * @defaultValue false
      */
     showLoader?: boolean | undefined;
     /**
@@ -211,6 +303,11 @@ export interface VirtualScrollerProps {
      * @defaultValue false
      */
     autoSize?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {VirtualScrollerPassThroughOptions}
+     */
+    pt?: VirtualScrollerPassThroughOptions;
 }
 
 /**
diff --git a/components/lib/virtualscroller/VirtualScroller.vue b/components/lib/virtualscroller/VirtualScroller.vue
index 259d45927..d3936da09 100644
--- a/components/lib/virtualscroller/VirtualScroller.vue
+++ b/components/lib/virtualscroller/VirtualScroller.vue
@@ -1,6 +1,6 @@
 <template>
     <template v-if="!disabled">
-        <div :ref="elementRef" :class="containerClass" :tabindex="tabindex" :style="style" @scroll="onScroll">
+        <div :ref="elementRef" :class="containerClass" :tabindex="tabindex" :style="style" @scroll="onScroll" v-bind="ptm('root')">
             <slot
                 name="content"
                 :styleClass="contentClass"
@@ -18,21 +18,21 @@
                 :horizontal="isHorizontal()"
                 :both="isBoth()"
             >
-                <div :ref="contentRef" :class="contentClass" :style="contentStyle">
+                <div :ref="contentRef" :class="contentClass" :style="contentStyle" v-bind="ptm('content')">
                     <template v-for="(item, index) of loadedItems" :key="index">
                         <slot name="item" :item="item" :options="getOptions(index)"></slot>
                     </template>
                 </div>
             </slot>
-            <div v-if="showSpacer" class="p-virtualscroller-spacer" :style="spacerStyle"></div>
-            <div v-if="!loaderDisabled && showLoader && d_loading" :class="loaderClass">
+            <div v-if="showSpacer" class="p-virtualscroller-spacer" :style="spacerStyle" v-bind="ptm('spacer')"></div>
+            <div v-if="!loaderDisabled && showLoader && d_loading" :class="loaderClass" v-bind="ptm('loader')">
                 <template v-if="$slots && $slots.loader">
                     <template v-for="(_, index) of loaderArr" :key="index">
                         <slot name="loader" :options="getLoaderOptions(index, isBoth() && { numCols: d_numItemsInViewport.cols })"></slot>
                     </template>
                 </template>
                 <slot name="loadingicon">
-                    <SpinnerIcon spin class="p-virtualscroller-loading-icon" />
+                    <SpinnerIcon spin class="p-virtualscroller-loading-icon" v-bind="ptm('loadingIcon')" />
                 </slot>
             </div>
         </div>
@@ -44,11 +44,13 @@
 </template>
 
 <script>
-import SpinnerIcon from 'primevue/icon/spinner';
+import BaseComponent from 'primevue/basecomponent';
+import SpinnerIcon from 'primevue/icons/spinner';
 import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'VirtualScroller',
+    extends: BaseComponent,
     emits: ['update:numToleratedItems', 'scroll', 'scroll-index-change', 'lazy-load'],
     props: {
         id: {
@@ -800,6 +802,11 @@ export default {
     font-size: 2rem;
 }
 
+.p-virtualscroller-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+}
+
 .p-virtualscroller-horizontal > .p-virtualscroller-content {
     display: flex;
 }
diff --git a/doc/accessibility/ColorsDoc.vue b/doc/accessibility/ColorsDoc.vue
index d8d8a8844..d4584513f 100644
--- a/doc/accessibility/ColorsDoc.vue
+++ b/doc/accessibility/ColorsDoc.vue
@@ -5,10 +5,10 @@
         <p>Color contrast between the background and the foreground content should be sufficient enough to ensure readability. Example below displays two cases with good and bad samples.</p>
 
         <div class="flex">
-            <div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-600" style="borderradius: 10px">
+            <div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-600" style="border-radius: 10px">
                 <span class="text-white">GOOD</span>
             </div>
-            <div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-400" style="borderradius: 10px">
+            <div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-400" style="border-radius: 10px">
                 <span class="text-white">BAD</span>
             </div>
         </div>
@@ -17,7 +17,7 @@
         <p>Color vibration is leads to an illusion of motion due to choosing colors that have low visibility against each other. Color combinations need to be picked with caution to avoid vibration.</p>
 
         <div class="flex">
-            <div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-pink-500" style="borderradius: 10px">
+            <div class="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-pink-500" style="border-radius: 10px">
                 <span class="text-blue-500">VIBRATE</span>
             </div>
         </div>
@@ -26,11 +26,11 @@
         <p>Highly saturated colors should be avoided when used within a dark design scheme as they cause eye strain. Instead desaturated colors should be preferred.</p>
 
         <div class="flex">
-            <div class="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style="borderradius: 10px">
+            <div class="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style="border-radius: 10px">
                 <span class="text-indigo-500">Indigo 500</span>
                 <i class="text-indigo-500 pi pi-times-circle mt-3 text-xl"></i>
             </div>
-            <div class="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style="borderradius: 10px">
+            <div class="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style="border-radius: 10px">
                 <span class="text-indigo-200">Indigo 200</span>
                 <i class="text-indigo-200 pi pi-check-circle mt-3 text-xl"></i>
             </div>
diff --git a/doc/accordion/DynamicDoc.vue b/doc/accordion/DynamicDoc.vue
new file mode 100644
index 000000000..fdf8601c7
--- /dev/null
+++ b/doc/accordion/DynamicDoc.vue
@@ -0,0 +1,79 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>AccordionTabs can be generated dynamically using the standard <i>v-for</i> directive.</p>
+    </DocSectionText>
+    <div class="card">
+        <Accordion :activeIndex="0">
+            <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
+                <p>{{ tab.content }}</p>
+            </AccordionTab>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            tabs: [
+                { title: 'Title 1', content: 'Content 1' },
+                { title: 'Title 2', content: 'Content 2' },
+                { title: 'Title 3', content: 'Content 3' }
+            ],
+            code: {
+                basic: `
+<Accordion :activeIndex="0">
+    <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
+        <p>{{ tab.content }}</p>
+    </AccordionTab>
+</Accordion>`,
+                options: `
+<template>
+    <div class="card">
+        <Accordion :activeIndex="0">
+            <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
+                <p>{{ tab.content }}</p>
+            </AccordionTab>
+        </Accordion>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            tabs: [
+                { title: 'Title 1', content: 'Content 1' },
+                { title: 'Title 2', content: 'Content 2' },
+                { title: 'Title 3', content: 'Content 3' }
+            ]
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <Accordion :activeIndex="0">
+            <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title">
+                <p>{{ tab.content }}</p>
+            </AccordionTab>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const tabs = ref([
+    { title: 'Title 1', content: 'Content 1' },
+    { title: 'Title 2', content: 'Content 2' },
+    { title: 'Title 3', content: 'Content 3' }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/accordion/pt/PTDoc.vue b/doc/accordion/pt/PTDoc.vue
index 36024fdb0..58f860ab2 100644
--- a/doc/accordion/pt/PTDoc.vue
+++ b/doc/accordion/pt/PTDoc.vue
@@ -1,26 +1,18 @@
 <template>
-    <DocSectionText v-bind="$attrs">
-        <p>A simple Panel is created with a <i>header</i> property along with the content as children.</p>
-    </DocSectionText>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
     <div class="card">
         <Accordion :activeIndex="0">
-            <AccordionTab header="Header I" :pt="{ headeraction: { class: 'bg-blue-500' }, headericon: { class: 'text-white' }, headertitle: { class: 'text-white' } }">
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </AccordionTab>
-            <AccordionTab header="Header II">
-                <p>
-                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                </p>
-            </AccordionTab>
-            <AccordionTab header="Header III">
-                <p>
-                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                </p>
+            <AccordionTab
+                v-for="(tab, index) in tabs"
+                :key="tab.title"
+                :header="tab.title"
+                :pt="{
+                    headerAction: ({ props, parent }) => ({
+                        class: panelClass(props, parent, index)
+                    })
+                }"
+            >
+                <p>{{ tab.content }}</p>
             </AccordionTab>
         </Accordion>
     </div>
@@ -31,86 +23,102 @@
 export default {
     data() {
         return {
+            tabs: Array.from({ length: 3 }, (_, i) => ({
+                title: `Header ${i + 1}`,
+                content: `Tab ${i + 1} Content`
+            })),
             code: {
                 basic: `
 <Accordion :activeIndex="0">
-    <AccordionTab header="Header I" :pt="{ headeraction: { class: 'bg-blue-500' }, headericon: { class: 'text-white' }, headertitle: { class: 'text-white' } }">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-    </AccordionTab>
-    <AccordionTab header="Header II">
-        <p>
-            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-            ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-        </p>
-    </AccordionTab>
-    <AccordionTab header="Header III">
-        <p>
-            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-            officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-        </p>
+    <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
+        :pt="{
+            headerAction: ({ props, parent }) => ({
+                class: panelClass(props, parent, index)
+            })
+        }">
+        <p>{{ tab.content }}</p>
     </AccordionTab>
 </Accordion>`,
                 options: `
 <template>
     <div class="card">
         <Accordion :activeIndex="0">
-            <AccordionTab header="Header I" :pt="{ headeraction: { class: 'bg-blue-500' }, headericon: { class: 'text-white' }, headertitle: { class: 'text-white' } }">
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </AccordionTab>
-            <AccordionTab header="Header II">
-                <p>
-                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                </p>
-            </AccordionTab>
-            <AccordionTab header="Header III">
-                <p>
-                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                </p>
+            <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
+                :pt="{
+                    headerAction: ({ props, parent }) => ({
+                        class: panelClass(props, parent, index)
+                    })
+                }">
+                <p>{{ tab.content }}</p>
             </AccordionTab>
         </Accordion>
     </div>
 </template>
 
 <script>
+export default {
+    data() {
+        return {
+            tabs: Array.from({ length: 3 }, (_, i) => ({
+                title: \`Header \${i + 1}\`,
+                content: \`Tab \${i + 1} Content\`
+            }))
+        }
+    },
+    methods: {
+        panelClass(props, parent, index) {
+            return [
+                {
+                    'bg-primary': parent.state.d_activeIndex === index
+                }
+            ];
+        }
+    }
+}
 <\/script>`,
                 composition: `
 <template>
     <div class="card">
         <Accordion :activeIndex="0">
-            <AccordionTab header="Header I" :pt="{ headeraction: { class: 'bg-blue-500' }, headericon: { class: 'text-white' }, headertitle: { class: 'text-white' } }">
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                </p>
-            </AccordionTab>
-            <AccordionTab header="Header II">
-                <p>
-                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
-                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                </p>
-            </AccordionTab>
-            <AccordionTab header="Header III">
-                <p>
-                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
-                    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                </p>
+            <AccordionTab v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
+                :pt="{
+                    headerAction: ({ props, parent }) => ({
+                        class: panelClass(props, parent, index)
+                    })
+                }">
+                <p>{{ tab.content }}</p>
             </AccordionTab>
         </Accordion>
     </div>
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
+const tabs = ref(Array.from({ length: 3 }, (_, i) => ({
+    title: \`Header \${i + 1}\`,
+    content: \`Tab \${i + 1} Content\`
+})));
+
+const panelClass = (props, parent, index) => {
+    return [
+        {
+            'bg-primary': parent.state.d_activeIndex === index
+        }
+    ];
+};
 <\/script>`
             }
         };
+    },
+    methods: {
+        panelClass(props, parent, index) {
+            return [
+                {
+                    'bg-primary': parent.state.d_activeIndex === index
+                }
+            ];
+        }
     }
 };
 </script>
diff --git a/doc/accordion/pt/PTImage.vue b/doc/accordion/pt/PTImage.vue
index c50e6a19e..e2ec2bff2 100644
--- a/doc/accordion/pt/PTImage.vue
+++ b/doc/accordion/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
-        <img class="w-full" src="/images/pt/accordion.jpg" />
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/accordion.jpg" />
     </div>
 </template>
diff --git a/doc/accordion/pt/index.vue b/doc/accordion/pt/index.vue
index 68787d734..fb05d45e3 100644
--- a/doc/accordion/pt/index.vue
+++ b/doc/accordion/pt/index.vue
@@ -1,8 +1,7 @@
 <template>
-    <div className="doc-main">
-        <div className="doc-intro">
-            <h1>Panel Pass Through</h1>
-            <p>Description</p>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Accordion Pass Through</h1>
         </div>
         <DocSections :docs="docs" />
     </div>
@@ -21,28 +20,24 @@ export default {
             docs: [
                 {
                     id: 'pt.image',
-                    label: 'Image',
-                    description: 'Pass Through Image',
+                    label: 'Wireframe',
                     component: PTImage
                 },
                 {
                     id: 'pt.doc.accordion',
                     label: 'Accordion PT Options',
-                    description: 'Pass Through Accordion',
                     component: DocApiTable,
                     data: getPTOption('Accordion')
                 },
                 {
-                    id: 'pt.doc.tab',
+                    id: 'pt.doc.accordiontab',
                     label: 'AccordionTab PT Options',
-                    description: 'Pass Through AccordionTab',
                     component: DocApiTable,
                     data: getPTOption('AccordionTab')
                 },
                 {
                     id: 'pt.demo',
                     label: 'Demo',
-                    description: 'Pass Through Demo',
                     component: PtDoc
                 }
             ]
diff --git a/doc/autocomplete/pt/PTDoc.vue b/doc/autocomplete/pt/PTDoc.vue
new file mode 100644
index 000000000..ab62970d0
--- /dev/null
+++ b/doc/autocomplete/pt/PTDoc.vue
@@ -0,0 +1,106 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <AutoComplete
+            v-model="value"
+            :suggestions="items"
+            @complete="search"
+            :pt="{
+                input: { class: 'w-16rem' },
+                item: ({ props, state, context }) => ({
+                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
+                })
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: [],
+            code: {
+                basic: `
+<AutoComplete
+    v-model="value"
+    :suggestions="items"
+    @complete="search"
+    :pt="{
+        input: { class: 'w-16rem' },
+        item: ({ props, state, context }) => ({
+            class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
+        })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete
+            v-model="value"
+            :suggestions="items"
+            @complete="search"
+            :pt="{
+                input: { class: 'w-16rem' },
+                item: ({ props, state, context }) => ({
+                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            items: []
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <AutoComplete
+            v-model="value"
+            :suggestions="items"
+            @complete="search"
+            :pt="{
+                input: { class: 'w-16rem' },
+                item: ({ props, state, context }) => ({
+                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref("");
+const items = ref([]);
+
+const search = (event) => {
+    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+}
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        search(event) {
+            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+        }
+    }
+};
+</script>
diff --git a/doc/autocomplete/pt/PTImage.vue b/doc/autocomplete/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/autocomplete/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/autocomplete/pt/index.vue b/doc/autocomplete/pt/index.vue
new file mode 100644
index 000000000..c938bf4d9
--- /dev/null
+++ b/doc/autocomplete/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>AutoComplete Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.autocomplete',
+                    label: 'AutoComplete PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('AutoComplete')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/avatar/pt/PTDoc.vue b/doc/avatar/pt/PTDoc.vue
new file mode 100644
index 000000000..02a16e813
--- /dev/null
+++ b/doc/avatar/pt/PTDoc.vue
@@ -0,0 +1,40 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" :pt="{ image: { class: 'w-4rem h-4rem' } }" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
+    :pt="{
+        image: { class: 'w-4rem h-4rem' }
+    }"
+/>`,
+                options: `
+<template>
+    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
+        :pt="{
+            image: { class: 'w-4rem h-4rem' }
+        }"
+    />
+</template>`,
+                composition: `
+<template>
+    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
+        :pt="{
+            image: { class: 'w-4rem h-4rem' }
+        }"
+    />
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/avatar/pt/PTImage.vue b/doc/avatar/pt/PTImage.vue
new file mode 100644
index 000000000..681a8dde7
--- /dev/null
+++ b/doc/avatar/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/avatar.jpg" />
+    </div>
+</template>
diff --git a/doc/avatar/pt/index.vue b/doc/avatar/pt/index.vue
new file mode 100644
index 000000000..3c435f9eb
--- /dev/null
+++ b/doc/avatar/pt/index.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Avatar Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.avatar',
+                    label: 'Avatar PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Avatar')
+                },
+                {
+                    id: 'pt.doc.avatar',
+                    label: 'AvatarGroup PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('AvatarGroup')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/badge/pt/PTDoc.vue b/doc/badge/pt/PTDoc.vue
new file mode 100644
index 000000000..84c6d61d2
--- /dev/null
+++ b/doc/badge/pt/PTDoc.vue
@@ -0,0 +1,40 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Badge value="2" :pt="{ root: { class: 'bg-primary border-round-sm' } }" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Badge value="2"
+    :pt="{
+        root: { class: 'bg-primary border-round-sm' }
+    }"
+/>`,
+                options: `
+<template>
+    <Badge value="2"
+        :pt="{
+            root: { class: 'bg-primary border-round-sm' }
+        }"
+    />
+</template>`,
+                composition: `
+<template>
+    <Badge value="2"
+        :pt="{
+            root: { class: 'bg-primary border-round-sm' }
+        }"
+    />
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/badge/pt/PTImage.vue b/doc/badge/pt/PTImage.vue
new file mode 100644
index 000000000..b42b31f33
--- /dev/null
+++ b/doc/badge/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/badge.jpg" />
+    </div>
+</template>
diff --git a/doc/badge/pt/index.vue b/doc/badge/pt/index.vue
new file mode 100644
index 000000000..aeeda45b0
--- /dev/null
+++ b/doc/badge/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Badge Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.badge',
+                    label: 'Badge PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Badge')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/blockui/pt/PTDoc.vue b/doc/blockui/pt/PTDoc.vue
new file mode 100644
index 000000000..07f74e1f2
--- /dev/null
+++ b/doc/blockui/pt/PTDoc.vue
@@ -0,0 +1,53 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card">
+        <div class="mb-3">
+            <Button label="Block" @click="blocked = true" class="mr-2"></Button>
+            <Button label="Unblock" @click="blocked = false"></Button>
+        </div>
+        <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </BlockUI>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            blocked: false,
+            code: {
+                basic: `
+<BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
+    <p class="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</BlockUI>`,
+                options: `
+<template>
+    <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </BlockUI>
+</template>`,
+                composition: `
+<template>
+    <BlockUI :blocked="blocked" :pt="{ root: { class: 'surface-ground p-2 border-round-sm' } }">
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </BlockUI>
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/blockui/pt/PTImage.vue b/doc/blockui/pt/PTImage.vue
new file mode 100644
index 000000000..28bdd1def
--- /dev/null
+++ b/doc/blockui/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/blockui.jpg" />
+    </div>
+</template>
diff --git a/doc/blockui/pt/index.vue b/doc/blockui/pt/index.vue
new file mode 100644
index 000000000..04f93c43d
--- /dev/null
+++ b/doc/blockui/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>BlockUI Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.blockui',
+                    label: 'BlockUI PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('BlockUI')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/breadcrumb/pt/PTDoc.vue b/doc/breadcrumb/pt/PTDoc.vue
new file mode 100644
index 000000000..ad55160ea
--- /dev/null
+++ b/doc/breadcrumb/pt/PTDoc.vue
@@ -0,0 +1,104 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Breadcrumb
+            :home="home"
+            :model="items"
+            :pt="{
+                root: { class: 'surface-ground' },
+                label: ({ props }) => ({
+                    class: props.index === items.length - 1 ? 'font-italic' : undefined
+                })
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            home: {
+                icon: 'pi pi-home',
+                to: '/'
+            },
+            items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
+            code: {
+                basic: `
+<Breadcrumb :home="home" :model="items"
+    :pt="{
+        root: { class: 'surface-ground' },
+        label: ({ props }) => ({
+            class: props.index === items.length - 1 ? 'font-italic' : undefined
+        })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Breadcrumb :home="home" :model="items"
+            :pt="{
+                root: { class: 'surface-ground' },
+                label: ({ props }) => ({
+                    class: props.index === items.length - 1 ? 'font-italic' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            home: {
+                icon: 'pi pi-home',
+                to: '/',
+            },
+            items: [
+                {label: 'Computer'},
+                {label: 'Notebook'},
+                {label: 'Accessories'},
+                {label: 'Backpacks'},
+                {label: 'Item'}
+            ]
+        }
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Breadcrumb :home="home" :model="items"
+            :pt="{
+                root: { class: 'surface-ground' },
+                label: ({ props }) => ({
+                    class: props.index === items.length - 1 ? 'font-italic' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const home = ref({
+    icon: 'pi pi-home',
+    to: '/',
+});
+
+const items = ref([
+    {label: 'Computer'},
+    {label: 'Notebook'},
+    {label: 'Accessories'},
+    {label: 'Backpacks'},
+    {label: 'Item'}
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/breadcrumb/pt/PTImage.vue b/doc/breadcrumb/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/breadcrumb/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/breadcrumb/pt/index.vue b/doc/breadcrumb/pt/index.vue
new file mode 100644
index 000000000..a7c2e4e5a
--- /dev/null
+++ b/doc/breadcrumb/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Breadcrumb Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.breadcrumb',
+                    label: 'Breadcrumb PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Breadcrumb')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/button/pt/PTDoc.vue b/doc/button/pt/PTDoc.vue
new file mode 100644
index 000000000..4b9384fcc
--- /dev/null
+++ b/doc/button/pt/PTDoc.vue
@@ -0,0 +1,44 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex flex-wrap gap-3 justify-content-center">
+        <Button label="Submit" icon="pi pi-check" :pt="{ root: { class: 'bg-indigo-600 border-indigo-600' } }" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Submit" icon="pi pi-check"
+    :pt="{ 
+        root: { class: 'bg-indigo-600 border-indigo-600' } 
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex flex-wrap gap-3 justify-content-center">
+        <Button label="Submit" icon="pi pi-check"
+            :pt="{ 
+                root: { class: 'bg-indigo-600 border-indigo-600' } 
+            }"
+        />
+    </div>
+</template>`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-3 justify-content-center">
+        <Button label="Submit" icon="pi pi-check"
+            :pt="{ 
+                root: { class: 'bg-indigo-600 border-indigo-600' } 
+            }"
+        />
+    </div>
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/button/pt/PTImage.vue b/doc/button/pt/PTImage.vue
new file mode 100644
index 000000000..98785b1c1
--- /dev/null
+++ b/doc/button/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/button.jpg" />
+    </div>
+</template>
diff --git a/doc/button/pt/index.vue b/doc/button/pt/index.vue
new file mode 100644
index 000000000..3864e7558
--- /dev/null
+++ b/doc/button/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Button Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.button',
+                    label: 'Button PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Button')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/calendar/pt/PTDoc.vue b/doc/calendar/pt/PTDoc.vue
new file mode 100644
index 000000000..539915e3a
--- /dev/null
+++ b/doc/calendar/pt/PTDoc.vue
@@ -0,0 +1,85 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Calendar
+            v-model="date"
+            showIcon
+            :pt="{
+                input: { class: 'w-16rem' },
+                dropdownButton: {
+                    root: { class: 'bg-teal-500 border-teal-500' }
+                }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null,
+            code: {
+                basic: `
+<Calendar
+    v-model="date"
+    showIcon
+    :pt="{
+        input: { class: 'w-16rem' },
+        dropdownButton: {
+            root: { class: 'bg-teal-500 border-teal-500' }
+        }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Calendar
+            v-model="date"
+            showIcon
+            :pt="{
+                input: { class: 'w-16rem' },
+                dropdownButton: {
+                    root: { class: 'bg-teal-500 border-teal-500' }
+                }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            date: null
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Calendar
+            v-model="date"
+            showIcon
+            :pt="{
+                input: { class: 'w-16rem' },
+                dropdownButton: {
+                    root: { class: 'bg-teal-500 border-teal-500' }
+                }
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date = ref();
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/calendar/pt/PTImage.vue b/doc/calendar/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/calendar/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/calendar/pt/index.vue b/doc/calendar/pt/index.vue
new file mode 100644
index 000000000..4e530ebd7
--- /dev/null
+++ b/doc/calendar/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Calendar Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.calendar',
+                    label: 'Calendar PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Calendar')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/card/pt/PTDoc.vue b/doc/card/pt/PTDoc.vue
new file mode 100644
index 000000000..ed10bb1b4
--- /dev/null
+++ b/doc/card/pt/PTDoc.vue
@@ -0,0 +1,64 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card">
+        <Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
+            <template #title> Simple Card </template>
+            <template #content>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
+            </template>
+        </Card>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
+    <template #title> Simple Card </template>
+    <template #content>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+            quas!
+        </p>
+    </template>
+</Card>`,
+                options: `
+<template>
+    <div class="card">
+        <Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
+            <template #title> Simple Card </template>
+            <template #content>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
+            </template>
+        </Card>
+    </div>
+</template>`,
+                composition: `
+<template>
+    <div class="card">
+        <Card :pt="{ body: { class: 'bg-primary border-round-lg' } }">
+            <template #title> Simple Card </template>
+            <template #content>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
+            </template>
+        </Card>
+    </div>
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/card/pt/PTImage.vue b/doc/card/pt/PTImage.vue
new file mode 100644
index 000000000..a2fba4b77
--- /dev/null
+++ b/doc/card/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/card.jpg" />
+    </div>
+</template>
diff --git a/doc/card/pt/index.vue b/doc/card/pt/index.vue
new file mode 100644
index 000000000..52eacd4ae
--- /dev/null
+++ b/doc/card/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Card Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.card',
+                    label: 'Card PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Card')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/carousel/pt/PTDoc.vue b/doc/carousel/pt/PTDoc.vue
new file mode 100644
index 000000000..32be965ab
--- /dev/null
+++ b/doc/carousel/pt/PTDoc.vue
@@ -0,0 +1,281 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card">
+        <Carousel
+            :value="products"
+            :numVisible="3"
+            :numScroll="3"
+            :responsiveOptions="responsiveOptions"
+            :pt="{
+                indicatorButton: { class: 'border-round-lg' }
+            }"
+        >
+            <template #item="slotProps">
+                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                    <div class="mb-3">
+                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
+                    </div>
+                    <div>
+                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
+                        <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
+                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
+                        <div class="mt-5">
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </Carousel>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1199px',
+                    numVisible: 3,
+                    numScroll: 3
+                },
+                {
+                    breakpoint: '991px',
+                    numVisible: 2,
+                    numScroll: 2
+                },
+                {
+                    breakpoint: '767px',
+                    numVisible: 1,
+                    numScroll: 1
+                }
+            ],
+            code: {
+                basic: `
+<Carousel
+    :value="products"
+    :numVisible="3"
+    :numScroll="3"
+    :responsiveOptions="responsiveOptions"
+    :pt="{
+        indicatorButton: { class: 'border-round-lg' }
+    }"
+>
+    <template #item="slotProps">
+        <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+            <div class="mb-3">
+                <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
+            </div>
+            <div>
+                <h4 class="mb-1">{{ slotProps.data.name }}</h4>
+                <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
+                <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
+                <div class="mt-5">
+                    <Button icon="pi pi-search" rounded class="mr-2" />
+                    <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                </div>
+            </div>
+        </div>
+    </template>
+</Carousel>`,
+                options: `
+<template>
+    <div class="card">
+        <Carousel
+            :value="products"
+            :numVisible="3"
+            :numScroll="3"
+            :responsiveOptions="responsiveOptions"
+            :pt="{
+                indicatorButton: { class: 'border-round-lg' }
+            }"
+        >
+            <template #item="slotProps">
+                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                    <div class="mb-3">
+                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
+                    </div>
+                    <div>
+                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
+                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
+                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
+                        <div class="mt-5">
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </Carousel>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1199px',
+                    numVisible: 3,
+                    numScroll: 3
+                },
+                {
+                    breakpoint: '991px',
+                    numVisible: 2,
+                    numScroll: 2
+                },
+                {
+                    breakpoint: '767px',
+                    numVisible: 1,
+                    numScroll: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
+    },
+    methods: {
+        getSeverity(status) {
+            switch (status) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warning';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <Carousel
+            :value="products"
+            :numVisible="3"
+            :numScroll="3"
+            :responsiveOptions="responsiveOptions"
+            :pt="{
+                indicatorButton: { class: 'border-round-lg' }
+            }"
+        >
+            <template #item="slotProps">
+                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                    <div class="mb-3">
+                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
+                    </div>
+                    <div>
+                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
+                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
+                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
+                        <div class="mt-5">
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </Carousel>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
+})
+
+const products = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '1199px',
+        numVisible: 3,
+        numScroll: 3
+    },
+    {
+        breakpoint: '991px',
+        numVisible: 2,
+        numScroll: 2
+    },
+    {
+        breakpoint: '767px',
+        numVisible: 1,
+        numScroll: 1
+    }
+]);
+
+const getSeverity = (status) => {
+    switch (status) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warning';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+
+<\/script>`,
+                data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
+    },
+    methods: {
+        getSeverity(status) {
+            switch (status) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warning';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/doc/carousel/pt/PTImage.vue b/doc/carousel/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/carousel/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/carousel/pt/index.vue b/doc/carousel/pt/index.vue
new file mode 100644
index 000000000..2e99b0bfc
--- /dev/null
+++ b/doc/carousel/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Carousel Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.carousel',
+                    label: 'Carousel PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Carousel')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/cascadeselect/pt/PTDoc.vue b/doc/cascadeselect/pt/PTDoc.vue
new file mode 100644
index 000000000..044d74e55
--- /dev/null
+++ b/doc/cascadeselect/pt/PTDoc.vue
@@ -0,0 +1,311 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <CascadeSelect
+            v-model="selectedCity"
+            :options="countries"
+            optionLabel="cname"
+            optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']"
+            placeholder="Select a City"
+            :pt="{
+                root: { style: { minWidth: '14rem' } }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<CascadeSelect
+    v-model="selectedCity"
+    :options="countries"
+    optionLabel="cname"
+    optionGroupLabel="name"
+    :optionGroupChildren="['states', 'cities']"
+    placeholder="Select a City"
+    :pt="{
+        root: { style: { minWidth: '14rem' } }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <CascadeSelect
+            v-model="selectedCity"
+            :options="countries"
+            optionLabel="cname"
+            optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']"
+            placeholder="Select a City"
+            :pt="{
+                root: { style: { minWidth: '14rem' } }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <CascadeSelect
+            v-model="selectedCity"
+            :options="countries"
+            optionLabel="cname"
+            optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']"
+            placeholder="Select a City"
+            :pt="{
+                root: { style: { minWidth: '14rem' } }
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/cascadeselect/pt/PTImage.vue b/doc/cascadeselect/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/cascadeselect/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/cascadeselect/pt/index.vue b/doc/cascadeselect/pt/index.vue
new file mode 100644
index 000000000..c0632165d
--- /dev/null
+++ b/doc/cascadeselect/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>CascadeSelect Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.cascadeselect',
+                    label: 'CascadeSelect PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('CascadeSelect')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/chart/pt/PTDoc.vue b/doc/chart/pt/PTDoc.vue
new file mode 100644
index 000000000..ee7ca7f5b
--- /dev/null
+++ b/doc/chart/pt/PTDoc.vue
@@ -0,0 +1,163 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Chart
+            type="pie"
+            :data="chartData"
+            :options="chartOptions"
+            :pt="{
+                root: { class: 'w-full md:w-30rem' }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            chartData: null,
+            chartOptions: {
+                plugins: {
+                    legend: {
+                        labels: {
+                            usePointStyle: true
+                        }
+                    }
+                }
+            },
+            code: {
+                basic: `
+<Chart
+    type="pie"
+    :data="chartData"
+    :options="chartOptions"
+    :pt="{
+        root: { class: 'w-full md:w-30rem' }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Chart
+            type="pie"
+            :data="chartData"
+            :options="chartOptions"
+            :pt="{
+                root: { class: 'w-full md:w-30rem' }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            chartData: null,
+            chartOptions: {
+                plugins: {
+                    legend: {
+                        labels: {
+                            usePointStyle: true
+                        }
+                    }
+                }
+            }
+        };
+    },
+    mounted() {
+        this.chartData = this.setChartData();
+    },
+    methods: {
+        setChartData() {
+            const documentStyle = getComputedStyle(document.body);
+
+            return {
+                labels: ['A', 'B', 'C'],
+                datasets: [
+                    {
+                        data: [540, 325, 702],
+                        backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
+                        hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
+                    }
+                ]
+            };
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Chart
+            type="pie"
+            :data="chartData"
+            :options="chartOptions"
+            :pt="{
+                root: { class: 'w-full md:w-30rem' }
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+onMounted(() => {
+    chartData.value = setChartData();
+});
+
+const chartData = ref();
+const chartOptions = ref({
+    plugins: {
+        legend: {
+            labels: {
+                usePointStyle: true
+            }
+        }
+    }
+});
+
+const setChartData = () => {
+    const documentStyle = getComputedStyle(document.body);
+
+    return {
+        labels: ['A', 'B', 'C'],
+        datasets: [
+            {
+                data: [540, 325, 702],
+                backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
+                hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
+            }
+        ]
+    };
+};
+<\/script>`
+            }
+        };
+    },
+    mounted() {
+        this.chartData = this.setChartData();
+    },
+    methods: {
+        setChartData() {
+            const documentStyle = getComputedStyle(document.body);
+
+            return {
+                labels: ['A', 'B', 'C'],
+                datasets: [
+                    {
+                        data: [540, 325, 702],
+                        backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
+                        hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
+                    }
+                ]
+            };
+        }
+    }
+};
+</script>
diff --git a/doc/chart/pt/PTImage.vue b/doc/chart/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/chart/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/chart/pt/index.vue b/doc/chart/pt/index.vue
new file mode 100644
index 000000000..428ec336f
--- /dev/null
+++ b/doc/chart/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Chart Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.chart',
+                    label: 'Chart PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Chart')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/checkbox/pt/PTDoc.vue b/doc/checkbox/pt/PTDoc.vue
new file mode 100644
index 000000000..a6fe398af
--- /dev/null
+++ b/doc/checkbox/pt/PTDoc.vue
@@ -0,0 +1,81 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <Checkbox
+            v-model="checked"
+            binary
+            :pt="{
+                input: ({ props, state }) => ({
+                    class: state.focused ? 'border-orange-400' : undefined
+                })
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<Checkbox
+    v-model="checked"
+    binary
+    :pt="{
+        input: ({ props, state }) => ({
+            class: state.focused ? 'border-orange-400' : undefined
+        })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Checkbox
+            v-model="checked"
+            binary
+            :pt="{
+                input: ({ props, state }) => ({
+                    class: state.focused ? 'border-orange-400' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Checkbox
+            v-model="checked"
+            binary
+            :pt="{
+                input: ({ props, state }) => ({
+                    class: state.focused ? 'border-orange-400' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const checked = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/checkbox/pt/PTImage.vue b/doc/checkbox/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/checkbox/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/checkbox/pt/index.vue b/doc/checkbox/pt/index.vue
new file mode 100644
index 000000000..8f7d18198
--- /dev/null
+++ b/doc/checkbox/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Checkbox Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.checkbox',
+                    label: 'Checkbox PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Checkbox')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/chip/pt/PTDoc.vue b/doc/chip/pt/PTDoc.vue
new file mode 100644
index 000000000..f574b4adb
--- /dev/null
+++ b/doc/chip/pt/PTDoc.vue
@@ -0,0 +1,56 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Chip
+            label="Amy Elsner"
+            image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
+            :pt="{
+                root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
+                label: { class: 'text-white' }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Chip
+    label="Amy Elsner"
+    image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
+    :pt="{
+        root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
+        label: { class: 'text-white' }
+    }"
+/>`,
+                options: `
+<template>
+    <Chip
+        label="Amy Elsner"
+        image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
+        :pt="{
+            root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
+            label: { class: 'text-white' }
+        }"
+    />
+</template>`,
+                composition: `
+<template>
+    <Chip
+        label="Amy Elsner"
+        image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png"
+        :pt="{
+            root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } },
+            label: { class: 'text-white' }
+        }"
+    />
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/chip/pt/PTImage.vue b/doc/chip/pt/PTImage.vue
new file mode 100644
index 000000000..020c84559
--- /dev/null
+++ b/doc/chip/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/chip.jpg" />
+    </div>
+</template>
diff --git a/doc/chip/pt/index.vue b/doc/chip/pt/index.vue
new file mode 100644
index 000000000..4655cf448
--- /dev/null
+++ b/doc/chip/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Chip Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.chip',
+                    label: 'Chip PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Chip')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/chips/pt/PTDoc.vue b/doc/chips/pt/PTDoc.vue
new file mode 100644
index 000000000..01b239c0f
--- /dev/null
+++ b/doc/chips/pt/PTDoc.vue
@@ -0,0 +1,77 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card">
+        <Chips
+            v-model="value"
+            :pt="{
+                root: { class: 'flex' },
+                container: { class: 'flex-1' },
+                token: { class: 'bg-primary' }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<Chips
+    v-model="value"
+    :pt="{
+        root: { class: 'flex' },
+        container: { class: 'flex-1' },
+        token: { class: 'bg-primary' }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card">
+        <Chips
+            v-model="value"
+            :pt="{
+                root: { class: 'flex' },
+                container: { class: 'flex-1' },
+                token: { class: 'bg-primary' }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <Chips
+            v-model="value"
+            :pt="{
+                root: { class: 'flex' },
+                container: { class: 'flex-1' },
+                token: { class: 'bg-primary' }
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref();
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/chips/pt/PTImage.vue b/doc/chips/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/chips/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/chips/pt/index.vue b/doc/chips/pt/index.vue
new file mode 100644
index 000000000..dd4b70c04
--- /dev/null
+++ b/doc/chips/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Chips Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.chips',
+                    label: 'Chips PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Chips')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/colorpicker/pt/PTDoc.vue b/doc/colorpicker/pt/PTDoc.vue
new file mode 100644
index 000000000..da21da2e8
--- /dev/null
+++ b/doc/colorpicker/pt/PTDoc.vue
@@ -0,0 +1,73 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <ColorPicker
+            v-model="color"
+            inline
+            :pt="{
+                colorHandler: { class: 'w-1rem h-1rem' }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            color: null,
+            code: {
+                basic: `
+<ColorPicker
+    v-model="color"
+    inline
+    :pt="{
+        colorHandler: { class: 'w-1rem h-1rem' }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <ColorPicker
+            v-model="color"
+            inline
+            :pt="{
+                colorHandler: { class: 'w-1rem h-1rem' }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            color: null
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <ColorPicker
+            v-model="color"
+            inline
+            :pt="{
+                colorHandler: { class: 'w-1rem h-1rem' }
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const color = ref();
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/colorpicker/pt/PTImage.vue b/doc/colorpicker/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/colorpicker/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/colorpicker/pt/index.vue b/doc/colorpicker/pt/index.vue
new file mode 100644
index 000000000..4099b6f99
--- /dev/null
+++ b/doc/colorpicker/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ColorPicker Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.colorpicker',
+                    label: 'ColorPicker PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('ColorPicker')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index f3b93560c..2c87541bd 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -373,7 +373,7 @@
                             "description": "Uses to pass attributes to the header's DOM element."
                         },
                         {
-                            "name": "headeraction",
+                            "name": "headerAction",
                             "optional": true,
                             "readonly": false,
                             "type": "AccordionTabPassThroughOptionType",
@@ -381,7 +381,7 @@
                             "description": "Uses to pass attributes to the headeraction's DOM element."
                         },
                         {
-                            "name": "headericon",
+                            "name": "headerIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "AccordionTabPassThroughOptionType",
@@ -389,7 +389,7 @@
                             "description": "Uses to pass attributes to the headericon's DOM element."
                         },
                         {
-                            "name": "headertitle",
+                            "name": "headerTitle",
                             "optional": true,
                             "readonly": false,
                             "type": "AccordionTabPassThroughOptionType",
@@ -397,7 +397,7 @@
                             "description": "Uses to pass attributes to the headertitle's DOM element."
                         },
                         {
-                            "name": "toggleablecontent",
+                            "name": "toggleableContent",
                             "optional": true,
                             "readonly": false,
                             "type": "AccordionTabPassThroughOptionType",
@@ -2578,6 +2578,34 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "AutoCompletePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "AutoCompleteProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "AutoCompleteState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "AutoCompleteContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "AutoCompleteChangeEvent": {
                     "description": "Custom change event.",
                     "relatedProp": "AutoCompleteEmits.change",
@@ -2695,6 +2723,240 @@
                     ],
                     "methods": []
                 },
+                "AutoCompletePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "AutoCompleteProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "token",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the token' DOM element."
+                        },
+                        {
+                            "name": "tokenLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the token label's DOM element."
+                        },
+                        {
+                            "name": "removeTokenIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the remove token icon's DOM element."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the loading icon's DOM element."
+                        },
+                        {
+                            "name": "dropdownButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "searchResultMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the search result message's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "virtualScroller",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the VirtualScroller component."
+                        },
+                        {
+                            "name": "list",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "itemGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the item group's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the empty message's DOM element."
+                        },
+                        {
+                            "name": "selectedMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the selected message's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "AutoCompletePassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "AutoCompleteState": {
+                    "description": "Defines current inline state in AutoComplete component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "focusedOptionIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current focused item index as a number."
+                        },
+                        {
+                            "name": "focusedMultipleOptionIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current focused item index as a number."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current overlay visible state as a boolean."
+                        },
+                        {
+                            "name": "searching",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current search state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
+                "AutoCompleteContext": {
+                    "description": "Defines current options in AutoComplete component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current selection state of the item as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focus state of the item as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current disabled state of the item as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "AutoCompleteProps": {
                     "description": "Defines valid properties in AutoComplete component.",
                     "relatedProp": "",
@@ -2923,7 +3185,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in the dropdown."
+                            "description": "Icon to display in the dropdown.",
+                            "deprecated": "since v3.27.0. Use 'dropdownicon' slot."
                         },
                         {
                             "name": "dropdownClass",
@@ -2939,7 +3202,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in loading state."
+                            "description": "Icon to display in loading state.",
+                            "deprecated": "since v3.27.0. Use 'loadingicon' slot."
                         },
                         {
                             "name": "removeTokenIcon",
@@ -2947,7 +3211,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in chip remove action."
+                            "description": "Icon to display in chip remove action.",
+                            "deprecated": "since v3.27.0. Use 'removetokenicon' slot."
                         },
                         {
                             "name": "virtualScrollerOptions",
@@ -3036,6 +3301,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Identifier of the underlying input element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -3164,7 +3437,13 @@
                         },
                         {
                             "name": "removetokenicon",
-                            "parameters": [],
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>class</b>: string, // Style class of the icon.\n  \t <b>onClick</b>: void, // Remove token icon function.\n  }"
+                                }
+                            ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom remove token icon template in multiple mode."
                         },
@@ -3318,6 +3597,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "AutoCompletePassThroughOptionType": {
+                    "values": "AutoCompletePassThroughAttributes | (options: AutoCompletePassThroughMethodOptions) => AutoCompletePassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "avatar": {
@@ -3337,6 +3624,72 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "AvatarPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "AvatarProps",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "AvatarPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "AvatarPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "AvatarProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AvatarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AvatarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AvatarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "image",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AvatarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the image's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
                 "AvatarProps": {
                     "description": "Defines valid properties in Avatar component.",
                     "relatedProp": "",
@@ -3355,7 +3708,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Defines the icon to display."
+                            "description": "Defines the icon to display.",
+                            "deprecated": "since v3.27.0. Use 'icon' slot."
                         },
                         {
                             "name": "image",
@@ -3396,6 +3750,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AvatarPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -3410,6 +3772,12 @@
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Content can easily be customized with the default slot instead of using the built-in modes."
+                        },
+                        {
+                            "name": "icon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom icon template."
                         }
                     ]
                 },
@@ -3427,6 +3795,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "AvatarPassThroughOptionType": {
+                    "values": "AvatarPassThroughAttributes | (options: AvatarPassThroughMethodOptions) => AvatarPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "avatargroup": {
@@ -3446,10 +3822,47 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "AvatarGroupPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "AvatarGroupPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "AvatarGroupProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AvatarGroupPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
                 "AvatarGroupProps": {
                     "description": "Defines valid properties in AvatarGroup component.",
                     "relatedProp": "",
-                    "props": [],
+                    "props": [
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AvatarGroupPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        }
+                    ],
                     "methods": []
                 },
                 "AvatarGroupSlots": {
@@ -3465,6 +3878,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "AvatarGroupPassThroughOptionType": {
+                    "values": "AvatarGroupPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "badge": {
@@ -3484,6 +3905,48 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "BadgePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "BadgeProps",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "BadgePassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "BadgePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "BadgeProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BadgePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
                 "BadgeProps": {
                     "description": "Defines valid properties in Badge component.",
                     "relatedProp": "",
@@ -3511,6 +3974,14 @@
                             "type": "null | \"large\" | \"xlarge\"",
                             "default": "",
                             "description": "Size of the badge, valid options are 'large' and 'xlarge'."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BadgePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -3535,6 +4006,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "BadgePassThroughOptionType": {
+                    "values": "BadgePassThroughAttributes | (options: BadgePassThroughMethodOptions) => BadgePassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "badgedirective": {
@@ -3628,6 +4107,70 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "BlockUIPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "BlockUIProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "BlockUIState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "BlockUIPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "BlockUIProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BlockUIPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "BlockUIPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "BlockUIState": {
+                    "description": "Defines current inline state in BlockUI component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "isBlocked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current blocked state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "BlockUIProps": {
                     "description": "Defines valid properties in BlockUI component",
                     "relatedProp": "",
@@ -3663,6 +4206,14 @@
                             "type": "boolean",
                             "default": "true",
                             "description": "Whether to automatically manage layering."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BlockUIPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -3700,6 +4251,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "BlockUIPassThroughOptionType": {
+                    "values": "BlockUIPassThroughAttributes | (options: BlockUIPassThroughMethodOptions) => BlockUIPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "breadcrumb": {
@@ -3719,6 +4278,104 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "BreadcrumbPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "BreadcrumbProps",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "BreadcrumbPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "BreadcrumbProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadcrumbPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadcrumbPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadcrumbPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadcrumbPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadcrumbPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadcrumbPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadcrumbPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "separatorIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadcrumbPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the separator icon's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "BreadcrumbPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "BreadcrumbProps": {
                     "description": "Defines valid properties in Breadcrumb component.",
                     "relatedProp": "",
@@ -3762,6 +4419,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Identifier of the underlying menu element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadcrumbPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -3789,6 +4454,19 @@
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom separator template."
+                        },
+                        {
+                            "name": "itemicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>class</b>: any, // Style class of the item icon element.\n  }",
+                                    "description": "item icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom item icon template."
                         }
                     ]
                 },
@@ -3799,6 +4477,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "BreadcrumbPassThroughOptionType": {
+                    "values": "BreadcrumbPassThroughAttributes | (options: BreadcrumbPassThroughMethodOptions) => BreadcrumbPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "button": {
@@ -3818,6 +4504,80 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ButtonPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ButtonProps",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "ButtonPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ButtonProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the loading icon's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "badge",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the badge's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ButtonPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "ButtonProps": {
                     "description": "Defines valid properties in Button component.",
                     "relatedProp": "",
@@ -3899,7 +4659,7 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-spinner pi-spin",
+                            "default": "",
                             "description": "Icon to display in loading state."
                         },
                         {
@@ -3965,6 +4725,14 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "Add a plain textual class to the button without a background initially."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": [],
@@ -3980,6 +4748,32 @@
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included."
+                        },
+                        {
+                            "name": "icon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>class</b>: string, // Style class of the icon.\n  }",
+                                    "description": "icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom icon template."
+                        },
+                        {
+                            "name": "loadingicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>class</b>: string, // Style class of the loading icon.\n  }",
+                                    "description": "loading icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom loading icon template."
                         }
                     ]
                 },
@@ -3990,6 +4784,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ButtonPassThroughOptionType": {
+                    "values": "ButtonPassThroughAttributes | (options: ButtonPassThroughMethodOptions) => ButtonPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "calendar": {
@@ -4009,6 +4811,27 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "CalendarPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CalendarProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CalendarState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "CalendarResponsiveOptions": {
                     "description": "Custom Calendar responsive options metadata.",
                     "relatedProp": "",
@@ -4101,6 +4924,481 @@
                     ],
                     "methods": []
                 },
+                "CalendarPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "CalendarProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "dropdownButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "groupContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the group container's DOM element."
+                        },
+                        {
+                            "name": "group",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the group's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "previousButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "title",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the title's DOM element."
+                        },
+                        {
+                            "name": "monthTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the month title's DOM element."
+                        },
+                        {
+                            "name": "yearTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the year title's DOM element."
+                        },
+                        {
+                            "name": "decadeTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the decade title's DOM element."
+                        },
+                        {
+                            "name": "nextButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "table",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the table's DOM element."
+                        },
+                        {
+                            "name": "tableHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the table header's DOM element."
+                        },
+                        {
+                            "name": "tableHeaderRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the table header row's DOM element."
+                        },
+                        {
+                            "name": "tableHeaderCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the table header cell's DOM element."
+                        },
+                        {
+                            "name": "weekLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the week label's DOM element."
+                        },
+                        {
+                            "name": "weekDay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the week day's DOM element."
+                        },
+                        {
+                            "name": "tableBody",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the table body's DOM element."
+                        },
+                        {
+                            "name": "tableBodyRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the table body row's DOM element."
+                        },
+                        {
+                            "name": "weekNumber",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the week number's DOM element."
+                        },
+                        {
+                            "name": "weekLabelContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the week label container's DOM element."
+                        },
+                        {
+                            "name": "day",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the day's DOM element."
+                        },
+                        {
+                            "name": "dayLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the day label's DOM element."
+                        },
+                        {
+                            "name": "ariaSelectedDay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the aria selected day's DOM element."
+                        },
+                        {
+                            "name": "monthPicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the month picker's DOM element."
+                        },
+                        {
+                            "name": "month",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the month's DOM element."
+                        },
+                        {
+                            "name": "ariaMonth",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the aria month's DOM element."
+                        },
+                        {
+                            "name": "yearPicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the year picker's DOM element."
+                        },
+                        {
+                            "name": "year",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the year's DOM element."
+                        },
+                        {
+                            "name": "ariaYear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the aria year's DOM element."
+                        },
+                        {
+                            "name": "timePicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the time picker's DOM element."
+                        },
+                        {
+                            "name": "hourPicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hour picker's DOM element."
+                        },
+                        {
+                            "name": "hour",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hour's DOM element."
+                        },
+                        {
+                            "name": "separatorContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the separatorc ontainer's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "minutePicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the minute picker's DOM element."
+                        },
+                        {
+                            "name": "minute",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the minute's DOM element."
+                        },
+                        {
+                            "name": "secondPicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the second picker's DOM element."
+                        },
+                        {
+                            "name": "second",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the second's DOM element."
+                        },
+                        {
+                            "name": "ampmPicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the ampm picker's DOM element."
+                        },
+                        {
+                            "name": "ampm",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the ampm's DOM element."
+                        },
+                        {
+                            "name": "buttonbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the buttonbar's DOM element."
+                        },
+                        {
+                            "name": "todayButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "clearButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        }
+                    ],
+                    "methods": []
+                },
+                "CalendarPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "CalendarState": {
+                    "description": "Defines current inline state in Calendar component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "currentMonth",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current month as a number."
+                        },
+                        {
+                            "name": "currentYear",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current year as a number."
+                        },
+                        {
+                            "name": "currentHour",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current hour as a number."
+                        },
+                        {
+                            "name": "currentMinute",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current minute as a number."
+                        },
+                        {
+                            "name": "currentSecond",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current second as a number."
+                        },
+                        {
+                            "name": "pm",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current pm state as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current overlay visible state as a boolean."
+                        },
+                        {
+                            "name": "currentView",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "'date'",
+                            "description": "Current view state as a string."
+                        }
+                    ],
+                    "methods": []
+                },
                 "CalendarProps": {
                     "description": "Defines valid properties in Calendar component.",
                     "relatedProp": "",
@@ -4167,7 +5465,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon of the calendar button."
+                            "description": "Icon of the calendar button.",
+                            "deprecated": "since v3.27.0. Use 'dropdownicon' slot."
                         },
                         {
                             "name": "previousIcon",
@@ -4175,7 +5474,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to show in the previous button."
+                            "description": "Icon to show in the previous button.",
+                            "deprecated": "since v3.27.0. Use 'previousicon' slot."
                         },
                         {
                             "name": "nextIcon",
@@ -4183,7 +5483,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to show in the next button."
+                            "description": "Icon to show in the next button.",
+                            "deprecated": "since v3.27.0. Use 'nexticon' slot."
                         },
                         {
                             "name": "incrementIcon",
@@ -4191,7 +5492,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to show in each of the increment buttons."
+                            "description": "Icon to show in each of the increment buttons.",
+                            "deprecated": "since v3.27.0. Use 'incrementicon' slot."
                         },
                         {
                             "name": "decrementIcon",
@@ -4199,7 +5501,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to show in each of the decrement buttons."
+                            "description": "Icon to show in each of the decrement buttons.",
+                            "deprecated": "since v3.27.0. Use 'decrementicon' slot."
                         },
                         {
                             "name": "numberOfMonths",
@@ -4547,6 +5850,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Establishes a string value that labels the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -4593,13 +5904,13 @@
                             "description": "Custom decade template."
                         },
                         {
-                            "name": "triggericon",
+                            "name": "dropdownicon",
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
-                            "description": "Custom trigger icon template."
+                            "description": "Custom dropdown icon template."
                         },
                         {
-                            "name": "previcon",
+                            "name": "previousicon",
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom previous icon template."
@@ -4773,6 +6084,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "CalendarPassThroughOptionType": {
+                    "values": "CalendarPassThroughAttributes | (options: CalendarPassThroughMethodOptions) => CalendarPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "card": {
@@ -4954,6 +6273,270 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "CarouselPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CarouselProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CarouselState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "CarouselPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "CarouselProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "previousButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the previous button's DOM element."
+                        },
+                        {
+                            "name": "previousButtonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the previous button icon's DOM element."
+                        },
+                        {
+                            "name": "itemsContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the items content's DOM element."
+                        },
+                        {
+                            "name": "itemsContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the items container's DOM element."
+                        },
+                        {
+                            "name": "itemCloned",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the item cloned's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "nextButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the next button's DOM element."
+                        },
+                        {
+                            "name": "nextButtonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the next button icon's DOM element."
+                        },
+                        {
+                            "name": "indicators",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the indicators's DOM element."
+                        },
+                        {
+                            "name": "indicator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the indicator's DOM element."
+                        },
+                        {
+                            "name": "indicatorButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the indicator button's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "CarouselPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "CarouselState": {
+                    "description": "Defines current inline state in Carousel component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "remainingItems",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Remaining items' count as a number."
+                        },
+                        {
+                            "name": "d_numVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Number of items per page as a number."
+                        },
+                        {
+                            "name": "d_numScroll",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Number of items to scroll as a number."
+                        },
+                        {
+                            "name": "d_oldNumScroll",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Old number of items to scroll as a number."
+                        },
+                        {
+                            "name": "d_oldNumVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Old number of items per page as a number."
+                        },
+                        {
+                            "name": "d_oldValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Old array of objects to display."
+                        },
+                        {
+                            "name": "d_page",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Index of the first item."
+                        },
+                        {
+                            "name": "totalShiftedItems",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Total shifted items' count as a number."
+                        },
+                        {
+                            "name": "allowAutoplay",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Allow autoplay as a boolean."
+                        },
+                        {
+                            "name": "d_circular",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if scrolling would be infinite as a boolean."
+                        },
+                        {
+                            "name": "swipeThreshold",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "20",
+                            "description": "Swipe threshold count as a number."
+                        }
+                    ],
+                    "methods": []
+                },
                 "CarouselResponsiveOptions": {
                     "relatedProp": "",
                     "props": [
@@ -5115,6 +6698,14 @@
                             "type": "ButtonHTMLAttributes",
                             "default": "",
                             "description": "Uses to pass all properties of the HTMLButtonElement to the next navigation button."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -5150,7 +6741,7 @@
                             "description": "Custom footer template."
                         },
                         {
-                            "name": "previcon",
+                            "name": "previousicon",
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom previous icon template."
@@ -5184,6 +6775,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "CarouselPassThroughOptionType": {
+                    "values": "CarouselPassThroughAttributes | (options: CarouselPassThroughMethodOptions) => CarouselPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "cascadeselect": {
@@ -5203,6 +6802,27 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "CascadeSelectPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CascadeSelectProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CascadeSelectState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "CascadeSelectChangeEvent": {
                     "description": "Custom change event",
                     "relatedProp": "CascadeSelectEmits.change",
@@ -5251,6 +6871,216 @@
                     "methods": [],
                     "extendedTypes": "CascadeSelectChangeEvent"
                 },
+                "CascadeSelectPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "CascadeSelectProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "dropdownButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the dropdown button's DOM element."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the loading icon's DOM element."
+                        },
+                        {
+                            "name": "dropdownIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the dropdown icon's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "list",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "text",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the text's DOM element."
+                        },
+                        {
+                            "name": "hiddenSelectedMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden selected message's DOM element."
+                        },
+                        {
+                            "name": "searchResultAria",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the search result message text aria's DOM element."
+                        },
+                        {
+                            "name": "selectedMessageAria",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the selected message text aria's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "CascadeSelectPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "CascadeSelectFocusedOptionInfo": {
+                    "description": "Defines focused item info",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Active item index"
+                        },
+                        {
+                            "name": "level",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Active item level"
+                        },
+                        {
+                            "name": "parentKey",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Parent key info"
+                        }
+                    ],
+                    "methods": []
+                },
+                "CascadeSelectState": {
+                    "description": "Defines current inline state in CascadeSelect component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current id state as a string"
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "focusedOptionInfo",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CascadeSelectFocusedOptionInfo",
+                            "default": "",
+                            "description": "Current focused item info."
+                        },
+                        {
+                            "name": "activeOptionPath",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "false",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current overlay visible state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "CascadeSelectProps": {
                     "description": "Defines valid properties in CascadeSelect component.",
                     "relatedProp": "",
@@ -5413,7 +7243,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in the dropdown."
+                            "description": "Icon to display in the dropdown.",
+                            "deprecated": "since v3.27.0. Use 'dropdownicon' slot."
                         },
                         {
                             "name": "loadingIcon",
@@ -5421,7 +7252,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in loading state."
+                            "description": "Icon to display in loading state.",
+                            "deprecated": "since v3.27.0. Use 'loadingicon' slot."
                         },
                         {
                             "name": "optionGroupIcon",
@@ -5429,7 +7261,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in the option group."
+                            "description": "Icon to display in the option group.",
+                            "deprecated": "since v3.27.0. Use 'optiongroupicon' slot."
                         },
                         {
                             "name": "autoOptionFocus",
@@ -5518,6 +7351,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Establishes a string value that labels the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -5557,7 +7398,20 @@
                             "name": "indicator",
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
-                            "description": "Custom indicator template."
+                            "description": "Custom indicator template.",
+                            "deprecated": "since v3.27.0. Use 'dropdownicon or loadingicon' slots."
+                        },
+                        {
+                            "name": "dropdownicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom dropdown icon template."
+                        },
+                        {
+                            "name": "loadingicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom loading icon template."
                         },
                         {
                             "name": "optiongroupicon",
@@ -5677,6 +7531,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "CascadeSelectPassThroughOptionType": {
+                    "values": "CascadeSelectPassThroughAttributes | (options: CascadeSelectPassThroughMethodOptions) => CascadeSelectPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "chart": {
@@ -5721,6 +7583,56 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ChartPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ChartProps",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "ChartPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ChartProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChartPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "canvas",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChartPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the canvas's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ChartPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "ChartSelectEvent": {
                     "description": "Custom select event.",
                     "relatedProp": "ChartEmits.select",
@@ -5811,6 +7723,14 @@
                             "type": "CanvasHTMLAttributes",
                             "default": "",
                             "description": "Uses to pass all properties of the CanvasHTMLAttributes to canvas element inside the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChartPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -5854,6 +7774,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ChartPassThroughOptionType": {
+                    "values": "ChartPassThroughAttributes | (options: ChartPassThroughMethodOptions) => ChartPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "checkbox": {
@@ -5873,6 +7801,102 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "CheckboxPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CheckboxProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CheckboxState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "CheckboxPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "CheckboxProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "hiddenInputWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden input wrapper's DOM element."
+                        },
+                        {
+                            "name": "hiddenInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden input's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "CheckboxPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "CheckboxState": {
+                    "description": "Defines current inline state in Checkbox component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focus state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "CheckboxProps": {
                     "description": "Defines valid properties in Checkbox component.",
                     "relatedProp": "",
@@ -6004,6 +8028,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Establishes a string value that labels the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -6087,6 +8119,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "CheckboxPassThroughOptionType": {
+                    "values": "CheckboxPassThroughAttributes | (options: CheckboxPassThroughMethodOptions) => CheckboxPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "chip": {
@@ -6106,6 +8146,102 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ChipPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ChipProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ChipState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "ChipPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ChipProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "image",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the image's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label' DOM element."
+                        },
+                        {
+                            "name": "removeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the removeIcon's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ChipPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "ChipState": {
+                    "description": "Defines current inline state in Chip component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Current visible state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "ChipProps": {
                     "description": "Defines valid properties in Chip component.",
                     "relatedProp": "",
@@ -6124,7 +8260,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Defines the icon to display."
+                            "description": "Defines the icon to display.",
+                            "deprecated": "since v3.27.0. Use 'icon' slot."
                         },
                         {
                             "name": "image",
@@ -6147,8 +8284,17 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-times-circle",
-                            "description": "Icon of the remove element."
+                            "default": "",
+                            "description": "Icon of the remove element.",
+                            "deprecated": "since v3.27.0. Use 'removeicon' slot."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -6163,6 +8309,25 @@
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Content can easily be customized with the default slot instead of using the built-in modes."
+                        },
+                        {
+                            "name": "icon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom icon template."
+                        },
+                        {
+                            "name": "removeicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>onClick()</b>: void, // Remove icon click event\n  \t <b>onKeydown()</b>: void, // Remove icon keydown event\n  }",
+                                    "description": "remove icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom remove icon template of chip component."
                         }
                     ]
                 },
@@ -6187,6 +8352,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ChipPassThroughOptionType": {
+                    "values": "ChipPassThroughAttributes | (options: ChipPassThroughMethodOptions) => ChipPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "chips": {
@@ -6206,6 +8379,27 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ChipsPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ChipsProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ChipsState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "ChipsAddEvent": {
                     "description": "Custom add event.",
                     "relatedProp": "ChipsEmits.add",
@@ -6254,6 +8448,121 @@
                     "methods": [],
                     "extendedTypes": "ChipsAddEvent"
                 },
+                "ChipsPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ChipsProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "token",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the token's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "removeTokenIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the remove token icon's DOM element."
+                        },
+                        {
+                            "name": "inputToken",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the input token's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ChipsPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "ChipsState": {
+                    "description": "Defines current inline state in Chips component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "inputValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current input value as a string."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "focusedIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current focused item index state as a number."
+                        }
+                    ],
+                    "methods": []
+                },
                 "ChipsProps": {
                     "description": "Defines valid properties in Chips component.",
                     "relatedProp": "",
@@ -6328,7 +8637,8 @@
                             "readonly": false,
                             "type": "InputHTMLAttributes",
                             "default": "",
-                            "description": "Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component."
+                            "description": "Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.",
+                            "deprecated": "since v3.26.0. Use 'pt' property instead."
                         },
                         {
                             "name": "removeTokenIcon",
@@ -6336,7 +8646,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in chip remove action."
+                            "description": "Icon to display in chip remove action.",
+                            "deprecated": "since v3.27.0. Use 'removetokenicon' slot."
                         },
                         {
                             "name": "disabled",
@@ -6369,6 +8680,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Establishes a string value that labels the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -6393,7 +8712,14 @@
                         },
                         {
                             "name": "removetokenicon",
-                            "parameters": [],
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>onClick()</b>: void, // Remove icon click event\n  }",
+                                    "description": "remove token icon slot's params."
+                                }
+                            ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom remove token icon template."
                         }
@@ -6446,6 +8772,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ChipsPassThroughOptionType": {
+                    "values": "ChipsPassThroughAttributes | (options: ChipsPassThroughMethodOptions) => ChipsPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "colorpicker": {
@@ -6465,6 +8799,27 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ColorPickerPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColorPickerProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColorPickerState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "ColorPickerChangeEvent": {
                     "description": "Custom change event.",
                     "relatedProp": "ColorPickerEmits.change",
@@ -6488,6 +8843,113 @@
                     ],
                     "methods": []
                 },
+                "ColorPickerPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ColorPickerProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "selector",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the selector's DOM element."
+                        },
+                        {
+                            "name": "color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the color's DOM element."
+                        },
+                        {
+                            "name": "colorHandler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the color handler's DOM element."
+                        },
+                        {
+                            "name": "hue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hue's DOM element."
+                        },
+                        {
+                            "name": "hueHandler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hue handler's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ColorPickerPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "ColorPickerState": {
+                    "description": "Defines current inline state in ColorPicker component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current overlay visible state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "ColorPickerProps": {
                     "description": "Defines valid properties in ColorPicker component.",
                     "relatedProp": "",
@@ -6571,6 +9033,14 @@
                             "type": "string | HTMLElement",
                             "default": "body",
                             "description": "A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -6626,13 +9096,21 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ColorPickerPassThroughOptionType": {
+                    "values": "ColorPickerPassThroughAttributes | (options: ColorPickerPassThroughMethodOptions) => ColorPickerPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "column": {
         "description": "Column component defines various options to specify corresponding features.\nIt is a helper component for DataTable and TreeTable.\n\n[Live Demo](https://www.primevue.org/datatable/)",
         "components": {
             "default": {
-                "description": "Column is a helper component for DataTable and TreeTable.",
+                "description": "Column is a helper component for Column and TreeTable.",
                 "methods": {
                     "description": "Defines methods that can be accessed by the component's reference.",
                     "values": []
@@ -6645,6 +9123,41 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ColumnPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnContext",
+                            "default": ""
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptions",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "ColumnFilterModelType": {
                     "description": "Filter model metadata.",
                     "relatedProp": "",
@@ -6793,6 +9306,543 @@
                     "methods": [],
                     "extendedTypes": "VirtualScrollerLoaderOptions"
                 },
+                "ColumnPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "undefined.ColumnProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "headerCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header cell's DOM element."
+                        },
+                        {
+                            "name": "columnResizer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the column resizer's DOM element."
+                        },
+                        {
+                            "name": "headerContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header content's DOM element."
+                        },
+                        {
+                            "name": "headerTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header title's DOM element."
+                        },
+                        {
+                            "name": "sort",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the sort's DOM element."
+                        },
+                        {
+                            "name": "sortBadge",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the sort badge's DOM element."
+                        },
+                        {
+                            "name": "headerCheckboxWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the checkbox wrapper's DOM element."
+                        },
+                        {
+                            "name": "headerCheckbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header checkbox's DOM element."
+                        },
+                        {
+                            "name": "headerCheckboxIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header checkbox icon's DOM element."
+                        },
+                        {
+                            "name": "columnFilter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the column filter's DOM element."
+                        },
+                        {
+                            "name": "filterInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter input's DOM element."
+                        },
+                        {
+                            "name": "filterMenuButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter menu button's DOM element."
+                        },
+                        {
+                            "name": "headerFilterClearButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header filter clear button's DOM element."
+                        },
+                        {
+                            "name": "filterClearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter clear icon's DOM element."
+                        },
+                        {
+                            "name": "filterOverlay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter overlay's DOM element."
+                        },
+                        {
+                            "name": "filterRowItems",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter row items' DOM element."
+                        },
+                        {
+                            "name": "filterRowItem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter row item's DOM element."
+                        },
+                        {
+                            "name": "filterSeparator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter separator's DOM element."
+                        },
+                        {
+                            "name": "filterOperator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter operator's DOM element."
+                        },
+                        {
+                            "name": "filterOperatorDropdown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Dropdown component."
+                        },
+                        {
+                            "name": "filterConstraints",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter constraints' DOM element."
+                        },
+                        {
+                            "name": "filterConstraint",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter constraint's DOM element."
+                        },
+                        {
+                            "name": "filterMatchModeDropdown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Dropdown component."
+                        },
+                        {
+                            "name": "filterRemove",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter remove button container's DOM element."
+                        },
+                        {
+                            "name": "filterRemoveButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "filterAddRule",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter add rule's DOM element."
+                        },
+                        {
+                            "name": "filterAddRuleButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "filterButtonbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter buttonbar's DOM element."
+                        },
+                        {
+                            "name": "filterClearButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "filterApplyButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "bodyCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the body cell's DOM element."
+                        },
+                        {
+                            "name": "rowGroupToggler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the rowgroup toggler's DOM element."
+                        },
+                        {
+                            "name": "rowGroupTogglerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the rowgroup toggler icon's DOM element."
+                        },
+                        {
+                            "name": "columnTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the column title's DOM element."
+                        },
+                        {
+                            "name": "radiobuttonWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the radiobutton wrapper's DOM element."
+                        },
+                        {
+                            "name": "radiobutton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the radiobutton's DOM element."
+                        },
+                        {
+                            "name": "radiobuttonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the radiobutton icon's DOM element."
+                        },
+                        {
+                            "name": "checkboxWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the checkbox wrapper's DOM element."
+                        },
+                        {
+                            "name": "checkbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the checkbox's DOM element."
+                        },
+                        {
+                            "name": "checkboxIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the checkbox icon's DOM element."
+                        },
+                        {
+                            "name": "rowToggler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the rowtoggler's DOM element."
+                        },
+                        {
+                            "name": "rowTogglerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the rowtoggler icon's DOM element."
+                        },
+                        {
+                            "name": "rowEditorInitButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the row editor init button's DOM element."
+                        },
+                        {
+                            "name": "rowEditorInitIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the row editor init icon's DOM element."
+                        },
+                        {
+                            "name": "rowEditorEditButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the row editor edit button's DOM element."
+                        },
+                        {
+                            "name": "rowEditorEditIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the row editor edit icon's DOM element."
+                        },
+                        {
+                            "name": "rowEditorCancelButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the row editor cancel button's DOM element."
+                        },
+                        {
+                            "name": "rowEditorCancelIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the row editor cancel icon's DOM element."
+                        },
+                        {
+                            "name": "hiddenHeaderInputWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden input wrapper's DOM element."
+                        },
+                        {
+                            "name": "hiddenHeaderInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden input's DOM element."
+                        },
+                        {
+                            "name": "hiddenInputWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden input wrapper's DOM element."
+                        },
+                        {
+                            "name": "hiddenInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden input's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ColumnPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "ColumnState": {
+                    "description": "Defines current inline state in Column component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "d_editing",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        },
+                        {
+                            "name": "styleObject",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Current style of the body cell."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Current filter overlay visible as a boolean."
+                        },
+                        {
+                            "name": "defaultMatchMode",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current filter match mode."
+                        },
+                        {
+                            "name": "defaultOperator",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current filter operator."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "rowGroupHeaderStyleObject",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Current style of the rowgroup header."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ColumnContext": {
+                    "description": "Defines current options in Column component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current checked state of row as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state of row as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current disabled state of row as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "ColumnProps": {
                     "description": "Defines valid properties in Column component.",
                     "relatedProp": "",
@@ -7074,8 +10124,9 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-bars",
-                            "description": "Icon of the drag handle to reorder rows."
+                            "default": "",
+                            "description": "Icon of the drag handle to reorder rows.",
+                            "deprecated": "since v3.27.0. Use 'rowreordericon' slot."
                         },
                         {
                             "name": "reorderableColumn",
@@ -7286,6 +10337,106 @@
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom loading template."
+                        },
+                        {
+                            "name": "rowtogglericon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>rowExpanded</b>: boolean, // Current row expanded state.\n  }",
+                                    "description": "row toggler icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom row toggler icon template."
+                        },
+                        {
+                            "name": "rowcheckboxicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>checked</b>: boolean, // Current check state.\n  }",
+                                    "description": "header row icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom row checkbox icon template."
+                        },
+                        {
+                            "name": "roweditoriniticon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom row editor init icon template."
+                        },
+                        {
+                            "name": "roweditorsaveicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom row editor save icon template."
+                        },
+                        {
+                            "name": "roweditorcancelicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom row editor cancel icon template."
+                        },
+                        {
+                            "name": "filtericon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom filter icon template."
+                        },
+                        {
+                            "name": "filterclearicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom filter clear icon template."
+                        },
+                        {
+                            "name": "filterremoveicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom filter remove icon template."
+                        },
+                        {
+                            "name": "filteraddicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom filter add icon template."
+                        },
+                        {
+                            "name": "sorticon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>sorted</b>: boolean, // Current sort state.\n  \t <b>sortOrder</b>: boolean, // Current sort order state.\n  }",
+                                    "description": "sort icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom sort icon template."
+                        },
+                        {
+                            "name": "headercheckboxicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>checked</b>: boolean, // Current check state.\n  }",
+                                    "description": "header checkbox icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom header checkbox icon template."
+                        },
+                        {
+                            "name": "rowreordericon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom row reorder icon template."
                         }
                     ]
                 },
@@ -7295,6 +10446,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ColumnPassThroughOptionType": {
+                    "values": "ColumnPassThroughAttributes | (options: ColumnPassThroughMethodOptions) => ColumnPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "columngroup": {
@@ -7314,6 +10473,55 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ColumnGroupPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnGroupProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptions",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "ColumnGroupPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ColumnGroupProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnGroupPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ColumnGroupPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "ColumnGroupProps": {
                     "description": "Defines valid properties in ColumnGroup component.",
                     "relatedProp": "",
@@ -7325,6 +10533,14 @@
                             "type": "\"footer\" | \"header\"",
                             "default": "",
                             "description": "Type of column group"
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnGroupPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -7342,6 +10558,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ColumnGroupPassThroughOptionType": {
+                    "values": "ColumnGroupPassThroughAttributes | (options: ColumnGroupPassThroughMethodOptions) => ColumnGroupPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "config/PrimeVue": {
@@ -7560,6 +10784,166 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ConfirmDialogPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ConfirmDialogProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ConfirmDialogState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "ConfirmDialogPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ConfirmDialogProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "headerTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header title's DOM element."
+                        },
+                        {
+                            "name": "headerIcons",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header icons' DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the close button's component."
+                        },
+                        {
+                            "name": "closeButtonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the close button icon's component."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "message",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the message's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "rejectButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "acceptButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ConfirmDialogPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "ConfirmDialogState": {
+                    "description": "Defines current inline state in ConfirmDialog component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current visible state as a boolean."
+                        },
+                        {
+                            "name": "confirmation",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current confirmation message."
+                        }
+                    ],
+                    "methods": []
+                },
                 "ConfirmDialogBreakpoints": {
                     "description": "Breakpoint metadata.",
                     "relatedProp": "",
@@ -7600,6 +10984,14 @@
                             "type": "boolean",
                             "default": "true",
                             "description": "Enables dragging to change the position using header."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -7615,12 +11007,36 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <b>message</b>: ConfirmationOptions, // undefined\n  }",
+                                    "type": "{\n  \t <b>message</b>: ConfirmationOptions, // Message of the component\n  }",
                                     "description": "message slot's params."
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom message template."
+                        },
+                        {
+                            "name": "icon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>class</b>: any, // Style class of the icon template\n  }"
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom icon template."
+                        },
+                        {
+                            "name": "accepticon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom icon template."
+                        },
+                        {
+                            "name": "rejecticon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom icon template."
                         }
                     ]
                 },
@@ -7631,6 +11047,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ConfirmDialogPassThroughOptionType": {
+                    "values": "ConfirmDialogPassThroughAttributes | (options: ConfirmDialogPassThroughMethodOptions) => ConfirmDialogPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "confirmpopup": {
@@ -7650,6 +11074,126 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ConfirmPopupPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ConfirmPopupProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ConfirmPopupState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "ConfirmPopupPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ConfirmPopupProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmPopupPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmPopupPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmPopupPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "message",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmPopupPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the message's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmPopupPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "rejectButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "acceptButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ConfirmPopupPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "ConfirmPopupState": {
+                    "description": "Defines current inline state in ConfirmPopup component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current visible state as a boolean."
+                        },
+                        {
+                            "name": "confirmation",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ConfirmationOptions",
+                            "default": "",
+                            "description": "Current confirmation message."
+                        }
+                    ],
+                    "methods": []
+                },
                 "ConfirmPopupProps": {
                     "description": "Defines valid properties in ConfirmPopup component.",
                     "relatedProp": "",
@@ -7661,6 +11205,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmPopupPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -7676,12 +11228,36 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <b>message</b>: ConfirmationOptions, // undefined\n  }",
+                                    "type": "{\n  \t <b>message</b>: ConfirmationOptions, // Message of the component\n  }",
                                     "description": "message slot's params."
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom message template."
+                        },
+                        {
+                            "name": "icon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>class</b>: any, // Style class of the icon template\n  }"
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom icon template."
+                        },
+                        {
+                            "name": "accepticon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom icon template."
+                        },
+                        {
+                            "name": "rejecticon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom icon template."
                         }
                     ]
                 },
@@ -7692,6 +11268,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ConfirmPopupPassThroughOptionType": {
+                    "values": "ConfirmPopupPassThroughAttributes | (options: ConfirmPopupPassThroughMethodOptions) => ConfirmPopupPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "contextmenu": {
@@ -7742,6 +11326,235 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ContextMenuPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ContextMenuProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ContextMenuState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ContextMenuContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "ContextMenuPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ContextMenuProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the submenu icon's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ContextMenuPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "ContextMenuFocusedItemInfo": {
+                    "description": "Defines focused item info",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Active item index"
+                        },
+                        {
+                            "name": "level",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Active item level"
+                        },
+                        {
+                            "name": "parentKey",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Parent key info"
+                        }
+                    ],
+                    "methods": []
+                },
+                "ContextMenuState": {
+                    "description": "Defines current inline state in ContextMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focus state as a boolean."
+                        },
+                        {
+                            "name": "focusedItemInfo",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ContextMenuFocusedItemInfo",
+                            "default": "",
+                            "description": "Current focused item info."
+                        },
+                        {
+                            "name": "activeItemPath",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ContextMenuFocusedItemInfo[]",
+                            "default": "",
+                            "description": "Active item path."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current visible state as a boolean."
+                        },
+                        {
+                            "name": "submenuVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current submenu visible state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ContextMenuContext": {
+                    "description": "Defines current options in ContextMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current active state of menuitem as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state of menuitem as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "ContextMenuProps": {
                     "description": "Defines valid properties in ContextMenu component.",
                     "relatedProp": "",
@@ -7817,6 +11630,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Identifier of the underlying menu element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -7839,6 +11660,19 @@
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom item template."
                         },
+                        {
+                            "name": "itemicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>class</b>: any, // Style class of the item icon element.\n  }",
+                                    "description": "item icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom item icon template."
+                        },
                         {
                             "name": "submenuicon",
                             "parameters": [
@@ -7911,6 +11745,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ContextMenuPassThroughOptionType": {
+                    "values": "ContextMenuPassThroughAttributes | (options: ContextMenuPassThroughMethodOptions) => ContextMenuPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "datatable": {
@@ -7948,6 +11790,27 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "DataTablePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "DataTableExportFunctionOptions": {
                     "description": "Custom datatable export metadata.",
                     "relatedProp": "",
@@ -9118,6 +12981,329 @@
                     ],
                     "methods": []
                 },
+                "DataTablePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "DataTableProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "loadingOverlay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the loading overlay's DOM element."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the loading icon's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "paginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Paginator component."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "virtualScroller",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the VirtualScroller component."
+                        },
+                        {
+                            "name": "table",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the table's DOM element."
+                        },
+                        {
+                            "name": "virtualScrollerSpacer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the virtual scroller spacer's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "thead",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the thead's DOM element."
+                        },
+                        {
+                            "name": "headerRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header row's DOM element."
+                        },
+                        {
+                            "name": "tbody",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the tbody's DOM element."
+                        },
+                        {
+                            "name": "rowgroupHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the rowgroup header's DOM element."
+                        },
+                        {
+                            "name": "row",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the row's DOM element."
+                        },
+                        {
+                            "name": "rowExpansion",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the row expansion's DOM element."
+                        },
+                        {
+                            "name": "rowgroupFooter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the rowgroup footer's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the empty message's DOM element."
+                        },
+                        {
+                            "name": "tfoot",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the tfoot's DOM element."
+                        },
+                        {
+                            "name": "footerRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the footerr ow's DOM element."
+                        },
+                        {
+                            "name": "footerCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the footer cell's DOM element."
+                        },
+                        {
+                            "name": "resizeHelper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the resize helper's DOM element."
+                        },
+                        {
+                            "name": "reorderIndicatorUp",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the reorder indicator up's DOM element."
+                        },
+                        {
+                            "name": "reorderIndicatorDown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the reorder indicator down's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "DataTablePassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "DataTableState": {
+                    "description": "Defines current inline state in DataTable component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "d_first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current index of first record as a number."
+                        },
+                        {
+                            "name": "d_rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current number of rows to display in new page as a number."
+                        },
+                        {
+                            "name": "d_sortField",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | string | Function",
+                            "default": "",
+                            "description": "Current sort field."
+                        },
+                        {
+                            "name": "d_sortOrder",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current order to sort the data by default."
+                        },
+                        {
+                            "name": "d_multiSortMeta",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableSortMeta[]",
+                            "default": "",
+                            "description": "Current sortmeta objects to sort the data."
+                        },
+                        {
+                            "name": "d_groupRowsSortMeta",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableSortMeta",
+                            "default": "",
+                            "description": "Current group sortmeta objects to sort the data."
+                        },
+                        {
+                            "name": "d_selectionKeys",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "Current keys of selected rows."
+                        },
+                        {
+                            "name": "d_expandedRowKeys",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "Current keys of rows in expanded state."
+                        },
+                        {
+                            "name": "d_columnOrder",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string[]",
+                            "default": "",
+                            "description": "Current order of the columns."
+                        },
+                        {
+                            "name": "d_editingRowKeys",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current keys of editing rows."
+                        },
+                        {
+                            "name": "d_editingMeta",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Current editing meta data."
+                        },
+                        {
+                            "name": "d_filters",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableFilterMeta",
+                            "default": "",
+                            "description": "Current filters object."
+                        },
+                        {
+                            "name": "d_editing",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current editing as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "DataTableProps": {
                     "description": "Defines valid properties in DataTable component.",
                     "relatedProp": "",
@@ -9239,8 +13425,9 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-spinner",
-                            "description": "The icon to show while indicating data load is in progress."
+                            "default": "",
+                            "description": "The icon to show while indicating data load is in progress.",
+                            "deprecated": "since v3.27.0. Use 'loadingicon' slot."
                         },
                         {
                             "name": "sortField",
@@ -9439,16 +13626,18 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi-chevron-down",
-                            "description": "Icon of the row toggler to display the row as expanded."
+                            "default": "",
+                            "description": "Icon of the row toggler to display the row as expanded.",
+                            "deprecated": "since v3.27.0. Use 'rowtogglericon' slot."
                         },
                         {
                             "name": "collapsedRowIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi-chevron-right",
-                            "description": "Icon of the row toggler to display the row as collapsed."
+                            "default": "",
+                            "description": "Icon of the row toggler to display the row as collapsed.",
+                            "deprecated": "since v3.27.0. Use 'rowtogglericon' slot."
                         },
                         {
                             "name": "rowGroupMode",
@@ -9615,6 +13804,14 @@
                             "type": "InputHTMLAttributes",
                             "default": "",
                             "description": "Uses to pass all properties of the HTMLInputElement to the focusable filter input element inside the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": [
@@ -9710,6 +13907,61 @@
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom expansion template."
+                        },
+                        {
+                            "name": "loadingicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom loading icon template."
+                        },
+                        {
+                            "name": "reorderindicatorupicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom reorder indicator up icon template."
+                        },
+                        {
+                            "name": "reorderindicatordownicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom reorder indicator down icon template."
+                        },
+                        {
+                            "name": "rowgrouptogglericon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>expanded</b>: boolean, // Current rowgroup's expanded state.\n  }",
+                                    "description": "rowgroup toggler icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom rowgroup toggler icon template."
+                        },
+                        {
+                            "name": "paginatorfirstpagelinkicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom paginator first page link icon template."
+                        },
+                        {
+                            "name": "paginatorprevpagelinkicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom paginator previous page link icon template."
+                        },
+                        {
+                            "name": "paginatornextpagelinkicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom paginator next page link icon template."
+                        },
+                        {
+                            "name": "paginatorlastpagelinkicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom paginator last page link icon template."
                         }
                     ]
                 },
@@ -10214,6 +14466,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "DataTablePassThroughOptionType": {
+                    "values": "DataTablePassThroughAttributes | (options: DataTablePassThroughMethodOptions) => DataTablePassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "dataview": {
@@ -10233,6 +14493,27 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "DataViewPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataViewProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataViewState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "DataViewPageEvent": {
                     "description": "Custom page event.",
                     "relatedProp": "DataViewEmits.page",
@@ -10272,6 +14553,105 @@
                     ],
                     "methods": []
                 },
+                "DataViewPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "DataViewProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "paginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Paginator component."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "column",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the column's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the empty message's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "DataViewPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "DataViewState": {
+                    "description": "Defines current inline state in DataView component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "d_first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current index of first record as a number."
+                        },
+                        {
+                            "name": "d_rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current number of rows to display in new page as a number."
+                        }
+                    ],
+                    "methods": []
+                },
                 "DataViewProps": {
                     "description": "Defines valid properties in DataView component. In addition to these, all properties of HTMLDivElement can be used in this component.",
                     "relatedProp": "",
@@ -10403,6 +14783,14 @@
                             "type": "undefined | string",
                             "default": "",
                             "description": "Name of the data that uniquely identifies the a record in the data."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -10517,6 +14905,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "DataViewPassThroughOptionType": {
+                    "values": "DataViewPassThroughAttributes | (options: DataViewPassThroughMethodOptions) => DataViewPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "dataviewlayoutoptions": {
@@ -10536,6 +14932,110 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "DataViewLayoutOptionsPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataViewLayoutOptionsProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataViewLayoutOptionsState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "DataViewLayoutOptionsPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "DataViewLayoutOptionsProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewLayoutOptionsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "listButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewLayoutOptionsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list button's DOM element."
+                        },
+                        {
+                            "name": "listIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewLayoutOptionsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list icon's DOM element."
+                        },
+                        {
+                            "name": "gridButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewLayoutOptionsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the grid button's DOM element."
+                        },
+                        {
+                            "name": "gridIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewLayoutOptionsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the grid icon's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "DataViewLayoutOptionsPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "DataViewLayoutOptionsState": {
+                    "description": "Defines current inline state in DataViewLayoutOptions component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "isListButtonPressed",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current list button pressed state as a boolean."
+                        },
+                        {
+                            "name": "isGridButtonPressed",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current grid button pressed state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "DataViewLayoutOptionsProps": {
                     "description": "Defines valid properties in DataViewLayoutOptions component.",
                     "relatedProp": "",
@@ -10547,6 +15047,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Value of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewLayoutOptionsPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -10591,6 +15099,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "DataViewLayoutOptionsPassThroughOptionType": {
+                    "values": "DataViewLayoutOptionsPassThroughAttributes | (options: DataViewLayoutOptionsPassThroughMethodOptions) => DataViewLayoutOptionsPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "deferredcontent": {
@@ -10743,6 +15259,158 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "DialogPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DialogProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DialogState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "DialogPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "DialogProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "headerTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header title's DOM element."
+                        },
+                        {
+                            "name": "headerIcons",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header icons' DOM element."
+                        },
+                        {
+                            "name": "maximizableButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the maximizable button's DOM element."
+                        },
+                        {
+                            "name": "maximizableIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the maximizable icon's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the close button's component."
+                        },
+                        {
+                            "name": "closeButtonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the close button icon's component."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the mask's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "DialogPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "DialogState": {
+                    "description": "Defines current inline state in Dialog component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "containerVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current visible state of the container as a boolean."
+                        },
+                        {
+                            "name": "maximized",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current maximized state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "DialogBreakpoints": {
                     "description": "Custom breakpoint metadata.",
                     "relatedProp": "",
@@ -10949,24 +15617,35 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-times",
-                            "description": "Icon to display in the dialog close button."
+                            "default": "",
+                            "description": "Icon to display in the dialog close button.",
+                            "deprecated": "since v3.27.0. Use 'closeicon' slot."
                         },
                         {
                             "name": "maximizeIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-window-maximize",
-                            "description": "Icon to display in the dialog maximize button when dialog is not maximized."
+                            "default": "",
+                            "description": "Icon to display in the dialog maximize button when dialog is not maximized.",
+                            "deprecated": "since v3.27.0. Use 'maximizeicon' slot."
                         },
                         {
                             "name": "minimizeIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-window-minimize",
-                            "description": "Icon to display in the dialog maximize button when dialog is maximized."
+                            "default": "",
+                            "description": "Icon to display in the dialog maximize button when dialog is minimized.",
+                            "deprecated": "since v3.27.0. Use 'minimizeicon' slot."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -10993,6 +15672,25 @@
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom footer template."
+                        },
+                        {
+                            "name": "closeicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom close icon template."
+                        },
+                        {
+                            "name": "maximizeicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>maximized</b>: boolean, // Maximized state as a boolean\n  }",
+                                    "description": "maximize icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom maximize icon template of dialog."
                         }
                     ]
                 },
@@ -11074,6 +15772,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "DialogPassThroughOptionType": {
+                    "values": "DialogPassThroughAttributes | (options: DialogPassThroughMethodOptions) => DialogPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "dialogservice-usedialog": {
@@ -11264,6 +15970,164 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "DockPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DockProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DockState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DockContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "DockPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "DockProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "DockPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "DockState": {
+                    "description": "Defines current inline state in Dock component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "currentIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current index as a number."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focus state as a boolean."
+                        },
+                        {
+                            "name": "focusedOptionIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current focused item index as a number."
+                        }
+                    ],
+                    "methods": []
+                },
+                "DockContext": {
+                    "description": "Defines current options in Dock component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current active state of menuitem as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "DockTooltipOptions": {
                     "description": "Defines tooltip options",
                     "relatedProp": "",
@@ -11376,6 +16240,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Establishes a string value that labels the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -11447,6 +16319,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "DockPassThroughOptionType": {
+                    "values": "DockPassThroughAttributes | (options: DockPassThroughMethodOptions) => DockPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "dropdown": {
@@ -11466,6 +16346,34 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "DropdownPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DropdownProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DropdownState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DropdownContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "DropdownChangeEvent": {
                     "description": "Custom change event.",
                     "relatedProp": "DropdownEmits.change",
@@ -11512,6 +16420,264 @@
                     ],
                     "methods": []
                 },
+                "DropdownPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "DropdownProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "clearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the clear icon's DOM element."
+                        },
+                        {
+                            "name": "trigger",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the trigger' DOM element."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the loading icon's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "filterContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter container's DOM element."
+                        },
+                        {
+                            "name": "filterInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter input's DOM element."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter icon's DOM element."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "virtualScroller",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the VirtualScroller component."
+                        },
+                        {
+                            "name": "list",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "itemGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the item group's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the emptyMessage's DOM element."
+                        },
+                        {
+                            "name": "hiddenFirstFocusableEl",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden first focusable element's DOM element."
+                        },
+                        {
+                            "name": "hiddenFilterResult",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden filter result's DOM element."
+                        },
+                        {
+                            "name": "hiddenSelectedMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden selected message's DOM element."
+                        },
+                        {
+                            "name": "hiddenLastFocusableEl",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden last focusable element's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "DropdownPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "DropdownState": {
+                    "description": "Defines current inline state in Dropdown component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "focusedOptionIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current focused item index as a number."
+                        },
+                        {
+                            "name": "filterValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current filter value state as a string."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current overlay visible state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
+                "DropdownContext": {
+                    "description": "Defines current options in Dropdown component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current selection state of the item as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focus state of the item as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current disabled state of the item as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "DropdownProps": {
                     "description": "Defines valid properties in Dropdown component.",
                     "relatedProp": "",
@@ -11730,7 +16896,8 @@
                             "readonly": false,
                             "type": "HTMLAttributes",
                             "default": "",
-                            "description": "Uses to pass all properties of the HTMLElement to the clear icon inside the component."
+                            "description": "Uses to pass all properties of the HTMLElement to the clear icon inside the component.",
+                            "deprecated": "since v3.26.0. Use 'pt' peroperty."
                         },
                         {
                             "name": "appendTo",
@@ -11753,32 +16920,36 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-times",
-                            "description": "Icon to display in clear button."
+                            "default": "",
+                            "description": "Icon to display in clear button.",
+                            "deprecated": "since v3.27.0. Use 'clearicon' slot."
                         },
                         {
                             "name": "dropdownIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-chevron-down",
-                            "description": "Icon to display in the dropdown."
+                            "default": "",
+                            "description": "Icon to display in the dropdown.",
+                            "deprecated": "since v3.27.0. Use 'dropdownicon' slot."
                         },
                         {
                             "name": "filterIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-search",
-                            "description": "Icon to display in filter input."
+                            "default": "",
+                            "description": "Icon to display in filter input.",
+                            "deprecated": "since v3.27.0. Use 'filtericon' slot."
                         },
                         {
                             "name": "loadingIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-spinner pi-spin",
-                            "description": "Icon to display in loading state."
+                            "default": "",
+                            "description": "Icon to display in loading state.",
+                            "deprecated": "since v3.27.0. Use 'loadingicon' slot."
                         },
                         {
                             "name": "resetFilterOnHide",
@@ -11883,6 +17054,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Identifier of the underlying input element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -11909,7 +17088,8 @@
                             "name": "indicator",
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
-                            "description": "Custom indicator template."
+                            "description": "Custom indicator template.",
+                            "deprecated": "since v3.27.0. Use 'dropdownicon or loadingicon' slots."
                         },
                         {
                             "name": "header",
@@ -12000,6 +17180,51 @@
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom loader template."
+                        },
+                        {
+                            "name": "clearicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>onClick</b>: void, // Clear icon click function.\n  }",
+                                    "description": "clear icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom clear icon template."
+                        },
+                        {
+                            "name": "dropdownicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>class</b>: any, // Style class of the component\n  }",
+                                    "description": "dropdown icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom dropdown icon template."
+                        },
+                        {
+                            "name": "loadingicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>class</b>: any, // Style class of the component\n  }",
+                                    "description": "loading icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom loading icon template."
+                        },
+                        {
+                            "name": "filtericon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom filter icon template."
                         }
                     ]
                 },
@@ -12100,6 +17325,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "DropdownPassThroughOptionType": {
+                    "values": "DropdownPassThroughAttributes | (options: DropdownPassThroughMethodOptions) => DropdownPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "dynamicdialog": {
@@ -12302,6 +17535,27 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "EditorPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "EditorProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "EditorState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "EditorTextChangeEvent": {
                     "description": "Custom text change event.",
                     "relatedProp": "EditorEmits['text-change']",
@@ -12419,6 +17673,97 @@
                     ],
                     "methods": []
                 },
+                "EditorPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "EditorProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "toolbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the toolbar's DOM element."
+                        },
+                        {
+                            "name": "formats",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the formats's DOM element."
+                        },
+                        {
+                            "name": "select",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the select's DOM element."
+                        },
+                        {
+                            "name": "option",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the option's DOM element."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the button's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "EditorPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "EditorState": {
+                    "description": "Defines current inline state in Editor component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "reRenderColorKey",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Current rerendered color key as a number."
+                        }
+                    ],
+                    "methods": []
+                },
                 "EditorProps": {
                     "description": "Defines valid properties in Editor component.",
                     "relatedProp": "",
@@ -12470,6 +17815,14 @@
                             "type": "any",
                             "default": "",
                             "description": "Modules configuration, see [here](https://quilljs.com/docs/modules/) for available options."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -12548,6 +17901,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "EditorPassThroughOptionType": {
+                    "values": "EditorPassThroughAttributes | (options: EditorPassThroughMethodOptions) => EditorPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "fieldset": {
@@ -12640,7 +18001,7 @@
                             "description": "Uses to pass attributes to the toggler's DOM element."
                         },
                         {
-                            "name": "togglericon",
+                            "name": "togglerIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "FieldsetPassThroughOptionType",
@@ -12648,7 +18009,7 @@
                             "description": "Uses to pass attributes to the toggler icon's DOM element."
                         },
                         {
-                            "name": "legendtitle",
+                            "name": "legendTitle",
                             "optional": true,
                             "readonly": false,
                             "type": "FieldsetPassThroughOptionType",
@@ -12656,7 +18017,7 @@
                             "description": "Uses to pass attributes to the legend title's DOM element."
                         },
                         {
-                            "name": "toggleablecontent",
+                            "name": "toggleableContent",
                             "optional": true,
                             "readonly": false,
                             "type": "FieldsetPassThroughOptionType",
@@ -12839,6 +18200,27 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "FileUploadPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "FileUploadSelectEvent": {
                     "description": "Custom select event.",
                     "relatedProp": "FileUploadEmits.select",
@@ -13038,6 +18420,257 @@
                     ],
                     "methods": []
                 },
+                "FileUploadPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "FileUploadProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "buttonbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the buttonbar's DOM element."
+                        },
+                        {
+                            "name": "chooseButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the choose button's DOM element."
+                        },
+                        {
+                            "name": "chooseIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the choose icon's DOM element."
+                        },
+                        {
+                            "name": "chooseButtonLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the choose button label's DOM element."
+                        },
+                        {
+                            "name": "uploadButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the upload button's DOM element."
+                        },
+                        {
+                            "name": "cancelButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the cancel button's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "progressbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the progressbar's DOM element."
+                        },
+                        {
+                            "name": "message",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the messages' DOM element."
+                        },
+                        {
+                            "name": "file",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the file's DOM element."
+                        },
+                        {
+                            "name": "thumbnail",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the thumbnail's DOM element."
+                        },
+                        {
+                            "name": "details",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the details's DOM element."
+                        },
+                        {
+                            "name": "fileName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the fileName's DOM element."
+                        },
+                        {
+                            "name": "fileSize",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the fileSize's DOM element."
+                        },
+                        {
+                            "name": "badge",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the badge's DOM element."
+                        },
+                        {
+                            "name": "actions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the actions's DOM element."
+                        },
+                        {
+                            "name": "removeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the remove button's DOM element."
+                        },
+                        {
+                            "name": "empty",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the empty's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "basicButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the basic button's DOM element."
+                        },
+                        {
+                            "name": "uploadIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the upload icon's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "FileUploadPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "FileUploadState": {
+                    "description": "Defines current inline state in FileUpload component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "uploadedFileCount",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Current uploaded file count state as a number."
+                        },
+                        {
+                            "name": "files",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "Current files."
+                        },
+                        {
+                            "name": "messages",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "Current messages."
+                        },
+                        {
+                            "name": "progress",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current progress state as a number."
+                        },
+                        {
+                            "name": "uploadedFiles",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "Current uploaded files."
+                        }
+                    ],
+                    "methods": []
+                },
                 "FileUploadProps": {
                     "description": "Defines valid properties in FileUpload component.",
                     "relatedProp": "",
@@ -13207,24 +18840,27 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-fw pi-plus",
-                            "description": "Icon of the choose button."
+                            "default": "",
+                            "description": "Icon of the choose button.",
+                            "deprecated": "since v3.27.0. Use 'chooseicon' slot."
                         },
                         {
                             "name": "uploadIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-fw pi-upload",
-                            "description": "Icon of the upload button."
+                            "default": "",
+                            "description": "Icon of the upload button.",
+                            "deprecated": "since v3.27.0. Use 'updateicon' slot."
                         },
                         {
                             "name": "cancelIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-fw pi-times",
-                            "description": "Icon of the cancel button."
+                            "default": "",
+                            "description": "Icon of the cancel button.",
+                            "deprecated": "since v3.27.0. Use 'cancelicon' slot."
                         },
                         {
                             "name": "style",
@@ -13241,6 +18877,14 @@
                             "type": "any",
                             "default": "",
                             "description": "Style class of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -13279,6 +18923,36 @@
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom content when there is no selected file."
+                        },
+                        {
+                            "name": "chooseicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom choose icon template."
+                        },
+                        {
+                            "name": "uploadicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom upload icon template."
+                        },
+                        {
+                            "name": "cancelicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom cancel icon template."
+                        },
+                        {
+                            "name": "fileremoveicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>file</b>: File, // File to upload.\n  \t <b>index</b>: number, // The index of file\n  }"
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom remove icon template for each file."
                         }
                     ]
                 },
@@ -13412,6 +19086,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "FileUploadPassThroughOptionType": {
+                    "values": "FileUploadPassThroughAttributes | (options: FileUploadPassThroughMethodOptions) => FileUploadPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "focustrap": {
@@ -13473,6 +19155,27 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "GalleriaPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "GalleriaProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "GalleriaState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "GalleriaResponsiveOptions": {
                     "relatedProp": "",
                     "props": [
@@ -13495,6 +19198,337 @@
                     ],
                     "methods": []
                 },
+                "GalleriaPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "GalleriaProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the close button's DOM element."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the close icon's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "itemWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the item wrapper's DOM element."
+                        },
+                        {
+                            "name": "itemContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the item container's DOM element."
+                        },
+                        {
+                            "name": "previousItemButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the previous item button's DOM element."
+                        },
+                        {
+                            "name": "previousItemIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the previous item icon's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "nextItemButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the next item button's DOM element."
+                        },
+                        {
+                            "name": "nextItemIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the next item icon's DOM element."
+                        },
+                        {
+                            "name": "caption",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the caption's DOM element."
+                        },
+                        {
+                            "name": "indicators",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the indicators's DOM element."
+                        },
+                        {
+                            "name": "indicator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the indicator's DOM element."
+                        },
+                        {
+                            "name": "thumbnailWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the thumbnail wrapper's DOM element."
+                        },
+                        {
+                            "name": "thumbnailContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the thumbnail container's DOM element."
+                        },
+                        {
+                            "name": "previousThumbnailButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the previous thumbnail button's DOM element."
+                        },
+                        {
+                            "name": "previousThumbnailIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the previous thumbnail icon's DOM element."
+                        },
+                        {
+                            "name": "thumbnailItemsContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the thumbnail items container's DOM element."
+                        },
+                        {
+                            "name": "thumbnailItems",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the thumbnail items' DOM element."
+                        },
+                        {
+                            "name": "thumbnailItem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the thumbnail item's DOM element."
+                        },
+                        {
+                            "name": "thumbnailItemContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the thumbnail item content's DOM element."
+                        },
+                        {
+                            "name": "nextThumbnailButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the next thumbnail button's DOM element."
+                        },
+                        {
+                            "name": "nextThumbnailIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the next thumbnail icon's DOM element."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the mask's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "GalleriaPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "GalleriaState": {
+                    "description": "Defines current inline state in Galleria component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "containerVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current container visible state as a boolean."
+                        },
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style id of the component."
+                        },
+                        {
+                            "name": "activeIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Index of the first item as a number."
+                        },
+                        {
+                            "name": "numVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "3",
+                            "description": "Number of items per page as a number."
+                        },
+                        {
+                            "name": "slideShowActive",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current slide active state as a boolean."
+                        },
+                        {
+                            "name": "d_numVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "3",
+                            "description": "Number of items per page as a number."
+                        },
+                        {
+                            "name": "d_oldNumVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "3",
+                            "description": "Old number of items per page as a number."
+                        },
+                        {
+                            "name": "d_activeIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Current active item index as a number."
+                        },
+                        {
+                            "name": "d_oldActiveItemIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "The previous active item index as a number."
+                        },
+                        {
+                            "name": "page",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Index of the first item."
+                        },
+                        {
+                            "name": "totalShiftedItems",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Total shifted items' count as a number."
+                        }
+                    ],
+                    "methods": []
+                },
                 "GalleriaProps": {
                     "description": "Defines valid properties in Galleria component.",
                     "relatedProp": "",
@@ -13714,6 +19748,14 @@
                             "type": "ButtonHTMLAttributes",
                             "default": "",
                             "description": "Uses to pass all properties of the HTMLButtonElement to the next navigation button."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -13794,7 +19836,7 @@
                             "description": "Custom close icon template."
                         },
                         {
-                            "name": "previtemicon",
+                            "name": "previousitemicon",
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom navigator previous item icon template."
@@ -13806,7 +19848,7 @@
                             "description": "Custom navigator next item icon template."
                         },
                         {
-                            "name": "prevthumbnailicon",
+                            "name": "previousthumbnailicon",
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom thumbnail previous icon template."
@@ -13853,32 +19895,40 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "GalleriaPassThroughOptionType": {
+                    "values": "GalleriaPassThroughAttributes | (options: GalleriaPassThroughMethodOptions) => GalleriaPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
-    "icon/angledoubledown": {},
-    "icon/angledoubleleft": {},
-    "icon/angledoubleright": {},
-    "icon/angledoubleup": {},
-    "icon/angledown": {},
-    "icon/angleleft": {},
-    "icon/angleright": {},
-    "icon/angleup": {},
-    "icon/arrowdown": {},
-    "icon/arrowup": {},
-    "icon/ban": {},
-    "icon/bars": {},
-    "icon/calendar": {},
-    "icon/check": {},
-    "icon/chevrondown": {},
-    "icon/chevronleft": {},
-    "icon/chevronright": {},
-    "icon/chevronup": {},
-    "icon/exclamationtriangle": {},
-    "icon/eye": {},
-    "icon/eyeslash": {},
-    "icon/filter": {},
-    "icon/filterslash": {},
-    "icon": {
+    "icons/angledoubledown": {},
+    "icons/angledoubleleft": {},
+    "icons/angledoubleright": {},
+    "icons/angledoubleup": {},
+    "icons/angledown": {},
+    "icons/angleleft": {},
+    "icons/angleright": {},
+    "icons/angleup": {},
+    "icons/arrowdown": {},
+    "icons/arrowup": {},
+    "icons/ban": {},
+    "icons/bars": {},
+    "icons/calendar": {},
+    "icons/check": {},
+    "icons/chevrondown": {},
+    "icons/chevronleft": {},
+    "icons/chevronright": {},
+    "icons/chevronup": {},
+    "icons/exclamationtriangle": {},
+    "icons/eye": {},
+    "icons/eyeslash": {},
+    "icons/filter": {},
+    "icons/filterslash": {},
+    "icons": {
         "interfaces": {
             "description": "Defines the custom interfaces used by the module.",
             "eventDescription": "Defines the custom events used by the component's emit.",
@@ -13918,28 +19968,28 @@
             }
         }
     },
-    "icon/infocircle": {},
-    "icon/minus": {},
-    "icon/pencil": {},
-    "icon/plus": {},
-    "icon/refresh": {},
-    "icon/search": {},
-    "icon/searchminus": {},
-    "icon/searchplus": {},
-    "icon/sortalt": {},
-    "icon/sortamountdown": {},
-    "icon/sortamountupalt": {},
-    "icon/spinner": {},
-    "icon/star": {},
-    "icon/starfill": {},
-    "icon/thlarge": {},
-    "icon/times": {},
-    "icon/timescircle": {},
-    "icon/trash": {},
-    "icon/undo": {},
-    "icon/upload": {},
-    "icon/windowmaximize": {},
-    "icon/windowminimize": {},
+    "icons/infocircle": {},
+    "icons/minus": {},
+    "icons/pencil": {},
+    "icons/plus": {},
+    "icons/refresh": {},
+    "icons/search": {},
+    "icons/searchminus": {},
+    "icons/searchplus": {},
+    "icons/sortalt": {},
+    "icons/sortamountdown": {},
+    "icons/sortamountupalt": {},
+    "icons/spinner": {},
+    "icons/star": {},
+    "icons/starfill": {},
+    "icons/thlarge": {},
+    "icons/times": {},
+    "icons/timescircle": {},
+    "icons/trash": {},
+    "icons/undo": {},
+    "icons/upload": {},
+    "icons/windowmaximize": {},
+    "icons/windowminimize": {},
     "image": {
         "description": "Displays an image with preview and tranformation options. For multiple image, see Galleria.\n\n[Live Demo](https://www.primevue.org/image/)",
         "components": {
@@ -13976,6 +20026,230 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ImagePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ImageProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ImageState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "ImagePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ImageProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "image",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the image's DOM element."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the button's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the mask's DOM element."
+                        },
+                        {
+                            "name": "toolbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the toolbar's DOM element."
+                        },
+                        {
+                            "name": "rotateRightButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the rotate right button's DOM element."
+                        },
+                        {
+                            "name": "rotateRightIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the rotate right icon's DOM element."
+                        },
+                        {
+                            "name": "rotateLeftButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the rotate left button's DOM element."
+                        },
+                        {
+                            "name": "rotateLeftIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the rotate left icon's DOM element."
+                        },
+                        {
+                            "name": "zoomOutButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the zoom out button's DOM element."
+                        },
+                        {
+                            "name": "zoomOutIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the zoom out icon's DOM element."
+                        },
+                        {
+                            "name": "zoomInButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the zoom in button's DOM element."
+                        },
+                        {
+                            "name": "zoomInIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the zoom in icon's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the close button's DOM element."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the close icon's DOM element."
+                        },
+                        {
+                            "name": "previewContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the preview container's DOM element."
+                        },
+                        {
+                            "name": "preview",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the preview's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ImagePassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "ImageState": {
+                    "description": "Defines current inline state in Image component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "maskVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Mask visible state as a boolean."
+                        },
+                        {
+                            "name": "previewVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Preview visible state as a boolean."
+                        },
+                        {
+                            "name": "rotate",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Rotate state as a number."
+                        },
+                        {
+                            "name": "scale",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Scale state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "ImageProps": {
                     "description": "Defines valid properties in Image component.",
                     "relatedProp": "",
@@ -14009,8 +20283,17 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-eye",
-                            "description": "Custom indicator icon."
+                            "default": "",
+                            "description": "Custom indicator icon.",
+                            "deprecated": "since v3.27.0. Use 'indicator' slot."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -14055,6 +20338,30 @@
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom close template."
+                        },
+                        {
+                            "name": "image",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>class</b>: any, // Style class of the image element.\n  \t <b>style</b>: any, // Style of the image element.\n  \t <b>onError</b>: void, // Image error function.\n  }"
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom image template."
+                        },
+                        {
+                            "name": "preview",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>class</b>: any, // Style class of the preview image element.\n  \t <b>style</b>: any, // Style of the preview image element.\n  \t <b>onClick</b>: void, // Preview click function.\n  }"
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom preview template."
                         }
                     ]
                 },
@@ -14064,6 +20371,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ImagePassThroughOptionType": {
+                    "values": "ImagePassThroughAttributes | (options: ImagePassThroughMethodOptions) => ImagePassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "inlinemessage": {
@@ -14083,6 +20398,86 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "InlineMessagePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InlineMessageProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InlineMessageState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "InlineMessagePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "InlineMessageProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InlineMessagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InlineMessagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "text",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InlineMessagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the text's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InlineMessagePassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "InlineMessageState": {
+                    "description": "Defines current inline state in InlineMessage component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current visible state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "InlineMessageProps": {
                     "description": "Defines valid properties in InlineMessage component.",
                     "relatedProp": "",
@@ -14101,7 +20496,16 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Display a custom icon for the message."
+                            "description": "Display a custom icon for the message.",
+                            "deprecated": "since v3.27.0. Use 'icon' slot."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InlineMessagePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -14118,7 +20522,7 @@
                             "description": "Default custom slot."
                         },
                         {
-                            "name": "messageicon",
+                            "name": "icon",
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom message icon template."
@@ -14131,6 +20535,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InlineMessagePassThroughOptionType": {
+                    "values": "InlineMessagePassThroughAttributes | (options: InlineMessagePassThroughMethodOptions) => InlineMessagePassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "inplace": {
@@ -14150,6 +20562,94 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "InplacePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InplaceProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InplaceState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "InplacePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "InplaceProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InplacePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "display",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InplacePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the display's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InplacePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InplacePassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "InplaceState": {
+                    "description": "Defines current inline state in Inplace component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "d_active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current active state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "InplaceProps": {
                     "description": "Defines valid properties in Inplace component.",
                     "relatedProp": "",
@@ -14183,8 +20683,9 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-times",
-                            "description": "Icon to display in the close button."
+                            "default": "",
+                            "description": "Icon to display in the close button.",
+                            "deprecated": "since v3.27.0. Use 'closeicon' slot."
                         },
                         {
                             "name": "displayProps",
@@ -14201,6 +20702,14 @@
                             "type": "ButtonHTMLAttributes",
                             "default": "",
                             "description": "Uses to pass all properties of the HTMLButtonElement to the close button."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InplacePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -14221,6 +20730,12 @@
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom content template."
+                        },
+                        {
+                            "name": "closeicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom close icon template."
                         }
                     ]
                 },
@@ -14271,6 +20786,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InplacePassThroughOptionType": {
+                    "values": "InplacePassThroughAttributes | (options: InplacePassThroughMethodOptions) => InplacePassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "inputmask": {
@@ -14290,6 +20813,34 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "InputMaskPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "InputMaskProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputMaskPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputMaskPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "InputMaskProps": {
                     "description": "Defines valid properties in InputMask component.",
                     "relatedProp": "",
@@ -14341,6 +20892,14 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "Whether the items are clickable or not."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputMaskPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -14429,6 +20988,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputMaskPassThroughOptionType": {
+                    "values": "InputMaskPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "inputnumber": {
@@ -14448,6 +21015,27 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "InputNumberPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputNumberProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputNumberState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "InputNumberInputEvent": {
                     "description": "Custom input event.",
                     "relatedProp": "InputNumberEmits.input",
@@ -14494,6 +21082,89 @@
                     ],
                     "methods": []
                 },
+                "InputNumberPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "InputNumberProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputNumberPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Input component."
+                        },
+                        {
+                            "name": "buttonGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputNumberPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the button group's DOM element."
+                        },
+                        {
+                            "name": "incrementButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "decrementButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputNumberPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputNumberState": {
+                    "description": "Defines current inline state in InputNumber component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "d_modelValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current value state as a number."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "InputNumberProps": {
                     "description": "Defines valid properties in InputNumber component.",
                     "relatedProp": "",
@@ -14552,7 +21223,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Style class of the increment button."
+                            "description": "Style class of the increment button.",
+                            "deprecated": "since v3.27.0. Use 'incrementbuttonicon' slot."
                         },
                         {
                             "name": "decrementButtonIcon",
@@ -14560,7 +21232,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Style class of the decrement button."
+                            "description": "Style class of the decrement button.",
+                            "deprecated": "since v3.27.0. Use 'decrementbuttonicon' slot."
                         },
                         {
                             "name": "locale",
@@ -14769,6 +21442,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Establishes a string value that labels the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputNumberPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -14852,6 +21533,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputNumberPassThroughOptionType": {
+                    "values": "InputNumberPassThroughAttributes | (options: InputNumberPassThroughMethodOptions) => InputNumberPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "inputswitch": {
@@ -14871,6 +21560,94 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "InputSwitchPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputSwitchProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputSwitchState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputSwitchPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "undefined.InputSwitchProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputSwitchPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "slider",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputSwitchPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the slider's DOM element."
+                        },
+                        {
+                            "name": "hiddenInputWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputSwitchPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden input wrapper's DOM element."
+                        },
+                        {
+                            "name": "hiddenInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputSwitchPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden input's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputSwitchPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputSwitchState": {
+                    "description": "Defines current inline state in InputSwitch component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focus state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "InputSwitchProps": {
                     "description": "Defines valid properties in InputSwitch component.",
                     "relatedProp": "",
@@ -15015,6 +21792,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputSwitchPassThroughOptionType": {
+                    "values": "InputSwitchPassThroughAttributes | (options: InputSwitchPassThroughMethodOptions) => InputSwitchPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "inputtext": {
@@ -15034,6 +21819,34 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "InputTextPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "InputTextProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputTextPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "InputTextProps": {
                     "description": "Defines valid properties in InputText component.",
                     "relatedProp": "",
@@ -15045,6 +21858,14 @@
                             "type": "Nullable<string>",
                             "default": "",
                             "description": "Value of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": [],
@@ -15077,6 +21898,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputTextPassThroughOptionType": {
+                    "values": "InputTextPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "knob": {
@@ -15087,6 +21916,134 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "KnobPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "KnobProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "KnobState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "KnobPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "KnobProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KnobPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "svg",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KnobPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the svg's DOM element."
+                        },
+                        {
+                            "name": "range",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KnobPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the range's DOM element."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KnobPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the value' DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KnobPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "KnobPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "KnobState": {
+                    "description": "Defines current inline state in Knob component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "radius",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "40",
+                            "description": "Current radius state as a number."
+                        },
+                        {
+                            "name": "midX",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "50",
+                            "description": "Current middle x axis state as a number."
+                        },
+                        {
+                            "name": "midY",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "50",
+                            "description": "Current middle y axis state as a number."
+                        },
+                        {
+                            "name": "minRadians",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current minimum radian state as a number."
+                        },
+                        {
+                            "name": "maxRadians",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current maximum radian state as a number."
+                        }
+                    ],
+                    "methods": []
+                },
                 "KnobProps": {
                     "description": "Defines valid properties in Knob component.",
                     "relatedProp": "",
@@ -15218,6 +22175,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Used to define a string that labels the element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KnobPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -15260,6 +22225,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "KnobPassThroughOptionType": {
+                    "values": "KnobPassThroughAttributes | (options: KnobPassThroughMethodOptions) => KnobPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "listbox": {
@@ -15279,6 +22252,34 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ListboxPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ListboxProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ListboxState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ListboxContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "ListboxChangeEvent": {
                     "description": "Custom change event.",
                     "relatedProp": "ListboxEmits.change",
@@ -15325,6 +22326,216 @@
                     ],
                     "methods": []
                 },
+                "ListboxPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ListboxProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "filterContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter container's DOM element."
+                        },
+                        {
+                            "name": "filterInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter input's DOM element."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter icon's DOM element."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "virtualScroller",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the VirtualScroller component."
+                        },
+                        {
+                            "name": "list",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "itemGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the item group's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the emptyMessage's DOM element."
+                        },
+                        {
+                            "name": "hiddenFirstFocusableEl",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden first focusable element's DOM element."
+                        },
+                        {
+                            "name": "hiddenFilterResult",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden filter result's DOM element."
+                        },
+                        {
+                            "name": "hiddenSelectedMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden selected message's DOM element."
+                        },
+                        {
+                            "name": "hiddenLastFocusableEl",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden last focusable element's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ListboxPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "ListboxState": {
+                    "description": "Defines current inline state in Listbox component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "filterValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current filter value state as a string."
+                        },
+                        {
+                            "name": "focusedOptionIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "-1",
+                            "description": "Current focused item index as a number."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ListboxContext": {
+                    "description": "Defines current options in Listbox component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current selection state of the item as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focus state of the item as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current disabled state of the item as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "ListboxProps": {
                     "description": "Defines valid properties in Listbox component.",
                     "relatedProp": "",
@@ -15422,7 +22633,7 @@
                             "optional": true,
                             "readonly": false,
                             "type": "boolean",
-                            "default": "true",
+                            "default": "false",
                             "description": "Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually.\nOn touch enabled devices, metaKeySelection is turned off automatically."
                         },
                         {
@@ -15550,8 +22761,9 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "ß",
-                            "description": "Icon to display in filter input."
+                            "default": "",
+                            "description": "Icon to display in filter input.",
+                            "deprecated": "since v3.27.0. Use 'filtericon' slot."
                         },
                         {
                             "name": "aria-label",
@@ -15568,6 +22780,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Identifier of the underlying input element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListboxPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -15748,6 +22968,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ListboxPassThroughOptionType": {
+                    "values": "ListboxPassThroughAttributes | (options: ListboxPassThroughMethodOptions) => ListboxPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "megamenu": {
@@ -15767,6 +22995,267 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "MegaMenuPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MegaMenuProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MegaMenuState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MegaMenuContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "MegaMenuPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "MegaMenuProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the submenu icon's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "grid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the grid's DOM element."
+                        },
+                        {
+                            "name": "column",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the column's DOM element."
+                        },
+                        {
+                            "name": "submenuHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the submenu header's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "start",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the start of the component."
+                        },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the end of the component."
+                        }
+                    ],
+                    "methods": []
+                },
+                "MegaMenuPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "MegaMenuFocusedItemInfo": {
+                    "description": "Defines focused item info",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Active item index"
+                        },
+                        {
+                            "name": "level",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Active item level"
+                        },
+                        {
+                            "name": "parentKey",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Parent key info"
+                        }
+                    ],
+                    "methods": []
+                },
+                "MegaMenuState": {
+                    "description": "Defines current inline state in MegaMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focus state as a boolean."
+                        },
+                        {
+                            "name": "focusedItemInfo",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MegaMenuFocusedItemInfo",
+                            "default": "",
+                            "description": "Current focused item info."
+                        },
+                        {
+                            "name": "activeItem",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuItem",
+                            "default": "",
+                            "description": "Active item path."
+                        }
+                    ],
+                    "methods": []
+                },
+                "MegaMenuContext": {
+                    "description": "Defines current options in MegaMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current active state of menuitem as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state of menuitem as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "MegaMenuProps": {
                     "description": "Defines valid properties in MegaMenu component.",
                     "relatedProp": "",
@@ -15826,6 +23315,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Identifier of the underlying menu element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -15871,6 +23368,19 @@
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom submenu icon template."
+                        },
+                        {
+                            "name": "itemicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>class</b>: any, // Style class of the item icon element.\n  }",
+                                    "description": "item icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom item icon template."
                         }
                     ]
                 },
@@ -15908,6 +23418,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "MegaMenuPassThroughOptionType": {
+                    "values": "MegaMenuPassThroughAttributes | (options: MegaMenuPassThroughMethodOptions) => MegaMenuPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "menu": {
@@ -15963,6 +23481,204 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "MenuPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "MenuPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "MenuProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "submenuHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the submenu header's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "start",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the start of the component."
+                        },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the end of the component."
+                        }
+                    ],
+                    "methods": []
+                },
+                "MenuPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "MenuState": {
+                    "description": "Defines current inline state in Menu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current visible state as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focus state as a boolean."
+                        },
+                        {
+                            "name": "focusedOptionIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Focused option index."
+                        },
+                        {
+                            "name": "selectedOptionIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Selected option index."
+                        }
+                    ],
+                    "methods": []
+                },
+                "MenuContext": {
+                    "description": "Defines current options in Menu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state of menuitem as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "MenuProps": {
                     "description": "Defines valid properties in Menu component.",
                     "relatedProp": "",
@@ -16038,6 +23754,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Identifier of the underlying input element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -16071,6 +23795,19 @@
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom item template."
+                        },
+                        {
+                            "name": "itemicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>class</b>: any, // Style class of the item icon element.\n  }",
+                                    "description": "item icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom item icon template."
                         }
                     ]
                 },
@@ -16108,6 +23845,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "MenuPassThroughOptionType": {
+                    "values": "MenuPassThroughAttributes | (options: MenuPassThroughMethodOptions) => MenuPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "menubar": {
@@ -16127,6 +23872,259 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "MenubarPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenubarProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenubarState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenubarContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "MenubarPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "MenubarProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the submenu icon's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the mobile popup menu button's DOM element."
+                        },
+                        {
+                            "name": "popupIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the mobile popup menu button icon's DOM element."
+                        },
+                        {
+                            "name": "start",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the start of the component."
+                        },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the end of the component."
+                        }
+                    ],
+                    "methods": []
+                },
+                "MenubarPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "MenubarFocusedItemInfo": {
+                    "description": "Defines focused item info",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Active item index"
+                        },
+                        {
+                            "name": "level",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Active item level"
+                        },
+                        {
+                            "name": "parentKey",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Parent key info"
+                        }
+                    ],
+                    "methods": []
+                },
+                "MenubarState": {
+                    "description": "Defines current inline state in Menubar component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "mobileActive",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current mobile menu active state as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focus state as a boolean."
+                        },
+                        {
+                            "name": "focusedItemInfo",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenubarFocusedItemInfo",
+                            "default": "",
+                            "description": "Current focused item info."
+                        },
+                        {
+                            "name": "activeItemPath",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenubarFocusedItemInfo[]",
+                            "default": "",
+                            "description": "Active item path."
+                        }
+                    ],
+                    "methods": []
+                },
+                "MenubarContext": {
+                    "description": "Defines current options in Menubar component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current active state of menuitem as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state of menuitem as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "MenubarProps": {
                     "description": "Defines valid properties in Menubar component.",
                     "relatedProp": "",
@@ -16170,6 +24168,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Identifier of the underlying input element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -16205,10 +24211,10 @@
                             "description": "Custom item template."
                         },
                         {
-                            "name": "baricon",
+                            "name": "popupicon",
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
-                            "description": "Custom bar icon template."
+                            "description": "Custom popup icon template on responsive mode."
                         },
                         {
                             "name": "submenuicon",
@@ -16221,6 +24227,19 @@
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom submenu icon template."
+                        },
+                        {
+                            "name": "itemicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>class</b>: any, // Style class of the item icon element.\n  }",
+                                    "description": "item icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom item icon template."
                         }
                     ]
                 },
@@ -16231,6 +24250,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "MenubarPassThroughOptionType": {
+                    "values": "MenubarPassThroughAttributes | (options: MenubarPassThroughMethodOptions) => MenubarPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "menuitem": {
@@ -16406,6 +24433,110 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "MessagePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MessageProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MessageState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "MessagePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "MessageProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "text",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the text's DOM element."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the button's DOM element."
+                        },
+                        {
+                            "name": "buttonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the button icon's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "MessagePassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "MessageState": {
+                    "description": "Defines current inline state in Message component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current visible state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "MessageProps": {
                     "description": "Defines valid properties in Message component.",
                     "relatedProp": "",
@@ -16456,7 +24587,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in the message close button."
+                            "description": "Icon to display in the message close button.",
+                            "deprecated": "since v3.27.0. Use 'closeicon' slot."
                         },
                         {
                             "name": "closeButtonProps",
@@ -16465,6 +24597,14 @@
                             "type": "ButtonHTMLAttributes",
                             "default": "",
                             "description": "Uses to pass all properties of the HTMLButtonElement to the close button."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -16482,13 +24622,25 @@
                         },
                         {
                             "name": "messageicon",
-                            "parameters": [],
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>class</b>: any, // Style class of the item icon element.\n  }"
+                                }
+                            ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom message icon template."
                         },
                         {
                             "name": "closeicon",
-                            "parameters": [],
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>class</b>: any, // Style class of the item icon element.\n  }"
+                                }
+                            ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom close icon template."
                         }
@@ -16515,6 +24667,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "MessagePassThroughOptionType": {
+                    "values": "MessagePassThroughAttributes | (options: MessagePassThroughMethodOptions) => MessagePassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "multiselect": {
@@ -16559,6 +24719,34 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "MultiSelectPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MultiSelectProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MultiSelectState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MultiSelectContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "MultiSelectChangeEvent": {
                     "description": "Custom change event.",
                     "relatedProp": "MultiSelectEmits.change",
@@ -16628,6 +24816,384 @@
                     ],
                     "methods": []
                 },
+                "MultiSelectPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "MultiSelectProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "labelContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label container's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "token",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the token's DOM element."
+                        },
+                        {
+                            "name": "tokenLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the token label's DOM element."
+                        },
+                        {
+                            "name": "removeTokenIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the remove token icon's DOM element."
+                        },
+                        {
+                            "name": "trigger",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the trigger's DOM element."
+                        },
+                        {
+                            "name": "triggerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the trigger icon's DOM element."
+                        },
+                        {
+                            "name": "dropdownIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the dropdown icon's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "headerCheckboxContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header checkbox container's DOM element."
+                        },
+                        {
+                            "name": "headerCheckbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header checkbox's DOM element."
+                        },
+                        {
+                            "name": "filterContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter container's DOM element."
+                        },
+                        {
+                            "name": "filterInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter input's DOM element."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter icon's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the close button's DOM element."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the close icon's DOM element."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "virtualScroller",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the VirtualScroller component."
+                        },
+                        {
+                            "name": "list",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "itemGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the item group's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "checkboxContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the checkbox container's DOM element."
+                        },
+                        {
+                            "name": "checkbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the checkbox's DOM element."
+                        },
+                        {
+                            "name": "checkboxIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the checkbox icon's DOM element."
+                        },
+                        {
+                            "name": "option",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the option's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the emptyMessage's DOM element."
+                        },
+                        {
+                            "name": "hiddenInputWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden input wrapper's DOM element."
+                        },
+                        {
+                            "name": "hiddenInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden input's DOM element."
+                        },
+                        {
+                            "name": "hiddenFirstFocusableEl",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden first focusable element's DOM element."
+                        },
+                        {
+                            "name": "hiddenFilterResult",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden filter result's DOM element."
+                        },
+                        {
+                            "name": "hiddenSelectedMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden selected message's DOM element."
+                        },
+                        {
+                            "name": "hiddenLastFocusableEl",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden last focusable element's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "MultiSelectPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "MultiSelectState": {
+                    "description": "Defines current inline state in MultiSelect component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "focusedOptionIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current focused item index as a number."
+                        },
+                        {
+                            "name": "filterValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current filter value state as a string."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current overlay visible state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
+                "MultiSelectContext": {
+                    "description": "Defines current options in MultiSelect component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current selection state of the item as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focus state of the item as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current disabled state of the item as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "MultiSelectProps": {
                     "description": "Defines valid properties in MultiSelect component.",
                     "relatedProp": "",
@@ -16878,7 +25444,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in the checkboxes."
+                            "description": "Icon to display in the checkboxes.",
+                            "deprecated": "since v3.27.0. Use 'checkboxicon' slot."
                         },
                         {
                             "name": "closeIcon",
@@ -16886,7 +25453,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in the dropdown close button."
+                            "description": "Icon to display in the dropdown close button.",
+                            "deprecated": "since v3.27.0. Use 'closeicon' slot."
                         },
                         {
                             "name": "dropdownIcon",
@@ -16894,7 +25462,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in the dropdown."
+                            "description": "Icon to display in the dropdown.",
+                            "deprecated": "since v3.27.0. Use 'dropdownicon' slot."
                         },
                         {
                             "name": "filterIcon",
@@ -16902,7 +25471,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in filter input."
+                            "description": "Icon to display in filter input.",
+                            "deprecated": "since v3.27.0. Use 'filtericon' slot."
                         },
                         {
                             "name": "loadingIcon",
@@ -16910,7 +25480,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in loading state."
+                            "description": "Icon to display in loading state.",
+                            "deprecated": "since v3.27.0. Use 'loadingicon' slot."
                         },
                         {
                             "name": "removeTokenIcon",
@@ -16918,7 +25489,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in chip remove action."
+                            "description": "Icon to display in chip remove action.",
+                            "deprecated": "since v3.27.0. Use 'removetokenicon' slot."
                         },
                         {
                             "name": "selectAll",
@@ -17023,6 +25595,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Identifier of the underlying input element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -17062,7 +25642,8 @@
                             "name": "indicator",
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
-                            "description": "Custom indicator template."
+                            "description": "Custom indicator template.",
+                            "deprecated": "since v3.27.0. Use 'loadingicon and dropdownicon' slot."
                         },
                         {
                             "name": "header",
@@ -17156,7 +25737,13 @@
                         },
                         {
                             "name": "removetokenicon",
-                            "parameters": [],
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>class</b>: string, // Style class of the loading icon.\n  \t <b>onClick</b>: void, // Remove token icon function.\n  }"
+                                }
+                            ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom remove token icon template."
                         },
@@ -17166,7 +25753,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <b>allSelected</b>: boolean, // Options of the loader items for virtualscroller\n  }",
+                                    "type": "{\n  \t <b>allSelected</b>: boolean, // Options of the loader items for virtualscroller\n  \t <b>class</b>: string, // Style class of the loading icon.\n  }",
                                     "description": "header checkbox icon slot's params."
                                 }
                             ],
@@ -17175,13 +25762,25 @@
                         },
                         {
                             "name": "filtericon",
-                            "parameters": [],
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>class</b>: string, // Style class of the loading icon.\n  }"
+                                }
+                            ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom filter icon template."
                         },
                         {
                             "name": "closeicon",
-                            "parameters": [],
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>class</b>: string, // Style class of the loading icon.\n  }"
+                                }
+                            ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom close icon template."
                         },
@@ -17191,12 +25790,37 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <b>selected</b>: boolean, // Options of the loader items for virtualscroller\n  }",
+                                    "type": "{\n  \t <b>selected</b>: boolean, // Options of the loader items for virtualscroller\n  \t <b>class</b>: string, // Style class of the loading icon.\n  }",
                                     "description": "header checkbox icon slot's params."
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom item checkbox icon template."
+                        },
+                        {
+                            "name": "loadingicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>class</b>: string, // Style class of the loading icon.\n  }",
+                                    "description": "loading icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom loading icon template."
+                        },
+                        {
+                            "name": "dropdownicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>class</b>: string, // Style class of the loading icon.\n  }"
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom dropdown icon template."
                         }
                     ]
                 },
@@ -17310,6 +25934,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "MultiSelectPassThroughOptionType": {
+                    "values": "MultiSelectPassThroughAttributes | (options: MultiSelectPassThroughMethodOptions) => MultiSelectPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "orderlist": {
@@ -17329,6 +25961,27 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "OrderListPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OrderListProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OrderListState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "OrderListReorderEvent": {
                     "description": "Custom reorder event",
                     "relatedProp": "OrderListEmits.reorder",
@@ -17383,6 +26036,145 @@
                     ],
                     "methods": []
                 },
+                "OrderListPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "OrderListProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "controls",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the controls' DOM element."
+                        },
+                        {
+                            "name": "moveUpButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "moveTopButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "moveDownButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "moveBottomButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "list",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "OrderListPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "OrderListState": {
+                    "description": "Defines current inline state in OrderList component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "d_selection",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "focusedOptionIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current focused item index as a number."
+                        }
+                    ],
+                    "methods": []
+                },
                 "OrderListProps": {
                     "description": "Defines valid properties in OrderList component.",
                     "relatedProp": "",
@@ -17514,6 +26306,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Identifier of the underlying list element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -17640,6 +26440,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "OrderListPassThroughOptionType": {
+                    "values": "OrderListPassThroughAttributes | (options: OrderListPassThroughMethodOptions) => OrderListPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "organizationchart": {
@@ -17659,6 +26467,34 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "OrganizationChartPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OrganizationChartProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OrganizationChartState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OrganizationChartContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "OrganizationChartNode": {
                     "description": "Defines valid properties in OrganizationChartNode.",
                     "relatedProp": "",
@@ -17752,6 +26588,200 @@
                     ],
                     "methods": []
                 },
+                "OrganizationChartPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "OrganizationChartProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "table",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the table's DOM element."
+                        },
+                        {
+                            "name": "body",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the body's DOM element."
+                        },
+                        {
+                            "name": "row",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the row' DOM element."
+                        },
+                        {
+                            "name": "cell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the cell's DOM element."
+                        },
+                        {
+                            "name": "node",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the node's DOM element."
+                        },
+                        {
+                            "name": "nodeToggler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the nodeToggler's DOM element."
+                        },
+                        {
+                            "name": "nodeTogglerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the nodeTogglerIcon's DOM element."
+                        },
+                        {
+                            "name": "lines",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the lines's DOM element."
+                        },
+                        {
+                            "name": "lineCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the lineCell's DOM element."
+                        },
+                        {
+                            "name": "lineDown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the lineDown's DOM element."
+                        },
+                        {
+                            "name": "nodes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the nodes's DOM element."
+                        },
+                        {
+                            "name": "nodeCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the nodeCell's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "OrganizationChartPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "OrganizationChartState": {
+                    "description": "Defines current inline state in OrganizationChart component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "d_collapsedKeys",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OrganizationChartCollapsedKeys",
+                            "default": "false",
+                            "description": "Current collapsed keys' state."
+                        }
+                    ],
+                    "methods": []
+                },
+                "OrganizationChartContext": {
+                    "description": "Defines current options in OrganizationChart component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "expanded",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focus expanded of the node as a boolean."
+                        },
+                        {
+                            "name": "selectable",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current selectable state of the node as a boolean."
+                        },
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current selection state of the node as a boolean."
+                        },
+                        {
+                            "name": "toggleable",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current toggleable state of the node as a boolean."
+                        },
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current active state of the node as a boolean."
+                        },
+                        {
+                            "name": "lineTop",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current being top line state of the node as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "OrganizationChartProps": {
                     "description": "Defines valid properties in OrganizationChart component.",
                     "relatedProp": "",
@@ -17795,6 +26825,14 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "Whether the nodes can be expanded or toggled."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -17924,6 +26962,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "OrganizationChartPassThroughOptionType": {
+                    "values": "OrganizationChartPassThroughAttributes | (options: OrganizationChartPassThroughMethodOptions) => OrganizationChartPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "overlaypanel": {
@@ -17984,6 +27030,94 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "OverlayPanelPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OverlayPanelProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OverlayPanelState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "OverlayPanelPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "OverlayPanelProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the close button's DOM element."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the close icon's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "OverlayPanelPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "OverlayPanelState": {
+                    "description": "Defines current inline state in OverlayPanel component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current visible state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "OverlayPanelBreakpoints": {
                     "description": "OverlayPanel breakpoint metadata.",
                     "relatedProp": "",
@@ -18055,7 +27189,16 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in the overlaypanel close button."
+                            "description": "Icon to display in the overlaypanel close button.",
+                            "deprecated": "since v3.27.0. Use 'closeicon' slot."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -18099,6 +27242,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "OverlayPanelPassThroughOptionType": {
+                    "values": "OverlayPanelPassThroughAttributes | (options: OverlayPanelPassThroughMethodOptions) => OverlayPanelPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "paginator": {
@@ -18118,6 +27269,236 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "PaginatorPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PaginatorProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PaginatorState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PaginatorContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "PaginatorPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "PaginatorProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "left",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the left's DOM element."
+                        },
+                        {
+                            "name": "firstPageButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the first page button's DOM element."
+                        },
+                        {
+                            "name": "firstPageIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the first page icon's DOM element."
+                        },
+                        {
+                            "name": "prevPageButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the prev page button's DOM element."
+                        },
+                        {
+                            "name": "prevPageIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the prev page icon's DOM element."
+                        },
+                        {
+                            "name": "nextPageButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the next page button's DOM element."
+                        },
+                        {
+                            "name": "nextPageIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the next page icon's DOM element."
+                        },
+                        {
+                            "name": "lastPageButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the last page button's DOM element."
+                        },
+                        {
+                            "name": "lastPageIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the last page icon's DOM element."
+                        },
+                        {
+                            "name": "pages",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the pages's DOM element."
+                        },
+                        {
+                            "name": "pageButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the page button's DOM element."
+                        },
+                        {
+                            "name": "current",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the current's DOM element."
+                        },
+                        {
+                            "name": "RPPDropdown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Dropdown component."
+                        },
+                        {
+                            "name": "JTPDropdown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Dropdown component."
+                        },
+                        {
+                            "name": "JTPInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputNumberPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Dropdown component."
+                        },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the end's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "PaginatorPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "PaginatorState": {
+                    "description": "Defines current inline state in Paginator component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "d_first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current index of first record as a number."
+                        },
+                        {
+                            "name": "d_rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current number of rows to display in new page as a number."
+                        }
+                    ],
+                    "methods": []
+                },
+                "PaginatorContext": {
+                    "description": "Defines current options in Paginator component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current active state as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current disabled state of the button as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "PageState": {
                     "description": "Paginator page state metadata.",
                     "relatedProp": "",
@@ -18224,6 +27605,14 @@
                             "type": "boolean",
                             "default": "true",
                             "description": "Whether to show the paginator even there is only one page."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -18332,6 +27721,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "PaginatorPassThroughOptionType": {
+                    "values": "PaginatorPassThroughAttributes | (options: PaginatorPassThroughMethodOptions) => PaginatorPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "panel": {
@@ -18429,7 +27826,7 @@
                             "readonly": false,
                             "type": "PanelPassThroughOptionType",
                             "default": "",
-                            "description": "Uses to pass attributes to the title's DOM element."
+                            "description": "Uses to pass attributes to the icons' DOM element."
                         },
                         {
                             "name": "toggler",
@@ -18440,7 +27837,7 @@
                             "description": "Uses to pass attributes to the toggler's DOM element."
                         },
                         {
-                            "name": "togglericon",
+                            "name": "togglerIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "PanelPassThroughOptionType",
@@ -18448,7 +27845,7 @@
                             "description": "Uses to pass attributes to the togglericon's DOM element."
                         },
                         {
-                            "name": "toggleablecontent",
+                            "name": "toggleableContent",
                             "optional": true,
                             "readonly": false,
                             "type": "PanelPassThroughOptionType",
@@ -18563,7 +27960,13 @@
                         },
                         {
                             "name": "header",
-                            "parameters": [],
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>id</b>: boolean, // Current id state as a string\n  \t <b>class</b>: string, // Style class of the icon\n  }"
+                                }
+                            ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom header template."
                         },
@@ -18655,6 +28058,236 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "PanelMenuPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PanelMenuProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PanelMenuState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PanelMenuContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "PanelMenuPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "PanelMenuProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "headerContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header content's DOM element."
+                        },
+                        {
+                            "name": "headerAction",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header action's DOM element."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the submenuIcon's DOM element."
+                        },
+                        {
+                            "name": "headerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header icon's DOM element."
+                        },
+                        {
+                            "name": "headerLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header label's DOM element."
+                        },
+                        {
+                            "name": "toggleableContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the toggleable content's DOM element."
+                        },
+                        {
+                            "name": "menuContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the menu content's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "PanelMenuPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "PanelMenuState": {
+                    "description": "Defines current inline state in PanelMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "activeItem",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuItem[]",
+                            "default": "",
+                            "description": "Active item path."
+                        }
+                    ],
+                    "methods": []
+                },
+                "PanelMenuContext": {
+                    "description": "Defines current options in PanelMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current active state of menuitem as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state of menuitem as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "PanelMenuExpandedKeys": {
                     "description": "Custom expanded keys metadata.",
                     "relatedProp": "PanelMenuProps.expandedKeys",
@@ -18751,6 +28384,14 @@
                             "type": "string | number",
                             "default": "",
                             "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -18784,6 +28425,32 @@
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom submenu icon template."
+                        },
+                        {
+                            "name": "headericon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>class</b>: any, // Style class of the item icon element.\n  }",
+                                    "description": "header icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom header icon template."
+                        },
+                        {
+                            "name": "itemicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>class</b>: any, // Style class of the item icon element.\n  }",
+                                    "description": "item icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom item icon template."
                         }
                     ]
                 },
@@ -18834,6 +28501,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "PanelMenuPassThroughOptionType": {
+                    "values": "PanelMenuPassThroughAttributes | (options: PanelMenuPassThroughMethodOptions) => PanelMenuPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "password": {
@@ -18853,6 +28528,180 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "PasswordPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PasswordProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PasswordState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "PasswordPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "PasswordProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the InputText component."
+                        },
+                        {
+                            "name": "hideIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hide icon's DOM element."
+                        },
+                        {
+                            "name": "showIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the show icon's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "meter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the meter's DOM element."
+                        },
+                        {
+                            "name": "info",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the info's DOM element."
+                        },
+                        {
+                            "name": "hiddenAccesible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden accessible DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "PasswordPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "PasswordState": {
+                    "description": "Defines current inline state in Password component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current overlay visible state as a boolean."
+                        },
+                        {
+                            "name": "meter",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PasswordMeterStateOptions",
+                            "default": "",
+                            "description": "Current overlay visible state as a boolean."
+                        },
+                        {
+                            "name": "infoText",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current info test state as a string."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "unmasked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current unmasked state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
+                "PasswordMeterStateOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "strength",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current strength of the meter state as a string."
+                        },
+                        {
+                            "name": "width",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current width of the meter state as a string."
+                        }
+                    ],
+                    "methods": []
+                },
                 "PasswordProps": {
                     "description": "Defines valid properties in Password component.",
                     "relatedProp": "",
@@ -18943,7 +28792,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to hide displaying the password as plain text."
+                            "description": "Icon to hide displaying the password as plain text.",
+                            "deprecated": "since v3.27.0. Use 'hideicon' slot."
                         },
                         {
                             "name": "showIcon",
@@ -18951,7 +28801,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to show displaying the password as plain text."
+                            "description": "Icon to show displaying the password as plain text.",
+                            "deprecated": "since v3.27.0. Use 'showicon' slot."
                         },
                         {
                             "name": "disabled",
@@ -19056,6 +28907,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Establishes a string value that labels the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": [],
@@ -19086,13 +28945,25 @@
                         },
                         {
                             "name": "hideicon",
-                            "parameters": [],
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>onClick()</b>: void, // Hide icon click event\n  }"
+                                }
+                            ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom hide icon template."
                         },
                         {
                             "name": "showicon",
-                            "parameters": [],
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>onClick()</b>: void, // Show icon click event\n  }"
+                                }
+                            ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom show icon template."
                         }
@@ -19119,6 +28990,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "PasswordPassThroughOptionType": {
+                    "values": "PasswordPassThroughAttributes | (options: PasswordPassThroughMethodOptions) => PasswordPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "picklist": {
@@ -19138,6 +29017,27 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "PickListPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PickListProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PickListState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "PickListReorderEvent": {
                     "description": "Custom reorder event.",
                     "relatedProp": "PickListEmits.reorder",
@@ -19296,6 +29196,271 @@
                     "methods": [],
                     "extendedTypes": "PickListMoveToTargetEvent"
                 },
+                "PickListPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "PickListProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "sourceControls",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the source controls' DOM element."
+                        },
+                        {
+                            "name": "sourceMoveUpButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "sourceMoveTopButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "sourceMoveDownButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "sourceMoveBottomButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "sourceWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the source wrapper's DOM element."
+                        },
+                        {
+                            "name": "sourceHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the source header's DOM element."
+                        },
+                        {
+                            "name": "sourceList",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the source list's DOM element."
+                        },
+                        {
+                            "name": "buttons",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the buttons' DOM element."
+                        },
+                        {
+                            "name": "moveToTargetButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "moveAllToTargetButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "moveToSourceButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "moveAllToSourceButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "targetWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the target wrapper's DOM element."
+                        },
+                        {
+                            "name": "targetHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the target header's DOM element."
+                        },
+                        {
+                            "name": "targetList",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the target list's DOM element."
+                        },
+                        {
+                            "name": "targetControls",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the target controls' DOM element."
+                        },
+                        {
+                            "name": "targetMoveUpButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "targetMoveTopButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "targetMoveDownButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "targetMoveBottomButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        }
+                    ],
+                    "methods": []
+                },
+                "PickListPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "PickListFocusedState": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "sourceList",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current source list's focused state as a boolean."
+                        },
+                        {
+                            "name": "targetList",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current target list's focused state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
+                "PickListState": {
+                    "description": "Defines current inline state in PickList component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "d_selection",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "[false, false]",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "focusedOptionIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current focused item index as a number."
+                        },
+                        {
+                            "name": "viewChanged",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current view change state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "PickListProps": {
                     "description": "Defines valid properties in PickList component.",
                     "relatedProp": "",
@@ -19467,6 +29632,14 @@
                             "type": "ButtonHTMLAttributes",
                             "default": "",
                             "description": "Uses to pass all properties of the HTMLButtonElement to the move all to source button inside the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -19569,25 +29742,53 @@
                         },
                         {
                             "name": "movetotargeticon",
-                            "parameters": [],
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>viewChanged</b>: boolean, // Whether view change.\n  }",
+                                    "description": "movetotargeticon slot's params."
+                                }
+                            ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom move to target icon template."
                         },
                         {
                             "name": "movealltotargeticon",
-                            "parameters": [],
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>viewChanged</b>: boolean, // Whether view change.\n  }",
+                                    "description": "movealltotargeticon slot's params."
+                                }
+                            ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom move all to target icon template."
                         },
                         {
                             "name": "movetosourceicon",
-                            "parameters": [],
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>viewChanged</b>: boolean, // Whether view change.\n  }",
+                                    "description": "movetosourceicon slot's params."
+                                }
+                            ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom move to source icon template."
                         },
                         {
                             "name": "movealltosourceicon",
-                            "parameters": [],
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>viewChanged</b>: boolean, // Whether view change.\n  }",
+                                    "description": "movealltosourceicon slot's params."
+                                }
+                            ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom move all to source icon template."
                         }
@@ -19705,6 +29906,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "PickListPassThroughOptionType": {
+                    "values": "PickListPassThroughAttributes | (options: PickListPassThroughMethodOptions) => PickListPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "portal/Portal": {
@@ -19777,6 +29986,64 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ProgressBarPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ProgressBarProps",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "ProgressBarPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ProgressBarProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressBarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressBarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the value's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressBarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ProgressBarPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "ProgressBarProps": {
                     "description": "Defines valid properties in ProgressBar component.",
                     "relatedProp": "",
@@ -19804,6 +30071,14 @@
                             "type": "boolean",
                             "default": "true",
                             "description": "Whether to display the progress bar value."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressBarPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -19828,6 +30103,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ProgressBarPassThroughOptionType": {
+                    "values": "ProgressBarPassThroughAttributes | (options: ProgressBarPassThroughMethodOptions) => ProgressBarPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "progressspinner": {
@@ -19847,6 +30130,64 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ProgressSpinnerPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ProgressSpinnerProps",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "ProgressSpinnerPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ProgressSpinnerProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressSpinnerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "spinner",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressSpinnerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the spinner's DOM element."
+                        },
+                        {
+                            "name": "circle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressSpinnerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the circle's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ProgressSpinnerPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "ProgressSpinnerProps": {
                     "description": "Defines valid properties in ProgressSpinner component.",
                     "relatedProp": "",
@@ -19874,6 +30215,14 @@
                             "type": "string",
                             "default": "2s",
                             "description": "Duration of the rotate animation."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressSpinnerPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -19891,6 +30240,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ProgressSpinnerPassThroughOptionType": {
+                    "values": "ProgressSpinnerPassThroughAttributes | (options: ProgressSpinnerPassThroughMethodOptions) => ProgressSpinnerPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "radiobutton": {
@@ -19910,6 +30267,102 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "RadioButtonPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RadioButtonProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RadioButtonState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "RadioButtonPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "undefined.RadioButtonProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RadioButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RadioButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RadioButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "hiddenInputWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RadioButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden accessible DOM element wrapper."
+                        },
+                        {
+                            "name": "hiddenInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RadioButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden accessible DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "RadioButtonPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "RadioButtonState": {
+                    "description": "Defines current inline state in RadioButton component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "RadioButtonProps": {
                     "description": "Defines valid properties in RadioButton component.",
                     "relatedProp": "",
@@ -20049,6 +30502,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "RadioButtonPassThroughOptionType": {
+                    "values": "RadioButtonPassThroughAttributes | (options: RadioButtonPassThroughMethodOptions) => RadioButtonPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "rating": {
@@ -20068,6 +30529,172 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "RatingPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RatingProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RatingState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RatingContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "RatingPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "RatingProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "cancelIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the cancel icon's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "onIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the on icon's DOM element."
+                        },
+                        {
+                            "name": "offIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the off icon's DOM element."
+                        },
+                        {
+                            "name": "hiddenCancelInputWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden cancel inputW wapper's DOM element."
+                        },
+                        {
+                            "name": "hiddenCancelInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden cancel input's DOM element."
+                        },
+                        {
+                            "name": "hiddenItemInputWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden item input wrapper's DOM element."
+                        },
+                        {
+                            "name": "hiddenItemInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden item input's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "RatingPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "RatingState": {
+                    "description": "Defines current inline state in Rating component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "name state as a number."
+                        },
+                        {
+                            "name": "focusedOptionIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "focusedOptionIndex state as a number."
+                        }
+                    ],
+                    "methods": []
+                },
+                "RatingContext": {
+                    "description": "Defines current options in Rating component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current active state of the item as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state of item as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "RatingChangeEvent": {
                     "description": "Custom change event.",
                     "relatedProp": "RatingEmits.change",
@@ -20149,7 +30776,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon for the on state."
+                            "description": "Icon for the on state.",
+                            "deprecated": "since v3.27.0. Use 'onicon' slot."
                         },
                         {
                             "name": "offIcon",
@@ -20157,7 +30785,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon for the off state."
+                            "description": "Icon for the off state.",
+                            "deprecated": "since v3.27.0. Use 'officon' slot."
                         },
                         {
                             "name": "cancelIcon",
@@ -20165,7 +30794,16 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon for the cancelable state."
+                            "description": "Icon for the cancelable state.",
+                            "deprecated": "since v3.27.0. Use 'cancelicon' slot."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -20269,6 +30907,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "RatingPassThroughOptionType": {
+                    "values": "RatingPassThroughAttributes | (options: RatingPassThroughMethodOptions) => RatingPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "ripple": {
@@ -20306,6 +30952,55 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "RowPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RowProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnGroupPassThroughOptions",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "RowPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "undefined.RowProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RowPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "RowPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "RowProps": {
                     "description": "Defines valid properties in Row component.",
                     "relatedProp": "",
@@ -20325,6 +31020,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "RowPassThroughOptionType": {
+                    "values": "RowPassThroughAttributes | (options: RowPassThroughMethodOptions) => RowPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "scrollpanel": {
@@ -20394,7 +31097,7 @@
                             "description": "Uses to pass attributes to the content's DOM element."
                         },
                         {
-                            "name": "barx",
+                            "name": "barX",
                             "optional": true,
                             "readonly": false,
                             "type": "ScrollPanelPassThroughOptionType",
@@ -20402,7 +31105,7 @@
                             "description": "Uses to pass attributes to the horizontal panel's DOM element."
                         },
                         {
-                            "name": "bary",
+                            "name": "barY",
                             "optional": true,
                             "readonly": false,
                             "type": "ScrollPanelPassThroughOptionType",
@@ -20534,6 +31237,78 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ScrollTopPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ScrollTopProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ScrollTopState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "ScrollTopPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ScrollTopProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ScrollTopPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ScrollTopPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ScrollTopPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "ScrollTopState": {
+                    "description": "Defines current inline state in ScrollTop component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current visible state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "ScrollTopProps": {
                     "description": "Defines valid properties in ScrollTop component.",
                     "relatedProp": "",
@@ -20560,7 +31335,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display."
+                            "description": "Icon to display.",
+                            "deprecated": "since v3.27.0. Use 'icon' slot."
                         },
                         {
                             "name": "behavior",
@@ -20569,6 +31345,14 @@
                             "type": "string",
                             "default": "smooth",
                             "description": "Defines the scrolling behaviour, 'smooth' adds an animation and 'auto' scrolls with a jump."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ScrollTopPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -20593,6 +31377,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ScrollTopPassThroughOptionType": {
+                    "values": "ScrollTopPassThroughAttributes | (options: ScrollTopPassThroughMethodOptions) => ScrollTopPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "selectbutton": {
@@ -20612,6 +31404,78 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "SelectButtonPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SelectButtonProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SelectButtonState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SelectButtonContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "SelectButtonPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "SelectButtonProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the button's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "SelectButtonPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "SelectButtonChangeEvent": {
                     "description": "Custom change event.",
                     "relatedProp": "SelectButtonEmits.change",
@@ -20635,6 +31499,44 @@
                     ],
                     "methods": []
                 },
+                "SelectButtonState": {
+                    "description": "Defines current inline state in SelectButton component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focusedIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "FocusedIndex state as a number."
+                        }
+                    ],
+                    "methods": []
+                },
+                "SelectButtonContext": {
+                    "description": "Defines current options in SelectButton component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current active state of the item as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state of item as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "SelectButtonProps": {
                     "description": "Defines valid properties in SelectButton component.",
                     "relatedProp": "",
@@ -20718,6 +31620,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Identifier of the underlying element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -20801,6 +31711,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SelectButtonPassThroughOptionType": {
+                    "values": "SelectButtonPassThroughAttributes | (options: SelectButtonPassThroughMethodOptions) => SelectButtonPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "sidebar": {
@@ -20820,6 +31738,118 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "SidebarPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SidebarProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SidebarState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "SidebarPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "SidebarProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "headerContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header content's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the close button's DOM element."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the close icon's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the mask's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "SidebarPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "SidebarState": {
+                    "description": "Defines current inline state in Sidebar component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "containerVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current container visible state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "SidebarProps": {
                     "description": "Defines valid properties in Sidebar component.",
                     "relatedProp": "",
@@ -20878,7 +31908,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon to display in the sidebar close button."
+                            "description": "Icon to display in the sidebar close button.",
+                            "deprecated": "since v3.27.0. Use 'closeicon' slot."
                         },
                         {
                             "name": "modal",
@@ -20895,6 +31926,14 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "Whether background scroll should be blocked when sidebar is visible."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -20957,6 +31996,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SidebarPassThroughOptionType": {
+                    "values": "SidebarPassThroughAttributes | (options: SidebarPassThroughMethodOptions) => SidebarPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "skeleton": {
@@ -20976,6 +32023,48 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "SkeletonPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SkeletonProps",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "SkeletonPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "SkeletonProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SkeletonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "SkeletonPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "SkeletonProps": {
                     "description": "Defines valid properties in Skeleton component.",
                     "relatedProp": "",
@@ -21027,6 +32116,14 @@
                             "type": "\"none\" | \"wave\"",
                             "default": "wave",
                             "description": "Type of the animation."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SkeletonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -21044,6 +32141,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SkeletonPassThroughOptionType": {
+                    "values": "SkeletonPassThroughAttributes | (options: SkeletonPassThroughMethodOptions) => SkeletonPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "slider": {
@@ -21063,6 +32168,80 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "SliderPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SliderProps",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "SliderPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "SliderProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SliderPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "range",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SliderPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the range's DOM element."
+                        },
+                        {
+                            "name": "handle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SliderPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the handle's DOM element."
+                        },
+                        {
+                            "name": "startHandler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SliderPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the start handler's DOM element."
+                        },
+                        {
+                            "name": "endHandler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SliderPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the end handler's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "SliderPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "SliderSlideEndEvent": {
                     "description": "Custom slide end event.",
                     "relatedProp": "SliderEmits.slideend",
@@ -21169,6 +32348,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Used to define a string that labels the element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SliderPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -21226,6 +32413,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SliderPassThroughOptionType": {
+                    "values": "SliderPassThroughAttributes | (options: SliderPassThroughMethodOptions) => SliderPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "speeddial": {
@@ -21245,6 +32440,172 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "SpeedDialPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SpeedDialProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SpeedDialState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SpeedDialContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "SpeedDialPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "SpeedDialProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SpeedDialPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SpeedDialPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the menu's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SpeedDialPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the menu item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SpeedDialPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "actionIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SpeedDialPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the action icon's DOM element."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SpeedDialPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the mask's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "SpeedDialPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "SpeedDialState": {
+                    "description": "Defines current inline state in SpeedDial component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "List of items' id."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current visible state as a boolean."
+                        },
+                        {
+                            "name": "isItemClicked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current click state of component as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focus state as a boolean."
+                        },
+                        {
+                            "name": "focusedOptionIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "-1",
+                            "description": "Current focused option index as a number."
+                        }
+                    ],
+                    "methods": []
+                },
+                "SpeedDialContext": {
+                    "description": "Defines current options in SpeedDial component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current active state of menuitem as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "SpeedDialTooltipOptions": {
                     "description": "Defines tooltip options.",
                     "relatedProp": "SpeedDialProps.tooltipOptions",
@@ -21379,8 +32740,9 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-plus",
-                            "description": "Show icon of the button element."
+                            "default": "",
+                            "description": "Show icon of the button element.",
+                            "deprecated": "since v3.27.0. Use 'showicon' slot."
                         },
                         {
                             "name": "hideIcon",
@@ -21388,7 +32750,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Hide icon of the button element."
+                            "description": "Hide icon of the button element.",
+                            "deprecated": "since v3.27.0. Use 'hideicon' slot."
                         },
                         {
                             "name": "rotateAnimation",
@@ -21437,6 +32800,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Identifier of the underlying list element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SpeedDialPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -21471,6 +32842,19 @@
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom button template."
+                        },
+                        {
+                            "name": "icon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>visible</b>: boolean, // undefined\n  }",
+                                    "description": "icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom icon template."
                         }
                     ]
                 },
@@ -21533,6 +32917,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SpeedDialPassThroughOptionType": {
+                    "values": "SpeedDialPassThroughAttributes | (options: SpeedDialPassThroughMethodOptions) => SpeedDialPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "splitbutton": {
@@ -21552,6 +32944,94 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "SplitButtonPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SplitButtonProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SplitButtonState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "SplitButtonPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "SplitButtonProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the button's DOM element."
+                        },
+                        {
+                            "name": "menuButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to the TieredMenu component."
+                        }
+                    ],
+                    "methods": []
+                },
+                "SplitButtonPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "SplitButtonState": {
+                    "description": "Defines current inline state in SplitButton component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "isBlocked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current blocked state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "SplitButtonProps": {
                     "description": "Defines valid properties in SplitButton component.",
                     "relatedProp": "",
@@ -21570,7 +33050,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Name of the icon."
+                            "description": "Name of the icon.",
+                            "deprecated": "since v3.27.0. Use 'icon' slot."
                         },
                         {
                             "name": "model",
@@ -21650,7 +33131,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Name of the menu button icon."
+                            "description": "Name of the menu button icon.",
+                            "deprecated": "since v3.27.0. Use 'menubuttonicon' slot."
                         },
                         {
                             "name": "severity",
@@ -21707,6 +33189,14 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "Add a plain textual class to the button without a background initially."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -21721,6 +33211,18 @@
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Button part of the content can easily be customized with the default slot instead of using the built-in modes."
+                        },
+                        {
+                            "name": "icon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom menu button icon template."
+                        },
+                        {
+                            "name": "menubuttonicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom menu button icon template."
                         }
                     ]
                 },
@@ -21745,6 +33247,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SplitButtonPassThroughOptionType": {
+                    "values": "SplitButtonPassThroughAttributes | (options: SplitButtonPassThroughMethodOptions) => SplitButtonPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "splitter": {
@@ -21787,7 +33297,7 @@
                 },
                 "SplitterResizeStartEvent": {
                     "description": "Custom resize start event.",
-                    "relatedProp": "SplitterEmits.resizestar",
+                    "relatedProp": "SplitterEmits.resizestart",
                     "props": [
                         {
                             "name": "originalEvent",
@@ -21810,7 +33320,7 @@
                 },
                 "SplitterResizeEndEvent": {
                     "description": "Custom resize end event.",
-                    "relatedProp": "undefined.PickListEmits.resizeend",
+                    "relatedProp": "SplitterEmits.resizeend",
                     "props": [
                         {
                             "name": "originalEvent",
@@ -21852,7 +33362,7 @@
                             "description": "Uses to pass attributes to the gutter's DOM element."
                         },
                         {
-                            "name": "gutterhandler",
+                            "name": "gutterHandler",
                             "optional": true,
                             "readonly": false,
                             "type": "SplitterPassThroughOptionType",
@@ -21964,7 +33474,7 @@
                     "props": [],
                     "methods": [
                         {
-                            "name": "resizestar",
+                            "name": "resizestart",
                             "parameters": [
                                 {
                                     "name": "event",
@@ -22139,6 +33649,88 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "StepsPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "StepsProps",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "StepsPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "StepsProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "step",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the step's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "StepsPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "StepsProps": {
                     "description": "Defines valid properties in Steps component.",
                     "relatedProp": "",
@@ -22174,6 +33766,14 @@
                             "type": "boolean",
                             "default": "true",
                             "description": "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -22205,6 +33805,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "StepsPassThroughOptionType": {
+                    "values": "StepsPassThroughAttributes | (options: StepsPassThroughMethodOptions) => StepsPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "styleclass": {
@@ -22330,6 +33938,140 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "TabMenuPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabMenuProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabMenuState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabMenuContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabMenuPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "TabMenuProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "inkbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the inkbar's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabMenuPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabMenuState": {
+                    "description": "Defines current inline state in TabMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "d_activeIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current active index state as a number."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TabMenuContext": {
+                    "description": "Defines current options in TabMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "order",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Order of the menuitem"
+                        }
+                    ],
+                    "methods": []
+                },
                 "TabMenuChangeEvent": {
                     "description": "Custom change event.",
                     "relatedProp": "TabMenuEmits['tab-change']",
@@ -22396,6 +34138,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Identifier of the underlying input element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -22417,6 +34167,19 @@
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom content for each item."
+                        },
+                        {
+                            "name": "itemicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>class</b>: any, // Style class of the item icon element.\n  }",
+                                    "description": "item icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom item icon template."
                         }
                     ]
                 },
@@ -22441,6 +34204,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TabMenuPassThroughOptionType": {
+                    "values": "TabMenuPassThroughAttributes | (options: TabMenuPassThroughMethodOptions) => TabMenuPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "tabpanel": {
@@ -22502,7 +34273,7 @@
                             "description": "Uses to pass attributes to the header's DOM element."
                         },
                         {
-                            "name": "headeraction",
+                            "name": "headerAction",
                             "optional": true,
                             "readonly": false,
                             "type": "TabPanelPassThroughOptionType",
@@ -22510,7 +34281,7 @@
                             "description": "Uses to pass attributes to the header action's DOM element."
                         },
                         {
-                            "name": "headertitle",
+                            "name": "headerTitle",
                             "optional": true,
                             "readonly": false,
                             "type": "TabPanelPassThroughOptionType",
@@ -22558,8 +34329,7 @@
                             "readonly": false,
                             "type": "any",
                             "default": "",
-                            "description": "Inline style of the tab header.",
-                            "deprecated": "since v3.26.0. Use 'pt' property instead."
+                            "description": "Inline style of the tab header."
                         },
                         {
                             "name": "headerClass",
@@ -22567,8 +34337,7 @@
                             "readonly": false,
                             "type": "any",
                             "default": "",
-                            "description": "Style class of the tab header.",
-                            "deprecated": "since v3.26.0. Use 'pt' property instead."
+                            "description": "Style class of the tab header."
                         },
                         {
                             "name": "headerProps",
@@ -22594,8 +34363,7 @@
                             "readonly": false,
                             "type": "any",
                             "default": "",
-                            "description": "Inline style of the tab content.",
-                            "deprecated": "since v3.26.0. Use 'pt' property instead."
+                            "description": "Inline style of the tab content."
                         },
                         {
                             "name": "contentClass",
@@ -22603,8 +34371,7 @@
                             "readonly": false,
                             "type": "any",
                             "default": "",
-                            "description": "Style class of the tab content.",
-                            "deprecated": "since v3.26.0. Use 'pt' property instead."
+                            "description": "Style class of the tab content."
                         },
                         {
                             "name": "contentProps",
@@ -22637,23 +34404,21 @@
                 "TabPanelSlots": {
                     "description": "Defines valid slots in TabPanel slots.",
                     "relatedProp": "",
-                    "props": [
+                    "props": [],
+                    "methods": [
                         {
                             "name": "default",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "Function",
-                            "default": ""
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom content template."
                         },
                         {
                             "name": "header",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "Function",
-                            "default": ""
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom header template."
                         }
-                    ],
-                    "methods": []
+                    ]
                 },
                 "TabPanelEmits": {
                     "relatedProp": "",
@@ -22749,7 +34514,7 @@
                             "description": "Uses to pass attributes to the root's DOM element."
                         },
                         {
-                            "name": "navcontainer",
+                            "name": "navContainer",
                             "optional": true,
                             "readonly": false,
                             "type": "TabViewPassThroughOptionType",
@@ -22757,7 +34522,7 @@
                             "description": "Uses to pass attributes to the nav container's DOM element."
                         },
                         {
-                            "name": "navcontent",
+                            "name": "navContent",
                             "optional": true,
                             "readonly": false,
                             "type": "TabViewPassThroughOptionType",
@@ -22781,7 +34546,7 @@
                             "description": "Uses to pass attributes to the inkbar's DOM element."
                         },
                         {
-                            "name": "prevbutton",
+                            "name": "previousButton",
                             "optional": true,
                             "readonly": false,
                             "type": "TabViewPassThroughOptionType",
@@ -22789,7 +34554,7 @@
                             "description": "Uses to pass attributes to the previous button's DOM element."
                         },
                         {
-                            "name": "previcon",
+                            "name": "previousIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "TabViewPassThroughOptionType",
@@ -22797,15 +34562,15 @@
                             "description": "Uses to pass attributes to the previous button icon's DOM element."
                         },
                         {
-                            "name": "nextbutton",
+                            "name": "nextButton",
                             "optional": true,
                             "readonly": false,
                             "type": "TabViewPassThroughOptionType",
                             "default": "",
-                            "description": "Uses to pass attributes to the nex button's DOM element."
+                            "description": "Uses to pass attributes to the next button's DOM element."
                         },
                         {
-                            "name": "nexticon",
+                            "name": "nextIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "TabViewPassThroughOptionType",
@@ -22813,7 +34578,7 @@
                             "description": "Uses to pass attributes to the next button icon's DOM element."
                         },
                         {
-                            "name": "panelcontainer",
+                            "name": "panelContainer",
                             "optional": true,
                             "readonly": false,
                             "type": "TabViewPassThroughOptionType",
@@ -22937,6 +34702,24 @@
                             "description": "Uses to pass all properties of the HTMLButtonElement to the next button.",
                             "deprecated": "since v3.26.0. Use 'pt' property instead."
                         },
+                        {
+                            "name": "prevIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Previous icon of the scrollable tabview.",
+                            "deprecated": "since v3.27.0. Use 'previousicon' slot."
+                        },
+                        {
+                            "name": "nextIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Next icon of the scrollable tabview.",
+                            "deprecated": "since v3.27.0. Use 'next' slot."
+                        },
                         {
                             "name": "pt",
                             "optional": true,
@@ -22960,7 +34743,7 @@
                             "description": "Default slot to detect TabPanel components."
                         },
                         {
-                            "name": "previcon",
+                            "name": "previousicon",
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Previous button icon template for the scrollable component."
@@ -22979,17 +34762,17 @@
                     "props": [],
                     "methods": [
                         {
-                            "name": "update:modelValue",
+                            "name": "update:activeIndex",
                             "parameters": [
                                 {
-                                    "name": "value",
+                                    "name": "index",
                                     "optional": false,
                                     "type": "number",
-                                    "description": "New value."
+                                    "description": "Current activeIndex."
                                 }
                             ],
                             "returnType": "void",
-                            "description": "Emitted when the value changes."
+                            "description": "Emitted when the activeIndex changes."
                         },
                         {
                             "name": "tab-change",
@@ -23047,6 +34830,64 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "TagPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TagProps",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "TagPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "TagProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TagPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TagPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TagPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the value's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TagPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "TagProps": {
                     "description": "Defines valid properties in Tag component.",
                     "relatedProp": "",
@@ -23081,7 +34922,16 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon of the tag to display next to the value."
+                            "description": "Icon of the tag to display next to the value.",
+                            "deprecated": "since v3.27.0. Use 'icon' slot."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TagPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -23096,6 +34946,12 @@
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom content template"
+                        },
+                        {
+                            "name": "icon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom icon template"
                         }
                     ]
                 },
@@ -23106,6 +34962,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TagPassThroughOptionType": {
+                    "values": "TagPassThroughAttributes | (options: TagPassThroughMethodOptions) => TagPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "terminal": {
@@ -23125,6 +34989,142 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "TerminalPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TerminalProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TerminalState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "TerminalPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "TerminalProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "welcomeMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the welcome message's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "commands",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the commands' DOM element."
+                        },
+                        {
+                            "name": "prompt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the prompt's DOM element."
+                        },
+                        {
+                            "name": "command",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the command's DOM element."
+                        },
+                        {
+                            "name": "response",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the response's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "commandText",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the command text's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TerminalPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "TerminalState": {
+                    "description": "Defines current inline state in Terminal component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "commandText",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current command text as a string."
+                        },
+                        {
+                            "name": "commands",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string[]",
+                            "default": "",
+                            "description": "Current commands as an array."
+                        }
+                    ],
+                    "methods": []
+                },
                 "TerminalProps": {
                     "description": "Defines valid properties in Terminal component.",
                     "relatedProp": "",
@@ -23144,6 +35144,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Prompt text for each command."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -23161,6 +35169,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TerminalPassThroughOptionType": {
+                    "values": "TerminalPassThroughAttributes | (options: TerminalPassThroughMethodOptions) => TerminalPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "terminalservice": {
@@ -23248,6 +35264,48 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "TextareaPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TextareaProps",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "TextareaPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "TextareaProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TextareaPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TextareaPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "TextareaProps": {
                     "description": "Defines valid properties in Textarea component. In addition to these, all properties of TextareaHTMLAttributes can be used in this component.",
                     "relatedProp": "",
@@ -23267,6 +35325,14 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "When present, height of textarea changes as being typed."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TextareaPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": [],
@@ -23293,6 +35359,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TextareaPassThroughOptionType": {
+                    "values": "TextareaPassThroughAttributes | (options: TextareaPassThroughMethodOptions) => TextareaPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "tieredmenu": {
@@ -23319,6 +35393,227 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "TieredMenuPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TieredMenuProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TieredMenuState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TieredMenuContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "TieredMenuPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "TieredMenuProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the submenu icon's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TieredMenuPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "TieredMenuFocusedItemInfo": {
+                    "description": "Defines focused item info",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Active item index"
+                        },
+                        {
+                            "name": "level",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Active item level"
+                        },
+                        {
+                            "name": "parentKey",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Parent key info"
+                        }
+                    ],
+                    "methods": []
+                },
+                "TieredMenuState": {
+                    "description": "Defines current inline state in TieredMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focus state as a boolean."
+                        },
+                        {
+                            "name": "focusedItemInfo",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TieredMenuFocusedItemInfo",
+                            "default": "",
+                            "description": "Current focused item info."
+                        },
+                        {
+                            "name": "activeItemPath",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TieredMenuFocusedItemInfo[]",
+                            "default": "",
+                            "description": "Active item path."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Current visible state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TieredMenuContext": {
+                    "description": "Defines current options in TieredMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current active state of menuitem as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state of menuitem as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "TieredMenuProps": {
                     "description": "Defines valid properties in TieredMenuMenu component.",
                     "relatedProp": "",
@@ -23402,6 +35697,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Identifier of the underlying menu element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -23435,6 +35738,19 @@
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom submenu icon template."
+                        },
+                        {
+                            "name": "itemicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>class</b>: any, // Style class of the item icon element.\n  }",
+                                    "description": "item icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom item icon template."
                         }
                     ]
                 },
@@ -23496,6 +35812,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TieredMenuPassThroughOptionType": {
+                    "values": "TieredMenuPassThroughAttributes | (options: TieredMenuPassThroughMethodOptions) => TieredMenuPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "timeline": {
@@ -23515,6 +35839,82 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "TimelinePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "TimelineProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "event",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the event's DOM element."
+                        },
+                        {
+                            "name": "opposite",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the opposite's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "marker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the marker's DOM element."
+                        },
+                        {
+                            "name": "connector",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the connector's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TimelinePassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "TimelineProps": {
                     "description": "Defines valid properties in Timeline component.",
                     "relatedProp": "",
@@ -23550,6 +35950,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Name of the field that uniquely identifies the a record in the data."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -23619,6 +36027,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TimelinePassThroughOptionType": {
+                    "values": "TimelinePassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "toast": {
@@ -23638,6 +36054,135 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ToastPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ToastProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ToastState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "ToastPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ToastProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "message",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the message's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "text",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the text's DOM element."
+                        },
+                        {
+                            "name": "summary",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the summary's DOM element."
+                        },
+                        {
+                            "name": "detail",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the detail's DOM element."
+                        },
+                        {
+                            "name": "buttonContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the button container's DOM element."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the button's DOM element."
+                        },
+                        {
+                            "name": "buttonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the button icon's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ToastPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
                 "ToastMessageOptions": {
                     "description": "Defines message options in Toast component.",
                     "relatedProp": "",
@@ -23646,7 +36191,7 @@
                             "name": "severity",
                             "optional": true,
                             "readonly": false,
-                            "type": "string",
+                            "type": "\"error\" | \"success\" | \"info\" | \"warn\"",
                             "default": "info",
                             "description": "Severity level of the message."
                         },
@@ -23722,6 +36267,21 @@
                     ],
                     "methods": []
                 },
+                "ToastState": {
+                    "description": "Defines current inline state in Toast component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "messages",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "Current messages."
+                        }
+                    ],
+                    "methods": []
+                },
                 "ToastProps": {
                     "description": "Defines valid properties in Toast component.",
                     "relatedProp": "",
@@ -23771,40 +36331,45 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-times",
-                            "description": "Icon to display in the toast close button."
+                            "default": "",
+                            "description": "Icon to display in the toast close button.",
+                            "deprecated": "since v3.27.0. Use 'closeicon' slot."
                         },
                         {
                             "name": "infoIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-info-circle",
-                            "description": "Icon to display in the toast with info severity."
+                            "default": "",
+                            "description": "Icon to display in the toast with info severity.",
+                            "deprecated": "since v3.27.0. Use 'icon' slot."
                         },
                         {
                             "name": "warnIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-exclamation-triangle",
-                            "description": "Icon to display in the toast with warn severity."
+                            "default": "",
+                            "description": "Icon to display in the toast with warn severity.",
+                            "deprecated": "since v3.27.0. Use 'icon' slot."
                         },
                         {
                             "name": "errorIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-times",
-                            "description": "Icon to display in the toast with error severity."
+                            "default": "",
+                            "description": "Icon to display in the toast with error severity.",
+                            "deprecated": "since v3.27.0. Use 'icon' slot."
                         },
                         {
                             "name": "successIcon",
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-check",
-                            "description": "Icon to display in the toast with success severity."
+                            "default": "",
+                            "description": "Icon to display in the toast with success severity.",
+                            "deprecated": "since v3.27.0. Use 'icon' slot."
                         },
                         {
                             "name": "closeButtonProps",
@@ -23812,7 +36377,16 @@
                             "readonly": false,
                             "type": "ButtonHTMLAttributes",
                             "default": "",
-                            "description": "Uses to pass all properties of the HTMLButtonElement to the close button."
+                            "description": "Uses to pass all properties of the HTMLButtonElement to the close button.",
+                            "deprecated": "since v3.26.0. Use 'pt' property."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -23834,6 +36408,18 @@
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom message template."
+                        },
+                        {
+                            "name": "icon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom icon template."
+                        },
+                        {
+                            "name": "closeicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom close icon template."
                         }
                     ]
                 },
@@ -23871,6 +36457,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ToastPassThroughOptionType": {
+                    "values": "ToastPassThroughAttributes | (options: ToastPassThroughMethodOptions) => ToastPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "toastservice-usetoast": {
@@ -23939,6 +36533,102 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "ToggleButtonPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ToggleButtonProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ToggleButtonState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "ToggleButtonPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "ToggleButtonProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "hiddenInputWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden input wrapper's DOM element."
+                        },
+                        {
+                            "name": "hiddenInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden input's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "ToggleButtonPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "ToggleButtonState": {
+                    "description": "Defines current inline state in ToggleButton component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Focused state as a number."
+                        }
+                    ],
+                    "methods": []
+                },
                 "ToggleButtonProps": {
                     "description": "Defines valid properties in ToggleButton component.",
                     "relatedProp": "",
@@ -23957,7 +36647,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon for the on state."
+                            "description": "Icon for the on state.",
+                            "deprecated": "since v3.27.0. Use 'icon' slot."
                         },
                         {
                             "name": "offIcon",
@@ -23965,7 +36656,8 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Icon for the off state."
+                            "description": "Icon for the off state.",
+                            "deprecated": "since v3.27.0. Use 'icon' slot."
                         },
                         {
                             "name": "onLabel",
@@ -24054,6 +36746,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Establishes a string value that labels the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -24062,7 +36762,20 @@
                     "description": "Defines valid slots in ToggleButton component.",
                     "relatedProp": "",
                     "props": [],
-                    "methods": []
+                    "methods": [
+                        {
+                            "name": "icon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>value</b>: any, // Current value\n  \t <b>class</b>: any, // Icon style class\n  }"
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom icon template."
+                        }
+                    ]
                 },
                 "ToggleButtonEmits": {
                     "description": "Defines valid emits in ToggleButton component.",
@@ -24124,6 +36837,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ToggleButtonPassThroughOptionType": {
+                    "values": "ToggleButtonPassThroughAttributes | (options: ToggleButtonPassThroughMethodOptions) => ToggleButtonPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "toolbar": {
@@ -24170,28 +36891,28 @@
                             "description": "Uses to pass attributes to the root's DOM element."
                         },
                         {
-                            "name": "groupleft",
+                            "name": "start",
                             "optional": true,
                             "readonly": false,
                             "type": "ToolbarPassThroughOptionType",
                             "default": "",
-                            "description": "Uses to pass attributes to the groupleft's DOM element."
+                            "description": "Uses to pass attributes to the start's DOM element."
                         },
                         {
-                            "name": "groupcenter",
+                            "name": "center",
                             "optional": true,
                             "readonly": false,
                             "type": "ToolbarPassThroughOptionType",
                             "default": "",
-                            "description": "Uses to pass attributes to the groupcenter's DOM element."
+                            "description": "Uses to pass attributes to the center's DOM element."
                         },
                         {
-                            "name": "groupright",
+                            "name": "end",
                             "optional": true,
                             "readonly": false,
                             "type": "ToolbarPassThroughOptionType",
                             "default": "",
-                            "description": "Uses to pass attributes to the groupright's DOM element."
+                            "description": "Uses to pass attributes to the right's DOM element."
                         }
                     ],
                     "methods": []
@@ -24333,6 +37054,22 @@
                             "type": "boolean",
                             "default": "true",
                             "description": "Automatically adjusts the element position when there is not enough space on the selected position."
+                        },
+                        {
+                            "name": "showDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "When present, it adds a custom delay to the tooltip's display."
+                        },
+                        {
+                            "name": "hideDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "When present, it adds a custom delay to the tooltip's hiding."
                         }
                     ],
                     "methods": []
@@ -24428,6 +37165,34 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "TreePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "TreeNode": {
                     "description": "Custom TreeNode metadata.",
                     "relatedProp": "",
@@ -24563,6 +37328,224 @@
                     ],
                     "methods": []
                 },
+                "TreePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "TreeProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "loadingOverlay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the loading overlay's DOM element."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the loading icon's DOM element."
+                        },
+                        {
+                            "name": "filterContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the filter container's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "searchIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the search icon's DOM element."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "node",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the node's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "toggler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the toggler's DOM element."
+                        },
+                        {
+                            "name": "togglerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the toggler icon's DOM element."
+                        },
+                        {
+                            "name": "checkboxContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the checkbox container's DOM element."
+                        },
+                        {
+                            "name": "checkbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the checkbox's DOM element."
+                        },
+                        {
+                            "name": "checkboxIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the checkbox icon's DOM element."
+                        },
+                        {
+                            "name": "nodeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the node icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "subgroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the subgroup's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TreePassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "TreeState": {
+                    "description": "Defines current inline state in Tree component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "d_expandedKeys",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeExpandedKeys",
+                            "default": "",
+                            "description": "Current expanded keys state."
+                        },
+                        {
+                            "name": "filterValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Current filter value state as a string."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TreeContext": {
+                    "description": "Defines current options in Tree component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "expanded",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current expanded state of the node as a boolean."
+                        },
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current selected state of the node as a boolean."
+                        },
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current checked state of the node as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "TreeProps": {
                     "description": "Defines valid properties in Tree component.",
                     "relatedProp": "",
@@ -24620,8 +37603,9 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-spin",
-                            "description": "Icon to display when tree is loading."
+                            "default": "",
+                            "description": "Icon to display when tree is loading.",
+                            "deprecated": "since v3.27.0. Use 'loadingicon' slot."
                         },
                         {
                             "name": "filter",
@@ -24686,6 +37670,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Identifier of the underlying menu element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -24825,6 +37817,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TreePassThroughOptionType": {
+                    "values": "TreePassThroughAttributes | (options: TreePassThroughMethodOptions) => TreePassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "treeselect": {
@@ -24844,6 +37844,182 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "TreeSelectPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeSelectProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeSelectState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "TreeSelectPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "TreeSelectProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "labelContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label container's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "token",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the token's DOM element."
+                        },
+                        {
+                            "name": "tokenLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the token label's DOM element."
+                        },
+                        {
+                            "name": "trigger",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the trigger's DOM element."
+                        },
+                        {
+                            "name": "triggerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the trigger icon's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "tree",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the trigger's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the empty message's DOM element."
+                        },
+                        {
+                            "name": "hiddenInputWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden input wrapper's DOM element."
+                        },
+                        {
+                            "name": "hiddenInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden input's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TreeSelectPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "TreeSelectState": {
+                    "description": "Defines current inline state in TreeSelect component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current overlay visible state as a boolean."
+                        },
+                        {
+                            "name": "expandedKeys",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeExpandedKeys",
+                            "default": "",
+                            "description": "Current expanded keys state."
+                        }
+                    ],
+                    "methods": []
+                },
                 "TreeSelectProps": {
                     "description": "Defines valid properties in TreeSelect component.",
                     "relatedProp": "",
@@ -24991,6 +38167,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Establishes a string value that labels the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -25049,7 +38233,40 @@
                             "name": "indicator",
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom indicator template.",
+                            "deprecated": "since v3.27.0. Use 'triggericon' slot."
+                        },
+                        {
+                            "name": "triggericon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom indicator template."
+                        },
+                        {
+                            "name": "itemtogglericon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>node</b>: any, // Node instance\n  \t <b>expanded</b>: TreeNode, // Expanded state of the node\n  }",
+                                    "description": "item toggler icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom item toggler icon template."
+                        },
+                        {
+                            "name": "itemcheckboxicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>checked</b>: boolean, // Check state of the node\n  \t <b>partialChecked</b>: boolean, // Partial check state of the node\n  }",
+                                    "description": "item checkbox icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom item checkbox icon template."
                         }
                     ]
                 },
@@ -25163,6 +38380,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TreeSelectPassThroughOptionType": {
+                    "values": "TreeSelectPassThroughAttributes | (options: TreeSelectPassThroughMethodOptions) => TreeSelectPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "treetable": {
@@ -25182,6 +38407,27 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "TreeTablePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeTableProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeTableState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "TreeTableFilterMetaData": {
                     "description": "Custom treetable filter metadata.",
                     "relatedProp": "",
@@ -25530,6 +38776,281 @@
                     ],
                     "methods": []
                 },
+                "TreeTablePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "TreeTableProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "loadingWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the loading wrapper's DOM element."
+                        },
+                        {
+                            "name": "loadingOverlay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the loading overlay's DOM element."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the loading icon's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "paginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the Paginator component."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "table",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the table's DOM element."
+                        },
+                        {
+                            "name": "thead",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the thead's DOM element."
+                        },
+                        {
+                            "name": "headerRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header row's DOM element."
+                        },
+                        {
+                            "name": "headerCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header cell's DOM element."
+                        },
+                        {
+                            "name": "tbody",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the tbody's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the empty message's DOM element."
+                        },
+                        {
+                            "name": "bodyCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the body cell's DOM element."
+                        },
+                        {
+                            "name": "tfoot",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the tfoot's DOM element."
+                        },
+                        {
+                            "name": "footerRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the footer row's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "resizeHelper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the resize helper's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TreeTablePassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "TreeTableState": {
+                    "description": "Defines current inline state in TreeTable component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "d_first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current index of first record as a number."
+                        },
+                        {
+                            "name": "d_rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current number of rows to display in new page as a number."
+                        },
+                        {
+                            "name": "d_sortField",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | string | Function",
+                            "default": "",
+                            "description": "Current sort field."
+                        },
+                        {
+                            "name": "d_sortOrder",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Current order to sort the data by default."
+                        },
+                        {
+                            "name": "d_multiSortMeta",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeTableSortMeta[]",
+                            "default": "",
+                            "description": "Current sortmeta objects to sort the data."
+                        },
+                        {
+                            "name": "d_groupRowsSortMeta",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeTableSortMeta",
+                            "default": "",
+                            "description": "Current group sortmeta objects to sort the data."
+                        },
+                        {
+                            "name": "d_selectionKeys",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "Current keys of selected rows."
+                        },
+                        {
+                            "name": "d_expandedRowKeys",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "Current keys of rows in expanded state."
+                        },
+                        {
+                            "name": "d_columnOrder",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string[]",
+                            "default": "",
+                            "description": "Current order of the columns."
+                        },
+                        {
+                            "name": "d_editingRowKeys",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Current keys of editing rows."
+                        },
+                        {
+                            "name": "d_editingMeta",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Current editing meta data."
+                        },
+                        {
+                            "name": "d_filters",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeTableFilterMeta",
+                            "default": "",
+                            "description": "Current filters object."
+                        },
+                        {
+                            "name": "d_editing",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current editing as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "TreeTableProps": {
                     "description": "Defines valid properties in TreeTable component.",
                     "relatedProp": "",
@@ -25675,8 +39196,9 @@
                             "optional": true,
                             "readonly": false,
                             "type": "string",
-                            "default": "pi pi-spinner",
-                            "description": "The icon to show while indicating data load is in progress."
+                            "default": "",
+                            "description": "The icon to show while indicating data load is in progress.",
+                            "deprecated": "since v3.27.0. Use 'loadingicon' slot."
                         },
                         {
                             "name": "rowHover",
@@ -25837,6 +39359,14 @@
                             "type": "any",
                             "default": "",
                             "description": "Props to pass to the table element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -25875,6 +39405,60 @@
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom empty template."
+                        },
+                        {
+                            "name": "loadingicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom loading icon template."
+                        },
+                        {
+                            "name": "togglericon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom toggler icon template."
+                        },
+                        {
+                            "name": "checkboxicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom checkbox icon template."
+                        },
+                        {
+                            "name": "sorticon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>sorted</b>: TreeNode, // Whether or not column is sorted\n  \t <b>sortOrder</b>: boolean, // Current sort order\n  }"
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom sort icon template."
+                        },
+                        {
+                            "name": "paginatorfirstpagelinkicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom paginator first page link icon template."
+                        },
+                        {
+                            "name": "paginatorprevpagelinkicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom paginator previous page link icon template."
+                        },
+                        {
+                            "name": "paginatornextpagelinkicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom paginator next page link icon template."
+                        },
+                        {
+                            "name": "paginatorlastpagelinkicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom paginator last page link icon template."
                         }
                     ]
                 },
@@ -26080,6 +39664,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TreeTablePassThroughOptionType": {
+                    "values": "TreeTablePassThroughAttributes | (options: TreeTablePassThroughMethodOptions) => TreeTablePassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "tristatecheckbox": {
@@ -26099,6 +39691,164 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "TriStateCheckboxPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TriStateCheckboxProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TriStateCheckboxState",
+                            "default": ""
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TriStateCheckboxContext",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
+                "TriStateCheckboxPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "TriStateCheckboxProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "checbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the checkbox box's DOM element."
+                        },
+                        {
+                            "name": "checkIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the check icon's DOM element."
+                        },
+                        {
+                            "name": "uncheckIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the uncheck icon's DOM element."
+                        },
+                        {
+                            "name": "nullableIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the nullable icon's DOM element."
+                        },
+                        {
+                            "name": "hiddenInputWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden input wrapper's DOM element."
+                        },
+                        {
+                            "name": "hiddenInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the hidden input's DOM element."
+                        },
+                        {
+                            "name": "srOnlyAria",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the sr only aria's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TriStateCheckboxPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "TriStateCheckboxState": {
+                    "description": "Defines current inline state in TriStateCheckbox component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Focused state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
+                "TriStateCheckboxContext": {
+                    "description": "Defines current options in TriStateCheckbox component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current active state as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current disabled state as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
                 "TriStateCheckboxProps": {
                     "description": "Defines valid properties in TriStateCheckbox component.",
                     "relatedProp": "",
@@ -26141,7 +39891,8 @@
                             "readonly": false,
                             "type": "InputHTMLAttributes",
                             "default": "",
-                            "description": "Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component."
+                            "description": "Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.",
+                            "deprecated": "since v3.26.0. Use 'pt' property."
                         },
                         {
                             "name": "aria-labelledby",
@@ -26158,6 +39909,14 @@
                             "type": "string",
                             "default": "",
                             "description": "Establishes a string value that labels the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": []
@@ -26208,6 +39967,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TriStateCheckboxPassThroughOptionType": {
+                    "values": "TriStateCheckboxPassThroughAttributes | (options: TriStateCheckboxPassThroughMethodOptions) => TriStateCheckboxPassThroughAttributes | null | undefined"
+                }
+            }
         }
     },
     "ts-helpers": {
@@ -26235,6 +40002,9 @@
                 },
                 "Nullable": {
                     "values": "T | null | undefined"
+                },
+                "DefaultPTOptions": {
+                    "values": "T | (instance: VNode) => undefined | undefined"
                 }
             }
         }
@@ -26372,6 +40142,27 @@
             "methodDescription": "Defines methods that can be accessed by the component's reference.",
             "typeDescription": "Defines the custom types used by the module.",
             "values": {
+                "VirtualScrollerPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "VirtualScrollerProps",
+                            "default": ""
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "VirtualScrollerState",
+                            "default": ""
+                        }
+                    ],
+                    "methods": []
+                },
                 "VirtualScrollerScrollIndexChangeEvent": {
                     "description": "Custom scroll index change event.",
                     "relatedProp": "VirtualScrollerEmits['scroll-index-change']",
@@ -26537,6 +40328,153 @@
                     "methods": [],
                     "extendedBy": "VirtualScrollerLoaderOptions"
                 },
+                "VirtualScrollerPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "VirtualScrollerProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "spacer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the spacer's DOM element."
+                        },
+                        {
+                            "name": "loader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the loader's DOM element."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the loading icon's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
+                "VirtualScrollerPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "VirtualScrollerState": {
+                    "description": "Defines current inline state in VirtualScroller component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "First index of the new data range to be loaded as a number."
+                        },
+                        {
+                            "name": "last",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Last index of the new data range to be loaded as a number."
+                        },
+                        {
+                            "name": "page",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the first item as a number."
+                        },
+                        {
+                            "name": "numItemsInViewport",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Visible item count in the viewport as a number."
+                        },
+                        {
+                            "name": "lastScrollPos",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Lastest scroll position as a number."
+                        },
+                        {
+                            "name": "d_numToleratedItems",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Additional elements to add to the DOM outside of the view as a number."
+                        },
+                        {
+                            "name": "d_loading",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "false",
+                            "description": "Current loading state as a boolean."
+                        },
+                        {
+                            "name": "loaderArr",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "Loadable items array."
+                        },
+                        {
+                            "name": "spacerStyle",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "The style of spacer element."
+                        },
+                        {
+                            "name": "contentStyle",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "The style of content element."
+                        }
+                    ],
+                    "methods": []
+                },
                 "VirtualScrollerLoaderOptions": {
                     "description": "Custom virtualscroller loader options",
                     "relatedProp": "undefined.VirtualScrollerItemOptions",
@@ -26715,7 +40653,7 @@
                             "optional": true,
                             "readonly": false,
                             "type": "boolean",
-                            "default": "",
+                            "default": "false",
                             "description": "Whether to show loader."
                         },
                         {
@@ -26773,6 +40711,14 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "Whether to dynamically change the height or width of scrollable container."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
                         }
                     ],
                     "methods": [
@@ -26903,6 +40849,14 @@
                     ]
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "VirtualScrollerPassThroughOptionType": {
+                    "values": "VirtualScrollerPassThroughAttributes | (options: VirtualScrollerPassThroughMethodOptions) => VirtualScrollerPassThroughAttributes | null | undefined"
+                }
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/doc/confirmdialog/pt/PTDoc.vue b/doc/confirmdialog/pt/PTDoc.vue
new file mode 100644
index 000000000..b61014d66
--- /dev/null
+++ b/doc/confirmdialog/pt/PTDoc.vue
@@ -0,0 +1,110 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <ConfirmDialog group="pt" :pt="{ headerTitle: { class: 'text-primary' } }" />
+    <div class="card flex flex-wrap gap-2 justify-content-center">
+        <Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ConfirmDialog
+    group="pt"
+    :pt="{
+        headerTitle: { class: 'text-primary' }
+    }"
+/>`,
+                options: `
+<template>
+    <ConfirmDialog
+        group="pt"
+        :pt="{
+            headerTitle: { class: 'text-primary' }
+        }"
+    />
+    <div class="card flex flex-wrap gap-2 justify-content-center">
+        <Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+    <Toast />
+</template>
+
+<script>
+export default {
+    methods: {
+        confirm() {
+            this.$confirm.require({
+                message: 'Are you sure you want to proceed?',
+                header: 'Confirmation',
+                icon: 'pi pi-exclamation-triangle',
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <ConfirmDialog
+        group="pt"
+        :pt="{
+            headerTitle: { class: 'text-primary' }
+        }"
+    />
+    <div class="card flex flex-wrap gap-2 justify-content-center">
+        <Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+    <Toast />
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const confirm = () => {
+    confirm.require({
+        message: 'Are you sure you want to proceed?',
+        header: 'Confirmation',
+        icon: 'pi pi-exclamation-triangle',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        confirm() {
+            this.$confirm.require({
+                group: 'pt',
+                message: 'Are you sure you want to proceed?',
+                header: 'Confirmation',
+                icon: 'pi pi-exclamation-triangle',
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+</script>
diff --git a/doc/confirmdialog/pt/PTImage.vue b/doc/confirmdialog/pt/PTImage.vue
new file mode 100644
index 000000000..6a560122d
--- /dev/null
+++ b/doc/confirmdialog/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/confirmdialog.jpg" />
+    </div>
+</template>
diff --git a/doc/confirmdialog/pt/index.vue b/doc/confirmdialog/pt/index.vue
new file mode 100644
index 000000000..82ff6819e
--- /dev/null
+++ b/doc/confirmdialog/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ConfirmDialog Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.confirmdialog',
+                    label: 'ConfirmDialog PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('ConfirmDialog')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/confirmpopup/pt/PTDoc.vue b/doc/confirmpopup/pt/PTDoc.vue
new file mode 100644
index 000000000..2b3a9bfe3
--- /dev/null
+++ b/doc/confirmpopup/pt/PTDoc.vue
@@ -0,0 +1,117 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <ConfirmPopup
+        group="pt"
+        :pt="{
+            root: { class: 'surface-100' }
+        }"
+    />
+    <div class="card flex flex-wrap gap-2 justify-content-center">
+        <Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ConfirmPopup
+    group="pt"
+    :pt="{
+        root: { class: 'surface-100' }
+    }"
+/>`,
+                options: `
+<template>
+    <ConfirmPopup
+        group="pt"
+        :pt="{
+            root: { class: 'surface-100' }
+        }"
+    />
+    <Toast />
+    <div class="card flex flex-wrap gap-2 justify-content-center">
+        <Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        confirm(event) {
+            this.$confirm.require({
+                group: 'pt',
+                target: event.currentTarget,
+                message: 'Are you sure you want to proceed?',
+                icon: 'pi pi-exclamation-triangle',
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <ConfirmPopup
+        group="pt"
+        :pt="{
+            root: { class: 'surface-100' }
+        }"
+    />
+    <Toast />
+    <div class="card flex flex-wrap gap-2 justify-content-center">
+        <Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const confirm = (event) => {
+    confirm.require({
+        group: 'pt',
+        target: event.currentTarget,
+        message: 'Are you sure you want to proceed?',
+        icon: 'pi pi-exclamation-triangle',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        confirm(event) {
+            this.$confirm.require({
+                group: 'pt',
+                target: event.currentTarget,
+                message: 'Are you sure you want to proceed?',
+                icon: 'pi pi-exclamation-triangle',
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+</script>
diff --git a/doc/confirmpopup/pt/PTImage.vue b/doc/confirmpopup/pt/PTImage.vue
new file mode 100644
index 000000000..c8c2a5654
--- /dev/null
+++ b/doc/confirmpopup/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/confirmpopup.jpg" />
+    </div>
+</template>
diff --git a/doc/confirmpopup/pt/index.vue b/doc/confirmpopup/pt/index.vue
new file mode 100644
index 000000000..01b93443d
--- /dev/null
+++ b/doc/confirmpopup/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ConfirmPopup Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.confirmpopup',
+                    label: 'ConfirmPopup PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('ConfirmPopup')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/contextmenu/pt/PTDoc.vue b/doc/contextmenu/pt/PTDoc.vue
new file mode 100644
index 000000000..5aa5a61df
--- /dev/null
+++ b/doc/contextmenu/pt/PTDoc.vue
@@ -0,0 +1,468 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex md:justify-content-center">
+        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
+        <ContextMenu
+            ref="menu"
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-fw pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator: true
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    label: 'Users',
+                    icon: 'pi pi-fw pi-user',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-user-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-user-minus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-fw pi-users',
+                            items: [
+                                {
+                                    label: 'Filter',
+                                    icon: 'pi pi-fw pi-filter',
+                                    items: [
+                                        {
+                                            label: 'Print',
+                                            icon: 'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon: 'pi pi-fw pi-bars',
+                                    label: 'List'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archieve',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-fw pi-power-off'
+                }
+            ],
+            code: {
+                basic: `
+<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
+<ContextMenu
+    ref="menu"
+    :model="items"
+    :pt="{
+        action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex md:justify-content-center">
+        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
+        <ContextMenu
+            ref="menu"
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-fw pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator: true
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    label: 'Users',
+                    icon: 'pi pi-fw pi-user',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-user-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-user-minus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-fw pi-users',
+                            items: [
+                                {
+                                    label: 'Filter',
+                                    icon: 'pi pi-fw pi-filter',
+                                    items: [
+                                        {
+                                            label: 'Print',
+                                            icon: 'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon: 'pi pi-fw pi-bars',
+                                    label: 'List'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archieve',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-fw pi-power-off'
+                }
+            ]
+        };
+    },
+    methods: {
+        onImageRightClick(event) {
+            this.$refs.menu.show(event);
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
+        <ContextMenu
+            ref="menu"
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({ class: context.active ? 'bg-primary-200' : context.focused ? 'bg-primary-300' : undefined })
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const menu = ref();
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-fw pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-plus',
+                items: [
+                    {
+                        label: 'Bookmark',
+                        icon: 'pi pi-fw pi-bookmark'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-fw pi-video'
+                    }
+                ]
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-trash'
+            },
+            {
+                separator: true
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-fw pi-external-link'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-fw pi-pencil',
+        items: [
+            {
+                label: 'Left',
+                icon: 'pi pi-fw pi-align-left'
+            },
+            {
+                label: 'Right',
+                icon: 'pi pi-fw pi-align-right'
+            },
+            {
+                label: 'Center',
+                icon: 'pi pi-fw pi-align-center'
+            },
+            {
+                label: 'Justify',
+                icon: 'pi pi-fw pi-align-justify'
+            }
+        ]
+    },
+    {
+        label: 'Users',
+        icon: 'pi pi-fw pi-user',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-user-plus'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-user-minus'
+            },
+            {
+                label: 'Search',
+                icon: 'pi pi-fw pi-users',
+                items: [
+                    {
+                        label: 'Filter',
+                        icon: 'pi pi-fw pi-filter',
+                        items: [
+                            {
+                                label: 'Print',
+                                icon: 'pi pi-fw pi-print'
+                            }
+                        ]
+                    },
+                    {
+                        icon: 'pi pi-fw pi-bars',
+                        label: 'List'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Events',
+        icon: 'pi pi-fw pi-calendar',
+        items: [
+            {
+                label: 'Edit',
+                icon: 'pi pi-fw pi-pencil',
+                items: [
+                    {
+                        label: 'Save',
+                        icon: 'pi pi-fw pi-calendar-plus'
+                    },
+                    {
+                        label: 'Delete',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            },
+            {
+                label: 'Archieve',
+                icon: 'pi pi-fw pi-calendar-times',
+                items: [
+                    {
+                        label: 'Remove',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        icon: 'pi pi-fw pi-power-off'
+    }
+]);
+
+const onImageRightClick = (event) => {
+    menu.value.show(event);
+};
+
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        onImageRightClick(event) {
+            this.$refs.menu.show(event);
+        }
+    }
+};
+</script>
diff --git a/doc/contextmenu/pt/PTImage.vue b/doc/contextmenu/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/contextmenu/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/contextmenu/pt/index.vue b/doc/contextmenu/pt/index.vue
new file mode 100644
index 000000000..aa66309fa
--- /dev/null
+++ b/doc/contextmenu/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ContextMenu Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.contextmenu',
+                    label: 'ContextMenu PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('ContextMenu')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/customicons/FontAwesomeDoc.vue b/doc/customicons/FontAwesomeDoc.vue
new file mode 100644
index 000000000..7b1c73bcc
--- /dev/null
+++ b/doc/customicons/FontAwesomeDoc.vue
@@ -0,0 +1,23 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p><a href="https://fontawesome.com/">Font Awesome</a> is a popular icon library with a wide range of icons.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Dropdown>
+    <template #dropdownicon>
+        <i class="fa-light fa-chevron-down"></i>
+    </template>
+</Dropdown>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/customicons/ImageDoc.vue b/doc/customicons/ImageDoc.vue
new file mode 100644
index 000000000..1dae2b392
--- /dev/null
+++ b/doc/customicons/ImageDoc.vue
@@ -0,0 +1,23 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Any time of image can be used as an icon.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Dropdown>
+    <template #dropdownicon>
+        <img alt="dropdown icon" src="/assets/icons/arrow_down.png">
+    </template>
+</Dropdown>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/customicons/MaterialDoc.vue b/doc/customicons/MaterialDoc.vue
new file mode 100644
index 000000000..92e0cf39b
--- /dev/null
+++ b/doc/customicons/MaterialDoc.vue
@@ -0,0 +1,23 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p><a href="https://fonts.google.com/icons">Material icons</a> is the official icon library based on Google Material Design.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Dropdown>
+    <template #dropdownicon>
+        <span class="material-icons">arrow_drop_down</span>
+    </template>
+</Dropdown>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/customicons/SVGDoc.vue b/doc/customicons/SVGDoc.vue
new file mode 100644
index 000000000..efcccec09
--- /dev/null
+++ b/doc/customicons/SVGDoc.vue
@@ -0,0 +1,27 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Inline SVGs are embedded inside the dom.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Dropdown>
+    <template #dropdownicon>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <g id="chevron-down">
+                <path d="M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z"/>
+            </g>
+        </svg>
+    </template>
+</Dropdown>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/datatable/pt/PTDoc.vue b/doc/datatable/pt/PTDoc.vue
new file mode 100644
index 000000000..f2f38e4a3
--- /dev/null
+++ b/doc/datatable/pt/PTDoc.vue
@@ -0,0 +1,252 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card">
+        <DataTable
+            :value="products"
+            sortMode="multiple"
+            :pt="{
+                table: { style: { minWidth: '50rem' } }
+            }"
+        >
+            <Column
+                field="code"
+                header="Code"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'bg-primary' },
+                    headerCell: { style: { width: '25%' } }
+                }"
+            />
+            <Column
+                field="name"
+                header="Name"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'bg-primary' },
+                    headerCell: { style: { width: '25%' } }
+                }"
+            />
+            <Column
+                field="category"
+                header="Category"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'bg-primary' },
+                    headerCell: { style: { width: '25%' } }
+                }"
+            />
+            <Column
+                field="quantity"
+                header="Quantity"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'bg-primary' },
+                    headerCell: { style: { width: '25%' } }
+                }"
+            />
+        </DataTable>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable
+    :value="products"
+    sortMode="multiple"
+    :pt="{
+        table: { style: { minWidth: '50rem' } }
+    }"
+>
+    <Column
+        field="code"
+        header="Code"
+        sortable
+        :pt="{
+            sortBadge: { class: 'bg-primary' },
+            headerCell: { style: { width: '25%' } }
+        }"
+    />
+    <Column
+        field="name"
+        header="Name"
+        sortable
+        :pt="{
+            sortBadge: { class: 'bg-primary' },
+            headerCell: { style: { width: '25%' } }
+        }"
+    />
+    <Column
+        field="category"
+        header="Category"
+        sortable
+        :pt="{
+            sortBadge: { class: 'bg-primary' },
+            headerCell: { style: { width: '25%' } }
+        }"
+    />
+    <Column
+        field="quantity"
+        header="Quantity"
+        sortable
+        :pt="{
+            sortBadge: { class: 'bg-primary' },
+            headerCell: { style: { width: '25%' } }
+        }"
+    />
+</DataTable>`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable
+            :value="products"
+            sortMode="multiple"
+            :pt="{
+                table: { style: { minWidth: '50rem' } }
+            }"
+        >
+            <Column
+                field="code"
+                header="Code"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'bg-primary' },
+                    headerCell: { style: { width: '25%' } }
+                }"
+            />
+            <Column
+                field="name"
+                header="Name"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'bg-primary' },
+                    headerCell: { style: { width: '25%' } }
+                }"
+            />
+            <Column
+                field="category"
+                header="Category"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'bg-primary' },
+                    headerCell: { style: { width: '25%' } }
+                }"
+            />
+            <Column
+                field="quantity"
+                header="Quantity"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'bg-primary' },
+                    headerCell: { style: { width: '25%' } }
+                }"
+            />
+        </DataTable>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable
+            :value="products"
+            sortMode="multiple"
+            :pt="{
+                table: { style: { minWidth: '50rem' } }
+            }"
+        >
+            <Column
+                field="code"
+                header="Code"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'bg-primary' },
+                    headerCell: { style: { width: '25%' } }
+                }"
+            />
+            <Column
+                field="name"
+                header="Name"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'bg-primary' },
+                    headerCell: { style: { width: '25%' } }
+                }"
+            />
+            <Column
+                field="category"
+                header="Category"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'bg-primary' },
+                    headerCell: { style: { width: '25%' } }
+                }"
+            />
+            <Column
+                field="quantity"
+                header="Quantity"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'bg-primary' },
+                    headerCell: { style: { width: '25%' } }
+                }"
+            />
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+
+<\/script>`,
+                data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    }
+};
+</script>
diff --git a/doc/datatable/pt/PTImage.vue b/doc/datatable/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/datatable/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/datatable/pt/index.vue b/doc/datatable/pt/index.vue
new file mode 100644
index 000000000..300940999
--- /dev/null
+++ b/doc/datatable/pt/index.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>DataTable Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.datatable',
+                    label: 'DataTable PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('DataTable')
+                },
+                {
+                    id: 'pt.doc.column',
+                    label: 'Column PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Column')
+                },
+                {
+                    id: 'pt.doc.columngroup',
+                    label: 'ColumnGroup PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('ColumnGroup')
+                },
+                {
+                    id: 'pt.doc.row',
+                    label: 'Row PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Row')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/dataview/pt/PTDoc.vue b/doc/dataview/pt/PTDoc.vue
new file mode 100644
index 000000000..cc78717ba
--- /dev/null
+++ b/doc/dataview/pt/PTDoc.vue
@@ -0,0 +1,398 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card">
+        <DataView
+            :value="products"
+            :layout="layout"
+            :pt="{
+                grid: { class: 'surface-ground' }
+            }"
+        >
+            <template #header>
+                <div class="flex justify-content-end">
+                    <DataViewLayoutOptions
+                        v-model="layout"
+                        :pt="{
+                            listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
+                            gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
+                        }"
+                    />
+                </div>
+            </template>
+
+            <template #list="slotProps">
+                <div class="col-12">
+                    <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+                        <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.name" />
+                        <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                            <div class="flex flex-column align-items-center sm:align-items-start gap-3">
+                                <div class="text-2xl font-bold text-900">{{ slotProps.data.name }}</div>
+                                <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating>
+                                <div class="flex align-items-center gap-3">
+                                    <span class="flex align-items-center gap-2">
+                                        <i class="pi pi-tag"></i>
+                                        <span class="font-semibold">{{ slotProps.data.category }}</span>
+                                    </span>
+                                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
+                                </div>
+                            </div>
+                            <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                                <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template #grid="slotProps">
+                <div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
+                    <div class="p-4 border-1 surface-border surface-card border-round">
+                        <div class="flex flex-wrap align-items-center justify-content-between gap-2">
+                            <div class="flex align-items-center gap-2">
+                                <i class="pi pi-tag"></i>
+                                <span class="font-semibold">{{ slotProps.data.category }}</span>
+                            </div>
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
+                        </div>
+                        <div class="flex flex-column align-items-center gap-3 py-5">
+                            <img class="w-9 shadow-2 border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.name" />
+                            <div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
+                            <Rating value="{product.rating}" readonly :cancel="false"></Rating>
+                        </div>
+                        <div class="flex align-items-center justify-content-between">
+                            <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span>
+                            <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            layout: 'grid',
+            code: {
+                basic: `
+<DataView
+    :value="products"
+    :layout="layout"
+    :pt="{
+        grid: { class: 'surface-ground' }
+    }"
+>
+    <template #header>
+        <div class="flex justify-content-end">
+            <DataViewLayoutOptions
+                v-model="layout"
+                :pt="{
+                    listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
+                    gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
+                }"
+            />
+        </div>
+    </template>
+
+    <template #list="slotProps">
+        <div class="col-12">
+            <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+                <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
+                <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                    <div class="flex flex-column align-items-center sm:align-items-start gap-3">
+                        <div class="text-2xl font-bold text-900">{{ slotProps.data.name }}</div>
+                        <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating>
+                        <div class="flex align-items-center gap-3">
+                            <span class="flex align-items-center gap-2">
+                                <i class="pi pi-tag"></i>
+                                <span class="font-semibold">{{ slotProps.data.category }}</span>
+                            </span>
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
+                        </div>
+                    </div>
+                    <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                        <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
+                        <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    <template #grid="slotProps">
+        <div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
+            <div class="p-4 border-1 surface-border surface-card border-round">
+                <div class="flex flex-wrap align-items-center justify-content-between gap-2">
+                    <div class="flex align-items-center gap-2">
+                        <i class="pi pi-tag"></i>
+                        <span class="font-semibold">{{ slotProps.data.category }}</span>
+                    </div>
+                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
+                </div>
+                <div class="flex flex-column align-items-center gap-3 py-5">
+                    <img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
+                    <div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
+                    <Rating value="{product.rating}" readonly :cancel="false"></Rating>
+                </div>
+                <div class="flex align-items-center justify-content-between">
+                    <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
+                    <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                </div>
+            </div>
+        </div>
+    </template>
+</DataView>`,
+                options: `
+<template>
+    <div class="card">
+        <DataView
+            :value="products"
+            :layout="layout"
+            :pt="{
+                grid: { class: 'surface-ground' }
+            }"
+        >
+            <template #header>
+                <div class="flex justify-content-end">
+                    <DataViewLayoutOptions
+                        v-model="layout"
+                        :pt="{
+                            listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
+                            gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
+                        }"
+                    />
+                </div>
+            </template>
+
+            <template #list="slotProps">
+                <div class="col-12">
+                    <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+                        <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
+                        <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                            <div class="flex flex-column align-items-center sm:align-items-start gap-3">
+                                <div class="text-2xl font-bold text-900">{{ slotProps.data.name }}</div>
+                                <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating>
+                                <div class="flex align-items-center gap-3">
+                                    <span class="flex align-items-center gap-2">
+                                        <i class="pi pi-tag"></i>
+                                        <span class="font-semibold">{{ slotProps.data.category }}</span>
+                                    </span>
+                                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
+                                </div>
+                            </div>
+                            <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                                <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template #grid="slotProps">
+                <div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
+                    <div class="p-4 border-1 surface-border surface-card border-round">
+                        <div class="flex flex-wrap align-items-center justify-content-between gap-2">
+                            <div class="flex align-items-center gap-2">
+                                <i class="pi pi-tag"></i>
+                                <span class="font-semibold">{{ slotProps.data.category }}</span>
+                            </div>
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
+                        </div>
+                        <div class="flex flex-column align-items-center gap-3 py-5">
+                            <img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
+                            <div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
+                            <Rating value="{product.rating}" readonly :cancel="false"></Rating>
+                        </div>
+                        <div class="flex align-items-center justify-content-between">
+                            <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
+                            <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            layout: 'grid'
+        }
+    },
+    mounted() {
+        ProductService.getProducts().then((data) => (this.products = data.slice(0, 6)));
+    },
+    methods: {
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warning';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <DataView
+            :value="products"
+            :layout="layout"
+            :pt="{
+                grid: { class: 'surface-ground' }
+            }"
+        >
+            <template #header>
+                <div class="flex justify-content-end">
+                    <DataViewLayoutOptions
+                        v-model="layout"
+                        :pt="{
+                            listButton: ({ props }) => ({ class: props.modelValue === 'list' ? 'bg-teal-400 border-teal-400' : 'undefined' }),
+                            gridButton: ({ props }) => ({ class: props.modelValue === 'grid' ? 'bg-teal-400 border-teal-400' : 'undefined' })
+                        }"
+                    />
+                </div>
+            </template>
+
+            <template #list="slotProps">
+                <div class="col-12">
+                    <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+                        <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
+                        <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                            <div class="flex flex-column align-items-center sm:align-items-start gap-3">
+                                <div class="text-2xl font-bold text-900">{{ slotProps.data.name }}</div>
+                                <Rating :modelValue="slotProps.data.rating" readonly :cancel="false"></Rating>
+                                <div class="flex align-items-center gap-3">
+                                    <span class="flex align-items-center gap-2">
+                                        <i class="pi pi-tag"></i>
+                                        <span class="font-semibold">{{ slotProps.data.category }}</span>
+                                    </span>
+                                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
+                                </div>
+                            </div>
+                            <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                                <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template #grid="slotProps">
+                <div class="col-12 sm:col-6 lg:col-12 xl:col-4 p-2">
+                    <div class="p-4 border-1 surface-border surface-card border-round">
+                        <div class="flex flex-wrap align-items-center justify-content-between gap-2">
+                            <div class="flex align-items-center gap-2">
+                                <i class="pi pi-tag"></i>
+                                <span class="font-semibold">{{ slotProps.data.category }}</span>
+                            </div>
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)"></Tag>
+                        </div>
+                        <div class="flex flex-column align-items-center gap-3 py-5">
+                            <img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.name" />
+                            <div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
+                            <Rating value="{product.rating}" readonly :cancel="false"></Rating>
+                        </div>
+                        <div class="flex align-items-center justify-content-between">
+                            <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
+                            <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </DataView>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProducts().then((data) => (products.value = data.slice(0, 6)));
+});
+
+const products = ref();
+const layout = ref('grid');
+
+const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warning';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+}
+
+<\/script>`,
+                data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProducts().then((data) => (this.products = data.slice(0, 6)));
+    },
+    methods: {
+        getSeverity(product) {
+            switch (product.inventoryStatus) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warning';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>
diff --git a/doc/dataview/pt/PTImage.vue b/doc/dataview/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/dataview/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/dataview/pt/index.vue b/doc/dataview/pt/index.vue
new file mode 100644
index 000000000..2ec35e6c3
--- /dev/null
+++ b/doc/dataview/pt/index.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>DataView Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.dataview',
+                    label: 'DataView PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('DataView')
+                },
+                {
+                    id: 'pt.doc.dataviewlayoutoptions',
+                    label: 'DataViewLayoutOptions PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('DataViewLayoutOptions')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/deferredcontent/pt/PTImage.vue b/doc/deferredcontent/pt/PTImage.vue
new file mode 100644
index 000000000..01e028569
--- /dev/null
+++ b/doc/deferredcontent/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/deferred.jpg" />
+    </div>
+</template>
diff --git a/doc/deferredcontent/pt/index.vue b/doc/deferredcontent/pt/index.vue
new file mode 100644
index 000000000..88979d2be
--- /dev/null
+++ b/doc/deferredcontent/pt/index.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>DeferredContent Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.deferredcontent',
+                    label: 'DeferredContent PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('DeferredContent')
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/dialog/pt/PTDoc.vue b/doc/dialog/pt/PTDoc.vue
new file mode 100644
index 000000000..2ab64fe65
--- /dev/null
+++ b/doc/dialog/pt/PTDoc.vue
@@ -0,0 +1,100 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+
+        <Dialog
+            v-model:visible="visible"
+            modal
+            header="Header"
+            :pt="{
+                root: { class: 'w-12 sm:w-9 md:w-6' }
+            }"
+        >
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Dialog
+    v-model:visible="visible"
+    modal
+    header="Header"
+    :pt="{
+        root: { class: 'w-12 sm:w-9 md:w-6' }
+    }"
+>
+    <p>Lorem ipsum </p>
+</Dialog>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+
+        <Dialog
+            v-model:visible="visible"
+            modal
+            header="Header"
+            :pt="{
+                root: { class: 'w-12 sm:w-9 md:w-6' }
+            }"
+        >
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+
+        <Dialog
+            v-model:visible="visible"
+            modal
+            header="Header"
+            :pt="{
+                root: { class: 'w-12 sm:w-9 md:w-6' }
+            }"
+        >
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/dialog/pt/PTImage.vue b/doc/dialog/pt/PTImage.vue
new file mode 100644
index 000000000..71647dbd4
--- /dev/null
+++ b/doc/dialog/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/dialog.jpg" />
+    </div>
+</template>
diff --git a/doc/dialog/pt/index.vue b/doc/dialog/pt/index.vue
new file mode 100644
index 000000000..bc6133c8d
--- /dev/null
+++ b/doc/dialog/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Dialog Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.dialog',
+                    label: 'Dialog PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Dialog')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/divider/pt/PTDoc.vue b/doc/divider/pt/PTDoc.vue
new file mode 100644
index 000000000..645974570
--- /dev/null
+++ b/doc/divider/pt/PTDoc.vue
@@ -0,0 +1,80 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card">
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <Divider :pt="{ content: { class: 'text-primary' } }" align="center">
+            <b>Center</b>
+        </Divider>
+
+        <p>
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</p>
+
+<Divider :pt="{ content: { class: 'text-primary' } }" align="center">
+    <b>Center</b>
+</Divider>
+
+<p>
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+    voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+</p>`,
+                options: `
+<template>
+    <div class="card">
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <Divider :pt="{ content: { class: 'text-primary' } }" align="center">
+            <b>Center</b>
+        </Divider>
+
+        <p>
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+    </div>
+</template>`,
+                composition: `
+<template>
+    <div class="card">
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+
+        <Divider :pt="{ content: { class: 'text-primary' } }" align="center">
+            <b>Center</b>
+        </Divider>
+
+        <p>
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+            voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+    </div>
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/divider/pt/PTImage.vue b/doc/divider/pt/PTImage.vue
new file mode 100644
index 000000000..7a6c733d7
--- /dev/null
+++ b/doc/divider/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/divider.jpg" />
+    </div>
+</template>
diff --git a/doc/divider/pt/index.vue b/doc/divider/pt/index.vue
new file mode 100644
index 000000000..d003d9bfb
--- /dev/null
+++ b/doc/divider/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Divider Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.divider',
+                    label: 'Divider PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Divider')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/dock/pt/PTDoc.vue b/doc/dock/pt/PTDoc.vue
new file mode 100644
index 000000000..1c248193c
--- /dev/null
+++ b/doc/dock/pt/PTDoc.vue
@@ -0,0 +1,194 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card dock-demo">
+        <div class="dock-window">
+            <Dock :model="items" position="bottom" :pt="{ container: { style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' } } }">
+                <template #icon="{ item }">
+                    <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                </template>
+            </Dock>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Finder',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
+                },
+                {
+                    label: 'App Store',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
+                },
+                {
+                    label: 'Photos',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
+                },
+                {
+                    label: 'Trash',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
+                }
+            ],
+            code: {
+                basic: `
+<Dock :model="items" position="bottom"
+    :pt="{ 
+        container: {
+            style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
+        }
+    }"
+>
+    <template #icon="{ item }">
+        <img :alt="item.label" :src="item.icon" style="width: 100%" />
+    </template>
+</Dock>`,
+                options: `
+<template>
+    <div class="card dock-demo">
+        <div class="dock-window">
+            <Dock :model="items" position="bottom"
+                :pt="{ 
+                    container: {
+                        style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
+                    }
+                }"
+            >
+                <template #icon="{ item }">
+                    <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                </template>
+            </Dock>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Finder',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
+                },
+                {
+                    label: 'App Store',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
+                },
+                {
+                    label: 'Photos',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
+                },
+                {
+                    label: 'Trash',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
+                }
+            ]
+        }
+    }
+}
+<\/script>
+
+<style scoped>
+.dock-demo > .dock-window {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    z-index: 1;
+}
+
+.dock-demo > .p-dock {
+    z-index: 1000;
+}
+</style>`,
+                composition: `
+<template>
+    <div class="card dock-demo">
+        <div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
+            <Dock :model="items" position="bottom"
+                :pt="{ 
+                    container: {
+                        style: { background: 'linear-gradient(to right,#056BAE, #673976, #056BAE)', borderRadius: '12px' }
+                    }
+                }"
+            >
+                <template #icon="{ item }">
+                    <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                </template>
+            </Dock>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Finder',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
+    },
+    {
+        label: 'App Store',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
+    },
+    {
+        label: 'Photos',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
+    },
+    {
+        label: 'Trash',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
+    }
+]);
+
+<\/script>
+
+<style scoped>
+.dock-demo > .dock-window {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    z-index: 1;
+}
+
+.dock-demo > .p-dock {
+    z-index: 1000;
+}
+</style>`
+            }
+        };
+    }
+};
+</script>
+
+<style scoped>
+.dock-demo > .dock-window {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    background-image: url('https://primefaces.org/cdn/primevue/images/dock/window.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    z-index: 1;
+}
+
+.dock-demo > .p-dock {
+    z-index: 1000;
+}
+
+.dock-demo .p-menubar {
+    padding: 0;
+    border-radius: 0;
+}
+</style>
diff --git a/doc/dock/pt/PTImage.vue b/doc/dock/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/dock/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/dock/pt/index.vue b/doc/dock/pt/index.vue
new file mode 100644
index 000000000..c9b2caaaf
--- /dev/null
+++ b/doc/dock/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Dock Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.dock',
+                    label: 'Dock PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Dock')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/dropdown/pt/PTDoc.vue b/doc/dropdown/pt/PTDoc.vue
new file mode 100644
index 000000000..4618c74e2
--- /dev/null
+++ b/doc/dropdown/pt/PTDoc.vue
@@ -0,0 +1,114 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <Dropdown
+            v-model="selectedCity"
+            :options="cities"
+            optionLabel="name"
+            placeholder="Select a City"
+            :pt="{
+                root: { class: 'w-full md:w-14rem' },
+                item: ({ props, state, context }) => ({
+                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
+                })
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Dropdown
+    v-model="selectedCity"
+    :options="cities"
+    optionLabel="name"
+    placeholder="Select a City"
+    :pt="{
+        root: { class: 'w-full md:w-14rem' },
+        item: ({ props, state, context }) => ({
+            class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
+        })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Dropdown
+            v-model="selectedCity"
+            :options="cities"
+            optionLabel="name"
+            placeholder="Select a City"
+            :pt="{
+                root: { class: 'w-full md:w-14rem' },
+                item: ({ props, state, context }) => ({
+                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Dropdown
+            v-model="selectedCity"
+            :options="cities"
+            optionLabel="name"
+            placeholder="Select a City"
+            :pt="{
+                root: { class: 'w-full md:w-14rem' },
+                item: ({ props, state, context }) => ({
+                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/dropdown/pt/PTImage.vue b/doc/dropdown/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/dropdown/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/dropdown/pt/index.vue b/doc/dropdown/pt/index.vue
new file mode 100644
index 000000000..14965d722
--- /dev/null
+++ b/doc/dropdown/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Dropdown Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.dropdown',
+                    label: 'Dropdown PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Dropdown')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/dynamicdialog/pt/PTDoc.vue b/doc/dynamicdialog/pt/PTDoc.vue
new file mode 100644
index 000000000..b58499063
--- /dev/null
+++ b/doc/dynamicdialog/pt/PTDoc.vue
@@ -0,0 +1,37 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<DynamicDialog
+    :pt="{
+        root: { class: 'w-12 sm:w-9 md:w-6' }
+    }"
+/>`,
+                options: `
+<template>
+    <DynamicDialog
+        :pt="{
+            root: { class: 'w-12 sm:w-9 md:w-6' }
+        }"
+    />
+</template>`,
+                composition: `
+<template>
+    <DynamicDialog
+        :pt="{
+            root: { class: 'w-12 sm:w-9 md:w-6' }
+        }"
+    />
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/dynamicdialog/pt/PTImage.vue b/doc/dynamicdialog/pt/PTImage.vue
new file mode 100644
index 000000000..71647dbd4
--- /dev/null
+++ b/doc/dynamicdialog/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/dialog.jpg" />
+    </div>
+</template>
diff --git a/doc/dynamicdialog/pt/index.vue b/doc/dynamicdialog/pt/index.vue
new file mode 100644
index 000000000..45417ede2
--- /dev/null
+++ b/doc/dynamicdialog/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Dynamic Dialog Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.dynamicdialog',
+                    label: 'Dialog PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Dialog')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/editor/pt/PTDoc.vue b/doc/editor/pt/PTDoc.vue
new file mode 100644
index 000000000..9bf43877d
--- /dev/null
+++ b/doc/editor/pt/PTDoc.vue
@@ -0,0 +1,73 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card">
+        <Editor
+            v-model="value"
+            :pt="{
+                content: { style: { height: '320px' } },
+                toolbar: { class: 'surface-ground' }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" :dependencies="{ quill: '1.3.7' }" component="Editor" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                basic: `
+<Editor
+    v-model="value"
+    :pt="{
+        content: { style: { height: '320px' } },
+        toolbar: { class: 'surface-ground' }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card">
+        <Editor
+            v-model="value"
+            :pt="{
+                content: { style: { height: '320px' } },
+                toolbar: { class: 'surface-ground' }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: ''
+        }
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <Editor
+            v-model="value"
+            :pt="{
+                content: { style: { height: '320px' } },
+                toolbar: { class: 'surface-ground' }
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref('');
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/editor/pt/PTImage.vue b/doc/editor/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/editor/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/editor/pt/index.vue b/doc/editor/pt/index.vue
new file mode 100644
index 000000000..d5e5b01c0
--- /dev/null
+++ b/doc/editor/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Editor Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.editor',
+                    label: 'Editor PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Editor')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/fieldset/pt/PTDoc.vue b/doc/fieldset/pt/PTDoc.vue
new file mode 100644
index 000000000..32e523dac
--- /dev/null
+++ b/doc/fieldset/pt/PTDoc.vue
@@ -0,0 +1,73 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card">
+        <Fieldset legend="Header" :toggleable="true" :pt="{ legend: { class: 'bg-primary' }, legendTitle: { class: 'text-white' }, togglerIcon: { class: 'text-white' } }">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Fieldset>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Fieldset
+    legend="Header"
+    :toggleable="true"
+    :pt="{
+        legend: { class: 'bg-primary' },
+        legendTitle: { class: 'text-white' },
+        togglerIcon: { class: 'text-white' }
+    }">
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Fieldset>`,
+                options: `
+<template>
+    <div class="card">
+        <Fieldset
+            legend="Header"
+            :toggleable="true"
+            :pt="{
+                legend: { class: 'bg-primary' },
+                legendTitle: { class: 'text-white' },
+                togglerIcon: { class: 'text-white' }
+            }">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Fieldset>
+    </div>
+</template>`,
+                composition: `
+<template>
+    <div class="card">
+        <Fieldset
+            legend="Header"
+            :toggleable="true"
+            :pt="{
+                legend: { class: 'bg-primary' },
+                legendTitle: { class: 'text-white' },
+                togglerIcon: { class: 'text-white' }
+            }">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Fieldset>
+    </div>
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/fieldset/pt/PTImage.vue b/doc/fieldset/pt/PTImage.vue
new file mode 100644
index 000000000..9d7626707
--- /dev/null
+++ b/doc/fieldset/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/fieldset.jpg" />
+    </div>
+</template>
diff --git a/doc/fieldset/pt/index.vue b/doc/fieldset/pt/index.vue
new file mode 100644
index 000000000..e88e54fd6
--- /dev/null
+++ b/doc/fieldset/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Fieldset Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.fieldset',
+                    label: 'Fieldset PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Fieldset')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/fileupload/pt/PTDoc.vue b/doc/fileupload/pt/PTDoc.vue
new file mode 100644
index 000000000..39d764391
--- /dev/null
+++ b/doc/fileupload/pt/PTDoc.vue
@@ -0,0 +1,114 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card">
+        <FileUpload
+            name="demo[]"
+            url="./upload.php"
+            @upload="onAdvancedUpload($event)"
+            :multiple="true"
+            accept="image/*"
+            :maxFileSize="1000000"
+            :pt="{
+                content: { class: 'surface-ground' }
+            }"
+        >
+            <template #empty>
+                <p>Drag and drop files to here to upload.</p>
+            </template>
+        </FileUpload>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<FileUpload
+    name="demo[]"
+    url="./upload.php"
+    @upload="onAdvancedUpload($event)"
+    :multiple="true"
+    accept="image/*"
+    :maxFileSize="1000000"
+    :pt="{
+        content: { class: 'surface-ground' }
+    }"
+>
+    <template #empty>
+        <p>Drag and drop files to here to upload.</p>
+    </template>
+</FileUpload>`,
+                options: `
+<template>
+    <div class="card">
+        <FileUpload
+            name="demo[]"
+            url="./upload.php"
+            @upload="onAdvancedUpload($event)"
+            :multiple="true"
+            accept="image/*"
+            :maxFileSize="1000000"
+            :pt="{
+                content: { class: 'surface-ground' }
+            }"
+        >
+            <template #empty>
+                <p>Drag and drop files to here to upload.</p>
+            </template>
+        </FileUpload>
+        <Toast />
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        onAdvancedUpload() {
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <FileUpload
+            name="demo[]"
+            url="./upload.php"
+            @upload="onAdvancedUpload($event)"
+            :multiple="true"
+            accept="image/*"
+            :maxFileSize="1000000"
+            :pt="{
+                content: { class: 'surface-ground' }
+            }"
+        >
+            <template #empty>
+                <p>Drag and drop files to here to upload.</p>
+            </template>
+        </FileUpload>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const onAdvancedUpload = () => {
+    toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+};
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        onAdvancedUpload() {
+            this.$toast.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/doc/fileupload/pt/PTImage.vue b/doc/fileupload/pt/PTImage.vue
new file mode 100644
index 000000000..da90b655a
--- /dev/null
+++ b/doc/fileupload/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/fileupload.jpg" />
+    </div>
+</template>
diff --git a/doc/fileupload/pt/index.vue b/doc/fileupload/pt/index.vue
new file mode 100644
index 000000000..6468dd10f
--- /dev/null
+++ b/doc/fileupload/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>FileUpload Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.fileupload',
+                    label: 'FileUpload PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('FileUpload')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/galleria/pt/PTDoc.vue b/doc/galleria/pt/PTDoc.vue
new file mode 100644
index 000000000..c72f84945
--- /dev/null
+++ b/doc/galleria/pt/PTDoc.vue
@@ -0,0 +1,172 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card md:flex md:justify-content-center">
+        <Galleria
+            :value="images"
+            :responsiveOptions="responsiveOptions"
+            :numVisible="5"
+            :pt="{
+                root: { style: { maxWidth: '640px' } }
+            }"
+        >
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+            </template>
+        </Galleria>
+    </div>
+    <DocSectionCode :code="code" :service="['PhotoService']" />
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '991px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '767px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ],
+            code: {
+                basic: `
+<Galleria
+    :value="images"
+    :responsiveOptions="responsiveOptions"
+    :numVisible="5"
+    :pt="{
+        root: { style: { maxWidth: '640px' } }
+    }"
+>
+    <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+    </template>
+    <template #thumbnail="slotProps">
+        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+    </template>
+</Galleria>`,
+                options: `
+<template>
+    <div class="card md:flex md:justify-content-center">
+        <Galleria
+            :value="images"
+            :responsiveOptions="responsiveOptions"
+            :numVisible="5"
+            :pt="{
+                root: { style: { maxWidth: '640px' } }
+            }"
+        >
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script>
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '991px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '767px',
+                    numVisible: 3
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ]
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card md:flex md:justify-content-center">
+        <Galleria
+            :value="images"
+            :responsiveOptions="responsiveOptions"
+            :numVisible="5"
+            :pt="{
+                root: { style: { maxWidth: '640px' } }
+            }"
+        >
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+            </template>
+        </Galleria>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { PhotoService } from '@/service/PhotoService';
+
+onMounted(() => {
+    PhotoService.getImages().then((data) => (images.value = data));
+});
+
+const images = ref();
+const responsiveOptions = ref([
+    {
+        breakpoint: '991px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '767px',
+        numVisible: 3
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1
+    }
+]);
+<\/script>`,
+                data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+</script>
diff --git a/doc/galleria/pt/PTImage.vue b/doc/galleria/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/galleria/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/galleria/pt/index.vue b/doc/galleria/pt/index.vue
new file mode 100644
index 000000000..489a2f1af
--- /dev/null
+++ b/doc/galleria/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Galleria Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.galleria',
+                    label: 'Galleria PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Galleria')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/icons/ImportDoc.vue b/doc/icons/ImportDoc.vue
index 06213184b..b96ec6d70 100644
--- a/doc/icons/ImportDoc.vue
+++ b/doc/icons/ImportDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>CSS file of the icon library needs to be imported in your application.</p>
+        <p>CSS file of the icon library needs to be imported in <i>styles.scss</i> of your application.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
diff --git a/doc/image/PreviewDoc.vue b/doc/image/PreviewDoc.vue
index 0b71bdaf9..51575a899 100644
--- a/doc/image/PreviewDoc.vue
+++ b/doc/image/PreviewDoc.vue
@@ -5,6 +5,7 @@
     <div class="card flex justify-content-center">
         <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
     </div>
+
     <DocSectionCode :code="code" />
 </template>
 
diff --git a/doc/image/TemplateDoc.vue b/doc/image/TemplateDoc.vue
index 48b443ac7..cca7a2631 100644
--- a/doc/image/TemplateDoc.vue
+++ b/doc/image/TemplateDoc.vue
@@ -3,10 +3,16 @@
         <p>An eye icon is displayed by default when the image is hovered in preview mode. Use the <i>indicator</i> slot for custom content.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="Image" width="250" preview>
-            <template #indicator>
+        <Image alt="Image" preview>
+            <template #indicatoricon>
                 <i class="pi pi-check"></i>
             </template>
+            <template #image>
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
+            </template>
+            <template #preview="slotProps">
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+            </template>
         </Image>
     </div>
     <DocSectionCode :code="code" />
@@ -18,28 +24,46 @@ export default {
         return {
             code: {
                 basic: `
-<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="Image" width="250" preview>
-    <template #indicator>
+<Image alt="Image" preview>
+    <template #indicatoricon>
         <i class="pi pi-check"></i>
     </template>
+    <template #image>
+        <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
+    </template>
+    <template #preview="slotProps">
+        <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+    </template>
 </Image>`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="Image" width="250" preview>
-            <template #indicator>
+        <Image alt="Image" preview>
+            <template #indicatoricon>
                 <i class="pi pi-check"></i>
             </template>
+            <template #image>
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
+            </template>
+            <template #preview="slotProps">
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+            </template>
         </Image>
     </div>
 </template>`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="Image" width="250" preview>
-            <template #indicator>
+        <Image alt="Image" preview>
+            <template #indicatoricon>
                 <i class="pi pi-check"></i>
             </template>
+            <template #image>
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
+            </template>
+            <template #preview="slotProps">
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+            </template>
         </Image>
     </div>
 </template>`
diff --git a/doc/image/pt/PTDoc.vue b/doc/image/pt/PTDoc.vue
new file mode 100644
index 000000000..41c2acb34
--- /dev/null
+++ b/doc/image/pt/PTDoc.vue
@@ -0,0 +1,65 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <Image
+            src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
+            alt="Image"
+            width="250"
+            preview
+            :pt="{
+                image: { class: 'w-15rem' }
+            }"
+        />
+    </div>
+
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Image
+    src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
+    alt="Image"
+    width="250"
+    preview
+    :pt="{
+        image: { class: 'w-15rem' }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Image
+            src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
+            alt="Image"
+            width="250"
+            preview
+            :pt="{
+                image: { class: 'w-15rem' }
+            }"
+        />
+    </div>
+</template>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Image
+            src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg"
+            alt="Image"
+            width="250"
+            preview
+            :pt="{
+                image: { class: 'w-15rem' }
+            }"
+        />
+    </div>
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/image/pt/PTImage.vue b/doc/image/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/image/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/image/pt/index.vue b/doc/image/pt/index.vue
new file mode 100644
index 000000000..29cac5db5
--- /dev/null
+++ b/doc/image/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Image Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.image',
+                    label: 'Image PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Image')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/inlinemessage/pt/PTDoc.vue b/doc/inlinemessage/pt/PTDoc.vue
new file mode 100644
index 000000000..b6c0b4ab5
--- /dev/null
+++ b/doc/inlinemessage/pt/PTDoc.vue
@@ -0,0 +1,66 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <InlineMessage
+            :pt="{
+                root: { class: 'bg-yellow-100' },
+                icon: { class: 'hidden' }
+            }"
+        >
+            Username is required
+        </InlineMessage>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<InlineMessage
+    :pt="{
+        root: { class: 'bg-yellow-100' },
+        icon: { class: 'hidden' }
+    }"
+>
+    Username is required
+</InlineMessage>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <InlineMessage
+            :pt="{
+                root: { class: 'bg-indigo-100' },
+                icon: { class: 'hidden' }
+            }"
+        >
+            Username is required
+        </InlineMessage>
+    </div>
+</template>
+
+<script>
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <InlineMessage
+            :pt="{
+                root: { class: 'bg-indigo-100' },
+                icon: { class: 'hidden' }
+            }"
+        >
+            Username is required
+        </InlineMessage>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inlinemessage/pt/PTImage.vue b/doc/inlinemessage/pt/PTImage.vue
new file mode 100644
index 000000000..e017113b1
--- /dev/null
+++ b/doc/inlinemessage/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/inlinemessage.jpg" />
+    </div>
+</template>
diff --git a/doc/inlinemessage/pt/index.vue b/doc/inlinemessage/pt/index.vue
new file mode 100644
index 000000000..108635cb1
--- /dev/null
+++ b/doc/inlinemessage/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>InlineMessage Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.inlinemessage',
+                    label: 'InlineMessage PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('InlineMessage')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/inplace/pt/PTDoc.vue b/doc/inplace/pt/PTDoc.vue
new file mode 100644
index 000000000..f5757d787
--- /dev/null
+++ b/doc/inplace/pt/PTDoc.vue
@@ -0,0 +1,88 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card">
+        <Inplace
+            :pt="{
+                display: { class: 'bg-primary' }
+            }"
+        >
+            <template #display> View Content </template>
+            <template #content>
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </template>
+        </Inplace>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Inplace
+    :pt="{
+        display: { class: 'bg-primary' }
+    }"
+>
+    <template #display> View Content </template>
+    <template #content>
+        <p class="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </template>
+</Inplace>`,
+                options: `
+<template>
+    <div class="card">
+        <Inplace
+            :pt="{
+                display: { class: 'bg-primary' }
+            }"
+        >
+            <template #display> View Content </template>
+            <template #content>
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </template>
+        </Inplace>
+    </div>
+</template>
+
+<script>
+
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <Inplace
+            :pt="{
+                display: { class: 'bg-primary' }
+            }"
+        >
+            <template #display> View Content </template>
+            <template #content>
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </template>
+        </Inplace>
+    </div>
+</template>
+
+<script setup>
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inplace/pt/PTImage.vue b/doc/inplace/pt/PTImage.vue
new file mode 100644
index 000000000..6982d27bb
--- /dev/null
+++ b/doc/inplace/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/inplace.jpg" />
+    </div>
+</template>
diff --git a/doc/inplace/pt/index.vue b/doc/inplace/pt/index.vue
new file mode 100644
index 000000000..9430ec46d
--- /dev/null
+++ b/doc/inplace/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Inplace Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.inplace',
+                    label: 'Inplace PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Inplace')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/inputmask/pt/PTDoc.vue b/doc/inputmask/pt/PTDoc.vue
new file mode 100644
index 000000000..89ea12b70
--- /dev/null
+++ b/doc/inputmask/pt/PTDoc.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputMask is used as a controlled input with <i>v-model</i> properties.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <InputMask
+            id="basic"
+            v-model="value"
+            mask="99-999999"
+            placeholder="99-999999"
+            :pt="{
+                root: { class: 'border-teal-400' }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                basic: `
+<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+        `,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputmask/pt/PTImage.vue b/doc/inputmask/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/inputmask/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/inputmask/pt/index.vue b/doc/inputmask/pt/index.vue
new file mode 100644
index 000000000..97e853d2a
--- /dev/null
+++ b/doc/inputmask/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>InputMask Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.inputmask',
+                    label: 'InputMask PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('InputMask')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/inputnumber/ButtonsDoc.vue b/doc/inputnumber/ButtonsDoc.vue
index dda5a9a9f..1649be3eb 100644
--- a/doc/inputnumber/ButtonsDoc.vue
+++ b/doc/inputnumber/ButtonsDoc.vue
@@ -20,8 +20,8 @@
                 showButtons
                 buttonLayout="horizontal"
                 :step="0.25"
-                decrementButtonclass="p-button-danger"
-                incrementButtonclass="p-button-success"
+                decrementButtonClass="p-button-danger"
+                incrementButtonClass="p-button-success"
                 incrementButtonIcon="pi pi-plus"
                 decrementButtonIcon="pi pi-minus"
                 mode="currency"
@@ -44,7 +44,7 @@ export default {
 <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
 <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
 <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25"
-    decrementButtonclass="p-button-danger" incrementButtonclass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
+    decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
     mode="currency" currency="EUR" />`,
                 options: `
 <template>
@@ -61,7 +61,7 @@ export default {
         <div class="flex-auto">
             <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
             <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25"
-                decrementButtonclass="p-button-danger" incrementButtonclass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
+                decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
                 mode="currency" currency="EUR" />
         </div>
     </div>
@@ -93,7 +93,7 @@ export default {
         <div class="flex-auto">
             <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
             <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25"
-                decrementButtonclass="p-button-danger" incrementButtonclass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
+                decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
                 mode="currency" currency="EUR" />
         </div>
     </div>
diff --git a/doc/inputnumber/DisabledDoc.vue b/doc/inputnumber/DisabledDoc.vue
index 06d5c9209..70706100b 100644
--- a/doc/inputnumber/DisabledDoc.vue
+++ b/doc/inputnumber/DisabledDoc.vue
@@ -14,7 +14,8 @@ export default {
         return {
             value: 50,
             code: {
-                basic: ``,
+                basic: `
+<InputNumber v-model="value" disabled prefix="%" />`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
diff --git a/doc/inputnumber/pt/PTDoc.vue b/doc/inputnumber/pt/PTDoc.vue
new file mode 100644
index 000000000..71fb0c16e
--- /dev/null
+++ b/doc/inputnumber/pt/PTDoc.vue
@@ -0,0 +1,101 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <InputNumber
+            v-model="value"
+            showButtons
+            buttonLayout="horizontal"
+            :step="0.25"
+            incrementButtonIcon="pi pi-plus"
+            decrementButtonIcon="pi pi-minus"
+            mode="currency"
+            currency="EUR"
+            :pt="{
+                incrementButton: { class: 'bg-teal-500 border-teal-500' },
+                decrementButton: { class: 'bg-orange-500 border-orange-500' }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 20,
+            code: {
+                basic: `
+<InputNumber
+    v-model="value"
+    showButtons
+    buttonLayout="horizontal"
+    :step="0.25"
+    incrementButtonIcon="pi pi-plus"
+    decrementButtonIcon="pi pi-minus"
+    mode="currency"
+    currency="EUR"
+    :pt="{
+        incrementButton: { class: 'bg-teal-500 border-teal-500' },
+        decrementButton: { class: 'bg-orange-500 border-orange-500' }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputNumber
+            v-model="value"
+            showButtons
+            buttonLayout="horizontal"
+            :step="0.25"
+            incrementButtonIcon="pi pi-plus"
+            decrementButtonIcon="pi pi-minus"
+            mode="currency"
+            currency="EUR"
+            :pt="{
+                incrementButton: { class: 'bg-teal-500 border-teal-500' },
+                decrementButton: { class: 'bg-orange-500 border-orange-500' }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 20
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputNumber
+            v-model="value"
+            showButtons
+            buttonLayout="horizontal"
+            :step="0.25"
+            incrementButtonIcon="pi pi-plus"
+            decrementButtonIcon="pi pi-minus"
+            mode="currency"
+            currency="EUR"
+            :pt="{
+                incrementButton: { class: 'bg-teal-500 border-teal-500' },
+                decrementButton: { class: 'bg-orange-500 border-orange-500' }
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref(20);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputnumber/pt/PTImage.vue b/doc/inputnumber/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/inputnumber/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/inputnumber/pt/index.vue b/doc/inputnumber/pt/index.vue
new file mode 100644
index 000000000..aa8973fed
--- /dev/null
+++ b/doc/inputnumber/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>InputNumber Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.inputnumber',
+                    label: 'InputNumber PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('InputNumber')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/inputswitch/pt/PTDoc.vue b/doc/inputswitch/pt/PTDoc.vue
new file mode 100644
index 000000000..265551e87
--- /dev/null
+++ b/doc/inputswitch/pt/PTDoc.vue
@@ -0,0 +1,77 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <InputSwitch
+            v-model="checked"
+            :pt="{
+                slider: ({ props }) => ({
+                    class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
+                })
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<InputSwitch
+    v-model="checked"
+    :pt="{
+        slider: ({ props }) => ({
+            class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
+        })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputSwitch
+            v-model="checked"
+            :pt="{
+                slider: ({ props }) => ({
+                    class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputSwitch
+            v-model="checked"
+            :pt="{
+                slider: ({ props }) => ({
+                    class: props.modelValue ? 'bg-teal-400' : 'bg-red-400'
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputswitch/pt/PTImage.vue b/doc/inputswitch/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/inputswitch/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/inputswitch/pt/index.vue b/doc/inputswitch/pt/index.vue
new file mode 100644
index 000000000..65d839ad0
--- /dev/null
+++ b/doc/inputswitch/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>InputSwitch Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.inputswitch',
+                    label: 'InputSwitch PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('InputSwitch')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/inputtext/pt/PTDoc.vue b/doc/inputtext/pt/PTDoc.vue
new file mode 100644
index 000000000..37d08d296
--- /dev/null
+++ b/doc/inputtext/pt/PTDoc.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <InputText
+            v-model="value"
+            type="text"
+            :pt="{
+                root: { class: 'border-teal-400' }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<InputText type="text" v-model="value" />`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputText type="text" v-model="value" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+        `,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputText type="text" v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputtext/pt/PTImage.vue b/doc/inputtext/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/inputtext/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/inputtext/pt/index.vue b/doc/inputtext/pt/index.vue
new file mode 100644
index 000000000..e9b6db7c0
--- /dev/null
+++ b/doc/inputtext/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>InputText Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.inputtext',
+                    label: 'InputText PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('InputText')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/installation/DownloadDoc.vue b/doc/installation/DownloadDoc.vue
index d948612ab..91701b702 100644
--- a/doc/installation/DownloadDoc.vue
+++ b/doc/installation/DownloadDoc.vue
@@ -11,10 +11,10 @@ export default {
         return {
             code: {
                 basic: `// with npm
-npm install primevue primeicons
+npm install primevue
 
 // with yarn
-yarn add primevue primeicons`
+yarn add primevue`
             }
         };
     }
diff --git a/doc/installation/NuxtIntegrationDoc.vue b/doc/installation/NuxtIntegrationDoc.vue
index 2bc5f7e15..071150379 100644
--- a/doc/installation/NuxtIntegrationDoc.vue
+++ b/doc/installation/NuxtIntegrationDoc.vue
@@ -22,8 +22,7 @@ export default {
                 basic: `export default defineNuxtConfig({
     css: [
         "primevue/resources/themes/lara-light-blue/theme.css",
-        "primevue/resources/primevue.css",
-        "primeicons/primeicons.css"
+        "primevue/resources/primevue.css"
     ],
 	build: {
 		transpile: ["primevue"]
diff --git a/doc/installation/StylesDoc.vue b/doc/installation/StylesDoc.vue
index 6afde934d..882bd91ad 100644
--- a/doc/installation/StylesDoc.vue
+++ b/doc/installation/StylesDoc.vue
@@ -16,14 +16,11 @@ export default {
 import "primevue/resources/themes/lara-light-indigo/theme.css";     
     
 //core
-import "primevue/resources/primevue.min.css";
-
-//icons
-import "primeicons/primeicons.css";`
+import "primevue/resources/primevue.min.css";`
             },
             code2: {
                 basic: `body {
-    font-family: (--font-family);
+    font-family: var(--font-family);
 } `
             }
         };
diff --git a/doc/knob/pt/PTDoc.vue b/doc/knob/pt/PTDoc.vue
new file mode 100644
index 000000000..869ddf87d
--- /dev/null
+++ b/doc/knob/pt/PTDoc.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <Knob
+            v-model="value"
+            :pt="{
+                value: { style: { stroke: 'var(--cyan-500)' } }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 0,
+            code: {
+                basic: `
+<Knob
+    v-model="value"
+    :pt="{
+        value: { style: { stroke: 'var(--cyan-500)' } }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Knob
+            v-model="value"
+            :pt="{
+                value: { style: { stroke: 'var(--cyan-500)' } }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 0
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Knob
+            v-model="value"
+            :pt="{
+                value: { style: { stroke: 'var(--cyan-500)' } }
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(0);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/knob/pt/PTImage.vue b/doc/knob/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/knob/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/knob/pt/index.vue b/doc/knob/pt/index.vue
new file mode 100644
index 000000000..50477735f
--- /dev/null
+++ b/doc/knob/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Knob Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.knob',
+                    label: 'Knob PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Knob')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/listbox/pt/PTDoc.vue b/doc/listbox/pt/PTDoc.vue
new file mode 100644
index 000000000..6432f1a7d
--- /dev/null
+++ b/doc/listbox/pt/PTDoc.vue
@@ -0,0 +1,110 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <Listbox
+            v-model="selectedCity"
+            :options="cities"
+            optionLabel="name"
+            :pt="{
+                root: { class: 'w-full md:w-14rem' },
+                item: ({ props, state, context }) => ({
+                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
+                })
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<Listbox
+    v-model="selectedCity"
+    :options="cities"
+    optionLabel="name"
+    :pt="{
+        root: { class: 'w-full md:w-14rem' },
+        item: ({ props, state, context }) => ({
+            class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
+        })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Listbox
+            v-model="selectedCity"
+            :options="cities"
+            optionLabel="name"
+            :pt="{
+                root: { class: 'w-full md:w-14rem' },
+                item: ({ props, state, context }) => ({
+                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Listbox
+            v-model="selectedCity"
+            :options="cities"
+            optionLabel="name"
+            :pt="{
+                root: { class: 'w-full md:w-14rem' },
+                item: ({ props, state, context }) => ({
+                    class: context.selected ? 'bg-primary' : context.focused ? 'bg-blue-100' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/listbox/pt/PTImage.vue b/doc/listbox/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/listbox/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/listbox/pt/index.vue b/doc/listbox/pt/index.vue
new file mode 100644
index 000000000..a345882da
--- /dev/null
+++ b/doc/listbox/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Listbox Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.listbox',
+                    label: 'Listbox PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Listbox')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/megamenu/pt/PTDoc.vue b/doc/megamenu/pt/PTDoc.vue
new file mode 100644
index 000000000..2ae853aca
--- /dev/null
+++ b/doc/megamenu/pt/PTDoc.vue
@@ -0,0 +1,422 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card">
+        <MegaMenu
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
+                })
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Videos',
+                    icon: 'pi pi-fw pi-video',
+                    items: [
+                        [
+                            {
+                                label: 'Video 1',
+                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
+                            },
+                            {
+                                label: 'Video 2',
+                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Video 3',
+                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
+                            },
+                            {
+                                label: 'Video 4',
+                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Users',
+                    icon: 'pi pi-fw pi-users',
+                    items: [
+                        [
+                            {
+                                label: 'User 1',
+                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
+                            },
+                            {
+                                label: 'User 2',
+                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'User 3',
+                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
+                            },
+                            {
+                                label: 'User 4',
+                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'User 5',
+                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
+                            },
+                            {
+                                label: 'User 6',
+                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        [
+                            {
+                                label: 'Event 1',
+                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
+                            },
+                            {
+                                label: 'Event 2',
+                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Event 3',
+                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
+                            },
+                            {
+                                label: 'Event 4',
+                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-fw pi-cog',
+                    items: [
+                        [
+                            {
+                                label: 'Setting 1',
+                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
+                            },
+                            {
+                                label: 'Setting 2',
+                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
+                            },
+                            {
+                                label: 'Setting 3',
+                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Technology 4',
+                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
+                            }
+                        ]
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<MegaMenu
+    :model="items"
+    :pt="{
+        action: ({ props, state, context }) => ({
+            class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
+        })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card">
+        <MegaMenu
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Videos',
+                    icon: 'pi pi-fw pi-video',
+                    items: [
+                        [
+                            {
+                                label: 'Video 1',
+                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
+                            },
+                            {
+                                label: 'Video 2',
+                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Video 3',
+                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
+                            },
+                            {
+                                label: 'Video 4',
+                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Users',
+                    icon: 'pi pi-fw pi-users',
+                    items: [
+                        [
+                            {
+                                label: 'User 1',
+                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
+                            },
+                            {
+                                label: 'User 2',
+                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'User 3',
+                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
+                            },
+                            {
+                                label: 'User 4',
+                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'User 5',
+                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
+                            },
+                            {
+                                label: 'User 6',
+                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        [
+                            {
+                                label: 'Event 1',
+                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
+                            },
+                            {
+                                label: 'Event 2',
+                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Event 3',
+                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
+                            },
+                            {
+                                label: 'Event 4',
+                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-fw pi-cog',
+                    items: [
+                        [
+                            {
+                                label: 'Setting 1',
+                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
+                            },
+                            {
+                                label: 'Setting 2',
+                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
+                            },
+                            {
+                                label: 'Setting 3',
+                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Technology 4',
+                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
+                            }
+                        ]
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <MegaMenu
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Videos',
+        icon: 'pi pi-fw pi-video',
+        items: [
+            [
+                {
+                    label: 'Video 1',
+                    items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
+                },
+                {
+                    label: 'Video 2',
+                    items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                }
+            ],
+            [
+                {
+                    label: 'Video 3',
+                    items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
+                },
+                {
+                    label: 'Video 4',
+                    items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                }
+            ]
+        ]
+    },
+    {
+        label: 'Users',
+        icon: 'pi pi-fw pi-users',
+        items: [
+            [
+                {
+                    label: 'User 1',
+                    items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
+                },
+                {
+                    label: 'User 2',
+                    items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
+                }
+            ],
+            [
+                {
+                    label: 'User 3',
+                    items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
+                },
+                {
+                    label: 'User 4',
+                    items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
+                }
+            ],
+            [
+                {
+                    label: 'User 5',
+                    items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
+                },
+                {
+                    label: 'User 6',
+                    items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
+                }
+            ]
+        ]
+    },
+    {
+        label: 'Events',
+        icon: 'pi pi-fw pi-calendar',
+        items: [
+            [
+                {
+                    label: 'Event 1',
+                    items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
+                },
+                {
+                    label: 'Event 2',
+                    items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
+                }
+            ],
+            [
+                {
+                    label: 'Event 3',
+                    items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
+                },
+                {
+                    label: 'Event 4',
+                    items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
+                }
+            ]
+        ]
+    },
+    {
+        label: 'Settings',
+        icon: 'pi pi-fw pi-cog',
+        items: [
+            [
+                {
+                    label: 'Setting 1',
+                    items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
+                },
+                {
+                    label: 'Setting 2',
+                    items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
+                },
+                {
+                    label: 'Setting 3',
+                    items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
+                }
+            ],
+            [
+                {
+                    label: 'Technology 4',
+                    items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
+                }
+            ]
+        ]
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/megamenu/pt/PTImage.vue b/doc/megamenu/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/megamenu/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/megamenu/pt/index.vue b/doc/megamenu/pt/index.vue
new file mode 100644
index 000000000..9ce90cb18
--- /dev/null
+++ b/doc/megamenu/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>MegaMenu Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.megamenu',
+                    label: 'MegaMenu PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('MegaMenu')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/menu/pt/PTDoc.vue b/doc/menu/pt/PTDoc.vue
new file mode 100644
index 000000000..c48cc01cc
--- /dev/null
+++ b/doc/menu/pt/PTDoc.vue
@@ -0,0 +1,190 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Menu
+            :model="items"
+            :pt="{
+                submenuHeader: { class: 'text-surface-900' },
+                action: ({ props, state, context }) => ({
+                    class: context.focused ? 'bg-primary-400' : undefined
+                })
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Options',
+                    items: [
+                        {
+                            label: 'Update',
+                            icon: 'pi pi-refresh',
+                            command: () => {
+                                this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times',
+                            command: () => {
+                                this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Navigate',
+                    items: [
+                        {
+                            label: 'Vue Website',
+                            icon: 'pi pi-external-link',
+                            url: 'https://vuejs.org/'
+                        },
+                        {
+                            label: 'Router',
+                            icon: 'pi pi-upload',
+                            to: '/fileupload'
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<Menu
+    :model="items"
+    :pt="{
+        submenuHeader: { class: 'text-surface-900' },
+        action: ({ props, state, context }) => ({
+            class: context.focused ? 'bg-primary-400' : undefined
+        })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Menu
+            :model="items"
+            :pt="{
+                submenuHeader: { class: 'text-surface-900' },
+                action: ({ props, state, context }) => ({
+                    class: context.focused ? 'bg-primary-400' : undefined
+                })
+            }"
+        />
+        <Toast />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Options',
+                    items: [
+                        {
+                            label: 'Update',
+                            icon: 'pi pi-refresh',
+                            command: () => {
+                                this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                            }
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-times',
+                            command: () => {
+                                this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                            }
+                        }
+                    ]
+                },
+                {
+                    label: 'Navigate',
+                    items: [
+                        {
+                            label: 'Vue Website',
+                            icon: 'pi pi-external-link',
+                            url: 'https://vuejs.org/'
+                        },
+                        {
+                            label: 'Router',
+                            icon: 'pi pi-upload',
+                            to: '/fileupload'
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Menu
+            :model="items"
+            :pt="{
+                submenuHeader: { class: 'text-surface-900' },
+                action: ({ props, state, context }) => ({
+                    class: context.focused ? 'bg-primary-400' : undefined
+                })
+            }"
+        />
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useToast } from "primevue/usetoast";
+
+const toast = useToast();
+const items = ref([
+    {
+        label: 'Options',
+        items: [
+            {
+                label: 'Update',
+                icon: 'pi pi-refresh',
+                command: () => {
+                    toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                }
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-times',
+                command: () => {
+                    toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                }
+            }
+        ]
+    },
+    {
+        label: 'Navigate',
+        items: [
+            {
+                label: 'Vue Website',
+                icon: 'pi pi-external-link',
+                url: 'https://vuejs.org/'
+            },
+            {
+                label: 'Router',
+                icon: 'pi pi-upload',
+                to: '/fileupload'
+            }
+        ]
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/menu/pt/PTImage.vue b/doc/menu/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/menu/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/menu/pt/index.vue b/doc/menu/pt/index.vue
new file mode 100644
index 000000000..9c1bf63c9
--- /dev/null
+++ b/doc/menu/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Menu Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.menu',
+                    label: 'Menu PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Menu')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/menubar/pt/PTDoc.vue b/doc/menubar/pt/PTDoc.vue
new file mode 100644
index 000000000..a33dd03bd
--- /dev/null
+++ b/doc/menubar/pt/PTDoc.vue
@@ -0,0 +1,443 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card relative z-2">
+        <Menubar
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
+                })
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-fw pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator: true
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    label: 'Users',
+                    icon: 'pi pi-fw pi-user',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-user-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-user-minus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-fw pi-users',
+                            items: [
+                                {
+                                    label: 'Filter',
+                                    icon: 'pi pi-fw pi-filter',
+                                    items: [
+                                        {
+                                            label: 'Print',
+                                            icon: 'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon: 'pi pi-fw pi-bars',
+                                    label: 'List'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archieve',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-fw pi-power-off'
+                }
+            ],
+            code: {
+                basic: `
+<Menubar
+    :model="items"
+    :pt="{
+        action: ({ props, state, context }) => ({
+            class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
+        })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card relative z-2">
+        <Menubar
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-fw pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator: true
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    label: 'Users',
+                    icon: 'pi pi-fw pi-user',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-user-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-user-minus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-fw pi-users',
+                            items: [
+                                {
+                                    label: 'Filter',
+                                    icon: 'pi pi-fw pi-filter',
+                                    items: [
+                                        {
+                                            label: 'Print',
+                                            icon: 'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon: 'pi pi-fw pi-bars',
+                                    label: 'List'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archieve',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-fw pi-power-off'
+                }
+            ]
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card relative z-2">
+        <Menubar
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-fw pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-plus',
+                items: [
+                    {
+                        label: 'Bookmark',
+                        icon: 'pi pi-fw pi-bookmark'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-fw pi-video'
+                    }
+                ]
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-trash'
+            },
+            {
+                separator: true
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-fw pi-external-link'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-fw pi-pencil',
+        items: [
+            {
+                label: 'Left',
+                icon: 'pi pi-fw pi-align-left'
+            },
+            {
+                label: 'Right',
+                icon: 'pi pi-fw pi-align-right'
+            },
+            {
+                label: 'Center',
+                icon: 'pi pi-fw pi-align-center'
+            },
+            {
+                label: 'Justify',
+                icon: 'pi pi-fw pi-align-justify'
+            }
+        ]
+    },
+    {
+        label: 'Users',
+        icon: 'pi pi-fw pi-user',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-user-plus'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-user-minus'
+            },
+            {
+                label: 'Search',
+                icon: 'pi pi-fw pi-users',
+                items: [
+                    {
+                        label: 'Filter',
+                        icon: 'pi pi-fw pi-filter',
+                        items: [
+                            {
+                                label: 'Print',
+                                icon: 'pi pi-fw pi-print'
+                            }
+                        ]
+                    },
+                    {
+                        icon: 'pi pi-fw pi-bars',
+                        label: 'List'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Events',
+        icon: 'pi pi-fw pi-calendar',
+        items: [
+            {
+                label: 'Edit',
+                icon: 'pi pi-fw pi-pencil',
+                items: [
+                    {
+                        label: 'Save',
+                        icon: 'pi pi-fw pi-calendar-plus'
+                    },
+                    {
+                        label: 'Delete',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            },
+            {
+                label: 'Archieve',
+                icon: 'pi pi-fw pi-calendar-times',
+                items: [
+                    {
+                        label: 'Remove',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Quit',
+        icon: 'pi pi-fw pi-power-off'
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/menubar/pt/PTImage.vue b/doc/menubar/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/menubar/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/menubar/pt/index.vue b/doc/menubar/pt/index.vue
new file mode 100644
index 000000000..7bd315444
--- /dev/null
+++ b/doc/menubar/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Menubar Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.menubar',
+                    label: 'Menubar PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Menubar')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/message/CustomIconDoc.vue b/doc/message/CustomIconDoc.vue
index 8603d498a..61089ec1c 100644
--- a/doc/message/CustomIconDoc.vue
+++ b/doc/message/CustomIconDoc.vue
@@ -3,7 +3,7 @@
         <p>The <i>icon</i> property can change the icon of the message.</p>
     </DocSectionText>
     <div class="card">
-        <Message severity="info" icon="pi-send">Info Message Content</Message>
+        <Message severity="info" icon="pi pi-send">Info Message Content</Message>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,11 +14,11 @@ export default {
         return {
             code: {
                 basic: `
-<Message severity="info" icon="pi-send">Info Message Content</Message>`,
+<Message severity="info" icon="pi pi-send">Info Message Content</Message>`,
                 options: `
 <template>
     <div class="card">
-        <Message severity="info" icon="pi-send">Info Message Content</Message>
+        <Message severity="info" icon="pi pi-send">Info Message Content</Message>
     </div>
 </template>
 
@@ -27,7 +27,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Message severity="info" icon="pi-send">Info Message Content</Message>
+        <Message severity="info" icon="pi pi-send">Info Message Content</Message>
     </div>
 </template>
 
diff --git a/doc/message/pt/PTDoc.vue b/doc/message/pt/PTDoc.vue
new file mode 100644
index 000000000..5ed425b3b
--- /dev/null
+++ b/doc/message/pt/PTDoc.vue
@@ -0,0 +1,62 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card">
+        <Message
+            :pt="{
+                root: { class: 'bg-yellow-100' }
+            }"
+        >
+            Message Content
+        </Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Message
+    :pt="{
+        root: { class: 'bg-yellow-100' }
+    }"
+>
+    Message Content
+</Message>`,
+                options: `
+<template>
+    <div class="card">
+        <Message
+            :pt="{
+                root: { class: 'bg-yellow-100' }
+            }"
+        >
+            Message Content
+        </Message>
+    </div>
+</template>
+
+<script>
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <Message
+            :pt="{
+                root: { class: 'bg-yellow-100' }
+            }"
+        >
+            Message Content
+        </Message>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/message/pt/PTImage.vue b/doc/message/pt/PTImage.vue
new file mode 100644
index 000000000..06a3d3fb7
--- /dev/null
+++ b/doc/message/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/message.jpg" />
+    </div>
+</template>
diff --git a/doc/message/pt/index.vue b/doc/message/pt/index.vue
new file mode 100644
index 000000000..ed31eb743
--- /dev/null
+++ b/doc/message/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Message Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.message',
+                    label: 'Message PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Message')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/multiselect/pt/PTDoc.vue b/doc/multiselect/pt/PTDoc.vue
new file mode 100644
index 000000000..712e822e3
--- /dev/null
+++ b/doc/multiselect/pt/PTDoc.vue
@@ -0,0 +1,118 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <MultiSelect
+            v-model="selectedCities"
+            :options="cities"
+            optionLabel="name"
+            placeholder="Select Cities"
+            :maxSelectedLabels="3"
+            :pt="{
+                root: { class: 'w-full md:w-14rem' },
+                item: ({ props, state, context }) => ({
+                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
+                })
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+<MultiSelect
+    v-model="selectedCities"
+    :options="cities"
+    optionLabel="name"
+    placeholder="Select Cities"
+    :maxSelectedLabels="3"
+    :pt="{
+        root: { class: 'w-full md:w-14rem' },
+        item: ({ props, state, context }) => ({
+            class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
+        })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <MultiSelect
+            v-model="selectedCities"
+            :options="cities"
+            optionLabel="name"
+            placeholder="Select Cities"
+            :maxSelectedLabels="3"
+            :pt="{
+                root: { class: 'w-full md:w-14rem' },
+                item: ({ props, state, context }) => ({
+                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <MultiSelect
+            v-model="selectedCities"
+            :options="cities"
+            optionLabel="name"
+            placeholder="Select Cities"
+            :maxSelectedLabels="3"
+            :pt="{
+                root: { class: 'w-full md:w-14rem' },
+                item: ({ props, state, context }) => ({
+                    class: context.selected ? 'bg-blue-300' : context.focused ? 'bg-blue-100' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCities = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/multiselect/pt/PTImage.vue b/doc/multiselect/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/multiselect/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/multiselect/pt/index.vue b/doc/multiselect/pt/index.vue
new file mode 100644
index 000000000..2ddac9271
--- /dev/null
+++ b/doc/multiselect/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>MultiSelect Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.multiselect',
+                    label: 'MultiSelect PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('MultiSelect')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/orderlist/pt/PTDoc.vue b/doc/orderlist/pt/PTDoc.vue
new file mode 100644
index 000000000..4ff31e60a
--- /dev/null
+++ b/doc/orderlist/pt/PTDoc.vue
@@ -0,0 +1,174 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card xl:flex xl:justify-content-center">
+        <OrderList
+            v-model="products"
+            dataKey="id"
+            :pt="{
+                list: { style: { height: 'auto' } },
+                moveUpButton: {
+                    root: { class: 'bg-teal-400 border-teal-400' }
+                }
+            }"
+        >
+            <template #header> List of Products </template>
+            <template #item="slotProps">
+                <div class="flex flex-wrap p-2 align-items-center gap-3">
+                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <div class="flex-1 flex flex-column gap-2">
+                        <span class="font-bold">{{ slotProps.item.name }}</span>
+                        <div class="flex align-items-center gap-2">
+                            <i class="pi pi-tag text-sm"></i>
+                            <span>{{ slotProps.item.category }}</span>
+                        </div>
+                    </div>
+                    <span class="font-bold text-900">${{ slotProps.item.price }}</span>
+                </div>
+            </template>
+        </OrderList>
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<OrderList
+    v-model="products"
+    dataKey="id"
+    :pt="{
+        list: { style: { height: 'auto' } },
+        moveUpButton: {
+            root: { class: 'bg-teal-400 border-teal-400' }
+        }
+    }"
+>
+    <template #header> List of Products </template>
+    <template #item="slotProps">
+        <div class="flex flex-wrap p-2 align-items-center gap-3">
+            <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+            <div class="flex-1 flex flex-column gap-2">
+                <span class="font-bold">{{ slotProps.item.name }}</span>
+                <div class="flex align-items-center gap-2">
+                    <i class="pi pi-tag text-sm"></i>
+                    <span>{{ slotProps.item.category }}</span>
+                </div>
+            </div>
+            <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
+        </div>
+    </template>
+</OrderList>`,
+                options: `
+<template>
+    <div class="card xl:flex xl:justify-content-center">
+        <OrderList
+            v-model="products"
+            dataKey="id"
+            :pt="{
+                list: { style: { height: 'auto' } },
+                moveUpButton: {
+                    root: { class: 'bg-teal-400 border-teal-400' }
+                }
+            }"
+        >
+            <template #header> List of Products </template>
+            <template #item="slotProps">
+                <div class="flex flex-wrap p-2 align-items-center gap-3">
+                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <div class="flex-1 flex flex-column gap-2">
+                        <span class="font-bold">{{ slotProps.item.name }}</span>
+                        <div class="flex align-items-center gap-2">
+                            <i class="pi pi-tag text-sm"></i>
+                            <span>{{ slotProps.item.category }}</span>
+                        </div>
+                    </div>
+                    <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
+                </div>
+            </template>
+        </OrderList>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService'
+export default {
+    data() {
+        return {
+            products: null
+        }
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data));
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card xl:flex xl:justify-content-center">
+        <OrderList
+            v-model="products"
+            dataKey="id"
+            :pt="{
+                list: { style: { height: 'auto' } },
+                moveUpButton: {
+                    root: { class: 'bg-teal-400 border-teal-400' }
+                }
+            }"
+        >
+            <template #header> List of Products </template>
+            <template #item="slotProps">
+                <div class="flex flex-wrap p-2 align-items-center gap-3">
+                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <div class="flex-1 flex flex-column gap-2">
+                        <span class="font-bold">{{ slotProps.item.name }}</span>
+                        <div class="flex align-items-center gap-2">
+                            <i class="pi pi-tag text-sm"></i>
+                            <span>{{ slotProps.item.category }}</span>
+                        </div>
+                    </div>
+                    <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
+                </div>
+            </template>
+        </OrderList>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService'
+
+const products = ref(null);
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (this.products = data));
+});
+<\/script>`,
+                data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data));
+    }
+};
+</script>
diff --git a/doc/orderlist/pt/PTImage.vue b/doc/orderlist/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/orderlist/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/orderlist/pt/index.vue b/doc/orderlist/pt/index.vue
new file mode 100644
index 000000000..57e52ebfe
--- /dev/null
+++ b/doc/orderlist/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>OrderList Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.orderlist',
+                    label: 'OrderList PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('OrderList')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/organizationchart/pt/PTDoc.vue b/doc/organizationchart/pt/PTDoc.vue
new file mode 100644
index 000000000..4e3a27e71
--- /dev/null
+++ b/doc/organizationchart/pt/PTDoc.vue
@@ -0,0 +1,175 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card overflow-x-auto">
+        <OrganizationChart
+            :value="data"
+            collapsible
+            :pt="{
+                node: ({ context }) => ({
+                    class: context.toggleable ? 'border-orange-400 border-round-sm' : 'border-teal-400 border-round-sm'
+                })
+            }"
+        >
+            <template #default="slotProps">
+                <span>{{ slotProps.node.label }}</span>
+            </template>
+        </OrganizationChart>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            data: {
+                label: 'Argentina',
+                children: [
+                    {
+                        label: 'Argentina',
+                        children: [
+                            {
+                                label: 'Argentina'
+                            },
+                            {
+                                label: 'Croatia'
+                            }
+                        ]
+                    },
+                    {
+                        label: 'France',
+                        children: [
+                            {
+                                label: 'France'
+                            },
+                            {
+                                label: 'Morocco'
+                            }
+                        ]
+                    }
+                ]
+            },
+            code: {
+                basic: `
+<OrganizationChart
+    :value="data"
+    collapsible
+    :pt="{
+        node: ({ context }) => ({
+            class: context.toggleable ? 'border-orange-400 border-round-sm' : 'border-teal-400 border-round-sm'
+        })
+    }"
+>
+    <template #default="slotProps">
+        <span>{{ slotProps.node.label }}</span>
+    </template>
+</OrganizationChart>`,
+                options: `
+<template>
+    <div class="card overflow-x-auto">
+        <OrganizationChart
+            :value="data"
+            collapsible
+            :pt="{
+                node: ({ context }) => ({
+                    class: context.toggleable ? 'border-orange-400 border-round-sm' : 'border-teal-400 border-round-sm'
+                })
+            }"
+        >
+            <template #default="slotProps">
+                <span>{{ slotProps.node.label }}</span>
+            </template>
+        </OrganizationChart>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            data: {
+                label: 'Argentina',
+                children: [
+                    {
+                        label: 'Argentina',
+                        children: [
+                            {
+                                label: 'Argentina'
+                            },
+                            {
+                                label: 'Croatia'
+                            }
+                        ]
+                    },
+                    {
+                        label: 'France',
+                        children: [
+                            {
+                                label: 'France'
+                            },
+                            {
+                                label: 'Morocco'
+                            }
+                        ]
+                    }
+                ]
+            }
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card overflow-x-auto">
+        <OrganizationChart
+            :value="data"
+            collapsible
+            :pt="{
+                node: ({ context }) => ({
+                    class: context.toggleable ? 'border-orange-400 border-round-sm' : 'border-teal-400 border-round-sm'
+                })
+            }"
+        >
+            <template #default="slotProps">
+                <span>{{ slotProps.node.label }}</span>
+            </template>
+        </OrganizationChart>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const data = ref({
+    label: 'Argentina',
+    children: [
+        {
+            label: 'Argentina',
+            children: [
+                {
+                    label: 'Argentina'
+                },
+                {
+                    label: 'Croatia'
+                }
+            ]
+        },
+        {
+            label: 'France',
+            children: [
+                {
+                    label: 'France'
+                },
+                {
+                    label: 'Morocco'
+                }
+            ]
+        }
+    ]
+});
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/organizationchart/pt/PTImage.vue b/doc/organizationchart/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/organizationchart/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/organizationchart/pt/index.vue b/doc/organizationchart/pt/index.vue
new file mode 100644
index 000000000..97d76909c
--- /dev/null
+++ b/doc/organizationchart/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>OrganizationChart Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.organizationchart',
+                    label: 'OrganizationChart PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('OrganizationChart')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/overlaypanel/pt/PTDoc.vue b/doc/overlaypanel/pt/PTDoc.vue
new file mode 100644
index 000000000..e4d49b42d
--- /dev/null
+++ b/doc/overlaypanel/pt/PTDoc.vue
@@ -0,0 +1,84 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
+
+        <OverlayPanel ref="op" :pt="{ root: { class: 'surface-ground' } }">
+            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+        </OverlayPanel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
+
+<OverlayPanel ref="op"
+    :pt="{
+        root: { class: 'surface-ground' }
+    }"
+>
+    <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+</OverlayPanel>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
+
+        <OverlayPanel ref="op"
+            :pt="{
+                root: { class: 'surface-ground' }
+            }"
+        >
+            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+        </OverlayPanel>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        toggle(event) {
+            this.$refs.op.toggle(event);
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
+
+        <OverlayPanel ref="op"
+            :pt="{
+                root: { class: 'surface-ground' }
+            }"
+        >
+            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+        </OverlayPanel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const op = ref();
+const toggle = (event) => {
+    op.value.toggle(event);
+}
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.op.toggle(event);
+        }
+    }
+};
+</script>
diff --git a/doc/overlaypanel/pt/PTImage.vue b/doc/overlaypanel/pt/PTImage.vue
new file mode 100644
index 000000000..1f5057e6a
--- /dev/null
+++ b/doc/overlaypanel/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/overlaypanel.jpg" />
+    </div>
+</template>
diff --git a/doc/overlaypanel/pt/index.vue b/doc/overlaypanel/pt/index.vue
new file mode 100644
index 000000000..da9a6389d
--- /dev/null
+++ b/doc/overlaypanel/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>OverlayPanel Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.overlaypanel',
+                    label: 'OverlayPanel PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('OverlayPanel')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/paginator/pt/PTDoc.vue b/doc/paginator/pt/PTDoc.vue
new file mode 100644
index 000000000..21ccee9d9
--- /dev/null
+++ b/doc/paginator/pt/PTDoc.vue
@@ -0,0 +1,70 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card">
+        <Paginator
+            :rows="10"
+            :totalRecords="120"
+            :pt="{
+                pageButton: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary' : undefined
+                })
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Paginator
+    :rows="10"
+    :totalRecords="120"
+    :pt="{
+        pageButton: ({ props, state, context }) => ({
+            class: context.active ? 'bg-primary' : undefined
+        })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card">
+        <Paginator
+            :rows="10"
+            :totalRecords="120"
+            :pt="{
+                pageButton: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script>
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <Paginator
+            :rows="10"
+            :totalRecords="120"
+            :pt="{
+                pageButton: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/paginator/pt/PTImage.vue b/doc/paginator/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/paginator/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/paginator/pt/index.vue b/doc/paginator/pt/index.vue
new file mode 100644
index 000000000..290fb27fb
--- /dev/null
+++ b/doc/paginator/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Paginator Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.paginator',
+                    label: 'Paginator PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Paginator')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/panel/pt/PTDoc.vue b/doc/panel/pt/PTDoc.vue
index 22c161291..979ddc432 100644
--- a/doc/panel/pt/PTDoc.vue
+++ b/doc/panel/pt/PTDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs" :level="2" />
     <div class="card">
-        <Panel header="Header" :pt="{ header: { class: 'bg-blue-500' }, title: { class: 'text-white' }, toggler: { class: 'text-white hover:bg-blue-400' } }" toggleable>
+        <Panel header="Header" :pt="{ header: { class: 'bg-primary' }, title: { class: 'text-white' }, toggler: { class: 'text-white hover:bg-primary-reverse' } }" toggleable>
             <p class="m-0">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -19,9 +19,9 @@ export default {
                 basic: `
 <Panel header="Header" toggleable
     :pt="{
-        header: { class: 'bg-blue-500' },
+        header: { class: 'bg-primary' },
         title: { class: 'text-white' },
-        toggler: { class: 'text-white hover:bg-blue-400' }
+        toggler: { class: 'text-white hover:bg-primary-reverse' }
     }">
     <p class="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -33,9 +33,9 @@ export default {
     <div class="card">
         <Panel header="Header" toggleable
             :pt="{
-                header: { class: 'bg-blue-500' },
+                header: { class: 'bg-primary' },
                 title: { class: 'text-white' },
-                toggler: { class: 'text-white hover:bg-blue-400' }
+                toggler: { class: 'text-white hover:bg-primary-reverse' }
             }">
             <p class="m-0">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -52,9 +52,9 @@ export default {
     <div class="card">
         <Panel header="Header" toggleable
             :pt="{
-                header: { class: 'bg-blue-500' },
+                header: { class: 'bg-primary' },
                 title: { class: 'text-white' },
-                toggler: { class: 'text-white hover:bg-blue-400' }
+                toggler: { class: 'text-white hover:bg-primary-reverse' }
             }">
             <p class="m-0">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
diff --git a/doc/panel/pt/PTImage.vue b/doc/panel/pt/PTImage.vue
index bcae401cf..e057deedb 100644
--- a/doc/panel/pt/PTImage.vue
+++ b/doc/panel/pt/PTImage.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>{{ $attrs.description }}</p>
     </DocSectionText>
-    <div>
-        <img class="w-full" src="/images/pt/panel.jpg" />
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/panel.jpg" />
     </div>
 </template>
diff --git a/doc/panel/pt/index.vue b/doc/panel/pt/index.vue
index 9d4d22f7b..58366e149 100644
--- a/doc/panel/pt/index.vue
+++ b/doc/panel/pt/index.vue
@@ -1,8 +1,7 @@
 <template>
-    <div className="doc-main">
-        <div className="doc-intro">
+    <div class="doc-main">
+        <div class="doc-intro">
             <h1>Panel Pass Through</h1>
-            <p>Description</p>
         </div>
         <DocSections :docs="docs" />
     </div>
@@ -21,18 +20,18 @@ export default {
             docs: [
                 {
                     id: 'pt.image',
-                    label: 'WireFrame',
+                    label: 'Wireframe',
                     component: PTImage
                 },
                 {
-                    id: 'pt.doc',
-                    label: 'Panel Elements',
+                    id: 'pt.doc.panel',
+                    label: 'Panel PT Options',
                     component: DocApiTable,
                     data: getPTOption('Panel')
                 },
                 {
                     id: 'pt.demo',
-                    label: 'Example',
+                    label: 'Demo',
                     component: PtDoc
                 }
             ]
diff --git a/doc/panelmenu/pt/PTDoc.vue b/doc/panelmenu/pt/PTDoc.vue
new file mode 100644
index 000000000..b04582853
--- /dev/null
+++ b/doc/panelmenu/pt/PTDoc.vue
@@ -0,0 +1,414 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <PanelMenu
+            :model="items"
+            :pt="{
+                root: { class: 'w-full md:w-25rem' }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-fw pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    label: 'Users',
+                    icon: 'pi pi-fw pi-user',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-user-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-user-minus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-fw pi-users',
+                            items: [
+                                {
+                                    label: 'Filter',
+                                    icon: 'pi pi-fw pi-filter',
+                                    items: [
+                                        {
+                                            label: 'Print',
+                                            icon: 'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon: 'pi pi-fw pi-bars',
+                                    label: 'List'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archieve',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<PanelMenu
+    :model="items"
+    :pt="{
+        root: { class: 'w-full md:w-25rem' }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <PanelMenu
+            :model="items"
+            :pt="{
+                root: { class: 'w-full md:w-25rem' }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-fw pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    label: 'Users',
+                    icon: 'pi pi-fw pi-user',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-user-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-user-minus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-fw pi-users',
+                            items: [
+                                {
+                                    label: 'Filter',
+                                    icon: 'pi pi-fw pi-filter',
+                                    items: [
+                                        {
+                                            label: 'Print',
+                                            icon: 'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon: 'pi pi-fw pi-bars',
+                                    label: 'List'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archieve',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <PanelMenu
+            :model="items"
+            :pt="{
+                root: { class: 'w-full md:w-25rem' }
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-fw pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-plus',
+                items: [
+                    {
+                        label: 'Bookmark',
+                        icon: 'pi pi-fw pi-bookmark'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-fw pi-video'
+                    }
+                ]
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-trash'
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-fw pi-external-link'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-fw pi-pencil',
+        items: [
+            {
+                label: 'Left',
+                icon: 'pi pi-fw pi-align-left'
+            },
+            {
+                label: 'Right',
+                icon: 'pi pi-fw pi-align-right'
+            },
+            {
+                label: 'Center',
+                icon: 'pi pi-fw pi-align-center'
+            },
+            {
+                label: 'Justify',
+                icon: 'pi pi-fw pi-align-justify'
+            }
+        ]
+    },
+    {
+        label: 'Users',
+        icon: 'pi pi-fw pi-user',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-user-plus'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-user-minus'
+            },
+            {
+                label: 'Search',
+                icon: 'pi pi-fw pi-users',
+                items: [
+                    {
+                        label: 'Filter',
+                        icon: 'pi pi-fw pi-filter',
+                        items: [
+                            {
+                                label: 'Print',
+                                icon: 'pi pi-fw pi-print'
+                            }
+                        ]
+                    },
+                    {
+                        icon: 'pi pi-fw pi-bars',
+                        label: 'List'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Events',
+        icon: 'pi pi-fw pi-calendar',
+        items: [
+            {
+                label: 'Edit',
+                icon: 'pi pi-fw pi-pencil',
+                items: [
+                    {
+                        label: 'Save',
+                        icon: 'pi pi-fw pi-calendar-plus'
+                    },
+                    {
+                        label: 'Delete',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            },
+            {
+                label: 'Archieve',
+                icon: 'pi pi-fw pi-calendar-times',
+                items: [
+                    {
+                        label: 'Remove',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/panelmenu/pt/PTImage.vue b/doc/panelmenu/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/panelmenu/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/panelmenu/pt/index.vue b/doc/panelmenu/pt/index.vue
new file mode 100644
index 000000000..f89a29949
--- /dev/null
+++ b/doc/panelmenu/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>PanelMenu Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.panelmenu',
+                    label: 'PanelMenu PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('PanelMenu')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/password/pt/PTDoc.vue b/doc/password/pt/PTDoc.vue
new file mode 100644
index 000000000..2564cc7ae
--- /dev/null
+++ b/doc/password/pt/PTDoc.vue
@@ -0,0 +1,56 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Strength meter is displayed as a popup while a value is being entered.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Password
+            v-model="value"
+            :pt="{
+                info: { class: 'font-bold' }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<Password v-model="value" />`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Password v-model="value" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Password v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/password/pt/PTImage.vue b/doc/password/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/password/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/password/pt/index.vue b/doc/password/pt/index.vue
new file mode 100644
index 000000000..6bc38dd94
--- /dev/null
+++ b/doc/password/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Password Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.password',
+                    label: 'Password PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Password')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/picklist/pt/PTDoc.vue b/doc/picklist/pt/PTDoc.vue
new file mode 100644
index 000000000..03c5d74be
--- /dev/null
+++ b/doc/picklist/pt/PTDoc.vue
@@ -0,0 +1,195 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card">
+        <PickList
+            v-model="products"
+            dataKey="id"
+            :pt="{
+                sourceList: { style: { height: '342px' } },
+                targetList: { style: { height: '342px' } },
+                moveAllToTargetButton: {
+                    root: { class: 'bg-teal-400 border-teal-400' }
+                },
+                moveAllToSourceButton: {
+                    root: { class: 'bg-teal-400 border-teal-400' }
+                }
+            }"
+        >
+            <template #sourceheader> Available </template>
+            <template #targetheader> Selected </template>
+            <template #item="slotProps">
+                <div class="flex flex-wrap p-2 align-items-center gap-3">
+                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <div class="flex-1 flex flex-column gap-2">
+                        <span class="font-bold">{{ slotProps.item.name }}</span>
+                        <div class="flex align-items-center gap-2">
+                            <i class="pi pi-tag text-sm"></i>
+                            <span>{{ slotProps.item.category }}</span>
+                        </div>
+                    </div>
+                    <span class="font-bold text-900">${{ slotProps.item.price }}</span>
+                </div>
+            </template>
+        </PickList>
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<PickList
+    v-model="products"
+    dataKey="id"
+    :pt="{
+        sourceList: { style: { height: '342px' } },
+        targetList: { style: { height: '342px' } },
+        moveAllToTargetButton: {
+            root: { class: 'bg-teal-400 border-teal-400' }
+        },
+        moveAllToSourceButton: {
+            root: { class: 'bg-teal-400 border-teal-400' }
+        }
+    }"
+>
+    <template #sourceheader> Available </template>
+    <template #targetheader> Selected </template>
+    <template #item="slotProps">
+        <div class="flex flex-wrap p-2 align-items-center gap-3">
+            <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+            <div class="flex-1 flex flex-column gap-2">
+                <span class="font-bold">{{ slotProps.item.name }}</span>
+                <div class="flex align-items-center gap-2">
+                    <i class="pi pi-tag text-sm"></i>
+                    <span>{{ slotProps.item.category }}</span>
+                </div>
+            </div>
+            <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
+        </div>
+    </template>
+</PickList>`,
+                options: `
+<template>
+    <div class="card">
+        <PickList
+            v-model="products"
+            dataKey="id"
+            :pt="{
+                sourceList: { style: { height: '342px' } },
+                targetList: { style: { height: '342px' } },
+                moveAllToTargetButton: {
+                    root: { class: 'bg-teal-400 border-teal-400' }
+                },
+                moveAllToSourceButton: {
+                    root: { class: 'bg-teal-400 border-teal-400' }
+                }
+            }"
+        >
+            <template #sourceheader> Available </template>
+            <template #targetheader> Selected </template>
+            <template #item="slotProps">
+                <div class="flex flex-wrap p-2 align-items-center gap-3">
+                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <div class="flex-1 flex flex-column gap-2">
+                        <span class="font-bold">{{ slotProps.item.name }}</span>
+                        <div class="flex align-items-center gap-2">
+                            <i class="pi pi-tag text-sm"></i>
+                            <span>{{ slotProps.item.category }}</span>
+                        </div>
+                    </div>
+                    <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
+                </div>
+            </template>
+        </PickList>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService'
+export default {
+    data() {
+        return {
+            products: null
+        }
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <PickList
+            v-model="products"
+            dataKey="id"
+            :pt="{
+                sourceList: { style: { height: '342px' } },
+                targetList: { style: { height: '342px' } },
+                moveAllToTargetButton: {
+                    root: { class: 'bg-teal-400 border-teal-400' }
+                },
+                moveAllToSourceButton: {
+                    root: { class: 'bg-teal-400 border-teal-400' }
+                }
+            }"
+        >
+            <template #sourceheader> Available </template>
+            <template #targetheader> Selected </template>
+            <template #item="slotProps">
+                <div class="flex flex-wrap p-2 align-items-center gap-3">
+                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <div class="flex-1 flex flex-column gap-2">
+                        <span class="font-bold">{{ slotProps.item.name }}</span>
+                        <div class="flex align-items-center gap-2">
+                            <i class="pi pi-tag text-sm"></i>
+                            <span>{{ slotProps.item.category }}</span>
+                        </div>
+                    </div>
+                    <span class="font-bold text-900">$ {{ slotProps.item.price }}</span>
+                </div>
+            </template>
+        </PickList>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService'
+
+const products = ref(null);
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = [data, []]));
+});
+<\/script>`,
+                data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: '/bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+            }
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
+    }
+};
+</script>
diff --git a/doc/picklist/pt/PTImage.vue b/doc/picklist/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/picklist/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/picklist/pt/index.vue b/doc/picklist/pt/index.vue
new file mode 100644
index 000000000..7a048e8c0
--- /dev/null
+++ b/doc/picklist/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>PickList Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.picklist',
+                    label: 'PickList PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('PickList')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/progressbar/pt/PTDoc.vue b/doc/progressbar/pt/PTDoc.vue
new file mode 100644
index 000000000..b4d5e7b0d
--- /dev/null
+++ b/doc/progressbar/pt/PTDoc.vue
@@ -0,0 +1,52 @@
+<template>
+    <DocSectionText v-bind="$attrs" :level="2" />
+    <div class="card">
+        <ProgressBar
+            :value="50"
+            :pt="{
+                value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ProgressBar :value="50"
+    :pt="{
+        value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
+    }" />`,
+                options: `
+<template>
+    <div class="card">
+        <ProgressBar :value="50"
+            :pt="{
+                value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
+            }" />
+    </div>
+</template>
+
+<script>
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <ProgressBar :value="50"
+            :pt="{
+                value: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)' } }
+            }" />
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/progressbar/pt/PTImage.vue b/doc/progressbar/pt/PTImage.vue
new file mode 100644
index 000000000..0424ab608
--- /dev/null
+++ b/doc/progressbar/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/progressbar.jpg" />
+    </div>
+</template>
diff --git a/doc/progressbar/pt/index.vue b/doc/progressbar/pt/index.vue
new file mode 100644
index 000000000..3acb4d6ce
--- /dev/null
+++ b/doc/progressbar/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ProgressBar Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.progressbar',
+                    label: 'ProgressBar PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('ProgressBar')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/progressspinner/pt/PTDoc.vue b/doc/progressspinner/pt/PTDoc.vue
new file mode 100644
index 000000000..f054fd712
--- /dev/null
+++ b/doc/progressspinner/pt/PTDoc.vue
@@ -0,0 +1,58 @@
+<template>
+    <DocSectionText v-bind="$attrs" :level="2" />
+    <div class="card flex justify-content-center">
+        <ProgressSpinner
+            :pt="{
+                spinner: { style: { animationDuration: '0s' } },
+                circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ProgressSpinner
+    :pt="{
+        spinner: { style: { animationDuration: '0s' } },
+        circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <ProgressSpinner
+            :pt="{
+                spinner: { style: { animationDuration: '0s' } },
+                circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <ProgressSpinner
+            :pt="{
+                spinner: { style: { animationDuration: '0s' } },
+                circle: { style: { stroke: '#F59E0B', strokeWidth: 3, animation: 'none' } }
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/progressspinner/pt/PTImage.vue b/doc/progressspinner/pt/PTImage.vue
new file mode 100644
index 000000000..3e3855714
--- /dev/null
+++ b/doc/progressspinner/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/progressspinner.jpg" />
+    </div>
+</template>
diff --git a/doc/progressspinner/pt/index.vue b/doc/progressspinner/pt/index.vue
new file mode 100644
index 000000000..70e2b897e
--- /dev/null
+++ b/doc/progressspinner/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ProgressSpinner Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.progressspinner',
+                    label: 'ProgressSpinner PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('ProgressSpinner')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/radiobutton/pt/PTDoc.vue b/doc/radiobutton/pt/PTDoc.vue
new file mode 100644
index 000000000..5be582f90
--- /dev/null
+++ b/doc/radiobutton/pt/PTDoc.vue
@@ -0,0 +1,126 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <div class="flex flex-column gap-3">
+            <div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
+                <RadioButton
+                    v-model="selectedCategory"
+                    :inputId="category.key"
+                    name="pizza"
+                    :value="category.name"
+                    :pt="{
+                        input: ({ props }) => ({
+                            class: props.modelValue === categories[index].name ? 'bg-orange-500 border-orange-500' : undefined
+                        })
+                    }"
+                />
+                <label :for="category.key" class="ml-2">{{ category.name }}</label>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            categories: [
+                { name: 'Accounting', key: 'A' },
+                { name: 'Marketing', key: 'M' },
+                { name: 'Production', key: 'P' },
+                { name: 'Research', key: 'R' }
+            ],
+            selectedCategory: 'Production',
+            code: {
+                basic: `
+<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
+    <RadioButton
+        v-model="selectedCategory"
+        :inputId="category.key"
+        name="pizza"
+        :value="category.name"
+        :pt="{
+            input: ({ props }) => ({
+                class: props.modelValue === categories[index].name ? 'bg-orange-500 border-orange-500' : undefined
+            })
+        }"
+    />
+    <label :for="category.key" class="ml-2">{{ category.name }}</label>
+</div>
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <div class="flex flex-column gap-3">
+            <div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
+                <RadioButton
+                    v-model="selectedCategory"
+                    :inputId="category.key"
+                    name="pizza"
+                    :value="category.name"
+                    :pt="{
+                        input: ({ props }) => ({
+                            class: props.modelValue === categories[index].name ? 'bg-orange-500 border-orange-500' : undefined
+                        })
+                    }"
+                />
+                <label :for="category.key" class="ml-2">{{ category.name }}</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCategory: 'Production',
+            categories: [
+                { name: 'Accounting', key: 'A' },
+                { name: 'Marketing', key: 'M' },
+                { name: 'Production', key: 'P' },
+                { name: 'Research', key: 'R' }
+            ]
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <div class="flex flex-column gap-3">
+            <div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
+                <RadioButton
+                    v-model="selectedCategory"
+                    :inputId="category.key"
+                    name="pizza"
+                    :value="category.name"
+                    :pt="{
+                        input: ({ props }) => ({
+                            class: props.modelValue === categories[index].name ? 'bg-orange-500 border-orange-500' : undefined
+                        })
+                    }"
+                />
+                <label :for="category.key" class="ml-2">{{ category.name }}</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const selectedCategory = ref('Production');
+const categories = ref([
+    { name: 'Accounting', key: 'A' },
+    { name: 'Marketing', key: 'M' },
+    { name: 'Production', key: 'P' },
+    { name: 'Research', key: 'R' }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/radiobutton/pt/PTImage.vue b/doc/radiobutton/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/radiobutton/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/radiobutton/pt/index.vue b/doc/radiobutton/pt/index.vue
new file mode 100644
index 000000000..7ae715972
--- /dev/null
+++ b/doc/radiobutton/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>RadioButton Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.radiobutton',
+                    label: 'RadioButton PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('RadioButton')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/rating/pt/PTDoc.vue b/doc/rating/pt/PTDoc.vue
new file mode 100644
index 000000000..acdbe9ed7
--- /dev/null
+++ b/doc/rating/pt/PTDoc.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Rating
+            v-model="value"
+            :pt="{
+                onIcon: { class: 'text-orange-400' }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<Rating
+    v-model="value"
+    :pt="{
+        onIcon: { class: 'text-orange-400' }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Rating
+            v-model="value"
+            :pt="{
+                onIcon: { class: 'text-orange-400' }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Rating
+            v-model="value"
+            :pt="{
+                onIcon: { class: 'text-orange-400' }
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/rating/pt/PTImage.vue b/doc/rating/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/rating/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/rating/pt/index.vue b/doc/rating/pt/index.vue
new file mode 100644
index 000000000..2c8d4fd05
--- /dev/null
+++ b/doc/rating/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Rating Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.steps',
+                    label: 'Rating PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Rating')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/scrollpanel/pt/PTDoc.vue b/doc/scrollpanel/pt/PTDoc.vue
new file mode 100644
index 000000000..7b1a55081
--- /dev/null
+++ b/doc/scrollpanel/pt/PTDoc.vue
@@ -0,0 +1,102 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card">
+        <ScrollPanel :pt="{ root: { style: { width: '100%', height: '200px' } }, bary: { class: 'bg-primary' } }">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </ScrollPanel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ScrollPanel
+    :pt="{
+        root: { 
+            style: { width: '100%', height: '200px' }
+        },
+        barY: { class: 'bg-primary' }
+    }">
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p>
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+        voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+    </p>
+    <p>
+        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+        officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+    </p>
+</ScrollPanel>`,
+                options: `
+<template>
+    <div class="card">
+        <ScrollPanel
+            :pt="{
+                root: { 
+                    style: { width: '100%', height: '200px' }
+                },
+                barY: { class: 'bg-primary' }
+            }">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </ScrollPanel>
+    </div>
+</template>`,
+                composition: `
+<template>
+    <div class="card">
+        <ScrollPanel
+            :pt="{
+                root: { 
+                    style: { width: '100%', height: '200px' }
+                },
+                barY: { class: 'bg-primary' }
+            }">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </ScrollPanel>
+    </div>
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/scrollpanel/pt/PTImage.vue b/doc/scrollpanel/pt/PTImage.vue
new file mode 100644
index 000000000..37485f16c
--- /dev/null
+++ b/doc/scrollpanel/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/scrollpanel.jpg" />
+    </div>
+</template>
diff --git a/doc/scrollpanel/pt/index.vue b/doc/scrollpanel/pt/index.vue
new file mode 100644
index 000000000..7964242ca
--- /dev/null
+++ b/doc/scrollpanel/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ScrollPanel Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.scrollpanel',
+                    label: 'ScrollPanel PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('ScrollPanel')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/scrolltop/pt/PTDoc.vue b/doc/scrolltop/pt/PTDoc.vue
new file mode 100644
index 000000000..cad334197
--- /dev/null
+++ b/doc/scrolltop/pt/PTDoc.vue
@@ -0,0 +1,74 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <ScrollPanel style="width: 250px; height: 200px">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
+                elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
+                feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
+                dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
+                Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
+            </p>
+            <ScrollTop target="parent" :pt="{ root: { class: 'w-2rem h-2rem bg-primary' }, icon: { class: 'w-1rem h-1rem' } }" />
+        </ScrollPanel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ScrollTop target="parent"
+    :pt="{ 
+        root: { class: 'w-2rem h-2rem bg-primary' },
+        icon: { class: 'w-1rem h-1rem' }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <ScrollPanel style="width: 250px; height: 200px">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
+                elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
+                feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
+                dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
+                Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
+            </p>
+            <ScrollTop target="parent"
+                :pt="{ 
+                    root: { class: 'w-2rem h-2rem bg-primary' },
+                    icon: { class: 'w-1rem h-1rem' }
+                }"
+            />
+        </ScrollPanel>
+    </div>
+</template>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <ScrollPanel style="width: 250px; height: 200px">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing
+                elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper
+                feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet
+                dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
+                Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
+            </p>
+            <ScrollTop target="parent"
+                :pt="{ 
+                    root: { class: 'w-2rem h-2rem bg-primary' },
+                    icon: { class: 'w-1rem h-1rem' }
+                }"
+            />
+        </ScrollPanel>
+    </div>
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/scrolltop/pt/PTImage.vue b/doc/scrolltop/pt/PTImage.vue
new file mode 100644
index 000000000..5b3aa93f2
--- /dev/null
+++ b/doc/scrolltop/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/scrolltop.jpg" />
+    </div>
+</template>
diff --git a/doc/scrolltop/pt/index.vue b/doc/scrolltop/pt/index.vue
new file mode 100644
index 000000000..ceb706801
--- /dev/null
+++ b/doc/scrolltop/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ScrollTop Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.scrolltop',
+                    label: 'ScrollTop PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('ScrollTop')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/selectbutton/pt/PTDoc.vue b/doc/selectbutton/pt/PTDoc.vue
new file mode 100644
index 000000000..9f40b32bd
--- /dev/null
+++ b/doc/selectbutton/pt/PTDoc.vue
@@ -0,0 +1,88 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <SelectButton
+            v-model="value"
+            :options="options"
+            aria-labelledby="basic"
+            :pt="{
+                button: ({ context }) => ({
+                    class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
+                })
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 'Off',
+            options: ['Off', 'On'],
+            code: {
+                basic: `
+<SelectButton
+    v-model="value"
+    :options="options"
+    aria-labelledby="basic"
+    :pt="{
+        button: ({ context }) => ({
+            class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
+        })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <SelectButton
+            v-model="value"
+            :options="options"
+            aria-labelledby="basic"
+            :pt="{
+                button: ({ context }) => ({
+                    class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: 'off',
+            options: ['Off', 'On']
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <SelectButton
+            v-model="value"
+            :options="options"
+            aria-labelledby="basic"
+            :pt="{
+                button: ({ context }) => ({
+                    class: context.active ? 'bg-cyan-400 border-cyan-400' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('off');
+const options = ref(['Off', 'On']);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/selectbutton/pt/PTImage.vue b/doc/selectbutton/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/selectbutton/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/selectbutton/pt/index.vue b/doc/selectbutton/pt/index.vue
new file mode 100644
index 000000000..c52069d25
--- /dev/null
+++ b/doc/selectbutton/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>SelectButton Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.steps',
+                    label: 'SelectButton PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('SelectButton')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/sidebar/pt/PTDoc.vue b/doc/sidebar/pt/PTDoc.vue
new file mode 100644
index 000000000..12f72c1a4
--- /dev/null
+++ b/doc/sidebar/pt/PTDoc.vue
@@ -0,0 +1,77 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Sidebar v-model:visible="visible" :pt="{ root: { class: 'w-25rem' } }">
+            <h2>Sidebar</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Sidebar>
+        <Button icon="pi pi-arrow-right" @click="visible = true" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Sidebar v-model:visible="visible"
+    :pt="{
+        root: { class: 'w-25rem' }
+    }
+>
+    <h2>Sidebar</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</Sidebar>
+<Button icon="pi pi-arrow-right" @click="visible = true" />`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Sidebar v-model:visible="visible"
+            :pt="{
+                root: { class: 'w-25rem' }
+            }
+        >
+            <h2>Sidebar</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Sidebar>
+        <Button icon="pi pi-arrow-right" @click="visible = true" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        }
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Sidebar v-model:visible="visible"
+            :pt="{
+                root: { class: 'w-25rem' }
+            }
+        >
+            <h2>Sidebar</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Sidebar>
+        <Button icon="pi pi-arrow-right" @click="visible = true" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/sidebar/pt/PTImage.vue b/doc/sidebar/pt/PTImage.vue
new file mode 100644
index 000000000..5f4489a0e
--- /dev/null
+++ b/doc/sidebar/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/sidebar.jpg" />
+    </div>
+</template>
diff --git a/doc/sidebar/pt/index.vue b/doc/sidebar/pt/index.vue
new file mode 100644
index 000000000..326142c7a
--- /dev/null
+++ b/doc/sidebar/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Sidebar Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.sidebar',
+                    label: 'Sidebar PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Sidebar')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/skeleton/pt/PTDoc.vue b/doc/skeleton/pt/PTDoc.vue
new file mode 100644
index 000000000..41fdaa146
--- /dev/null
+++ b/doc/skeleton/pt/PTDoc.vue
@@ -0,0 +1,40 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Skeleton :pt="{ root: { class: 'w-3rem h-3rem' } }" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Skeleton
+    :pt="{
+        root: { class: 'w-3rem h-3rem' }
+    }"
+/>`,
+                options: `
+<template>
+    <Skeleton
+        :pt="{
+            root: { class: 'w-3rem h-3rem' }
+        }"
+    />
+</template>`,
+                composition: `
+<template>
+    <Skeleton
+        :pt="{
+            root: { class: 'w-3rem h-3rem' }
+        }"
+    />
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/skeleton/pt/PTImage.vue b/doc/skeleton/pt/PTImage.vue
new file mode 100644
index 000000000..c78cfb7ab
--- /dev/null
+++ b/doc/skeleton/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/skeleton.jpg" />
+    </div>
+</template>
diff --git a/doc/skeleton/pt/index.vue b/doc/skeleton/pt/index.vue
new file mode 100644
index 000000000..07c7f51d7
--- /dev/null
+++ b/doc/skeleton/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Skeleton Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.skeleton',
+                    label: 'Skeleton PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Skeleton')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/slider/pt/PTDoc.vue b/doc/slider/pt/PTDoc.vue
new file mode 100644
index 000000000..7db123da0
--- /dev/null
+++ b/doc/slider/pt/PTDoc.vue
@@ -0,0 +1,77 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Slider
+            v-model="value"
+            :pt="{
+                root: { class: 'w-14rem' },
+                handle: { class: 'bg-orange-400 border-900' },
+                range: { class: 'bg-orange-400' }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<Slider
+    v-model="value"
+    :pt="{
+        root: { class: 'w-14rem' },
+        handle: { class: 'bg-orange-400 border-900' },
+        range: { class: 'bg-orange-400' }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Slider
+            v-model="value"
+            :pt="{
+                root: { class: 'w-14rem' },
+                handle: { class: 'bg-orange-400 border-900' },
+                range: { class: 'bg-orange-400' }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Slider
+            v-model="value"
+            :pt="{
+                root: { class: 'w-14rem' },
+                handle: { class: 'bg-orange-400 border-900' },
+                range: { class: 'bg-orange-400' }
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/slider/pt/PTImage.vue b/doc/slider/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/slider/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/slider/pt/index.vue b/doc/slider/pt/index.vue
new file mode 100644
index 000000000..b70472fae
--- /dev/null
+++ b/doc/slider/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Slider Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.steps',
+                    label: 'Slider PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Slider')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/speeddial/pt/PTDoc.vue b/doc/speeddial/pt/PTDoc.vue
new file mode 100644
index 000000000..89368149d
--- /dev/null
+++ b/doc/speeddial/pt/PTDoc.vue
@@ -0,0 +1,197 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card">
+        <div :style="{ position: 'relative', height: '300px' }">
+            <SpeedDial
+                :model="items"
+                direction="down"
+                :style="{ left: 'calc(50% - 2rem)', top: 0 }"
+                :pt="{
+                    action: ({ props, state, context }) => ({
+                        class: context.active ? 'bg-primary' : undefined
+                    })
+                }"
+            />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ],
+            code: {
+                basic: `
+<SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
+    :pt="{
+        action: ({ props, state, context }) => ({
+            class: context.active ? 'bg-primary' : undefined
+        })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card">
+        <div :style="{ position: 'relative', height: '300px' }">
+            <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
+                :pt="{
+                    action: ({ props, state, context }) => ({
+                        class: context.active ? 'bg-primary' : undefined
+                    })
+                }"
+            />
+        </div>
+        <Toast />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Add',
+                    icon: 'pi pi-pencil',
+                    command: () => {
+                        this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+                    }
+                },
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-trash',
+                    command: () => {
+                        this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+                    }
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    command: () => {
+                        this.$router.push('/fileupload');
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                }
+            ]
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <div :style="{ position: 'relative', height: '300px' }">
+            <SpeedDial :model="items" direction="down" :style="{ left: 'calc(50% - 2rem)', top: 0 }"
+                :pt="{
+                    action: ({ props, state, context }) => ({
+                        class: context.active ? 'bg-primary' : undefined
+                    })
+                }"
+            />
+        </div>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useRouter } from 'vue-router';
+
+const toast = useToast();
+const router = useRouter();
+
+const items = ref([
+    {
+        label: 'Add',
+        icon: 'pi pi-pencil',
+        command: () => {
+            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+        }
+    },
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+        }
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-trash',
+        command: () => {
+            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+        }
+    },
+    {
+        label: 'Upload',
+        icon: 'pi pi-upload',
+        command: () => {
+            router.push('/fileupload');
+        }
+    },
+    {
+        label: 'Vue Website',
+        icon: 'pi pi-external-link',
+        command: () => {
+            window.location.href = 'https://vuejs.org/'
+        }
+    }
+])
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/speeddial/pt/PTImage.vue b/doc/speeddial/pt/PTImage.vue
new file mode 100644
index 000000000..bac444805
--- /dev/null
+++ b/doc/speeddial/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/speeddial.jpg" />
+    </div>
+</template>
diff --git a/doc/speeddial/pt/index.vue b/doc/speeddial/pt/index.vue
new file mode 100644
index 000000000..eb4273654
--- /dev/null
+++ b/doc/speeddial/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>SpeedDial Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.speeddial',
+                    label: 'SpeedDial PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('SpeedDial')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/splitbutton/SizesDoc.vue b/doc/splitbutton/SizesDoc.vue
index 1641d83b3..b576739df 100644
--- a/doc/splitbutton/SizesDoc.vue
+++ b/doc/splitbutton/SizesDoc.vue
@@ -40,16 +40,16 @@ export default {
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-sm mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-lg mb-2"></SplitButton>`,
+<SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>`,
                 options: `
 <template>
     <div class="card flex align-items-center justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-sm mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-lg mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>
     </div>
 </template>
 
@@ -94,9 +94,9 @@ export default {
 <template>
     <div class="card flex align-items-center justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-sm mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-lg mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>
     </div>
 </template>
 
diff --git a/doc/splitbutton/pt/PTDoc.vue b/doc/splitbutton/pt/PTDoc.vue
new file mode 100644
index 000000000..db9ca20a5
--- /dev/null
+++ b/doc/splitbutton/pt/PTDoc.vue
@@ -0,0 +1,172 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <SplitButton
+            label="Save"
+            @click="save"
+            :model="items"
+            :pt="{
+                menu: {
+                    root: { class: 'surface-ground' }
+                }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                },
+                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+            ],
+            code: {
+                basic: `
+<SplitButton label="Save"
+    @click="save"
+    :model="items"
+    :pt="{
+        menu: {
+            root: { class: 'surface-ground' }
+        }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <SplitButton
+            label="Save"
+            icon="pi pi-plus"
+            @click="save"
+            :model="items"
+            :pt="{
+                menu: {
+                    root: { class: 'surface-ground' }
+                }
+            }"
+        />
+    </div>
+    <Toast />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Update',
+                    icon: 'pi pi-refresh',
+                    command: () => {
+                        this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times',
+                    command: () => {
+                        this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Vue Website',
+                    icon: 'pi pi-external-link',
+                    command: () => {
+                        window.location.href = 'https://vuejs.org/';
+                    }
+                },
+                { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+            ]
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <SplitButton
+            label="Save"
+            icon="pi pi-plus"
+            @click="save"
+            :model="items"
+            :pt="{
+                menu: {
+                    root: { class: 'surface-ground' }
+                }
+            }"
+        />
+    </div>
+    <Toast />
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const items = [
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh',
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-times',
+        command: () => {
+            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        label: 'Vue Website',
+        icon: 'pi pi-external-link',
+        command: () => {
+            window.location.href = 'https://vuejs.org/';
+        }
+    },
+    { label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
+];
+
+const save = () => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+};
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        save() {
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/doc/splitbutton/pt/PTImage.vue b/doc/splitbutton/pt/PTImage.vue
new file mode 100644
index 000000000..f082eeae7
--- /dev/null
+++ b/doc/splitbutton/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/splitbutton.jpg" />
+    </div>
+</template>
diff --git a/doc/splitbutton/pt/index.vue b/doc/splitbutton/pt/index.vue
new file mode 100644
index 000000000..35b9a21bd
--- /dev/null
+++ b/doc/splitbutton/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>SplitButton Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.splitbutton',
+                    label: 'SplitButton PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('SplitButton')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/splitter/pt/PTDoc.vue b/doc/splitter/pt/PTDoc.vue
new file mode 100644
index 000000000..4ccd5f46b
--- /dev/null
+++ b/doc/splitter/pt/PTDoc.vue
@@ -0,0 +1,56 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card">
+        <Splitter :pt="{ root: { style: { height: '300px' } }, gutterHandler: { class: 'bg-primary' } }">
+            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 1 </SplitterPanel>
+            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 2 </SplitterPanel>
+        </Splitter>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Splitter
+    :pt="{
+        root: { style: { height: '300px' } },
+        gutterHandler: { class: 'bg-primary' }
+    }">
+    <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 1 </SplitterPanel>
+    <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 2 </SplitterPanel>
+</Splitter>`,
+                options: `
+<template>
+    <div class="card">
+        <Splitter
+            :pt="{
+                root: { style: { height: '300px' } },
+                gutterHandler: { class: 'bg-primary' }
+            }">
+            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 1 </SplitterPanel>
+            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 2 </SplitterPanel>
+        </Splitter>
+    </div>
+</template>`,
+                composition: `
+<template>
+    <div class="card">
+        <Splitter
+            :pt="{
+                root: { style: { height: '300px' } },
+                gutterHandler: { class: 'bg-primary' }
+            }">
+            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 1 </SplitterPanel>
+            <SplitterPanel :pt="{ root: { class: 'flex align-items-center justify-content-center' } }"> Panel 2 </SplitterPanel>
+        </Splitter>
+    </div>
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/splitter/pt/PTImage.vue b/doc/splitter/pt/PTImage.vue
new file mode 100644
index 000000000..fd7e964ec
--- /dev/null
+++ b/doc/splitter/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/splitter.jpg" />
+    </div>
+</template>
diff --git a/doc/splitter/pt/index.vue b/doc/splitter/pt/index.vue
new file mode 100644
index 000000000..17f7ba902
--- /dev/null
+++ b/doc/splitter/pt/index.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Splitter Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.splitter',
+                    label: 'Splitter PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Splitter')
+                },
+                {
+                    id: 'pt.doc.splitterpanel',
+                    label: 'SplitterPanel PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('SplitterPanel')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/steps/pt/PTDoc.vue b/doc/steps/pt/PTDoc.vue
new file mode 100644
index 000000000..ada9b9f59
--- /dev/null
+++ b/doc/steps/pt/PTDoc.vue
@@ -0,0 +1,128 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <Steps
+            :model="items"
+            :readonly="false"
+            :pt="{
+                root: { class: 'w-30rem' }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Personal',
+                    to: '/steps'
+                },
+                {
+                    label: 'Seat',
+                    to: '/steps/seat'
+                },
+                {
+                    label: 'Payment',
+                    to: '/steps/payment'
+                },
+                {
+                    label: 'Confirmation',
+                    to: '/steps/confirmation'
+                }
+            ],
+            code: {
+                basic: `
+<Steps
+    :model="items"
+    :readonly="false"
+    :pt="{
+        root: { class: 'w-30rem' }
+    }"
+/>`,
+                options: `
+<template>
+    <div>        
+        <div class="card">
+            <Steps
+                :model="items"
+                :readonly="false"
+                :pt="{
+                    root: { class: 'w-30rem' }
+                }"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Personal',
+                    to: '/'
+                },
+                {
+                    label: 'Seat',
+                    to: '/seat'
+                },
+                {
+                    label: 'Payment',
+                    to: '/payment'
+                },
+                {
+                    label: 'Confirmation',
+                    to: '/confirmation'
+                }
+            ]
+        }
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div>
+        <div class="card">
+            <Steps
+                :model="items"
+                :readonly="false"
+                :pt="{
+                    root: { class: 'w-30rem' }
+                }"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Personal',
+        to: "/"
+    },
+    {
+        label: 'Seat',
+        to: "/seat",
+    },
+    {
+        label: 'Payment',
+        to: "/payment",
+    },
+    {
+        label: 'Confirmation',
+        to: "/confirmation",
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/steps/pt/PTImage.vue b/doc/steps/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/steps/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/steps/pt/index.vue b/doc/steps/pt/index.vue
new file mode 100644
index 000000000..ced2c0a2d
--- /dev/null
+++ b/doc/steps/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Steps Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.steps',
+                    label: 'Steps PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Steps')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/tabmenu/pt/PTDoc.vue b/doc/tabmenu/pt/PTDoc.vue
new file mode 100644
index 000000000..d5b5a5b67
--- /dev/null
+++ b/doc/tabmenu/pt/PTDoc.vue
@@ -0,0 +1,140 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card">
+        <TabMenu
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({
+                    class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
+                })
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Home',
+                    icon: 'pi pi-fw pi-home'
+                },
+                {
+                    label: 'Calendar',
+                    icon: 'pi pi-fw pi-calendar'
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil'
+                },
+                {
+                    label: 'Documentation',
+                    icon: 'pi pi-fw pi-file'
+                },
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-fw pi-cog'
+                }
+            ],
+            code: {
+                basic: `
+<TabMenu
+    :model="items"
+    :pt="{
+        action: ({ props, state, context }) => ({
+            class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
+        })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card">
+        <TabMenu
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({
+                    class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Home',
+                    icon: 'pi pi-fw pi-home'
+                },
+                {
+                    label: 'Calendar',
+                    icon: 'pi pi-fw pi-calendar'
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil'
+                },
+                {
+                    label: 'Documentation',
+                    icon: 'pi pi-fw pi-file'
+                },
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-fw pi-cog'
+                }
+            ]
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <TabMenu
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({
+                    class: context.order === state.d_activeIndex ? 'bg-primary' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Home',
+        icon: 'pi pi-fw pi-home'
+    },
+    {
+        label: 'Calendar',
+        icon: 'pi pi-fw pi-calendar'
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-fw pi-pencil'
+    },
+    {
+        label: 'Documentation',
+        icon: 'pi pi-fw pi-file'
+    },
+    {
+        label: 'Settings',
+        icon: 'pi pi-fw pi-cog'
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tabmenu/pt/PTImage.vue b/doc/tabmenu/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/tabmenu/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/tabmenu/pt/index.vue b/doc/tabmenu/pt/index.vue
new file mode 100644
index 000000000..daff110df
--- /dev/null
+++ b/doc/tabmenu/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>TabMenu Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.tabmenu',
+                    label: 'TabMenu PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('TabMenu')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/tabview/pt/PTDoc.vue b/doc/tabview/pt/PTDoc.vue
new file mode 100644
index 000000000..118f50b61
--- /dev/null
+++ b/doc/tabview/pt/PTDoc.vue
@@ -0,0 +1,124 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card">
+        <TabView>
+            <TabPanel
+                v-for="(tab, index) in tabs"
+                :key="tab.title"
+                :header="tab.title"
+                :pt="{
+                    headerAction: ({ props, parent }) => ({
+                        class: panelClass(props, parent, index)
+                    })
+                }"
+            >
+                <p>{{ tab.content }}</p>
+            </TabPanel>
+        </TabView>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            tabs: Array.from({ length: 3 }, (_, i) => ({
+                title: `Header ${i + 1}`,
+                content: `Tab ${i + 1} Content`
+            })),
+            code: {
+                basic: `
+<TabView>
+    <TabPanel v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
+        :pt="{
+            headerAction: ({ props, parent }) => ({
+                class: panelClass(props, parent, index)
+            })
+        }">
+        <p>{{ tab.content }}</p>
+    </TabPanel>
+</TabView>`,
+                options: `
+<template>
+    <div class="card">
+        <TabView>
+            <TabPanel v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
+                :pt="{
+                    headerAction: ({ props, parent }) => ({
+                        class: panelClass(props, parent, index)
+                    })
+                }">
+                <p>{{ tab.content }}</p>
+            </TabPanel>
+        </TabView>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            tabs: Array.from({ length: 3 }, (_, i) => ({
+                title: \`Header \${i + 1}\`,
+                content: \`Tab \${i + 1} Content\`
+            }))
+        }
+    },
+    methods: {
+        panelClass(props, parent, index) {
+            return [
+                {
+                    'bg-primary': parent.state.d_activeIndex === index
+                }
+            ];
+        }
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <TabView>
+            <TabPanel v-for="(tab, index) in tabs" :key="tab.title" :header="tab.title"
+                :pt="{
+                    headeraction: ({ props, parent }) => ({
+                        class: panelClass(props, parent, index)
+                    })
+                }">
+                <p>{{ tab.content }}</p>
+            </TabPanel>
+        </TabView>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const tabs = ref(Array.from({ length: 3 }, (_, i) => ({
+    title: \`Header \${i + 1}\`,
+    content: \`Tab \${i + 1} Content\`
+})));
+
+const panelClass = (props, parent, index) => {
+    return [
+        {
+            'bg-primary': parent.state.d_activeIndex === index
+        }
+    ];
+};
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        panelClass(props, parent, index) {
+            return [
+                {
+                    'bg-primary': parent.state.d_activeIndex === index
+                }
+            ];
+        }
+    }
+};
+</script>
diff --git a/doc/tabview/pt/PTImage.vue b/doc/tabview/pt/PTImage.vue
new file mode 100644
index 000000000..e0aea3380
--- /dev/null
+++ b/doc/tabview/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/tabview.jpg" />
+    </div>
+</template>
diff --git a/doc/tabview/pt/index.vue b/doc/tabview/pt/index.vue
new file mode 100644
index 000000000..ac7ad9adc
--- /dev/null
+++ b/doc/tabview/pt/index.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>TabView Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.tabview',
+                    label: 'TabView PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('TabView')
+                },
+                {
+                    id: 'pt.doc.tabpanel',
+                    label: 'TabPanel PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('TabPanel')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/tag/pt/PTDoc.vue b/doc/tag/pt/PTDoc.vue
new file mode 100644
index 000000000..2dc739d50
--- /dev/null
+++ b/doc/tag/pt/PTDoc.vue
@@ -0,0 +1,44 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Tag icon="pi pi-user" value="Waiting" :pt="{ root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } } }" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Tag icon="pi pi-user" value="Waiting"
+    :pt="{
+        root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Tag icon="pi pi-user" value="Waiting"
+            :pt="{
+                root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
+            }"
+        />
+    </div>
+</template>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Tag icon="pi pi-user" value="Waiting"
+            :pt="{
+                root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
+            }"
+        />
+    </div>
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tag/pt/PTImage.vue b/doc/tag/pt/PTImage.vue
new file mode 100644
index 000000000..fa821c8b2
--- /dev/null
+++ b/doc/tag/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/tag.jpg" />
+    </div>
+</template>
diff --git a/doc/tag/pt/index.vue b/doc/tag/pt/index.vue
new file mode 100644
index 000000000..f9199aff0
--- /dev/null
+++ b/doc/tag/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Tag Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.tag',
+                    label: 'Tag PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Tag')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/terminal/BasicDoc.vue b/doc/terminal/BasicDoc.vue
index f49bdb8b5..58584a5f9 100644
--- a/doc/terminal/BasicDoc.vue
+++ b/doc/terminal/BasicDoc.vue
@@ -14,6 +14,7 @@
 
 <script>
 import TerminalService from 'primevue/terminalservice';
+
 export default {
     data() {
         return {
diff --git a/doc/terminal/pt/PTDoc.vue b/doc/terminal/pt/PTDoc.vue
new file mode 100644
index 000000000..075f3b3fe
--- /dev/null
+++ b/doc/terminal/pt/PTDoc.vue
@@ -0,0 +1,182 @@
+<template>
+    <DocSectionText v-bind="$attrs" :level="2" />
+    <div class="card">
+        <p>Enter "<strong>date</strong>" to display the current date, "<strong>greet {0}</strong>" for a message and "<strong>random</strong>" to get a random number.</p>
+        <Terminal
+            welcomeMessage="Welcome to PrimeVue"
+            prompt="primevue $"
+            :pt="{
+                root: { class: 'surface-900 text-white' },
+                command: { class: 'text-blue-500' },
+                prompt: { class: 'text-yellow-500' },
+                response: { class: 'text-purple-500' }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+import TerminalService from 'primevue/terminalservice';
+
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Terminal
+    welcomeMessage="Welcome to PrimeVue"
+    prompt="primevue $"
+    :pt="{
+        root: { class: 'surface-900 text-white' },
+        command: { class: 'text-blue-500' },
+        prompt: { class: 'text-yellow-500' },
+        response: { class: 'text-purple-500' }
+    }"
+/>`,
+                options: `
+<template>
+    <div>
+        <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
+        <Terminal
+            welcomeMessage="Welcome to PrimeVue"
+            prompt="primevue $"
+            :pt="{
+                root: { class: 'surface-900 text-white' },
+                command: { class: 'text-blue-500' },
+                prompt: { class: 'text-yellow-500' },
+                response: { class: 'text-purple-500' }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+import TerminalService from "primevue/terminalservice";
+
+export default {
+    methods: {
+        commandHandler(text) {
+            let response;
+            let argsIndex = text.indexOf(' ');
+            let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+            switch(command) {
+                case "date":
+                    response = 'Today is ' + new Date().toDateString();
+                    break;
+
+                case "greet":
+                    response = 'Hola ' + text.substring(argsIndex + 1);
+                    break;
+
+                case "random":
+                    response = Math.floor(Math.random() * 100);
+                    break;
+
+                default:
+                    response = "Unknown command: " + command;
+            }
+            
+            TerminalService.emit('response', response);
+        }
+    },
+    mounted() {
+        TerminalService.on('command', this.commandHandler);
+    },
+    beforeUnmount() {
+        TerminalService.off('command', this.commandHandler);
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div>
+        <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
+        <Terminal
+            welcomeMessage="Welcome to PrimeVue"
+            prompt="primevue $"
+            :pt="{
+                root: { class: 'surface-900 text-white' },
+                command: { class: 'text-blue-500' },
+                prompt: { class: 'text-yellow-500' },
+                response: { class: 'text-purple-500' }
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { onMounted, onBeforeUnmount } from 'vue';
+import TerminalService from "primevue/terminalservice";
+
+onMounted(() => {
+    TerminalService.on('command', commandHandler);
+})
+
+onBeforeUnmount(() => {
+    TerminalService.off('command', commandHandler);
+})
+
+const commandHandler = (text) => {
+    let response;
+    let argsIndex = text.indexOf(' ');
+    let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+    switch(command) {
+        case "date":
+            response = 'Today is ' + new Date().toDateString();
+            break;
+
+        case "greet":
+            response = 'Hola ' + text.substring(argsIndex + 1);
+            break;
+
+        case "random":
+            response = Math.floor(Math.random() * 100);
+            break;
+
+        default:
+            response = "Unknown command: " + command;
+    }
+    
+    TerminalService.emit('response', response);
+}
+<\/script>`
+            }
+        };
+    },
+    mounted() {
+        TerminalService.on('command', this.commandHandler);
+    },
+    beforeUnmount() {
+        TerminalService.off('command', this.commandHandler);
+    },
+    methods: {
+        commandHandler(text) {
+            let response;
+            let argsIndex = text.indexOf(' ');
+            let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+            switch (command) {
+                case 'date':
+                    response = 'Today is ' + new Date().toDateString();
+                    break;
+
+                case 'greet':
+                    response = 'Hola ' + text.substring(argsIndex + 1);
+                    break;
+
+                case 'random':
+                    response = Math.floor(Math.random() * 100);
+                    break;
+
+                default:
+                    response = 'Unknown command: ' + command;
+            }
+
+            TerminalService.emit('response', response);
+        }
+    }
+};
+</script>
diff --git a/doc/terminal/pt/PTImage.vue b/doc/terminal/pt/PTImage.vue
new file mode 100644
index 000000000..ffd53a2d4
--- /dev/null
+++ b/doc/terminal/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/terminal.jpg" />
+    </div>
+</template>
diff --git a/doc/terminal/pt/index.vue b/doc/terminal/pt/index.vue
new file mode 100644
index 000000000..8dd3e250d
--- /dev/null
+++ b/doc/terminal/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Terminal Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.terminal',
+                    label: 'Terminal PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Terminal')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/textarea/pt/PTDoc.vue b/doc/textarea/pt/PTDoc.vue
new file mode 100644
index 000000000..7e19c6980
--- /dev/null
+++ b/doc/textarea/pt/PTDoc.vue
@@ -0,0 +1,81 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <Textarea
+            v-model="value"
+            :pt="{
+                root: {
+                    rows: 5,
+                    cols: 30
+                }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: '',
+            code: {
+                basic: `
+<Textarea
+    v-model="value"
+    :pt="{
+        root: {
+            rows: 5,
+            cols: 30
+        }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Textarea
+            v-model="value"
+            :pt="{
+                root: {
+                    rows: 5,
+                    cols: 30
+                }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: ''
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Textarea
+            v-model="value"
+            :pt="{
+                root: {
+                    rows: 5,
+                    cols: 30
+                }
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/textarea/pt/PTImage.vue b/doc/textarea/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/textarea/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/textarea/pt/index.vue b/doc/textarea/pt/index.vue
new file mode 100644
index 000000000..85ac92e35
--- /dev/null
+++ b/doc/textarea/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Textarea Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.textarea',
+                    label: 'Textarea PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Textarea')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/tieredmenu/pt/PTDoc.vue b/doc/tieredmenu/pt/PTDoc.vue
new file mode 100644
index 000000000..45cf18d0d
--- /dev/null
+++ b/doc/tieredmenu/pt/PTDoc.vue
@@ -0,0 +1,452 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <TieredMenu
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
+                })
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-fw pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator: true
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    label: 'Users',
+                    icon: 'pi pi-fw pi-user',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-user-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-user-minus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-fw pi-users',
+                            items: [
+                                {
+                                    label: 'Filter',
+                                    icon: 'pi pi-fw pi-filter',
+                                    items: [
+                                        {
+                                            label: 'Print',
+                                            icon: 'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon: 'pi pi-fw pi-bars',
+                                    label: 'List'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archieve',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-fw pi-power-off'
+                }
+            ],
+            code: {
+                basic: `
+<TieredMenu
+    :model="items"
+    :pt="{
+        action: ({ props, state, context }) => ({
+            class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
+        })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <TieredMenu
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-fw pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator: true
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    label: 'Users',
+                    icon: 'pi pi-fw pi-user',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-user-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-user-minus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-fw pi-users',
+                            items: [
+                                {
+                                    label: 'Filter',
+                                    icon: 'pi pi-fw pi-filter',
+                                    items: [
+                                        {
+                                            label: 'Print',
+                                            icon: 'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon: 'pi pi-fw pi-bars',
+                                    label: 'List'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archieve',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-fw pi-power-off'
+                }
+            ]
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <TieredMenu
+            :model="items"
+            :pt="{
+                action: ({ props, state, context }) => ({
+                    class: context.active ? 'bg-primary-200 border-round-sm' : context.focused ? 'bg-primary-300 border-round-sm' : undefined
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+            
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-fw pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-plus',
+                items: [
+                    {
+                        label: 'Bookmark',
+                        icon: 'pi pi-fw pi-bookmark'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-fw pi-video'
+                    }
+                ]
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-trash'
+            },
+            {
+                separator: true
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-fw pi-external-link'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-fw pi-pencil',
+        items: [
+            {
+                label: 'Left',
+                icon: 'pi pi-fw pi-align-left'
+            },
+            {
+                label: 'Right',
+                icon: 'pi pi-fw pi-align-right'
+            },
+            {
+                label: 'Center',
+                icon: 'pi pi-fw pi-align-center'
+            },
+            {
+                label: 'Justify',
+                icon: 'pi pi-fw pi-align-justify'
+            }
+        ]
+    },
+    {
+        label: 'Users',
+        icon: 'pi pi-fw pi-user',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-user-plus'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-user-minus'
+            },
+            {
+                label: 'Search',
+                icon: 'pi pi-fw pi-users',
+                items: [
+                    {
+                        label: 'Filter',
+                        icon: 'pi pi-fw pi-filter',
+                        items: [
+                            {
+                                label: 'Print',
+                                icon: 'pi pi-fw pi-print'
+                            }
+                        ]
+                    },
+                    {
+                        icon: 'pi pi-fw pi-bars',
+                        label: 'List'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Events',
+        icon: 'pi pi-fw pi-calendar',
+        items: [
+            {
+                label: 'Edit',
+                icon: 'pi pi-fw pi-pencil',
+                items: [
+                    {
+                        label: 'Save',
+                        icon: 'pi pi-fw pi-calendar-plus'
+                    },
+                    {
+                        label: 'Delete',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            },
+            {
+                label: 'Archieve',
+                icon: 'pi pi-fw pi-calendar-times',
+                items: [
+                    {
+                        label: 'Remove',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        icon: 'pi pi-fw pi-power-off'
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tieredmenu/pt/PTImage.vue b/doc/tieredmenu/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/tieredmenu/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/tieredmenu/pt/index.vue b/doc/tieredmenu/pt/index.vue
new file mode 100644
index 000000000..bc4681d5b
--- /dev/null
+++ b/doc/tieredmenu/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>TieredMenu Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.tieredmenu',
+                    label: 'TieredMenu PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('TieredMenu')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/timeline/pt/PTDoc.vue b/doc/timeline/pt/PTDoc.vue
new file mode 100644
index 000000000..ce52d4123
--- /dev/null
+++ b/doc/timeline/pt/PTDoc.vue
@@ -0,0 +1,101 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card">
+        <Timeline
+            :value="events"
+            :pt="{
+                marker: { class: 'border-orange-400' }
+            }"
+        >
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            events: [
+                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
+                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+            ],
+            code: {
+                basic: `
+<Timeline
+    :value="events"
+    :pt="{
+        marker: { class: 'border-orange-400' }
+    }"
+>
+    <template #content="slotProps">
+        {{ slotProps.item.status }}
+    </template>
+</Timeline>`,
+                options: `
+<template>
+    <div class="card">
+        <Timeline
+            :value="events"
+            :pt="{
+                marker: { class: 'border-orange-400' }
+            }"
+        >
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            events: [
+                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
+                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+            ]
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <Timeline
+            :value="events"
+            :pt="{
+                marker: { class: 'border-orange-400' }
+            }"
+        >
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const events = ref([
+    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
+    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+]);
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/timeline/pt/PTImage.vue b/doc/timeline/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/timeline/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/timeline/pt/index.vue b/doc/timeline/pt/index.vue
new file mode 100644
index 000000000..7a795590f
--- /dev/null
+++ b/doc/timeline/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Timeline Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.timeline',
+                    label: 'Timeline PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Timeline')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/toast/pt/PTDoc.vue b/doc/toast/pt/PTDoc.vue
new file mode 100644
index 000000000..89a043eec
--- /dev/null
+++ b/doc/toast/pt/PTDoc.vue
@@ -0,0 +1,80 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <Toast
+            group="pt"
+            :pt="{
+                container: { class: 'bg-yellow-100' }
+            }"
+        />
+        <Button label="Show" @click="show()" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Toast
+    group="pt"
+    :pt="{
+        container: { class: 'bg-yellow-100' }
+    }"
+/>
+<Button label="Show" @click="show()" />`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Toast
+            group="pt"
+            :pt="{
+                container: { class: 'bg-yellow-100' }
+            }"
+        />
+        <Button label="Show" @click="show()" />
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        show() {
+            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', group: 'pt', life: 3000 });
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Toast
+            group="pt"
+            :pt="{
+                container: { class: 'bg-yellow-100' }
+            }"
+        />
+        <Button label="Show" @click="show()" />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+const toast = useToast();
+
+const show = () => {
+    toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', group: 'pt', life: 3000 });
+};
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        show() {
+            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', group: 'pt', life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/doc/toast/pt/PTImage.vue b/doc/toast/pt/PTImage.vue
new file mode 100644
index 000000000..d274a920b
--- /dev/null
+++ b/doc/toast/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/toast.jpg" />
+    </div>
+</template>
diff --git a/doc/toast/pt/index.vue b/doc/toast/pt/index.vue
new file mode 100644
index 000000000..b92e88beb
--- /dev/null
+++ b/doc/toast/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Toast Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.toast',
+                    label: 'Toast PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Toast')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/togglebutton/pt/PTDoc.vue b/doc/togglebutton/pt/PTDoc.vue
new file mode 100644
index 000000000..d9f43a558
--- /dev/null
+++ b/doc/togglebutton/pt/PTDoc.vue
@@ -0,0 +1,77 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <ToggleButton
+            v-model="checked"
+            :pt="{
+                root: {
+                    class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
+                }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false,
+            code: {
+                basic: `
+<ToggleButton
+    v-model="checked"
+    :pt="{
+        root: {
+            class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
+        }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <ToggleButton
+            v-model="checked"
+            :pt="{
+                root: {
+                    class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
+                }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            checked: false
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <ToggleButton
+            v-model="checked"
+            :pt="{
+                root: {
+                    class: ['w-8rem', { 'bg-teal-400 border-white': checked }]
+                }
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/togglebutton/pt/PTImage.vue b/doc/togglebutton/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/togglebutton/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/togglebutton/pt/index.vue b/doc/togglebutton/pt/index.vue
new file mode 100644
index 000000000..33c500bb2
--- /dev/null
+++ b/doc/togglebutton/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ToggleButton Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.steps',
+                    label: 'ToggleButton PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('ToggleButton')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/toolbar/pt/PTDoc.vue b/doc/toolbar/pt/PTDoc.vue
new file mode 100644
index 000000000..0ccfd78eb
--- /dev/null
+++ b/doc/toolbar/pt/PTDoc.vue
@@ -0,0 +1,79 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card">
+        <Toolbar :pt="{ root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } } }">
+            <template #start>
+                <Button label="New" icon="pi pi-plus" class="p-button-help" />
+            </template>
+
+            <template #end>
+                <Button icon="pi pi-search" class="mr-2" />
+                <Button icon="pi pi-times" severity="danger" />
+            </template>
+        </Toolbar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<TabView>
+    <Toolbar
+        :pt="{
+            root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
+        }">
+        <template #start>
+            <Button label="New" icon="pi pi-plus" class="p-button-help" />
+        </template>
+
+        <template #end>
+            <Button icon="pi pi-search" class="mr-2" />
+            <Button icon="pi pi-times" severity="danger" />
+        </template>
+    </Toolbar>
+</TabView>`,
+                options: `
+<template>
+    <div class="card">
+        <Toolbar
+            :pt="{
+                root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
+            }">
+            <template #start>
+                <Button label="New" icon="pi pi-plus" class="p-button-help" />
+            </template>
+
+            <template #end>
+                <Button icon="pi pi-search" class="mr-2" />
+                <Button icon="pi pi-times" severity="danger" />
+            </template>
+        </Toolbar>
+    </div>
+</template>`,
+                composition: `
+<template>
+    <div class="card">
+        <Toolbar
+            :pt="{
+                root: { style: { background: 'linear-gradient(to right, #8e2de2, #4a00e0)', borderRadius: '24px' } }
+            }">
+            <template #start>
+                <Button label="New" icon="pi pi-plus" class="p-button-help" />
+            </template>
+
+            <template #end>
+                <Button icon="pi pi-search" class="mr-2" />
+                <Button icon="pi pi-times" severity="danger" />
+            </template>
+        </Toolbar>
+    </div>
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/toolbar/pt/PTImage.vue b/doc/toolbar/pt/PTImage.vue
new file mode 100644
index 000000000..ff64666f3
--- /dev/null
+++ b/doc/toolbar/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/toolbar.jpg" />
+    </div>
+</template>
diff --git a/doc/toolbar/pt/index.vue b/doc/toolbar/pt/index.vue
new file mode 100644
index 000000000..9b4e4a46f
--- /dev/null
+++ b/doc/toolbar/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Toolbar Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.toolbar',
+                    label: 'Toolbar PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Toolbar')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/tooltip/DelayDoc.vue b/doc/tooltip/DelayDoc.vue
new file mode 100644
index 000000000..e9923ee79
--- /dev/null
+++ b/doc/tooltip/DelayDoc.vue
@@ -0,0 +1,34 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Adding delays to the show and hide events are defined with <i>showDelay</i> and <i>hideDelay</i> options respectively.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-content-center gap-2">
+        <InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />`,
+                options: `
+<template>
+    <div class="card flex flex-wrap justify-content-center gap-2">
+        <InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />
+    </div>
+</template>`,
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-content-center gap-2">
+        <InputText v-tooltip="{ value: 'Enter your username', showDelay: 1000, hideDelay: 300 }" type="text" placeholder="Delayed" />
+    </div>
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tree/pt/PTDoc.vue b/doc/tree/pt/PTDoc.vue
new file mode 100644
index 000000000..a4a924e6a
--- /dev/null
+++ b/doc/tree/pt/PTDoc.vue
@@ -0,0 +1,123 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <Tree
+            :value="nodes"
+            :pt="{
+                root: { class: 'w-full md:w-30rem' },
+                content: ({ props, state, context }) => ({
+                    class: context.expanded ? 'bg-blue-100' : 'undefined'
+                })
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                basic: `
+<Tree
+    :value="nodes"
+    :pt="{
+        root: { class: 'w-full md:w-30rem' },
+        content: ({ props, state, context }) => ({
+            class: context.expanded ? 'bg-blue-100' : 'undefined'
+        })
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Tree
+            :value="nodes"
+            :pt="{
+                root: { class: 'w-full md:w-30rem' },
+                content: ({ props, state, context }) => ({
+                    class: context.expanded ? 'bg-blue-100' : 'undefined'
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    } 
+}
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Tree
+            :value="nodes"
+            :pt="{
+                root: { class: 'w-full md:w-30rem' },
+                content: ({ props, state, context }) => ({
+                    class: context.expanded ? 'bg-blue-100' : 'undefined'
+                })
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+const nodes = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/doc/tree/pt/PTImage.vue b/doc/tree/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/tree/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/tree/pt/index.vue b/doc/tree/pt/index.vue
new file mode 100644
index 000000000..569166de0
--- /dev/null
+++ b/doc/tree/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Tree Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.tree',
+                    label: 'Tree PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Tree')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/treeselect/BasicDoc.vue b/doc/treeselect/BasicDoc.vue
index 46c9c4434..7ada114fd 100644
--- a/doc/treeselect/BasicDoc.vue
+++ b/doc/treeselect/BasicDoc.vue
@@ -58,7 +58,34 @@ const selectedValue = ref(null);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`
+<\/script>`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
             }
         };
     },
diff --git a/doc/treeselect/CheckboxDoc.vue b/doc/treeselect/CheckboxDoc.vue
index 7b343c1fb..5422c46c0 100644
--- a/doc/treeselect/CheckboxDoc.vue
+++ b/doc/treeselect/CheckboxDoc.vue
@@ -68,7 +68,34 @@ const selectedValue = ref(null);
 onMounted(() => {
 NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`
+<\/script>`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
             }
         };
     },
diff --git a/doc/treeselect/DisabledDoc.vue b/doc/treeselect/DisabledDoc.vue
index aad774a01..b497a1a3a 100644
--- a/doc/treeselect/DisabledDoc.vue
+++ b/doc/treeselect/DisabledDoc.vue
@@ -54,7 +54,34 @@ const selectedValue = ref(null);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`
+<\/script>`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
             }
         };
     },
diff --git a/doc/treeselect/FloatLabelDoc.vue b/doc/treeselect/FloatLabelDoc.vue
index bfe66c387..7ae8644ee 100644
--- a/doc/treeselect/FloatLabelDoc.vue
+++ b/doc/treeselect/FloatLabelDoc.vue
@@ -63,7 +63,34 @@ const selectedValue = ref(null);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`
+<\/script>`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
             }
         };
     },
diff --git a/doc/treeselect/InvalidDoc.vue b/doc/treeselect/InvalidDoc.vue
index 804786784..465cbc2df 100644
--- a/doc/treeselect/InvalidDoc.vue
+++ b/doc/treeselect/InvalidDoc.vue
@@ -54,7 +54,34 @@ const selectedValue = ref(null);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`
+<\/script>`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
             }
         };
     },
diff --git a/doc/treeselect/MultipleDoc.vue b/doc/treeselect/MultipleDoc.vue
index 96f8f0151..bfbc885e4 100644
--- a/doc/treeselect/MultipleDoc.vue
+++ b/doc/treeselect/MultipleDoc.vue
@@ -66,7 +66,34 @@ const selectedValue = ref(null);
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
 });
-<\/script>`
+<\/script>`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
             }
         };
     },
diff --git a/doc/treeselect/pt/PTDoc.vue b/doc/treeselect/pt/PTDoc.vue
new file mode 100644
index 000000000..928251a6b
--- /dev/null
+++ b/doc/treeselect/pt/PTDoc.vue
@@ -0,0 +1,138 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <TreeSelect
+            v-model="selectedValue"
+            :options="nodes"
+            placeholder="Select Item"
+            :pt="{
+                root: { class: 'w-full md:w-30rem' },
+                tree: {
+                    content: ({ props, state, context }) => ({
+                        class: context.expanded ? 'bg-blue-100' : 'undefined'
+                    })
+                }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+            code: {
+                basic: `
+<TreeSelect
+    v-model="selectedValue"
+    :options="nodes"
+    placeholder="Select Item"
+    :pt="{
+        root: { class: 'w-full md:w-30rem' },
+        tree: {
+            content: ({ props, state, context }) => ({
+                class: context.expanded ? 'bg-blue-100' : 'undefined'
+            })
+        }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <TreeSelect
+            v-model="selectedValue"
+            :options="nodes"
+            placeholder="Select Item"
+            :pt="{
+                root: { class: 'w-full md:w-30rem' },
+                tree: {
+                    content: ({ props, state, context }) => ({
+                        class: context.expanded ? 'bg-blue-100' : 'undefined'
+                    })
+                }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <TreeSelect
+            v-model="selectedValue"
+            :options="nodes"
+            placeholder="Select Item"
+            :pt="{
+                root: { class: 'w-full md:w-30rem' },
+                tree: {
+                    content: ({ props, state, context }) => ({
+                        class: context.expanded ? 'bg-blue-100' : 'undefined'
+                    })
+                }
+            }"
+        />
+    </div> 
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const nodes = ref(null);
+const selectedValue = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/doc/treeselect/pt/PTImage.vue b/doc/treeselect/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/treeselect/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/treeselect/pt/index.vue b/doc/treeselect/pt/index.vue
new file mode 100644
index 000000000..114251b1b
--- /dev/null
+++ b/doc/treeselect/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>TreeSelect Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.treeselect',
+                    label: 'TreeSelect PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('TreeSelect')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/treetable/pt/PTDoc.vue b/doc/treetable/pt/PTDoc.vue
new file mode 100644
index 000000000..4c4fbd477
--- /dev/null
+++ b/doc/treetable/pt/PTDoc.vue
@@ -0,0 +1,196 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card">
+        <TreeTable :value="nodes" sortMode="multiple">
+            <Column
+                field="name"
+                header="Name"
+                sortable
+                expander
+                :pt="{
+                    sortBadge: { class: 'text-orange-400' }
+                }"
+            />
+            <Column
+                field="size"
+                header="Size"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'text-orange-400' }
+                }"
+            />
+            <Column
+                field="type"
+                header="Type"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'text-orange-400' }
+                }"
+            />
+        </TreeTable>
+    </div>
+    <DocSectionCode :code="code" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            code: {
+                basic: `
+<TreeTable :value="nodes" sortMode="multiple">
+    <Column
+        field="name"
+        header="Name"
+        sortable
+        expander
+        :pt="{
+            sortBadge: { class: 'text-orange-400' }
+        }"
+    />
+    <Column
+        field="size"
+        header="Size"
+        sortable
+        :pt="{
+            sortBadge: { class: 'text-orange-400' }
+        }"
+    />
+    <Column
+        field="type"
+        header="Type"
+        sortable
+        :pt="{
+            sortBadge: { class: 'text-orange-400' }
+        }"
+    />
+</TreeTable>`,
+                options: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" sortMode="multiple">
+            <Column
+                field="name"
+                header="Name"
+                sortable
+                expander
+                :pt="{
+                    sortBadge: { class: 'text-orange-400' }
+                }"
+            />
+            <Column
+                field="size"
+                header="Size"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'text-orange-400' }
+                }"
+            />
+            <Column
+                field="type"
+                header="Type"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'text-orange-400' }
+                }"
+            />
+        </TreeTable>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes" sortMode="multiple">
+            <Column
+                field="name"
+                header="Name"
+                sortable
+                expander
+                :pt="{
+                    sortBadge: { class: 'text-orange-400' }
+                }"
+            />
+            <Column
+                field="size"
+                header="Size"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'text-orange-400' }
+                }"
+            />
+            <Column
+                field="type"
+                header="Type"
+                sortable
+                :pt="{
+                    sortBadge: { class: 'text-orange-400' }
+                }"
+            />
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+<\/script>`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/doc/treetable/pt/PTImage.vue b/doc/treetable/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/treetable/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/treetable/pt/index.vue b/doc/treetable/pt/index.vue
new file mode 100644
index 000000000..27336526d
--- /dev/null
+++ b/doc/treetable/pt/index.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>TreeTable Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.treetable',
+                    label: 'TreeTable PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('TreeTable')
+                },
+                {
+                    id: 'pt.doc.column',
+                    label: 'Column PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Column')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/tristatecheckbox/pt/PTDoc.vue b/doc/tristatecheckbox/pt/PTDoc.vue
new file mode 100644
index 000000000..1982b66ca
--- /dev/null
+++ b/doc/tristatecheckbox/pt/PTDoc.vue
@@ -0,0 +1,80 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex flex-column align-items-center gap-3">
+        <TriStateCheckbox
+            v-model="value"
+            :pt="{
+                checbox: {
+                    class: value ? 'bg-teal-500 border-white' : undefined
+                }
+            }"
+        />
+        <label for="checkbox">{{ value == null ? 'null' : value }}</label>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<TriStateCheckbox
+    v-model="value"
+    :pt="{
+        checbox: {
+            class: value ? 'bg-teal-500 border-white' : undefined
+        }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card flex flex-column align-items-center gap-3">
+        <TriStateCheckbox
+            v-model="value"
+            :pt="{
+                checbox: {
+                    class: value ? 'bg-teal-500 border-white' : undefined
+                }
+            }"
+        />
+        <label for="checkbox">{{ value == null ? 'null' : value }}</label>
+    </div>  
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex flex-column align-items-center gap-3">
+        <TriStateCheckbox
+            v-model="value"
+            :pt="{
+                checbox: {
+                    class: value ? 'bg-teal-500 border-white' : undefined
+                }
+            }"
+        />
+        <label for="checkbox">{{ value == null ? 'null' : value }}</label>
+    </div>  
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tristatecheckbox/pt/PTImage.vue b/doc/tristatecheckbox/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/tristatecheckbox/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/tristatecheckbox/pt/index.vue b/doc/tristatecheckbox/pt/index.vue
new file mode 100644
index 000000000..597bf4d49
--- /dev/null
+++ b/doc/tristatecheckbox/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>TriStateCheckbox Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.steps',
+                    label: 'TriStateCheckbox PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('TriStateCheckbox')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/virtualscroller/pt/PTDoc.vue b/doc/virtualscroller/pt/PTDoc.vue
new file mode 100644
index 000000000..a80a89575
--- /dev/null
+++ b/doc/virtualscroller/pt/PTDoc.vue
@@ -0,0 +1,95 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <div class="card flex justify-content-center">
+        <VirtualScroller
+            :items="items"
+            :itemSize="50"
+            :pt="{
+                root: {
+                    class: 'border-1 surface-border border-round',
+                    style: { width: '200px', height: '200px' }
+                }
+            }"
+        >
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="height: 50px">{{ item }}</div>
+            </template>
+        </VirtualScroller>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: null,
+            code: {
+                basic: `
+<VirtualScroller
+    :items="items"
+    :itemSize="50"
+    :pt="{
+        root: {
+            class: 'border-1 surface-border border-round',
+            style: { width: '200px', height: '200px' }
+        }
+    }"
+>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <VirtualScroller
+            :items="items"
+            :itemSize="50"
+            :pt="{
+                root: {
+                    class: 'border-1 surface-border border-round',
+                    style: { width: '200px', height: '200px' }
+                }
+            }"
+        >
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: null
+        };
+    },
+    created() {
+        this.items = Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`);
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <VirtualScroller
+            :items="items"
+            :itemSize="50"
+            :pt="{
+                root: {
+                    class: 'border-1 surface-border border-round',
+                    style: { width: '200px', height: '200px' }
+                }
+            }"
+        >
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+<\/script>`
+            }
+        };
+    },
+    mounted() {
+        this.items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
+    }
+};
+</script>
diff --git a/doc/virtualscroller/pt/PTImage.vue b/doc/virtualscroller/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/doc/virtualscroller/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>
diff --git a/doc/virtualscroller/pt/index.vue b/doc/virtualscroller/pt/index.vue
new file mode 100644
index 000000000..d8d8676e7
--- /dev/null
+++ b/doc/virtualscroller/pt/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>VirtualScroller Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.virtualscroller',
+                    label: 'VirtualScroller PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('VirtualScroller')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/package-build.json b/package-build.json
index f4682fdd1..609e6ab47 100644
--- a/package-build.json
+++ b/package-build.json
@@ -1,6 +1,6 @@
 {
     "name": "primevue",
-    "version": "3.27.0-SNAPSHOT",
+    "version": "3.29.0-SNAPSHOT",
     "homepage": "https://primevue.org/",
     "repository": {
       "type": "git",
@@ -26,7 +26,6 @@
       "attributes": "./vetur-attributes.json"
     },
     "peerDependencies": {
-      "vue": "^3.0.0",
-      "primeicons": "^5.0.0 || ^6.0.0"
+      "vue": "^3.0.0"
     }
   }
diff --git a/package-lock.json b/package-lock.json
index ccbf3722a..b62a10077 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "primevue",
-    "version": "3.27.0-SNAPSHOT",
+    "version": "3.29.0-SNAPSHOT",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "primevue",
-            "version": "3.27.0-SNAPSHOT",
+            "version": "3.29.0-SNAPSHOT",
             "hasInstallScript": true,
             "license": "MIT",
             "dependencies": {
@@ -48,19 +48,19 @@
             }
         },
         "node_modules/@algolia/autocomplete-core": {
-            "version": "1.7.4",
-            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.7.4.tgz",
-            "integrity": "sha512-daoLpQ3ps/VTMRZDEBfU8ixXd+amZcNJ4QSP3IERGyzqnL5Ch8uSRFt/4G8pUvW9c3o6GA4vtVv4I4lmnkdXyg==",
+            "version": "1.8.2",
+            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.8.2.tgz",
+            "integrity": "sha512-mTeshsyFhAqw/ebqNsQpMtbnjr+qVOSKXArEj4K0d7sqc8It1XD0gkASwecm9mF/jlOQ4Z9RNg1HbdA8JPdRwQ==",
             "dependencies": {
-                "@algolia/autocomplete-shared": "1.7.4"
+                "@algolia/autocomplete-shared": "1.8.2"
             }
         },
         "node_modules/@algolia/autocomplete-preset-algolia": {
-            "version": "1.7.4",
-            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.7.4.tgz",
-            "integrity": "sha512-s37hrvLEIfcmKY8VU9LsAXgm2yfmkdHT3DnA3SgHaY93yjZ2qL57wzb5QweVkYuEBZkT2PIREvRoLXC2sxTbpQ==",
+            "version": "1.8.2",
+            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.8.2.tgz",
+            "integrity": "sha512-J0oTx4me6ZM9kIKPuL3lyU3aB8DEvpVvR6xWmHVROx5rOYJGQcZsdG4ozxwcOyiiu3qxMkIbzntnV1S1VWD8yA==",
             "dependencies": {
-                "@algolia/autocomplete-shared": "1.7.4"
+                "@algolia/autocomplete-shared": "1.8.2"
             },
             "peerDependencies": {
                 "@algolia/client-search": ">= 4.9.1 < 6",
@@ -68,9 +68,9 @@
             }
         },
         "node_modules/@algolia/autocomplete-shared": {
-            "version": "1.7.4",
-            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.7.4.tgz",
-            "integrity": "sha512-2VGCk7I9tA9Ge73Km99+Qg87w0wzW4tgUruvWAn/gfey1ZXgmxZtyIRBebk35R1O8TbK77wujVtCnpsGpRy1kg=="
+            "version": "1.8.2",
+            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.8.2.tgz",
+            "integrity": "sha512-b6Z/X4MczChMcfhk6kfRmBzPgjoPzuS9KGR4AFsiLulLNRAAqhP+xZTKtMnZGhLuc61I20d5WqlId02AZvcO6g=="
         },
         "node_modules/@algolia/cache-browser-local-storage": {
             "version": "4.17.0",
@@ -188,12 +188,12 @@
             }
         },
         "node_modules/@ampproject/remapping": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
-            "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==",
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+            "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
             "dev": true,
             "dependencies": {
-                "@jridgewell/gen-mapping": "^0.1.0",
+                "@jridgewell/gen-mapping": "^0.3.0",
                 "@jridgewell/trace-mapping": "^0.3.9"
             },
             "engines": {
@@ -213,30 +213,30 @@
             }
         },
         "node_modules/@babel/compat-data": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.4.tgz",
-            "integrity": "sha512-/DYyDpeCfaVinT40FPGdkkb+lYSKvsVuMjDAG7jPOWWiM1ibOaB9CXJAlc4d1QpP/U2q2P9jbrSlClKSErd55g==",
+            "version": "7.21.7",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.7.tgz",
+            "integrity": "sha512-KYMqFYTaenzMK4yUtf4EW9wc4N9ef80FsbMtkwool5zpwl4YrT1SdWYSTRcT94KO4hannogdS+LxY7L+arP3gA==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/core": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.4.tgz",
-            "integrity": "sha512-qt/YV149Jman/6AfmlxJ04LMIu8bMoyl3RB91yTFrxQmgbrSvQMy7cI8Q62FHx1t8wJ8B5fu0UDoLwHAhUo1QA==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.5.tgz",
+            "integrity": "sha512-9M398B/QH5DlfCOTKDZT1ozXr0x8uBEeFd+dJraGUZGiaNpGCDVGCc14hZexsMblw3XxltJ+6kSvogp9J+5a9g==",
             "dev": true,
             "dependencies": {
                 "@ampproject/remapping": "^2.2.0",
                 "@babel/code-frame": "^7.21.4",
-                "@babel/generator": "^7.21.4",
-                "@babel/helper-compilation-targets": "^7.21.4",
-                "@babel/helper-module-transforms": "^7.21.2",
-                "@babel/helpers": "^7.21.0",
-                "@babel/parser": "^7.21.4",
+                "@babel/generator": "^7.21.5",
+                "@babel/helper-compilation-targets": "^7.21.5",
+                "@babel/helper-module-transforms": "^7.21.5",
+                "@babel/helpers": "^7.21.5",
+                "@babel/parser": "^7.21.5",
                 "@babel/template": "^7.20.7",
-                "@babel/traverse": "^7.21.4",
-                "@babel/types": "^7.21.4",
+                "@babel/traverse": "^7.21.5",
+                "@babel/types": "^7.21.5",
                 "convert-source-map": "^1.7.0",
                 "debug": "^4.1.0",
                 "gensync": "^1.0.0-beta.2",
@@ -270,12 +270,12 @@
             }
         },
         "node_modules/@babel/generator": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.4.tgz",
-            "integrity": "sha512-NieM3pVIYW2SwGzKoqfPrQsf4xGs9M9AIG3ThppsSRmO+m7eQhmI6amajKMUeIO37wFfsvnvcxQFx6x6iqxDnA==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.5.tgz",
+            "integrity": "sha512-SrKK/sRv8GesIW1bDagf9cCG38IOMYZusoe1dfg0D8aiUe3Amvoj1QtjTPAWcfrZFvIwlleLb0gxzQidL9w14w==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.21.4",
+                "@babel/types": "^7.21.5",
                 "@jridgewell/gen-mapping": "^0.3.2",
                 "@jridgewell/trace-mapping": "^0.3.17",
                 "jsesc": "^2.5.1"
@@ -284,20 +284,6 @@
                 "node": ">=6.9.0"
             }
         },
-        "node_modules/@babel/generator/node_modules/@jridgewell/gen-mapping": {
-            "version": "0.3.2",
-            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
-            "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
-            "dev": true,
-            "dependencies": {
-                "@jridgewell/set-array": "^1.0.1",
-                "@jridgewell/sourcemap-codec": "^1.4.10",
-                "@jridgewell/trace-mapping": "^0.3.9"
-            },
-            "engines": {
-                "node": ">=6.0.0"
-            }
-        },
         "node_modules/@babel/helper-annotate-as-pure": {
             "version": "7.18.6",
             "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
@@ -311,12 +297,12 @@
             }
         },
         "node_modules/@babel/helper-compilation-targets": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.4.tgz",
-            "integrity": "sha512-Fa0tTuOXZ1iL8IeDFUWCzjZcn+sJGd9RZdH9esYVjEejGmzf+FFYQpMi/kZUk2kPy/q1H3/GPw7np8qar/stfg==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.5.tgz",
+            "integrity": "sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==",
             "dev": true,
             "dependencies": {
-                "@babel/compat-data": "^7.21.4",
+                "@babel/compat-data": "^7.21.5",
                 "@babel/helper-validator-option": "^7.21.0",
                 "browserslist": "^4.21.3",
                 "lru-cache": "^5.1.1",
@@ -330,19 +316,20 @@
             }
         },
         "node_modules/@babel/helper-create-class-features-plugin": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.4.tgz",
-            "integrity": "sha512-46QrX2CQlaFRF4TkwfTt6nJD7IHq8539cCL7SDpqWSDeJKY1xylKKY5F/33mJhLZ3mFvKv2gGrVS6NkyF6qs+Q==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.5.tgz",
+            "integrity": "sha512-yNSEck9SuDvPTEUYm4BSXl6ZVC7yO5ZLEMAhG3v3zi7RDxyL/nQDemWWZmw4L0stPWwhpnznRRyJHPRcbXR2jw==",
             "dev": true,
             "dependencies": {
                 "@babel/helper-annotate-as-pure": "^7.18.6",
-                "@babel/helper-environment-visitor": "^7.18.9",
+                "@babel/helper-environment-visitor": "^7.21.5",
                 "@babel/helper-function-name": "^7.21.0",
-                "@babel/helper-member-expression-to-functions": "^7.21.0",
+                "@babel/helper-member-expression-to-functions": "^7.21.5",
                 "@babel/helper-optimise-call-expression": "^7.18.6",
-                "@babel/helper-replace-supers": "^7.20.7",
+                "@babel/helper-replace-supers": "^7.21.5",
                 "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-                "@babel/helper-split-export-declaration": "^7.18.6"
+                "@babel/helper-split-export-declaration": "^7.18.6",
+                "semver": "^6.3.0"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -352,9 +339,9 @@
             }
         },
         "node_modules/@babel/helper-environment-visitor": {
-            "version": "7.18.9",
-            "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz",
-            "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.21.5.tgz",
+            "integrity": "sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
@@ -386,12 +373,12 @@
             }
         },
         "node_modules/@babel/helper-member-expression-to-functions": {
-            "version": "7.21.0",
-            "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz",
-            "integrity": "sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.5.tgz",
+            "integrity": "sha512-nIcGfgwpH2u4n9GG1HpStW5Ogx7x7ekiFHbjjFRKXbn5zUvqO9ZgotCO4x1aNbKn/x/xOUaXEhyNHCwtFCpxWg==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.21.0"
+                "@babel/types": "^7.21.5"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -410,19 +397,19 @@
             }
         },
         "node_modules/@babel/helper-module-transforms": {
-            "version": "7.21.2",
-            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz",
-            "integrity": "sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.5.tgz",
+            "integrity": "sha512-bI2Z9zBGY2q5yMHoBvJ2a9iX3ZOAzJPm7Q8Yz6YeoUjU/Cvhmi2G4QyTNyPBqqXSgTjUxRg3L0xV45HvkNWWBw==",
             "dev": true,
             "dependencies": {
-                "@babel/helper-environment-visitor": "^7.18.9",
-                "@babel/helper-module-imports": "^7.18.6",
-                "@babel/helper-simple-access": "^7.20.2",
+                "@babel/helper-environment-visitor": "^7.21.5",
+                "@babel/helper-module-imports": "^7.21.4",
+                "@babel/helper-simple-access": "^7.21.5",
                 "@babel/helper-split-export-declaration": "^7.18.6",
                 "@babel/helper-validator-identifier": "^7.19.1",
                 "@babel/template": "^7.20.7",
-                "@babel/traverse": "^7.21.2",
-                "@babel/types": "^7.21.2"
+                "@babel/traverse": "^7.21.5",
+                "@babel/types": "^7.21.5"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -441,38 +428,38 @@
             }
         },
         "node_modules/@babel/helper-plugin-utils": {
-            "version": "7.20.2",
-            "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz",
-            "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz",
+            "integrity": "sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-replace-supers": {
-            "version": "7.20.7",
-            "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz",
-            "integrity": "sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.21.5.tgz",
+            "integrity": "sha512-/y7vBgsr9Idu4M6MprbOVUfH3vs7tsIfnVWv/Ml2xgwvyH6LTngdfbf5AdsKwkJy4zgy1X/kuNrEKvhhK28Yrg==",
             "dev": true,
             "dependencies": {
-                "@babel/helper-environment-visitor": "^7.18.9",
-                "@babel/helper-member-expression-to-functions": "^7.20.7",
+                "@babel/helper-environment-visitor": "^7.21.5",
+                "@babel/helper-member-expression-to-functions": "^7.21.5",
                 "@babel/helper-optimise-call-expression": "^7.18.6",
                 "@babel/template": "^7.20.7",
-                "@babel/traverse": "^7.20.7",
-                "@babel/types": "^7.20.7"
+                "@babel/traverse": "^7.21.5",
+                "@babel/types": "^7.21.5"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-simple-access": {
-            "version": "7.20.2",
-            "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz",
-            "integrity": "sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.21.5.tgz",
+            "integrity": "sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.20.2"
+                "@babel/types": "^7.21.5"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -503,9 +490,9 @@
             }
         },
         "node_modules/@babel/helper-string-parser": {
-            "version": "7.19.4",
-            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
-            "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz",
+            "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
@@ -530,14 +517,14 @@
             }
         },
         "node_modules/@babel/helpers": {
-            "version": "7.21.0",
-            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.21.0.tgz",
-            "integrity": "sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.21.5.tgz",
+            "integrity": "sha512-BSY+JSlHxOmGsPTydUkPf1MdMQ3M81x5xGCOVgWM3G8XH77sJ292Y2oqcp0CbbgxhqBuI46iUz1tT7hqP7EfgA==",
             "dev": true,
             "dependencies": {
                 "@babel/template": "^7.20.7",
-                "@babel/traverse": "^7.21.0",
-                "@babel/types": "^7.21.0"
+                "@babel/traverse": "^7.21.5",
+                "@babel/types": "^7.21.5"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -558,9 +545,9 @@
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
-            "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.5.tgz",
+            "integrity": "sha512-J+IxH2IsxV4HbnTrSWgMAQj0UEo61hDA4Ny8h8PCX0MLXiibqHbqIOVneqdocemSBc22VpBKxt4J6FQzy9HarQ==",
             "bin": {
                 "parser": "bin/babel-parser.js"
             },
@@ -617,9 +604,9 @@
             }
         },
         "node_modules/@babel/standalone": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.21.4.tgz",
-            "integrity": "sha512-Rw4nGqH/iyVeYxARKcz7iGP+njkPsVqJ45TmXMONoGoxooWjXCAs+CUcLeAZdBGCLqgaPvHKCYvIaDT2Iq+KfA==",
+            "version": "7.21.7",
+            "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.21.7.tgz",
+            "integrity": "sha512-0SINMPlXMqJVZuJmookfaNr5NQiW5+vkHJfnEf+5+2vSf5PxuFAwnjOnRGgLcW9wVv4xUBQvKeKBtYv/lqC/xA==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
@@ -640,19 +627,19 @@
             }
         },
         "node_modules/@babel/traverse": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.4.tgz",
-            "integrity": "sha512-eyKrRHKdyZxqDm+fV1iqL9UAHMoIg0nDaGqfIOd8rKH17m5snv7Gn4qgjBoFfLz9APvjFU/ICT00NVCv1Epp8Q==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.5.tgz",
+            "integrity": "sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==",
             "dev": true,
             "dependencies": {
                 "@babel/code-frame": "^7.21.4",
-                "@babel/generator": "^7.21.4",
-                "@babel/helper-environment-visitor": "^7.18.9",
+                "@babel/generator": "^7.21.5",
+                "@babel/helper-environment-visitor": "^7.21.5",
                 "@babel/helper-function-name": "^7.21.0",
                 "@babel/helper-hoist-variables": "^7.18.6",
                 "@babel/helper-split-export-declaration": "^7.18.6",
-                "@babel/parser": "^7.21.4",
-                "@babel/types": "^7.21.4",
+                "@babel/parser": "^7.21.5",
+                "@babel/types": "^7.21.5",
                 "debug": "^4.1.0",
                 "globals": "^11.1.0"
             },
@@ -661,12 +648,12 @@
             }
         },
         "node_modules/@babel/types": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
-            "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.5.tgz",
+            "integrity": "sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==",
             "dev": true,
             "dependencies": {
-                "@babel/helper-string-parser": "^7.19.4",
+                "@babel/helper-string-parser": "^7.21.5",
                 "@babel/helper-validator-identifier": "^7.19.1",
                 "to-fast-properties": "^2.0.0"
             },
@@ -684,27 +671,27 @@
             }
         },
         "node_modules/@docsearch/css": {
-            "version": "3.3.3",
-            "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.3.3.tgz",
-            "integrity": "sha512-6SCwI7P8ao+se1TUsdZ7B4XzL+gqeQZnBc+2EONZlcVa0dVrk0NjETxozFKgMv0eEGH8QzP1fkN+A1rH61l4eg=="
+            "version": "3.3.4",
+            "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.3.4.tgz",
+            "integrity": "sha512-vDwCDoVXDgopw/hvr0zEADew2wWaGP8Qq0Bxhgii1Ewz2t4fQeyJwIRN/mWADeLFYPVkpz8TpEbxya/i6Tm0WA=="
         },
         "node_modules/@docsearch/js": {
-            "version": "3.3.3",
-            "resolved": "https://registry.npmjs.org/@docsearch/js/-/js-3.3.3.tgz",
-            "integrity": "sha512-2xAv2GFuHzzmG0SSZgf8wHX0qZX8n9Y1ZirKUk5Wrdc+vH9CL837x2hZIUdwcPZI9caBA+/CzxsS68O4waYjUQ==",
+            "version": "3.3.4",
+            "resolved": "https://registry.npmjs.org/@docsearch/js/-/js-3.3.4.tgz",
+            "integrity": "sha512-Xd2saBziXJ1UuVpcDz94zAFEFAM6ap993agh0za2e3LDZLhaW993b1f9gyUL4e1CZLsR076tztG2un2gVncvpA==",
             "dependencies": {
-                "@docsearch/react": "3.3.3",
+                "@docsearch/react": "3.3.4",
                 "preact": "^10.0.0"
             }
         },
         "node_modules/@docsearch/react": {
-            "version": "3.3.3",
-            "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.3.3.tgz",
-            "integrity": "sha512-pLa0cxnl+G0FuIDuYlW+EBK6Rw2jwLw9B1RHIeS4N4s2VhsfJ/wzeCi3CWcs5yVfxLd5ZK50t//TMA5e79YT7Q==",
+            "version": "3.3.4",
+            "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.3.4.tgz",
+            "integrity": "sha512-aeOf1WC5zMzBEi2SI6WWznOmIo9rnpN4p7a3zHXxowVciqlI4HsZGtOR9nFOufLeolv7HibwLlaM0oyUqJxasw==",
             "dependencies": {
-                "@algolia/autocomplete-core": "1.7.4",
-                "@algolia/autocomplete-preset-algolia": "1.7.4",
-                "@docsearch/css": "3.3.3",
+                "@algolia/autocomplete-core": "1.8.2",
+                "@algolia/autocomplete-preset-algolia": "1.8.2",
+                "@docsearch/css": "3.3.4",
                 "algoliasearch": "^4.0.0"
             },
             "peerDependencies": {
@@ -725,9 +712,9 @@
             }
         },
         "node_modules/@esbuild/android-arm": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.15.tgz",
-            "integrity": "sha512-sRSOVlLawAktpMvDyJIkdLI/c/kdRTOqo8t6ImVxg8yT7LQDUYV5Rp2FKeEosLr6ZCja9UjYAzyRSxGteSJPYg==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.18.tgz",
+            "integrity": "sha512-EmwL+vUBZJ7mhFCs5lA4ZimpUH3WMAoqvOIYhVQwdIgSpHC8ImHdsRyhHAVxpDYUSm0lWvd63z0XH1IlImS2Qw==",
             "cpu": [
                 "arm"
             ],
@@ -741,9 +728,9 @@
             }
         },
         "node_modules/@esbuild/android-arm64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.15.tgz",
-            "integrity": "sha512-0kOB6Y7Br3KDVgHeg8PRcvfLkq+AccreK///B4Z6fNZGr/tNHX0z2VywCc7PTeWp+bPvjA5WMvNXltHw5QjAIA==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.18.tgz",
+            "integrity": "sha512-/iq0aK0eeHgSC3z55ucMAHO05OIqmQehiGay8eP5l/5l+iEr4EIbh4/MI8xD9qRFjqzgkc0JkX0LculNC9mXBw==",
             "cpu": [
                 "arm64"
             ],
@@ -757,9 +744,9 @@
             }
         },
         "node_modules/@esbuild/android-x64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.15.tgz",
-            "integrity": "sha512-MzDqnNajQZ63YkaUWVl9uuhcWyEyh69HGpMIrf+acR4otMkfLJ4sUCxqwbCyPGicE9dVlrysI3lMcDBjGiBBcQ==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.18.tgz",
+            "integrity": "sha512-x+0efYNBF3NPW2Xc5bFOSFW7tTXdAcpfEg2nXmxegm4mJuVeS+i109m/7HMiOQ6M12aVGGFlqJX3RhNdYM2lWg==",
             "cpu": [
                 "x64"
             ],
@@ -773,9 +760,9 @@
             }
         },
         "node_modules/@esbuild/darwin-arm64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.15.tgz",
-            "integrity": "sha512-7siLjBc88Z4+6qkMDxPT2juf2e8SJxmsbNVKFY2ifWCDT72v5YJz9arlvBw5oB4W/e61H1+HDB/jnu8nNg0rLA==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.18.tgz",
+            "integrity": "sha512-6tY+djEAdF48M1ONWnQb1C+6LiXrKjmqjzPNPWXhu/GzOHTHX2nh8Mo2ZAmBFg0kIodHhciEgUBtcYCAIjGbjQ==",
             "cpu": [
                 "arm64"
             ],
@@ -789,9 +776,9 @@
             }
         },
         "node_modules/@esbuild/darwin-x64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.15.tgz",
-            "integrity": "sha512-NbImBas2rXwYI52BOKTW342Tm3LTeVlaOQ4QPZ7XuWNKiO226DisFk/RyPk3T0CKZkKMuU69yOvlapJEmax7cg==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.18.tgz",
+            "integrity": "sha512-Qq84ykvLvya3dO49wVC9FFCNUfSrQJLbxhoQk/TE1r6MjHo3sFF2tlJCwMjhkBVq3/ahUisj7+EpRSz0/+8+9A==",
             "cpu": [
                 "x64"
             ],
@@ -805,9 +792,9 @@
             }
         },
         "node_modules/@esbuild/freebsd-arm64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.15.tgz",
-            "integrity": "sha512-Xk9xMDjBVG6CfgoqlVczHAdJnCs0/oeFOspFap5NkYAmRCT2qTn1vJWA2f419iMtsHSLm+O8B6SLV/HlY5cYKg==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.18.tgz",
+            "integrity": "sha512-fw/ZfxfAzuHfaQeMDhbzxp9mc+mHn1Y94VDHFHjGvt2Uxl10mT4CDavHm+/L9KG441t1QdABqkVYwakMUeyLRA==",
             "cpu": [
                 "arm64"
             ],
@@ -821,9 +808,9 @@
             }
         },
         "node_modules/@esbuild/freebsd-x64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.15.tgz",
-            "integrity": "sha512-3TWAnnEOdclvb2pnfsTWtdwthPfOz7qAfcwDLcfZyGJwm1SRZIMOeB5FODVhnM93mFSPsHB9b/PmxNNbSnd0RQ==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.18.tgz",
+            "integrity": "sha512-FQFbRtTaEi8ZBi/A6kxOC0V0E9B/97vPdYjY9NdawyLd4Qk5VD5g2pbWN2VR1c0xhzcJm74HWpObPszWC+qTew==",
             "cpu": [
                 "x64"
             ],
@@ -837,9 +824,9 @@
             }
         },
         "node_modules/@esbuild/linux-arm": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.15.tgz",
-            "integrity": "sha512-MLTgiXWEMAMr8nmS9Gigx43zPRmEfeBfGCwxFQEMgJ5MC53QKajaclW6XDPjwJvhbebv+RzK05TQjvH3/aM4Xw==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.18.tgz",
+            "integrity": "sha512-jW+UCM40LzHcouIaqv3e/oRs0JM76JfhHjCavPxMUti7VAPh8CaGSlS7cmyrdpzSk7A+8f0hiedHqr/LMnfijg==",
             "cpu": [
                 "arm"
             ],
@@ -853,9 +840,9 @@
             }
         },
         "node_modules/@esbuild/linux-arm64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.15.tgz",
-            "integrity": "sha512-T0MVnYw9KT6b83/SqyznTs/3Jg2ODWrZfNccg11XjDehIved2oQfrX/wVuev9N936BpMRaTR9I1J0tdGgUgpJA==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.18.tgz",
+            "integrity": "sha512-R7pZvQZFOY2sxUG8P6A21eq6q+eBv7JPQYIybHVf1XkQYC+lT7nDBdC7wWKTrbvMXKRaGudp/dzZCwL/863mZQ==",
             "cpu": [
                 "arm64"
             ],
@@ -869,9 +856,9 @@
             }
         },
         "node_modules/@esbuild/linux-ia32": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.15.tgz",
-            "integrity": "sha512-wp02sHs015T23zsQtU4Cj57WiteiuASHlD7rXjKUyAGYzlOKDAjqK6bk5dMi2QEl/KVOcsjwL36kD+WW7vJt8Q==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.18.tgz",
+            "integrity": "sha512-ygIMc3I7wxgXIxk6j3V00VlABIjq260i967Cp9BNAk5pOOpIXmd1RFQJQX9Io7KRsthDrQYrtcx7QCof4o3ZoQ==",
             "cpu": [
                 "ia32"
             ],
@@ -885,9 +872,9 @@
             }
         },
         "node_modules/@esbuild/linux-loong64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.15.tgz",
-            "integrity": "sha512-k7FsUJjGGSxwnBmMh8d7IbObWu+sF/qbwc+xKZkBe/lTAF16RqxRCnNHA7QTd3oS2AfGBAnHlXL67shV5bBThQ==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.18.tgz",
+            "integrity": "sha512-bvPG+MyFs5ZlwYclCG1D744oHk1Pv7j8psF5TfYx7otCVmcJsEXgFEhQkbhNW8otDHL1a2KDINW20cfCgnzgMQ==",
             "cpu": [
                 "loong64"
             ],
@@ -901,9 +888,9 @@
             }
         },
         "node_modules/@esbuild/linux-mips64el": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.15.tgz",
-            "integrity": "sha512-ZLWk6czDdog+Q9kE/Jfbilu24vEe/iW/Sj2d8EVsmiixQ1rM2RKH2n36qfxK4e8tVcaXkvuV3mU5zTZviE+NVQ==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.18.tgz",
+            "integrity": "sha512-oVqckATOAGuiUOa6wr8TXaVPSa+6IwVJrGidmNZS1cZVx0HqkTMkqFGD2HIx9H1RvOwFeWYdaYbdY6B89KUMxA==",
             "cpu": [
                 "mips64el"
             ],
@@ -917,9 +904,9 @@
             }
         },
         "node_modules/@esbuild/linux-ppc64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.15.tgz",
-            "integrity": "sha512-mY6dPkIRAiFHRsGfOYZC8Q9rmr8vOBZBme0/j15zFUKM99d4ILY4WpOC7i/LqoY+RE7KaMaSfvY8CqjJtuO4xg==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.18.tgz",
+            "integrity": "sha512-3dLlQO+b/LnQNxgH4l9rqa2/IwRJVN9u/bK63FhOPB4xqiRqlQAU0qDU3JJuf0BmaH0yytTBdoSBHrb2jqc5qQ==",
             "cpu": [
                 "ppc64"
             ],
@@ -933,9 +920,9 @@
             }
         },
         "node_modules/@esbuild/linux-riscv64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.15.tgz",
-            "integrity": "sha512-EcyUtxffdDtWjjwIH8sKzpDRLcVtqANooMNASO59y+xmqqRYBBM7xVLQhqF7nksIbm2yHABptoioS9RAbVMWVA==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.18.tgz",
+            "integrity": "sha512-/x7leOyDPjZV3TcsdfrSI107zItVnsX1q2nho7hbbQoKnmoeUWjs+08rKKt4AUXju7+3aRZSsKrJtaRmsdL1xA==",
             "cpu": [
                 "riscv64"
             ],
@@ -949,9 +936,9 @@
             }
         },
         "node_modules/@esbuild/linux-s390x": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.15.tgz",
-            "integrity": "sha512-BuS6Jx/ezxFuHxgsfvz7T4g4YlVrmCmg7UAwboeyNNg0OzNzKsIZXpr3Sb/ZREDXWgt48RO4UQRDBxJN3B9Rbg==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.18.tgz",
+            "integrity": "sha512-cX0I8Q9xQkL/6F5zWdYmVf5JSQt+ZfZD2bJudZrWD+4mnUvoZ3TDDXtDX2mUaq6upMFv9FlfIh4Gfun0tbGzuw==",
             "cpu": [
                 "s390x"
             ],
@@ -965,9 +952,9 @@
             }
         },
         "node_modules/@esbuild/linux-x64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.15.tgz",
-            "integrity": "sha512-JsdS0EgEViwuKsw5tiJQo9UdQdUJYuB+Mf6HxtJSPN35vez1hlrNb1KajvKWF5Sa35j17+rW1ECEO9iNrIXbNg==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.18.tgz",
+            "integrity": "sha512-66RmRsPlYy4jFl0vG80GcNRdirx4nVWAzJmXkevgphP1qf4dsLQCpSKGM3DUQCojwU1hnepI63gNZdrr02wHUA==",
             "cpu": [
                 "x64"
             ],
@@ -981,9 +968,9 @@
             }
         },
         "node_modules/@esbuild/netbsd-x64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.15.tgz",
-            "integrity": "sha512-R6fKjtUysYGym6uXf6qyNephVUQAGtf3n2RCsOST/neIwPqRWcnc3ogcielOd6pT+J0RDR1RGcy0ZY7d3uHVLA==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.18.tgz",
+            "integrity": "sha512-95IRY7mI2yrkLlTLb1gpDxdC5WLC5mZDi+kA9dmM5XAGxCME0F8i4bYH4jZreaJ6lIZ0B8hTrweqG1fUyW7jbg==",
             "cpu": [
                 "x64"
             ],
@@ -997,9 +984,9 @@
             }
         },
         "node_modules/@esbuild/openbsd-x64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.15.tgz",
-            "integrity": "sha512-mVD4PGc26b8PI60QaPUltYKeSX0wxuy0AltC+WCTFwvKCq2+OgLP4+fFd+hZXzO2xW1HPKcytZBdjqL6FQFa7w==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.18.tgz",
+            "integrity": "sha512-WevVOgcng+8hSZ4Q3BKL3n1xTv5H6Nb53cBrtzzEjDbbnOmucEVcZeGCsCOi9bAOcDYEeBZbD2SJNBxlfP3qiA==",
             "cpu": [
                 "x64"
             ],
@@ -1013,9 +1000,9 @@
             }
         },
         "node_modules/@esbuild/sunos-x64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.15.tgz",
-            "integrity": "sha512-U6tYPovOkw3459t2CBwGcFYfFRjivcJJc1WC8Q3funIwX8x4fP+R6xL/QuTPNGOblbq/EUDxj9GU+dWKX0oWlQ==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.18.tgz",
+            "integrity": "sha512-Rzf4QfQagnwhQXVBS3BYUlxmEbcV7MY+BH5vfDZekU5eYpcffHSyjU8T0xucKVuOcdCsMo+Ur5wmgQJH2GfNrg==",
             "cpu": [
                 "x64"
             ],
@@ -1029,9 +1016,9 @@
             }
         },
         "node_modules/@esbuild/win32-arm64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.15.tgz",
-            "integrity": "sha512-W+Z5F++wgKAleDABemiyXVnzXgvRFs+GVKThSI+mGgleLWluv0D7Diz4oQpgdpNzh4i2nNDzQtWbjJiqutRp6Q==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.18.tgz",
+            "integrity": "sha512-Kb3Ko/KKaWhjeAm2YoT/cNZaHaD1Yk/pa3FTsmqo9uFh1D1Rfco7BBLIPdDOozrObj2sahslFuAQGvWbgWldAg==",
             "cpu": [
                 "arm64"
             ],
@@ -1045,9 +1032,9 @@
             }
         },
         "node_modules/@esbuild/win32-ia32": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.15.tgz",
-            "integrity": "sha512-Muz/+uGgheShKGqSVS1KsHtCyEzcdOn/W/Xbh6H91Etm+wiIfwZaBn1W58MeGtfI8WA961YMHFYTthBdQs4t+w==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.18.tgz",
+            "integrity": "sha512-0/xUMIdkVHwkvxfbd5+lfG7mHOf2FRrxNbPiKWg9C4fFrB8H0guClmaM3BFiRUYrznVoyxTIyC/Ou2B7QQSwmw==",
             "cpu": [
                 "ia32"
             ],
@@ -1061,9 +1048,9 @@
             }
         },
         "node_modules/@esbuild/win32-x64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.15.tgz",
-            "integrity": "sha512-DjDa9ywLUUmjhV2Y9wUTIF+1XsmuFGvZoCmOWkli1XcNAh5t25cc7fgsCx4Zi/Uurep3TTLyDiKATgGEg61pkA==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.18.tgz",
+            "integrity": "sha512-qU25Ma1I3NqTSHJUOKi9sAH1/Mzuvlke0ioMJRthLXKm7JiSKVwFghlGbDLOO2sARECGhja4xYfRAZNPAkooYg==",
             "cpu": [
                 "x64"
             ],
@@ -1104,9 +1091,9 @@
             }
         },
         "node_modules/@eslint-community/regexpp": {
-            "version": "4.5.0",
-            "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.0.tgz",
-            "integrity": "sha512-vITaYzIcNmjn5tF5uxcZ/ft7/RXGrMUIS9HalWckEOF6ESiwXKoMzAQf2UW0aVd6rnOeExTJVd5hmWXucBKGXQ==",
+            "version": "4.5.1",
+            "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz",
+            "integrity": "sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==",
             "dev": true,
             "engines": {
                 "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
@@ -1163,9 +1150,9 @@
             }
         },
         "node_modules/@eslint/js": {
-            "version": "8.37.0",
-            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.37.0.tgz",
-            "integrity": "sha512-x5vzdtOOGgFVDCUs81QRB2+liax8rFg3+7hqM+QhBG0/G3F1ZsoYl97UrqgHgQ9KKT7G6c4V+aTUCgu/n22v1A==",
+            "version": "8.39.0",
+            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.39.0.tgz",
+            "integrity": "sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==",
             "dev": true,
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1220,13 +1207,14 @@
             }
         },
         "node_modules/@jridgewell/gen-mapping": {
-            "version": "0.1.1",
-            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
-            "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
+            "version": "0.3.3",
+            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+            "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
             "dev": true,
             "dependencies": {
-                "@jridgewell/set-array": "^1.0.0",
-                "@jridgewell/sourcemap-codec": "^1.4.10"
+                "@jridgewell/set-array": "^1.0.1",
+                "@jridgewell/sourcemap-codec": "^1.4.10",
+                "@jridgewell/trace-mapping": "^0.3.9"
             },
             "engines": {
                 "node": ">=6.0.0"
@@ -1251,45 +1239,37 @@
             }
         },
         "node_modules/@jridgewell/source-map": {
-            "version": "0.3.2",
-            "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
-            "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+            "version": "0.3.3",
+            "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.3.tgz",
+            "integrity": "sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==",
             "dev": true,
             "dependencies": {
                 "@jridgewell/gen-mapping": "^0.3.0",
                 "@jridgewell/trace-mapping": "^0.3.9"
             }
         },
-        "node_modules/@jridgewell/source-map/node_modules/@jridgewell/gen-mapping": {
-            "version": "0.3.2",
-            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
-            "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
-            "dev": true,
-            "dependencies": {
-                "@jridgewell/set-array": "^1.0.1",
-                "@jridgewell/sourcemap-codec": "^1.4.10",
-                "@jridgewell/trace-mapping": "^0.3.9"
-            },
-            "engines": {
-                "node": ">=6.0.0"
-            }
-        },
         "node_modules/@jridgewell/sourcemap-codec": {
-            "version": "1.4.14",
-            "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-            "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+            "version": "1.4.15",
+            "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+            "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
             "dev": true
         },
         "node_modules/@jridgewell/trace-mapping": {
-            "version": "0.3.17",
-            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
-            "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
+            "version": "0.3.18",
+            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
+            "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
             "dev": true,
             "dependencies": {
                 "@jridgewell/resolve-uri": "3.1.0",
                 "@jridgewell/sourcemap-codec": "1.4.14"
             }
         },
+        "node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": {
+            "version": "1.4.14",
+            "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+            "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+            "dev": true
+        },
         "node_modules/@mapbox/node-pre-gyp": {
             "version": "1.0.10",
             "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.10.tgz",
@@ -1358,9 +1338,9 @@
             }
         },
         "node_modules/@mapbox/node-pre-gyp/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.0",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+            "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -1504,9 +1484,9 @@
             }
         },
         "node_modules/@nuxt/kit/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.0",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+            "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -1549,36 +1529,85 @@
             }
         },
         "node_modules/@nuxt/telemetry": {
-            "version": "2.1.10",
-            "resolved": "https://registry.npmjs.org/@nuxt/telemetry/-/telemetry-2.1.10.tgz",
-            "integrity": "sha512-FOsfC0i6Ix66M/ZlWV/095JIdfnRR9CRbFvBSpojt2CpbwU1pGMbRiicwYg2f1Wf27LXQRNpNn1OczruBfEWag==",
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/@nuxt/telemetry/-/telemetry-2.2.0.tgz",
+            "integrity": "sha512-Z2UmPkBy5WjxvHKuUcl1X6vKWnIyWSP+9UGde1F+MzzZxYgAQybFud1uL2B3KCowxZdoqT1hd2WklV7EtyCwrQ==",
             "dev": true,
             "dependencies": {
-                "@nuxt/kit": "^3.2.0",
+                "@nuxt/kit": "^3.3.3",
                 "chalk": "^5.2.0",
                 "ci-info": "^3.8.0",
-                "consola": "^2.15.3",
+                "consola": "^3.0.1",
                 "create-require": "^1.1.1",
                 "defu": "^6.1.2",
                 "destr": "^1.2.2",
                 "dotenv": "^16.0.3",
                 "fs-extra": "^10.1.0",
                 "git-url-parse": "^13.1.0",
-                "inquirer": "^9.1.4",
+                "inquirer": "^9.1.5",
                 "is-docker": "^3.0.0",
-                "jiti": "^1.17.1",
+                "jiti": "^1.18.2",
                 "mri": "^1.2.0",
-                "nanoid": "^4.0.1",
-                "node-fetch": "^3.3.0",
+                "nanoid": "^4.0.2",
+                "node-fetch": "^3.3.1",
                 "ofetch": "^1.0.1",
                 "parse-git-config": "^3.0.0",
-                "rc9": "^2.0.1",
+                "rc9": "^2.1.0",
                 "std-env": "^3.3.2"
             },
             "bin": {
                 "nuxt-telemetry": "bin/nuxt-telemetry.mjs"
             }
         },
+        "node_modules/@nuxt/telemetry/node_modules/@nuxt/kit": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.4.3.tgz",
+            "integrity": "sha512-aQyzplYFCL292UsVZzlOZOC51ZKYFL0PBihbcPzxTzXQvAfMF8/DQ539kqzqXzxTCcmnUB9ROhIaNUrAeUkFYA==",
+            "dev": true,
+            "dependencies": {
+                "@nuxt/schema": "3.4.3",
+                "c12": "^1.4.1",
+                "consola": "^3.1.0",
+                "defu": "^6.1.2",
+                "globby": "^13.1.4",
+                "hash-sum": "^2.0.0",
+                "ignore": "^5.2.4",
+                "jiti": "^1.18.2",
+                "knitwork": "^1.0.0",
+                "lodash.template": "^4.5.0",
+                "mlly": "^1.2.0",
+                "pathe": "^1.1.0",
+                "pkg-types": "^1.0.2",
+                "scule": "^1.0.0",
+                "semver": "^7.5.0",
+                "unctx": "^2.3.0",
+                "unimport": "^3.0.6",
+                "untyped": "^1.3.2"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.10.0"
+            }
+        },
+        "node_modules/@nuxt/telemetry/node_modules/@nuxt/schema": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.4.3.tgz",
+            "integrity": "sha512-8bv0/mRDw6THQguSz+cKG5FzDZc2XBkjcc5VZ7yET84r4aWzW9/R274cjlEagFKrw9BDaPEQhnkwpg+kZnpOUA==",
+            "dev": true,
+            "dependencies": {
+                "defu": "^6.1.2",
+                "hookable": "^5.5.3",
+                "pathe": "^1.1.0",
+                "pkg-types": "^1.0.2",
+                "postcss-import-resolver": "^2.0.0",
+                "std-env": "^3.3.2",
+                "ufo": "^1.1.1",
+                "unimport": "^3.0.6",
+                "untyped": "^1.3.2"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.10.0"
+            }
+        },
         "node_modules/@nuxt/telemetry/node_modules/chalk": {
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
@@ -1591,6 +1620,12 @@
                 "url": "https://github.com/chalk/chalk?sponsor=1"
             }
         },
+        "node_modules/@nuxt/telemetry/node_modules/consola": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/consola/-/consola-3.1.0.tgz",
+            "integrity": "sha512-rrrJE6rP0qzl/Srg+C9x/AE5Kxfux7reVm1Wh0wCjuXvih6DqZgqDZe8auTD28fzJ9TF0mHlSDrPpWlujQRo1Q==",
+            "dev": true
+        },
         "node_modules/@nuxt/telemetry/node_modules/fs-extra": {
             "version": "10.1.0",
             "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -1605,6 +1640,39 @@
                 "node": ">=12"
             }
         },
+        "node_modules/@nuxt/telemetry/node_modules/lru-cache": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+            "dev": true,
+            "dependencies": {
+                "yallist": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@nuxt/telemetry/node_modules/semver": {
+            "version": "7.5.0",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+            "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
+            "dev": true,
+            "dependencies": {
+                "lru-cache": "^6.0.0"
+            },
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@nuxt/telemetry/node_modules/yallist": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+            "dev": true
+        },
         "node_modules/@nuxt/ui-templates": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/@nuxt/ui-templates/-/ui-templates-1.1.1.tgz",
@@ -1827,9 +1895,9 @@
             }
         },
         "node_modules/@nuxt/vite-builder/node_modules/rollup": {
-            "version": "3.20.2",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz",
-            "integrity": "sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==",
+            "version": "3.21.3",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.3.tgz",
+            "integrity": "sha512-VnPfEG51nIv2xPLnZaekkuN06q9ZbnyDcLkaBdJa/W7UddyhOfMP2yOPziYQfeY7k++fZM8FdQIummFN5y14kA==",
             "dev": true,
             "bin": {
                 "rollup": "dist/bin/rollup"
@@ -1854,10 +1922,59 @@
                 "node": ">=8.0"
             }
         },
+        "node_modules/@nuxt/vite-builder/node_modules/vite": {
+            "version": "4.2.2",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-4.2.2.tgz",
+            "integrity": "sha512-PcNtT5HeDxb3QaSqFYkEum8f5sCVe0R3WK20qxgIvNBZPXU/Obxs/+ubBMeE7nLWeCo2LDzv+8hRYSlcaSehig==",
+            "dev": true,
+            "dependencies": {
+                "esbuild": "^0.17.5",
+                "postcss": "^8.4.21",
+                "resolve": "^1.22.1",
+                "rollup": "^3.18.0"
+            },
+            "bin": {
+                "vite": "bin/vite.js"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.2"
+            },
+            "peerDependencies": {
+                "@types/node": ">= 14",
+                "less": "*",
+                "sass": "*",
+                "stylus": "*",
+                "sugarss": "*",
+                "terser": "^5.4.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/node": {
+                    "optional": true
+                },
+                "less": {
+                    "optional": true
+                },
+                "sass": {
+                    "optional": true
+                },
+                "stylus": {
+                    "optional": true
+                },
+                "sugarss": {
+                    "optional": true
+                },
+                "terser": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@rollup/plugin-alias": {
-            "version": "4.0.4",
-            "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-4.0.4.tgz",
-            "integrity": "sha512-0CaAY238SMtYAWEXXptWSR8iz8NYZnH7zNBKuJ14xFJSGwLtPgjvXYsoApAHfzYXXH1ejxpVw7WlHss3zhh9SQ==",
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.0.0.tgz",
+            "integrity": "sha512-l9hY5chSCjuFRPsnRm16twWBiSApl2uYFLsepQYwtBuAxNMQ/1dJqADld40P0Jkqm65GRTLy/AC6hnpVebtLsA==",
             "dev": true,
             "dependencies": {
                 "slash": "^4.0.0"
@@ -1875,9 +1992,9 @@
             }
         },
         "node_modules/@rollup/plugin-commonjs": {
-            "version": "24.0.1",
-            "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.1.tgz",
-            "integrity": "sha512-15LsiWRZk4eOGqvrJyu3z3DaBu5BhXIMeWnijSRvd8irrrg9SHpQ1pH+BUK4H6Z9wL9yOxZJMTLU+Au86XHxow==",
+            "version": "24.1.0",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-24.1.0.tgz",
+            "integrity": "sha512-eSL45hjhCWI0jCCXcNtLVqM5N1JlBGvlFfY0m6oOYnLCJ6N0qEXoZql4sY2MOUArzhH4SA/qBpTxvvZp2Sc+DQ==",
             "dev": true,
             "dependencies": {
                 "@rollup/pluginutils": "^5.0.1",
@@ -2024,9 +2141,9 @@
             }
         },
         "node_modules/@rollup/plugin-terser": {
-            "version": "0.4.0",
-            "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.0.tgz",
-            "integrity": "sha512-Ipcf3LPNerey1q9ZMjiaWHlNPEHNU/B5/uh9zXLltfEQ1lVSLLeZSgAtTPWGyw8Ip1guOeq+mDtdOlEj/wNxQw==",
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.1.tgz",
+            "integrity": "sha512-aKS32sw5a7hy+fEXVy+5T95aDIwjpGHCTv833HXVtyKMDoVS7pBr5K3L9hEQoNqbJFjfANPrNpIXlTQ7is00eA==",
             "dev": true,
             "dependencies": {
                 "serialize-javascript": "^6.0.0",
@@ -2109,9 +2226,9 @@
             }
         },
         "node_modules/@types/chai": {
-            "version": "4.3.4",
-            "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.4.tgz",
-            "integrity": "sha512-KnRanxnpfpjUTqTCXslZSEdLfXExwgNxYPdiO2WGUj8+HDjFi8R3k5RVKPeSCzLjCcshCAtVO2QBbVuAV4kTnw==",
+            "version": "4.3.5",
+            "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.5.tgz",
+            "integrity": "sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng==",
             "dev": true
         },
         "node_modules/@types/chai-subset": {
@@ -2146,9 +2263,9 @@
             }
         },
         "node_modules/@types/estree": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
-            "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
+            "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
             "dev": true
         },
         "node_modules/@types/json-schema": {
@@ -2158,9 +2275,9 @@
             "dev": true
         },
         "node_modules/@types/node": {
-            "version": "18.15.11",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz",
-            "integrity": "sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==",
+            "version": "18.16.3",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.3.tgz",
+            "integrity": "sha512-OPs5WnnT1xkCBiuQrZA4+YAV4HEJejmHneyraIaxsbev5yCEr6KMwINNFP9wQeFIw8FWcoTqF3vQsa5CDaI+8Q==",
             "dev": true
         },
         "node_modules/@types/resolve": {
@@ -2170,25 +2287,25 @@
             "dev": true
         },
         "node_modules/@unhead/dom": {
-            "version": "1.1.25",
-            "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.1.25.tgz",
-            "integrity": "sha512-kJ5jhJFNQCyNENSw+mtmzgulA0kqUuXS3SRPl1umpofc8PH8tblSzXwqStxTj9r6E4wxJbEuygT/aHFJVioizw==",
+            "version": "1.1.26",
+            "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.1.26.tgz",
+            "integrity": "sha512-6I8z170OAO19h/AslASN4Xw0hqItQFMKhRJQtplQs1BZ62LsDmNKuqJiYueX39U+IfIvIV3j/q1mQwt9lgMwTw==",
             "dev": true,
             "dependencies": {
-                "@unhead/schema": "1.1.25",
-                "@unhead/shared": "1.1.25"
+                "@unhead/schema": "1.1.26",
+                "@unhead/shared": "1.1.26"
             },
             "funding": {
                 "url": "https://github.com/sponsors/harlan-zw"
             }
         },
         "node_modules/@unhead/schema": {
-            "version": "1.1.25",
-            "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.1.25.tgz",
-            "integrity": "sha512-ygmaxWgGTAq9CcB6zGY4+0HlGdQt/oMq+CM18tTnvOBY0Og/uPGt7roW8eH717GpTPibKRTpagSYzZYdL0tWeg==",
+            "version": "1.1.26",
+            "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.1.26.tgz",
+            "integrity": "sha512-l93zaizm+pu36uMssdtzSC2Y61ncZaBBouZn0pB8rVI14V0hPxeXuSNIuPh2WjAm8wfb8EnCSE3LNguoqTar7g==",
             "dev": true,
             "dependencies": {
-                "hookable": "^5.5.1",
+                "hookable": "^5.5.3",
                 "zhead": "^2.0.4"
             },
             "funding": {
@@ -2196,40 +2313,40 @@
             }
         },
         "node_modules/@unhead/shared": {
-            "version": "1.1.25",
-            "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.1.25.tgz",
-            "integrity": "sha512-KptKbk4py1MFYHYwDJ/0kPOs+95dYMrWIT1fCV9lGcVAwu20wIHh+WX18s+iEWhc66xkGRxgC/xsl4wJJFPE+w==",
+            "version": "1.1.26",
+            "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.1.26.tgz",
+            "integrity": "sha512-gnUfNrl8w7hQHke9P0au7klcG9bHVOXqbDvya2uARA/8TyxNz87i0uakraO+P6/+zf484dw3b3MYkXq0thK2eg==",
             "dev": true,
             "dependencies": {
-                "@unhead/schema": "1.1.25"
+                "@unhead/schema": "1.1.26"
             },
             "funding": {
                 "url": "https://github.com/sponsors/harlan-zw"
             }
         },
         "node_modules/@unhead/ssr": {
-            "version": "1.1.25",
-            "resolved": "https://registry.npmjs.org/@unhead/ssr/-/ssr-1.1.25.tgz",
-            "integrity": "sha512-2S3tiajy6n3D1WY2pVkRLr74WGaHD08w0+nFaQGNy0LszPlkWUuAmYYqDCXdh03ijEl+Tjwqjn+E9w1e3QakuQ==",
+            "version": "1.1.26",
+            "resolved": "https://registry.npmjs.org/@unhead/ssr/-/ssr-1.1.26.tgz",
+            "integrity": "sha512-KYJDGgVNtU2i+NHu17o2zFXqsoLukOFEz81XrWQ8nQdY5+VNjy7IiTLp1dlx3umn1ohZjHySz4LXQCT4zUApSw==",
             "dev": true,
             "dependencies": {
-                "@unhead/schema": "1.1.25",
-                "@unhead/shared": "1.1.25"
+                "@unhead/schema": "1.1.26",
+                "@unhead/shared": "1.1.26"
             },
             "funding": {
                 "url": "https://github.com/sponsors/harlan-zw"
             }
         },
         "node_modules/@unhead/vue": {
-            "version": "1.1.25",
-            "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.1.25.tgz",
-            "integrity": "sha512-ujincFHftg2N2i3G/gVkMyJ7CFzVyZ8SMb5cJCWZEnDBQGjgy3uvWT6EaM0d2jnaeXiYbB+iyY0O1o/H+XlpKQ==",
+            "version": "1.1.26",
+            "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.1.26.tgz",
+            "integrity": "sha512-UpxQ0KGmOoiN+Dg19zto5KTcnGV5chBmgiVJTDqUF4BPfr24vRrR65sZGdMoNV7weuD3AD/K0osk2ru+vXxRrA==",
             "dev": true,
             "dependencies": {
-                "@unhead/schema": "1.1.25",
-                "@unhead/shared": "1.1.25",
-                "hookable": "^5.5.1",
-                "unhead": "1.1.25"
+                "@unhead/schema": "1.1.26",
+                "@unhead/shared": "1.1.26",
+                "hookable": "^5.5.3",
+                "unhead": "1.1.26"
             },
             "funding": {
                 "url": "https://github.com/sponsors/harlan-zw"
@@ -2633,73 +2750,73 @@
             }
         },
         "node_modules/@webassemblyjs/ast": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
-            "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.5.tgz",
+            "integrity": "sha512-LHY/GSAZZRpsNQH+/oHqhRQ5FT7eoULcBqgfyTB5nQHogFnK3/7QoN7dLnwSE/JkUAF0SrRuclT7ODqMFtWxxQ==",
             "dev": true,
             "peer": true,
             "dependencies": {
-                "@webassemblyjs/helper-numbers": "1.11.1",
-                "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
+                "@webassemblyjs/helper-numbers": "1.11.5",
+                "@webassemblyjs/helper-wasm-bytecode": "1.11.5"
             }
         },
         "node_modules/@webassemblyjs/floating-point-hex-parser": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
-            "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.5.tgz",
+            "integrity": "sha512-1j1zTIC5EZOtCplMBG/IEwLtUojtwFVwdyVMbL/hwWqbzlQoJsWCOavrdnLkemwNoC/EOwtUFch3fuo+cbcXYQ==",
             "dev": true,
             "peer": true
         },
         "node_modules/@webassemblyjs/helper-api-error": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
-            "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.5.tgz",
+            "integrity": "sha512-L65bDPmfpY0+yFrsgz8b6LhXmbbs38OnwDCf6NpnMUYqa+ENfE5Dq9E42ny0qz/PdR0LJyq/T5YijPnU8AXEpA==",
             "dev": true,
             "peer": true
         },
         "node_modules/@webassemblyjs/helper-buffer": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
-            "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.5.tgz",
+            "integrity": "sha512-fDKo1gstwFFSfacIeH5KfwzjykIE6ldh1iH9Y/8YkAZrhmu4TctqYjSh7t0K2VyDSXOZJ1MLhht/k9IvYGcIxg==",
             "dev": true,
             "peer": true
         },
         "node_modules/@webassemblyjs/helper-numbers": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
-            "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.5.tgz",
+            "integrity": "sha512-DhykHXM0ZABqfIGYNv93A5KKDw/+ywBFnuWybZZWcuzWHfbp21wUfRkbtz7dMGwGgT4iXjWuhRMA2Mzod6W4WA==",
             "dev": true,
             "peer": true,
             "dependencies": {
-                "@webassemblyjs/floating-point-hex-parser": "1.11.1",
-                "@webassemblyjs/helper-api-error": "1.11.1",
+                "@webassemblyjs/floating-point-hex-parser": "1.11.5",
+                "@webassemblyjs/helper-api-error": "1.11.5",
                 "@xtuc/long": "4.2.2"
             }
         },
         "node_modules/@webassemblyjs/helper-wasm-bytecode": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
-            "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.5.tgz",
+            "integrity": "sha512-oC4Qa0bNcqnjAowFn7MPCETQgDYytpsfvz4ujZz63Zu/a/v71HeCAAmZsgZ3YVKec3zSPYytG3/PrRCqbtcAvA==",
             "dev": true,
             "peer": true
         },
         "node_modules/@webassemblyjs/helper-wasm-section": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
-            "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.5.tgz",
+            "integrity": "sha512-uEoThA1LN2NA+K3B9wDo3yKlBfVtC6rh0i4/6hvbz071E8gTNZD/pT0MsBf7MeD6KbApMSkaAK0XeKyOZC7CIA==",
             "dev": true,
             "peer": true,
             "dependencies": {
-                "@webassemblyjs/ast": "1.11.1",
-                "@webassemblyjs/helper-buffer": "1.11.1",
-                "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-                "@webassemblyjs/wasm-gen": "1.11.1"
+                "@webassemblyjs/ast": "1.11.5",
+                "@webassemblyjs/helper-buffer": "1.11.5",
+                "@webassemblyjs/helper-wasm-bytecode": "1.11.5",
+                "@webassemblyjs/wasm-gen": "1.11.5"
             }
         },
         "node_modules/@webassemblyjs/ieee754": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
-            "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.5.tgz",
+            "integrity": "sha512-37aGq6qVL8A8oPbPrSGMBcp38YZFXcHfiROflJn9jxSdSMMM5dS5P/9e2/TpaJuhE+wFrbukN2WI6Hw9MH5acg==",
             "dev": true,
             "peer": true,
             "dependencies": {
@@ -2707,9 +2824,9 @@
             }
         },
         "node_modules/@webassemblyjs/leb128": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
-            "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.5.tgz",
+            "integrity": "sha512-ajqrRSXaTJoPW+xmkfYN6l8VIeNnR4vBOTQO9HzR7IygoCcKWkICbKFbVTNMjMgMREqXEr0+2M6zukzM47ZUfQ==",
             "dev": true,
             "peer": true,
             "dependencies": {
@@ -2717,79 +2834,79 @@
             }
         },
         "node_modules/@webassemblyjs/utf8": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
-            "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.5.tgz",
+            "integrity": "sha512-WiOhulHKTZU5UPlRl53gHR8OxdGsSOxqfpqWeA2FmcwBMaoEdz6b2x2si3IwC9/fSPLfe8pBMRTHVMk5nlwnFQ==",
             "dev": true,
             "peer": true
         },
         "node_modules/@webassemblyjs/wasm-edit": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
-            "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.5.tgz",
+            "integrity": "sha512-C0p9D2fAu3Twwqvygvf42iGCQ4av8MFBLiTb+08SZ4cEdwzWx9QeAHDo1E2k+9s/0w1DM40oflJOpkZ8jW4HCQ==",
             "dev": true,
             "peer": true,
             "dependencies": {
-                "@webassemblyjs/ast": "1.11.1",
-                "@webassemblyjs/helper-buffer": "1.11.1",
-                "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-                "@webassemblyjs/helper-wasm-section": "1.11.1",
-                "@webassemblyjs/wasm-gen": "1.11.1",
-                "@webassemblyjs/wasm-opt": "1.11.1",
-                "@webassemblyjs/wasm-parser": "1.11.1",
-                "@webassemblyjs/wast-printer": "1.11.1"
+                "@webassemblyjs/ast": "1.11.5",
+                "@webassemblyjs/helper-buffer": "1.11.5",
+                "@webassemblyjs/helper-wasm-bytecode": "1.11.5",
+                "@webassemblyjs/helper-wasm-section": "1.11.5",
+                "@webassemblyjs/wasm-gen": "1.11.5",
+                "@webassemblyjs/wasm-opt": "1.11.5",
+                "@webassemblyjs/wasm-parser": "1.11.5",
+                "@webassemblyjs/wast-printer": "1.11.5"
             }
         },
         "node_modules/@webassemblyjs/wasm-gen": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
-            "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.5.tgz",
+            "integrity": "sha512-14vteRlRjxLK9eSyYFvw1K8Vv+iPdZU0Aebk3j6oB8TQiQYuO6hj9s4d7qf6f2HJr2khzvNldAFG13CgdkAIfA==",
             "dev": true,
             "peer": true,
             "dependencies": {
-                "@webassemblyjs/ast": "1.11.1",
-                "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-                "@webassemblyjs/ieee754": "1.11.1",
-                "@webassemblyjs/leb128": "1.11.1",
-                "@webassemblyjs/utf8": "1.11.1"
+                "@webassemblyjs/ast": "1.11.5",
+                "@webassemblyjs/helper-wasm-bytecode": "1.11.5",
+                "@webassemblyjs/ieee754": "1.11.5",
+                "@webassemblyjs/leb128": "1.11.5",
+                "@webassemblyjs/utf8": "1.11.5"
             }
         },
         "node_modules/@webassemblyjs/wasm-opt": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
-            "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.5.tgz",
+            "integrity": "sha512-tcKwlIXstBQgbKy1MlbDMlXaxpucn42eb17H29rawYLxm5+MsEmgPzeCP8B1Cl69hCice8LeKgZpRUAPtqYPgw==",
             "dev": true,
             "peer": true,
             "dependencies": {
-                "@webassemblyjs/ast": "1.11.1",
-                "@webassemblyjs/helper-buffer": "1.11.1",
-                "@webassemblyjs/wasm-gen": "1.11.1",
-                "@webassemblyjs/wasm-parser": "1.11.1"
+                "@webassemblyjs/ast": "1.11.5",
+                "@webassemblyjs/helper-buffer": "1.11.5",
+                "@webassemblyjs/wasm-gen": "1.11.5",
+                "@webassemblyjs/wasm-parser": "1.11.5"
             }
         },
         "node_modules/@webassemblyjs/wasm-parser": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
-            "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.5.tgz",
+            "integrity": "sha512-SVXUIwsLQlc8srSD7jejsfTU83g7pIGr2YYNb9oHdtldSxaOhvA5xwvIiWIfcX8PlSakgqMXsLpLfbbJ4cBYew==",
             "dev": true,
             "peer": true,
             "dependencies": {
-                "@webassemblyjs/ast": "1.11.1",
-                "@webassemblyjs/helper-api-error": "1.11.1",
-                "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-                "@webassemblyjs/ieee754": "1.11.1",
-                "@webassemblyjs/leb128": "1.11.1",
-                "@webassemblyjs/utf8": "1.11.1"
+                "@webassemblyjs/ast": "1.11.5",
+                "@webassemblyjs/helper-api-error": "1.11.5",
+                "@webassemblyjs/helper-wasm-bytecode": "1.11.5",
+                "@webassemblyjs/ieee754": "1.11.5",
+                "@webassemblyjs/leb128": "1.11.5",
+                "@webassemblyjs/utf8": "1.11.5"
             }
         },
         "node_modules/@webassemblyjs/wast-printer": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
-            "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.5.tgz",
+            "integrity": "sha512-f7Pq3wvg3GSPUPzR0F6bmI89Hdb+u9WXrSKc4v+N0aV0q6r42WoF92Jp2jEorBEBRoRNXgjp53nBniDXcqZYPA==",
             "dev": true,
             "peer": true,
             "dependencies": {
-                "@webassemblyjs/ast": "1.11.1",
+                "@webassemblyjs/ast": "1.11.5",
                 "@xtuc/long": "4.2.2"
             }
         },
@@ -2964,9 +3081,9 @@
             }
         },
         "node_modules/ansi-escapes": {
-            "version": "6.1.0",
-            "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.1.0.tgz",
-            "integrity": "sha512-bQyg9bzRntwR/8b89DOEhGwctcwCrbWW/TuqTQnpqpy5Fz3aovcOTj5i8NJV6AHc8OGNdMaqdxAWww8pz2kiKg==",
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.2.0.tgz",
+            "integrity": "sha512-kzRaCqXnpzWs+3z5ABPQiVke+iq0KXkHo8xiWV4RPTi5Yli0l97BEQuhXV1s7+aSU/fu1kUuxgS4MsQ0fRuygw==",
             "dev": true,
             "dependencies": {
                 "type-fest": "^3.0.0"
@@ -3722,19 +3839,166 @@
             }
         },
         "node_modules/c12": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/c12/-/c12-1.2.0.tgz",
-            "integrity": "sha512-CMznkE0LpNEuD8ILp5QvsQVP+YvcpJnrI/zFeFnosU2PyDtx1wT7tXfZ8S3Tl3l9MTTXbKeuhDYKwgvnAPOx3w==",
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/c12/-/c12-1.4.1.tgz",
+            "integrity": "sha512-0x7pWfLZpZsgtyotXtuepJc0rZYE0Aw8PwNAXs0jSG9zq6Sl5xmbWnFqfmRY01ieZLHNbvneSFm9/x88CvzAuw==",
             "dev": true,
             "dependencies": {
+                "chokidar": "^3.5.3",
                 "defu": "^6.1.2",
                 "dotenv": "^16.0.3",
                 "giget": "^1.1.2",
-                "jiti": "^1.17.2",
+                "jiti": "^1.18.2",
                 "mlly": "^1.2.0",
+                "ohash": "^1.1.1",
                 "pathe": "^1.1.0",
+                "perfect-debounce": "^0.1.3",
                 "pkg-types": "^1.0.2",
-                "rc9": "^2.0.1"
+                "rc9": "^2.1.0"
+            }
+        },
+        "node_modules/c12/node_modules/anymatch": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+            "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+            "dev": true,
+            "dependencies": {
+                "normalize-path": "^3.0.0",
+                "picomatch": "^2.0.4"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/c12/node_modules/binary-extensions": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+            "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/c12/node_modules/braces": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+            "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+            "dev": true,
+            "dependencies": {
+                "fill-range": "^7.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/c12/node_modules/chokidar": {
+            "version": "3.5.3",
+            "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+            "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "individual",
+                    "url": "https://paulmillr.com/funding/"
+                }
+            ],
+            "dependencies": {
+                "anymatch": "~3.1.2",
+                "braces": "~3.0.2",
+                "glob-parent": "~5.1.2",
+                "is-binary-path": "~2.1.0",
+                "is-glob": "~4.0.1",
+                "normalize-path": "~3.0.0",
+                "readdirp": "~3.6.0"
+            },
+            "engines": {
+                "node": ">= 8.10.0"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.2"
+            }
+        },
+        "node_modules/c12/node_modules/fill-range": {
+            "version": "7.0.1",
+            "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+            "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+            "dev": true,
+            "dependencies": {
+                "to-regex-range": "^5.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/c12/node_modules/fsevents": {
+            "version": "2.3.2",
+            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+            "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+            "dev": true,
+            "hasInstallScript": true,
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+            }
+        },
+        "node_modules/c12/node_modules/glob-parent": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+            "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+            "dev": true,
+            "dependencies": {
+                "is-glob": "^4.0.1"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/c12/node_modules/is-binary-path": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+            "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+            "dev": true,
+            "dependencies": {
+                "binary-extensions": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/c12/node_modules/is-number": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+            "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.12.0"
+            }
+        },
+        "node_modules/c12/node_modules/readdirp": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+            "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+            "dev": true,
+            "dependencies": {
+                "picomatch": "^2.2.1"
+            },
+            "engines": {
+                "node": ">=8.10.0"
+            }
+        },
+        "node_modules/c12/node_modules/to-regex-range": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+            "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+            "dev": true,
+            "dependencies": {
+                "is-number": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=8.0"
             }
         },
         "node_modules/cac": {
@@ -3813,9 +4077,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001474",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001474.tgz",
-            "integrity": "sha512-iaIZ8gVrWfemh5DG3T9/YqarVZoYf0r188IjaGwx68j4Pf0SGY6CQkmJUIE+NZHkkecQGohzXmBGEwWDr9aM3Q==",
+            "version": "1.0.30001482",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001482.tgz",
+            "integrity": "sha512-F1ZInsg53cegyjroxLNW9DmrEQ1SuGRTO1QlpA0o2/6OpQ0gFeDRoq1yFmnr8Sakn9qwwt9DmbxHB6w167OSuQ==",
             "dev": true,
             "funding": [
                 {
@@ -4357,9 +4621,9 @@
             "dev": true
         },
         "node_modules/colorette": {
-            "version": "2.0.19",
-            "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
-            "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
+            "version": "2.0.20",
+            "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+            "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
             "dev": true
         },
         "node_modules/combined-stream": {
@@ -5270,9 +5534,9 @@
             "dev": true
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.353",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.353.tgz",
-            "integrity": "sha512-IdJVpMHJoBT/nn0GQ02wPfbhogDVpd1ud95lP//FTf5l35wzxKJwibB4HBdY7Q+xKPA1nkZ0UDLOMyRj5U5IAQ==",
+            "version": "1.4.379",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.379.tgz",
+            "integrity": "sha512-eRMq6Cf4PhjB14R9U6QcXM/VRQ54Gc3OL9LKnFugUIh2AXm3KJlOizlSfVIgjH76bII4zHGK4t0PVTE5qq8dZg==",
             "dev": true
         },
         "node_modules/emoji-regex": {
@@ -5309,9 +5573,9 @@
             }
         },
         "node_modules/enhanced-resolve": {
-            "version": "5.12.0",
-            "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
-            "integrity": "sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==",
+            "version": "5.13.0",
+            "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.13.0.tgz",
+            "integrity": "sha512-eyV8f0y1+bzyfh8xAwW/WTSZpLbjhqc4ne9eGSH4Zo2ejdyiNG9pU6mf9DG8a7+Auk6MFTlNOT4Y2y/9k8GKVg==",
             "dev": true,
             "dependencies": {
                 "graceful-fs": "^4.2.4",
@@ -5352,9 +5616,9 @@
             }
         },
         "node_modules/es-module-lexer": {
-            "version": "0.9.3",
-            "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
-            "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.2.1.tgz",
+            "integrity": "sha512-9978wrXM50Y4rTMmW5kXIC09ZdXQZqkE4mxhwkd8VbzsGkXGPgV4zWuqQJgCEzYngdo2dYDa0l8xhX4fkSwJSg==",
             "dev": true,
             "peer": true
         },
@@ -5407,9 +5671,9 @@
             }
         },
         "node_modules/esbuild": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.15.tgz",
-            "integrity": "sha512-LBUV2VsUIc/iD9ME75qhT4aJj0r75abCVS0jakhFzOtR7TQsqQA5w0tZ+KTKnwl3kXE0MhskNdHDh/I5aCR1Zw==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.18.tgz",
+            "integrity": "sha512-z1lix43jBs6UKjcZVKOw2xx69ffE2aG0PygLL5qJ9OS/gy0Ewd1gW/PUQIOIQGXBHWNywSc0floSKoMFF8aK2w==",
             "dev": true,
             "hasInstallScript": true,
             "bin": {
@@ -5419,28 +5683,28 @@
                 "node": ">=12"
             },
             "optionalDependencies": {
-                "@esbuild/android-arm": "0.17.15",
-                "@esbuild/android-arm64": "0.17.15",
-                "@esbuild/android-x64": "0.17.15",
-                "@esbuild/darwin-arm64": "0.17.15",
-                "@esbuild/darwin-x64": "0.17.15",
-                "@esbuild/freebsd-arm64": "0.17.15",
-                "@esbuild/freebsd-x64": "0.17.15",
-                "@esbuild/linux-arm": "0.17.15",
-                "@esbuild/linux-arm64": "0.17.15",
-                "@esbuild/linux-ia32": "0.17.15",
-                "@esbuild/linux-loong64": "0.17.15",
-                "@esbuild/linux-mips64el": "0.17.15",
-                "@esbuild/linux-ppc64": "0.17.15",
-                "@esbuild/linux-riscv64": "0.17.15",
-                "@esbuild/linux-s390x": "0.17.15",
-                "@esbuild/linux-x64": "0.17.15",
-                "@esbuild/netbsd-x64": "0.17.15",
-                "@esbuild/openbsd-x64": "0.17.15",
-                "@esbuild/sunos-x64": "0.17.15",
-                "@esbuild/win32-arm64": "0.17.15",
-                "@esbuild/win32-ia32": "0.17.15",
-                "@esbuild/win32-x64": "0.17.15"
+                "@esbuild/android-arm": "0.17.18",
+                "@esbuild/android-arm64": "0.17.18",
+                "@esbuild/android-x64": "0.17.18",
+                "@esbuild/darwin-arm64": "0.17.18",
+                "@esbuild/darwin-x64": "0.17.18",
+                "@esbuild/freebsd-arm64": "0.17.18",
+                "@esbuild/freebsd-x64": "0.17.18",
+                "@esbuild/linux-arm": "0.17.18",
+                "@esbuild/linux-arm64": "0.17.18",
+                "@esbuild/linux-ia32": "0.17.18",
+                "@esbuild/linux-loong64": "0.17.18",
+                "@esbuild/linux-mips64el": "0.17.18",
+                "@esbuild/linux-ppc64": "0.17.18",
+                "@esbuild/linux-riscv64": "0.17.18",
+                "@esbuild/linux-s390x": "0.17.18",
+                "@esbuild/linux-x64": "0.17.18",
+                "@esbuild/netbsd-x64": "0.17.18",
+                "@esbuild/openbsd-x64": "0.17.18",
+                "@esbuild/sunos-x64": "0.17.18",
+                "@esbuild/win32-arm64": "0.17.18",
+                "@esbuild/win32-ia32": "0.17.18",
+                "@esbuild/win32-x64": "0.17.18"
             }
         },
         "node_modules/escalade": {
@@ -5550,15 +5814,15 @@
             }
         },
         "node_modules/eslint": {
-            "version": "8.37.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.37.0.tgz",
-            "integrity": "sha512-NU3Ps9nI05GUoVMxcZx1J8CNR6xOvUT4jAUMH5+z8lpp3aEdPVCImKw6PWG4PY+Vfkpr+jvMpxs/qoE7wq0sPw==",
+            "version": "8.39.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.39.0.tgz",
+            "integrity": "sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==",
             "dev": true,
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.2.0",
                 "@eslint-community/regexpp": "^4.4.0",
                 "@eslint/eslintrc": "^2.0.2",
-                "@eslint/js": "8.37.0",
+                "@eslint/js": "8.39.0",
                 "@humanwhocodes/config-array": "^0.11.8",
                 "@humanwhocodes/module-importer": "^1.0.1",
                 "@nodelib/fs.walk": "^1.2.8",
@@ -5568,7 +5832,7 @@
                 "debug": "^4.3.2",
                 "doctrine": "^3.0.0",
                 "escape-string-regexp": "^4.0.0",
-                "eslint-scope": "^7.1.1",
+                "eslint-scope": "^7.2.0",
                 "eslint-visitor-keys": "^3.4.0",
                 "espree": "^9.5.1",
                 "esquery": "^1.4.2",
@@ -5642,9 +5906,9 @@
             }
         },
         "node_modules/eslint-plugin-nuxt/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.0",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+            "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -5684,9 +5948,9 @@
             }
         },
         "node_modules/eslint-plugin-vue": {
-            "version": "9.10.0",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.10.0.tgz",
-            "integrity": "sha512-2MgP31OBf8YilUvtakdVMc8xVbcMp7z7/iQj8LHVpXrSXHPXSJRUIGSPFI6b6pyCx/buKaFJ45ycqfHvQRiW2g==",
+            "version": "9.11.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.11.0.tgz",
+            "integrity": "sha512-bBCJAZnkBV7ATH4Z1E7CvN3nmtS4H7QUU3UBxPdo8WohRU+yHjnQRALpTbxMVcz0e4Mx3IyxIdP5HYODMxK9cQ==",
             "dev": true,
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.3.0",
@@ -5717,9 +5981,9 @@
             }
         },
         "node_modules/eslint-plugin-vue/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.0",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+            "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -5821,9 +6085,9 @@
             }
         },
         "node_modules/eslint/node_modules/eslint-scope": {
-            "version": "7.1.1",
-            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
-            "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
+            "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
             "dev": true,
             "dependencies": {
                 "esrecurse": "^4.3.0",
@@ -5831,6 +6095,9 @@
             },
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
             }
         },
         "node_modules/eslint/node_modules/eslint-visitor-keys": {
@@ -6764,7 +7031,7 @@
             "version": "1.2.13",
             "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
             "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-            "deprecated": "fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.",
+            "deprecated": "The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2",
             "dev": true,
             "hasInstallScript": true,
             "optional": true,
@@ -7155,9 +7422,9 @@
             }
         },
         "node_modules/globby": {
-            "version": "13.1.3",
-            "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.3.tgz",
-            "integrity": "sha512-8krCNHXvlCgHDpegPzleMq07yMYTO2sXKASmZmquEYWEmCx6J5UTRbp5RwMJkTJGtcQ44YpiUYUiN0b9mzy8Bw==",
+            "version": "13.1.4",
+            "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.4.tgz",
+            "integrity": "sha512-iui/IiiW+QrJ1X1hKH5qwlMQyv34wJAYwH1vrf8b9kBA4sNiif3gKsMHa+BrdnOpEudWjpotfa7LrTzB1ERS/g==",
             "dev": true,
             "dependencies": {
                 "dir-glob": "^3.0.1",
@@ -7852,9 +8119,9 @@
             "dev": true
         },
         "node_modules/inquirer": {
-            "version": "9.1.5",
-            "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.1.5.tgz",
-            "integrity": "sha512-3ygAIh8gcZavV9bj6MTdYddG2zPSYswP808fKS46NOwlF0zZljVpnLCHODDqItWJDbDpLb3aouAxGaJbkxoppA==",
+            "version": "9.2.0",
+            "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.2.0.tgz",
+            "integrity": "sha512-WWERbVqjsTXjXub1ZW0ZHDit1dyHqy0T9XIkky9TnmKAPrjU9Jkd59nZPK0dUuM3s73GZAZu2Jo4iFU3XSPVLA==",
             "dev": true,
             "dependencies": {
                 "ansi-escapes": "^6.0.0",
@@ -7935,9 +8202,9 @@
             }
         },
         "node_modules/ioredis": {
-            "version": "5.3.1",
-            "resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.3.1.tgz",
-            "integrity": "sha512-C+IBcMysM6v52pTLItYMeV4Hz7uriGtoJdz7SSBDX6u+zwSYGirLdQh3L7t/OItWITcw3gTFMjJReYUwS4zihg==",
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.3.2.tgz",
+            "integrity": "sha512-1DKMMzlIHM02eBBVOFQ1+AolGjs6+xEcM4PDL7NqOS6szq7H9jSaEkIUH6/a5Hl241LzW6JLSiAbNvTQjUupUA==",
             "dev": true,
             "dependencies": {
                 "@ioredis/commands": "^1.1.1",
@@ -8069,9 +8336,9 @@
             }
         },
         "node_modules/is-core-module": {
-            "version": "2.11.0",
-            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
-            "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.0.tgz",
+            "integrity": "sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==",
             "dev": true,
             "dependencies": {
                 "has": "^1.0.3"
@@ -9393,9 +9660,9 @@
             }
         },
         "node_modules/minipass": {
-            "version": "4.2.5",
-            "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.5.tgz",
-            "integrity": "sha512-+yQl7SX3bIT83Lhb4BVorMAHVuqsskxRdlmO9kTpyukp8vsm2Sn/fUOV9xlnG8/a5JsypJzap21lz/y3FBMJ8Q==",
+            "version": "4.2.8",
+            "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz",
+            "integrity": "sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==",
             "dev": true,
             "engines": {
                 "node": ">=8"
@@ -9638,20 +9905,20 @@
             "dev": true
         },
         "node_modules/nitropack": {
-            "version": "2.3.2",
-            "resolved": "https://registry.npmjs.org/nitropack/-/nitropack-2.3.2.tgz",
-            "integrity": "sha512-bps3OvC3JocB3Hl6/FUaQpbLw1Xsr6KXV3hTDnh54N0B0uAGWN9aF1LVHKBpWSS5JJvjwd+ZewOUFsPRM2NJ9Q==",
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/nitropack/-/nitropack-2.3.3.tgz",
+            "integrity": "sha512-1g/4zdwWo+tWSvno57rhRXeGk6jNbG5W1yRNtOywInT1nyoEG1ksOwQ3W3JHGB2E1GNjZwAVi611UVOVL+JgYw==",
             "dev": true,
             "dependencies": {
                 "@cloudflare/kv-asset-handler": "^0.3.0",
                 "@netlify/functions": "^1.4.0",
-                "@rollup/plugin-alias": "^4.0.3",
+                "@rollup/plugin-alias": "^5.0.0",
                 "@rollup/plugin-commonjs": "^24.0.1",
                 "@rollup/plugin-inject": "^5.0.3",
                 "@rollup/plugin-json": "^6.0.0",
-                "@rollup/plugin-node-resolve": "^15.0.1",
+                "@rollup/plugin-node-resolve": "^15.0.2",
                 "@rollup/plugin-replace": "^5.0.2",
-                "@rollup/plugin-terser": "^0.4.0",
+                "@rollup/plugin-terser": "^0.4.1",
                 "@rollup/plugin-wasm": "^6.1.2",
                 "@rollup/pluginutils": "^5.0.2",
                 "@vercel/nft": "^0.22.6",
@@ -9659,19 +9926,19 @@
                 "c12": "^1.2.0",
                 "chalk": "^5.2.0",
                 "chokidar": "^3.5.3",
-                "consola": "^2.15.3",
+                "consola": "^3.0.1",
                 "cookie-es": "^0.5.0",
                 "defu": "^6.1.2",
                 "destr": "^1.2.2",
                 "dot-prop": "^7.2.0",
-                "esbuild": "^0.17.12",
+                "esbuild": "^0.17.16",
                 "escape-string-regexp": "^5.0.0",
                 "etag": "^1.8.1",
                 "fs-extra": "^11.1.1",
                 "globby": "^13.1.3",
                 "gzip-size": "^7.0.0",
-                "h3": "^1.6.2",
-                "hookable": "^5.5.1",
+                "h3": "^1.6.4",
+                "hookable": "^5.5.3",
                 "http-proxy": "^1.18.1",
                 "is-primitive": "^3.0.1",
                 "jiti": "^1.18.2",
@@ -9681,25 +9948,25 @@
                 "mime": "^3.0.0",
                 "mlly": "^1.2.0",
                 "mri": "^1.2.0",
-                "node-fetch-native": "^1.0.2",
+                "node-fetch-native": "^1.1.0",
                 "ofetch": "^1.0.1",
                 "ohash": "^1.0.0",
                 "pathe": "^1.1.0",
                 "perfect-debounce": "^0.1.3",
                 "pkg-types": "^1.0.2",
                 "pretty-bytes": "^6.1.0",
-                "radix3": "^1.0.0",
-                "rollup": "^3.20.0",
+                "radix3": "^1.0.1",
+                "rollup": "^3.20.2",
                 "rollup-plugin-visualizer": "^5.9.0",
                 "scule": "^1.0.0",
-                "semver": "^7.3.8",
+                "semver": "^7.4.0",
                 "serve-placeholder": "^2.0.1",
                 "serve-static": "^1.15.0",
                 "source-map-support": "^0.5.21",
                 "std-env": "^3.3.2",
                 "ufo": "^1.1.1",
-                "unenv": "^1.2.2",
-                "unimport": "^3.0.3",
+                "unenv": "^1.3.1",
+                "unimport": "^3.0.6",
                 "unstorage": "^1.4.1"
             },
             "bin": {
@@ -9783,6 +10050,12 @@
                 "fsevents": "~2.3.2"
             }
         },
+        "node_modules/nitropack/node_modules/consola": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/consola/-/consola-3.1.0.tgz",
+            "integrity": "sha512-rrrJE6rP0qzl/Srg+C9x/AE5Kxfux7reVm1Wh0wCjuXvih6DqZgqDZe8auTD28fzJ9TF0mHlSDrPpWlujQRo1Q==",
+            "dev": true
+        },
         "node_modules/nitropack/node_modules/escape-string-regexp": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
@@ -9879,9 +10152,9 @@
             }
         },
         "node_modules/nitropack/node_modules/rollup": {
-            "version": "3.20.2",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz",
-            "integrity": "sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==",
+            "version": "3.21.3",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.3.tgz",
+            "integrity": "sha512-VnPfEG51nIv2xPLnZaekkuN06q9ZbnyDcLkaBdJa/W7UddyhOfMP2yOPziYQfeY7k++fZM8FdQIummFN5y14kA==",
             "dev": true,
             "bin": {
                 "rollup": "dist/bin/rollup"
@@ -9895,9 +10168,9 @@
             }
         },
         "node_modules/nitropack/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.0",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+            "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -9965,9 +10238,9 @@
             }
         },
         "node_modules/node-fetch-native": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.0.2.tgz",
-            "integrity": "sha512-KIkvH1jl6b3O7es/0ShyCgWLcfXxlBrLBbP3rOr23WArC66IMcU4DeZEeYEOwnopYhawLTn7/y+YtmASe8DFVQ==",
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.1.0.tgz",
+            "integrity": "sha512-nl5goFCig93JZ9FIV8GHT9xpNqXbxQUzkOmKIMKmncsBH9jhg7qKex8hirpymkBFmNQ114chEEG5lS4wgK2I+Q==",
             "dev": true
         },
         "node_modules/node-forge": {
@@ -10384,9 +10657,9 @@
             }
         },
         "node_modules/nwsapi": {
-            "version": "2.2.2",
-            "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.2.tgz",
-            "integrity": "sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==",
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.4.tgz",
+            "integrity": "sha512-NHj4rzRo0tQdijE9ZqAx6kYDcoRwYwSYzCA8MY3JzfxlrvEU0jhnhJT9BhqhJs7I/dKcrDm6TyulaRqZPIhN5g==",
             "dev": true
         },
         "node_modules/object-assign": {
@@ -10603,9 +10876,9 @@
             }
         },
         "node_modules/ohash": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/ohash/-/ohash-1.0.0.tgz",
-            "integrity": "sha512-kxSyzq6tt+6EE/xCnD1XaFhCCjUNUaz3X30rJp6mnjGLXAAvuPFqohMdv0aScWzajR45C29HyBaXZ8jXBwnh9A==",
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/ohash/-/ohash-1.1.2.tgz",
+            "integrity": "sha512-9CIOSq5945rI045GFtcO3uudyOkYVY1nyfFxVQp+9BRgslr8jPNiSSrsFGg/BNTUFOLqx0P5tng6G32brIPw0w==",
             "dev": true
         },
         "node_modules/on-finished": {
@@ -11186,9 +11459,9 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.4.21",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-            "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+            "version": "8.4.23",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
+            "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -11197,10 +11470,14 @@
                 {
                     "type": "tidelift",
                     "url": "https://tidelift.com/funding/github/npm/postcss"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
                 }
             ],
             "dependencies": {
-                "nanoid": "^3.3.4",
+                "nanoid": "^3.3.6",
                 "picocolors": "^1.0.0",
                 "source-map-js": "^1.0.2"
             },
@@ -11739,9 +12016,9 @@
             }
         },
         "node_modules/postcss-selector-parser": {
-            "version": "6.0.11",
-            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
-            "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
+            "version": "6.0.12",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.12.tgz",
+            "integrity": "sha512-NdxGCAZdRrwVI1sy59+Wzrh+pMMHxapGnpfenDVlMEXoOcvt4pGE0JLK9YY2F5dLxcFYA/YbVQKhcGU+FtSYQg==",
             "dev": true,
             "dependencies": {
                 "cssesc": "^3.0.0",
@@ -12357,14 +12634,14 @@
             }
         },
         "node_modules/regexp.prototype.flags": {
-            "version": "1.4.3",
-            "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-            "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
+            "integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
             "dev": true,
             "dependencies": {
                 "call-bind": "^1.0.2",
-                "define-properties": "^1.1.3",
-                "functions-have-names": "^1.2.2"
+                "define-properties": "^1.2.0",
+                "functions-have-names": "^1.2.3"
             },
             "engines": {
                 "node": ">= 0.4"
@@ -12893,9 +13170,9 @@
             }
         },
         "node_modules/rollup-plugin-visualizer/node_modules/yargs": {
-            "version": "17.7.1",
-            "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.1.tgz",
-            "integrity": "sha512-cwiTb08Xuv5fqF4AovYacTFNxk62th7LKJ6BL9IGUpTJrWoU7/7WdQGTP2SjKf1dUNBGzDd28p/Yfs/GI6JrLw==",
+            "version": "17.7.2",
+            "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+            "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
             "dev": true,
             "dependencies": {
                 "cliui": "^8.0.1",
@@ -12996,9 +13273,9 @@
             }
         },
         "node_modules/rxjs": {
-            "version": "7.8.0",
-            "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz",
-            "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==",
+            "version": "7.8.1",
+            "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+            "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
             "dev": true,
             "dependencies": {
                 "tslib": "^2.1.0"
@@ -13046,9 +13323,9 @@
             "dev": true
         },
         "node_modules/sass": {
-            "version": "1.60.0",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.60.0.tgz",
-            "integrity": "sha512-updbwW6fNb5gGm8qMXzVO7V4sWf7LMXnMly/JEyfbfERbVH46Fn6q02BX7/eHTdKpE7d+oTkMMQpFWNUMfFbgQ==",
+            "version": "1.62.1",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
+            "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
             "dev": true,
             "dependencies": {
                 "chokidar": ">=3.0.0 <4.0.0",
@@ -13059,7 +13336,7 @@
                 "sass": "sass.js"
             },
             "engines": {
-                "node": ">=12.0.0"
+                "node": ">=14.0.0"
             }
         },
         "node_modules/sass-loader": {
@@ -14357,9 +14634,9 @@
             "dev": true
         },
         "node_modules/terser": {
-            "version": "5.16.8",
-            "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.8.tgz",
-            "integrity": "sha512-QI5g1E/ef7d+PsDifb+a6nnVgC4F22Bg6T0xrBrz6iloVB4PUkkunp6V8nzoOOZJIzjWVdAGqCdlKlhLq/TbIA==",
+            "version": "5.17.1",
+            "resolved": "https://registry.npmjs.org/terser/-/terser-5.17.1.tgz",
+            "integrity": "sha512-hVl35zClmpisy6oaoKALOpS0rDYLxRFLHhRuDlEGTKey9qHjS1w9GMORjuwIMt70Wan4lwsLYyWDVnWgF+KUEw==",
             "dev": true,
             "dependencies": {
                 "@jridgewell/source-map": "^0.3.2",
@@ -14435,9 +14712,9 @@
             }
         },
         "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
-            "version": "3.1.1",
-            "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-            "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
+            "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
             "dev": true,
             "peer": true,
             "dependencies": {
@@ -14551,9 +14828,9 @@
             "dev": true
         },
         "node_modules/tinybench": {
-            "version": "2.4.0",
-            "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.4.0.tgz",
-            "integrity": "sha512-iyziEiyFxX4kyxSp+MtY1oCH/lvjH3PxFN8PGCDeqcZWAJ/i+9y+nL85w99PxVzrIvew/GSkSbDYtiGVa85Afg==",
+            "version": "2.5.0",
+            "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.0.tgz",
+            "integrity": "sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==",
             "dev": true
         },
         "node_modules/tinypool": {
@@ -14788,9 +15065,9 @@
             }
         },
         "node_modules/type-fest": {
-            "version": "3.8.0",
-            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.8.0.tgz",
-            "integrity": "sha512-FVNSzGQz9Th+/9R6Lvv7WIAkstylfHN2/JYxkyhhmKFYh9At2DST8t6L6Lref9eYO8PXFTfG9Sg1Agg0K3vq3Q==",
+            "version": "3.9.0",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.9.0.tgz",
+            "integrity": "sha512-hR8JP2e8UiH7SME5JZjsobBlEiatFoxpzCP+R3ZeCo7kAaG1jXQE5X/buLzogM6GJu8le9Y4OcfNuIQX0rZskA==",
             "dev": true,
             "engines": {
                 "node": ">=14.16"
@@ -14903,15 +15180,15 @@
             "dev": true
         },
         "node_modules/unctx": {
-            "version": "2.1.2",
-            "resolved": "https://registry.npmjs.org/unctx/-/unctx-2.1.2.tgz",
-            "integrity": "sha512-KK18aLRKe3OlbPyHbXAkIWSU3xK8GInomXfA7fzDMGFXQ1crX1UWrCzKesVXeUyHIayHUrnTvf87IPCKMyeKTg==",
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/unctx/-/unctx-2.3.0.tgz",
+            "integrity": "sha512-xs79V1T5JEQ/5aQ3j4ipbQEaReMosMz/ktOdsZMEtKv1PfbdRrKY/PaU0CxdspkX3zEink2keQU4nRzAXgui1A==",
             "dev": true,
             "dependencies": {
                 "acorn": "^8.8.2",
                 "estree-walker": "^3.0.3",
-                "magic-string": "^0.27.0",
-                "unplugin": "^1.0.1"
+                "magic-string": "^0.30.0",
+                "unplugin": "^1.3.1"
             }
         },
         "node_modules/unctx/node_modules/estree-walker": {
@@ -14924,9 +15201,9 @@
             }
         },
         "node_modules/unctx/node_modules/magic-string": {
-            "version": "0.27.0",
-            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
-            "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+            "version": "0.30.0",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
+            "integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
             "dev": true,
             "dependencies": {
                 "@jridgewell/sourcemap-codec": "^1.4.13"
@@ -14972,27 +15249,27 @@
             "dev": true
         },
         "node_modules/unenv": {
-            "version": "1.2.2",
-            "resolved": "https://registry.npmjs.org/unenv/-/unenv-1.2.2.tgz",
-            "integrity": "sha512-SYqIFLFC4wYtLyxD6RyAfoK/dkgvW85BfNdiYvroyfrL4cyLkoigSldSBBiUTgtxwb4pcE0zexw502DghVWeuA==",
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/unenv/-/unenv-1.4.1.tgz",
+            "integrity": "sha512-DuFZUDfaBC92zy3fW7QqKTLdYJIPkpwTN0yGZtaxnpOI7HvIfl41NYh9NVv4zcqhT8CGXJ1ELpvO2tecaB6NfA==",
             "dev": true,
             "dependencies": {
                 "defu": "^6.1.2",
                 "mime": "^3.0.0",
-                "node-fetch-native": "^1.0.2",
+                "node-fetch-native": "^1.1.0",
                 "pathe": "^1.1.0"
             }
         },
         "node_modules/unhead": {
-            "version": "1.1.25",
-            "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.1.25.tgz",
-            "integrity": "sha512-KtTBgtQjxICoOjA4dyxJfj5fYoYJeYFUt/J8ulaTzbvTsXM9K+ztYjI65nf2CPYYXRCRz/iEt8trqcsGlsB5TQ==",
+            "version": "1.1.26",
+            "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.1.26.tgz",
+            "integrity": "sha512-MshcPoPLXSGRgYtczddGvMgLUISTbt2pxihqD5kZVXKmY2FZLj1OQIY111aX45Xq47XJxjvYavvoyeUFroKQcg==",
             "dev": true,
             "dependencies": {
-                "@unhead/dom": "1.1.25",
-                "@unhead/schema": "1.1.25",
-                "@unhead/shared": "1.1.25",
-                "hookable": "^5.5.1"
+                "@unhead/dom": "1.1.26",
+                "@unhead/schema": "1.1.26",
+                "@unhead/shared": "1.1.26",
+                "hookable": "^5.5.3"
             },
             "funding": {
                 "url": "https://github.com/sponsors/harlan-zw"
@@ -15289,31 +15566,31 @@
             }
         },
         "node_modules/unstorage": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/unstorage/-/unstorage-1.4.1.tgz",
-            "integrity": "sha512-ETLczXBd7sjJZuA3oIzaYwhMShiGlo7cGx01Ww23x2ehlk6WiRR1YsmjDBipoiGorq8pX1RRoMQFp/n3me7QOg==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/unstorage/-/unstorage-1.5.0.tgz",
+            "integrity": "sha512-bL6sHwTKp2ns0SAGNHAbLP9LwmtPGMtaOVrHRA4V8ngQMHQR18q0uRgkeGB4qF84XSDu/o8ebv54p/HBJESXFA==",
             "dev": true,
             "dependencies": {
                 "anymatch": "^3.1.3",
                 "chokidar": "^3.5.3",
                 "destr": "^1.2.2",
-                "h3": "^1.5.0",
-                "ioredis": "^5.3.1",
-                "listhen": "^1.0.3",
-                "lru-cache": "^7.18.3",
+                "h3": "^1.6.4",
+                "ioredis": "^5.3.2",
+                "listhen": "^1.0.4",
+                "lru-cache": "^9.0.3",
                 "mri": "^1.2.0",
-                "node-fetch-native": "^1.0.2",
+                "node-fetch-native": "^1.1.0",
                 "ofetch": "^1.0.1",
                 "ufo": "^1.1.1"
             },
             "peerDependencies": {
                 "@azure/app-configuration": "^1.3.1",
                 "@azure/cosmos": "^3.17.3",
-                "@azure/data-tables": "^13.2.1",
-                "@azure/identity": "^3.1.3",
-                "@azure/keyvault-secrets": "^4.6.0",
-                "@azure/storage-blob": "^12.13.0",
-                "@planetscale/database": "^1.6.0"
+                "@azure/data-tables": "^13.2.2",
+                "@azure/identity": "^3.1.4",
+                "@azure/keyvault-secrets": "^4.7.0",
+                "@azure/storage-blob": "^12.14.0",
+                "@planetscale/database": "^1.7.0"
             },
             "peerDependenciesMeta": {
                 "@azure/app-configuration": {
@@ -15460,12 +15737,12 @@
             }
         },
         "node_modules/unstorage/node_modules/lru-cache": {
-            "version": "7.18.3",
-            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
-            "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+            "version": "9.1.1",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-9.1.1.tgz",
+            "integrity": "sha512-65/Jky17UwSb0BuB9V+MyDpsOtXKmYwzhyl+cOa9XUiI4uV2Ouy/2voFP3+al0BjZbJgMBD8FojMpAf+Z+qn4A==",
             "dev": true,
             "engines": {
-                "node": ">=12"
+                "node": "14 || >=16.14"
             }
         },
         "node_modules/unstorage/node_modules/readdirp": {
@@ -15521,9 +15798,9 @@
             }
         },
         "node_modules/update-browserslist-db": {
-            "version": "1.0.10",
-            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
-            "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
+            "version": "1.0.11",
+            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
+            "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
             "dev": true,
             "funding": [
                 {
@@ -15533,6 +15810,10 @@
                 {
                     "type": "tidelift",
                     "url": "https://tidelift.com/funding/github/npm/browserslist"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
                 }
             ],
             "dependencies": {
@@ -15540,7 +15821,7 @@
                 "picocolors": "^1.0.0"
             },
             "bin": {
-                "browserslist-lint": "cli.js"
+                "update-browserslist-db": "cli.js"
             },
             "peerDependencies": {
                 "browserslist": ">= 4.21.0"
@@ -15619,14 +15900,14 @@
             }
         },
         "node_modules/vee-validate": {
-            "version": "4.8.4",
-            "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.8.4.tgz",
-            "integrity": "sha512-wlLBy50t4EMEin5oqxS2mxpqW02TkIsk0H3LcivLztNJKKLW17hpPSQtQnn8wjDLoWWZ/CVOfep6aw77aCAavg==",
+            "version": "4.8.6",
+            "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.8.6.tgz",
+            "integrity": "sha512-d8SS1mfFn3qv/QRwy9BQ/0ZmoxQT37zG7zERUSK5NvmI7gx7IbQxOIXtyYVEPaDJNI4QWopBe48q91pAQqwetA==",
             "dependencies": {
                 "@vue/devtools-api": "^6.5.0"
             },
             "peerDependencies": {
-                "vue": "^3.0.0"
+                "vue": "^3.2.0"
             }
         },
         "node_modules/vinyl": {
@@ -15723,15 +16004,14 @@
             }
         },
         "node_modules/vite": {
-            "version": "4.2.1",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-4.2.1.tgz",
-            "integrity": "sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==",
+            "version": "4.3.4",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.4.tgz",
+            "integrity": "sha512-f90aqGBoxSFxWph2b39ae2uHAxm5jFBBdnfueNxZAT1FTpM13ccFQExCaKbR2xFW5atowjleRniQ7onjJ22QEg==",
             "dev": true,
             "dependencies": {
                 "esbuild": "^0.17.5",
-                "postcss": "^8.4.21",
-                "resolve": "^1.22.1",
-                "rollup": "^3.18.0"
+                "postcss": "^8.4.23",
+                "rollup": "^3.21.0"
             },
             "bin": {
                 "vite": "bin/vite.js"
@@ -16123,9 +16403,9 @@
             }
         },
         "node_modules/vite/node_modules/rollup": {
-            "version": "3.20.2",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz",
-            "integrity": "sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==",
+            "version": "3.21.3",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.3.tgz",
+            "integrity": "sha512-VnPfEG51nIv2xPLnZaekkuN06q9ZbnyDcLkaBdJa/W7UddyhOfMP2yOPziYQfeY7k++fZM8FdQIummFN5y14kA==",
             "dev": true,
             "bin": {
                 "rollup": "dist/bin/rollup"
@@ -16260,9 +16540,9 @@
             }
         },
         "node_modules/vscode-languageclient/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.0",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+            "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -16384,9 +16664,9 @@
             }
         },
         "node_modules/vue-eslint-parser/node_modules/eslint-scope": {
-            "version": "7.1.1",
-            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
-            "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
+            "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
             "dev": true,
             "dependencies": {
                 "esrecurse": "^4.3.0",
@@ -16394,6 +16674,9 @@
             },
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
             }
         },
         "node_modules/vue-eslint-parser/node_modules/eslint-visitor-keys": {
@@ -16430,9 +16713,9 @@
             }
         },
         "node_modules/vue-eslint-parser/node_modules/semver": {
-            "version": "7.3.8",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-            "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+            "version": "7.5.0",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+            "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
             "dev": true,
             "dependencies": {
                 "lru-cache": "^6.0.0"
@@ -16529,23 +16812,23 @@
             }
         },
         "node_modules/webpack": {
-            "version": "5.78.0",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.78.0.tgz",
-            "integrity": "sha512-gT5DP72KInmE/3azEaQrISjTvLYlSM0j1Ezhht/KLVkrqtv10JoP/RXhwmX/frrutOPuSq3o5Vq0ehR/4Vmd1g==",
+            "version": "5.81.0",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.81.0.tgz",
+            "integrity": "sha512-AAjaJ9S4hYCVODKLQTgG5p5e11hiMawBwV2v8MYLE0C/6UAGLuAF4n1qa9GOwdxnicaP+5k6M5HrLmD4+gIB8Q==",
             "dev": true,
             "peer": true,
             "dependencies": {
                 "@types/eslint-scope": "^3.7.3",
-                "@types/estree": "^0.0.51",
-                "@webassemblyjs/ast": "1.11.1",
-                "@webassemblyjs/wasm-edit": "1.11.1",
-                "@webassemblyjs/wasm-parser": "1.11.1",
+                "@types/estree": "^1.0.0",
+                "@webassemblyjs/ast": "^1.11.5",
+                "@webassemblyjs/wasm-edit": "^1.11.5",
+                "@webassemblyjs/wasm-parser": "^1.11.5",
                 "acorn": "^8.7.1",
                 "acorn-import-assertions": "^1.7.6",
                 "browserslist": "^4.14.5",
                 "chrome-trace-event": "^1.0.2",
-                "enhanced-resolve": "^5.10.0",
-                "es-module-lexer": "^0.9.0",
+                "enhanced-resolve": "^5.13.0",
+                "es-module-lexer": "^1.2.1",
                 "eslint-scope": "5.1.1",
                 "events": "^3.2.0",
                 "glob-to-regexp": "^0.4.1",
@@ -16554,9 +16837,9 @@
                 "loader-runner": "^4.2.0",
                 "mime-types": "^2.1.27",
                 "neo-async": "^2.6.2",
-                "schema-utils": "^3.1.0",
+                "schema-utils": "^3.1.2",
                 "tapable": "^2.1.1",
-                "terser-webpack-plugin": "^5.1.3",
+                "terser-webpack-plugin": "^5.3.7",
                 "watchpack": "^2.4.0",
                 "webpack-sources": "^3.2.3"
             },
@@ -16591,17 +16874,10 @@
             "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
             "dev": true
         },
-        "node_modules/webpack/node_modules/@types/estree": {
-            "version": "0.0.51",
-            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
-            "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
-            "dev": true,
-            "peer": true
-        },
         "node_modules/webpack/node_modules/schema-utils": {
-            "version": "3.1.1",
-            "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-            "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
+            "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
             "dev": true,
             "peer": true,
             "dependencies": {
@@ -17032,25 +17308,25 @@
     },
     "dependencies": {
         "@algolia/autocomplete-core": {
-            "version": "1.7.4",
-            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.7.4.tgz",
-            "integrity": "sha512-daoLpQ3ps/VTMRZDEBfU8ixXd+amZcNJ4QSP3IERGyzqnL5Ch8uSRFt/4G8pUvW9c3o6GA4vtVv4I4lmnkdXyg==",
+            "version": "1.8.2",
+            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.8.2.tgz",
+            "integrity": "sha512-mTeshsyFhAqw/ebqNsQpMtbnjr+qVOSKXArEj4K0d7sqc8It1XD0gkASwecm9mF/jlOQ4Z9RNg1HbdA8JPdRwQ==",
             "requires": {
-                "@algolia/autocomplete-shared": "1.7.4"
+                "@algolia/autocomplete-shared": "1.8.2"
             }
         },
         "@algolia/autocomplete-preset-algolia": {
-            "version": "1.7.4",
-            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.7.4.tgz",
-            "integrity": "sha512-s37hrvLEIfcmKY8VU9LsAXgm2yfmkdHT3DnA3SgHaY93yjZ2qL57wzb5QweVkYuEBZkT2PIREvRoLXC2sxTbpQ==",
+            "version": "1.8.2",
+            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.8.2.tgz",
+            "integrity": "sha512-J0oTx4me6ZM9kIKPuL3lyU3aB8DEvpVvR6xWmHVROx5rOYJGQcZsdG4ozxwcOyiiu3qxMkIbzntnV1S1VWD8yA==",
             "requires": {
-                "@algolia/autocomplete-shared": "1.7.4"
+                "@algolia/autocomplete-shared": "1.8.2"
             }
         },
         "@algolia/autocomplete-shared": {
-            "version": "1.7.4",
-            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.7.4.tgz",
-            "integrity": "sha512-2VGCk7I9tA9Ge73Km99+Qg87w0wzW4tgUruvWAn/gfey1ZXgmxZtyIRBebk35R1O8TbK77wujVtCnpsGpRy1kg=="
+            "version": "1.8.2",
+            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.8.2.tgz",
+            "integrity": "sha512-b6Z/X4MczChMcfhk6kfRmBzPgjoPzuS9KGR4AFsiLulLNRAAqhP+xZTKtMnZGhLuc61I20d5WqlId02AZvcO6g=="
         },
         "@algolia/cache-browser-local-storage": {
             "version": "4.17.0",
@@ -17168,12 +17444,12 @@
             }
         },
         "@ampproject/remapping": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
-            "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==",
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+            "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
             "dev": true,
             "requires": {
-                "@jridgewell/gen-mapping": "^0.1.0",
+                "@jridgewell/gen-mapping": "^0.3.0",
                 "@jridgewell/trace-mapping": "^0.3.9"
             }
         },
@@ -17187,27 +17463,27 @@
             }
         },
         "@babel/compat-data": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.4.tgz",
-            "integrity": "sha512-/DYyDpeCfaVinT40FPGdkkb+lYSKvsVuMjDAG7jPOWWiM1ibOaB9CXJAlc4d1QpP/U2q2P9jbrSlClKSErd55g==",
+            "version": "7.21.7",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.7.tgz",
+            "integrity": "sha512-KYMqFYTaenzMK4yUtf4EW9wc4N9ef80FsbMtkwool5zpwl4YrT1SdWYSTRcT94KO4hannogdS+LxY7L+arP3gA==",
             "dev": true
         },
         "@babel/core": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.4.tgz",
-            "integrity": "sha512-qt/YV149Jman/6AfmlxJ04LMIu8bMoyl3RB91yTFrxQmgbrSvQMy7cI8Q62FHx1t8wJ8B5fu0UDoLwHAhUo1QA==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.5.tgz",
+            "integrity": "sha512-9M398B/QH5DlfCOTKDZT1ozXr0x8uBEeFd+dJraGUZGiaNpGCDVGCc14hZexsMblw3XxltJ+6kSvogp9J+5a9g==",
             "dev": true,
             "requires": {
                 "@ampproject/remapping": "^2.2.0",
                 "@babel/code-frame": "^7.21.4",
-                "@babel/generator": "^7.21.4",
-                "@babel/helper-compilation-targets": "^7.21.4",
-                "@babel/helper-module-transforms": "^7.21.2",
-                "@babel/helpers": "^7.21.0",
-                "@babel/parser": "^7.21.4",
+                "@babel/generator": "^7.21.5",
+                "@babel/helper-compilation-targets": "^7.21.5",
+                "@babel/helper-module-transforms": "^7.21.5",
+                "@babel/helpers": "^7.21.5",
+                "@babel/parser": "^7.21.5",
                 "@babel/template": "^7.20.7",
-                "@babel/traverse": "^7.21.4",
-                "@babel/types": "^7.21.4",
+                "@babel/traverse": "^7.21.5",
+                "@babel/types": "^7.21.5",
                 "convert-source-map": "^1.7.0",
                 "debug": "^4.1.0",
                 "gensync": "^1.0.0-beta.2",
@@ -17227,28 +17503,15 @@
             }
         },
         "@babel/generator": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.4.tgz",
-            "integrity": "sha512-NieM3pVIYW2SwGzKoqfPrQsf4xGs9M9AIG3ThppsSRmO+m7eQhmI6amajKMUeIO37wFfsvnvcxQFx6x6iqxDnA==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.5.tgz",
+            "integrity": "sha512-SrKK/sRv8GesIW1bDagf9cCG38IOMYZusoe1dfg0D8aiUe3Amvoj1QtjTPAWcfrZFvIwlleLb0gxzQidL9w14w==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.21.4",
+                "@babel/types": "^7.21.5",
                 "@jridgewell/gen-mapping": "^0.3.2",
                 "@jridgewell/trace-mapping": "^0.3.17",
                 "jsesc": "^2.5.1"
-            },
-            "dependencies": {
-                "@jridgewell/gen-mapping": {
-                    "version": "0.3.2",
-                    "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
-                    "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
-                    "dev": true,
-                    "requires": {
-                        "@jridgewell/set-array": "^1.0.1",
-                        "@jridgewell/sourcemap-codec": "^1.4.10",
-                        "@jridgewell/trace-mapping": "^0.3.9"
-                    }
-                }
             }
         },
         "@babel/helper-annotate-as-pure": {
@@ -17261,12 +17524,12 @@
             }
         },
         "@babel/helper-compilation-targets": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.4.tgz",
-            "integrity": "sha512-Fa0tTuOXZ1iL8IeDFUWCzjZcn+sJGd9RZdH9esYVjEejGmzf+FFYQpMi/kZUk2kPy/q1H3/GPw7np8qar/stfg==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.5.tgz",
+            "integrity": "sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==",
             "dev": true,
             "requires": {
-                "@babel/compat-data": "^7.21.4",
+                "@babel/compat-data": "^7.21.5",
                 "@babel/helper-validator-option": "^7.21.0",
                 "browserslist": "^4.21.3",
                 "lru-cache": "^5.1.1",
@@ -17274,25 +17537,26 @@
             }
         },
         "@babel/helper-create-class-features-plugin": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.4.tgz",
-            "integrity": "sha512-46QrX2CQlaFRF4TkwfTt6nJD7IHq8539cCL7SDpqWSDeJKY1xylKKY5F/33mJhLZ3mFvKv2gGrVS6NkyF6qs+Q==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.5.tgz",
+            "integrity": "sha512-yNSEck9SuDvPTEUYm4BSXl6ZVC7yO5ZLEMAhG3v3zi7RDxyL/nQDemWWZmw4L0stPWwhpnznRRyJHPRcbXR2jw==",
             "dev": true,
             "requires": {
                 "@babel/helper-annotate-as-pure": "^7.18.6",
-                "@babel/helper-environment-visitor": "^7.18.9",
+                "@babel/helper-environment-visitor": "^7.21.5",
                 "@babel/helper-function-name": "^7.21.0",
-                "@babel/helper-member-expression-to-functions": "^7.21.0",
+                "@babel/helper-member-expression-to-functions": "^7.21.5",
                 "@babel/helper-optimise-call-expression": "^7.18.6",
-                "@babel/helper-replace-supers": "^7.20.7",
+                "@babel/helper-replace-supers": "^7.21.5",
                 "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-                "@babel/helper-split-export-declaration": "^7.18.6"
+                "@babel/helper-split-export-declaration": "^7.18.6",
+                "semver": "^6.3.0"
             }
         },
         "@babel/helper-environment-visitor": {
-            "version": "7.18.9",
-            "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz",
-            "integrity": "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.21.5.tgz",
+            "integrity": "sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==",
             "dev": true
         },
         "@babel/helper-function-name": {
@@ -17315,12 +17579,12 @@
             }
         },
         "@babel/helper-member-expression-to-functions": {
-            "version": "7.21.0",
-            "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz",
-            "integrity": "sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.5.tgz",
+            "integrity": "sha512-nIcGfgwpH2u4n9GG1HpStW5Ogx7x7ekiFHbjjFRKXbn5zUvqO9ZgotCO4x1aNbKn/x/xOUaXEhyNHCwtFCpxWg==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.21.0"
+                "@babel/types": "^7.21.5"
             }
         },
         "@babel/helper-module-imports": {
@@ -17333,19 +17597,19 @@
             }
         },
         "@babel/helper-module-transforms": {
-            "version": "7.21.2",
-            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz",
-            "integrity": "sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.5.tgz",
+            "integrity": "sha512-bI2Z9zBGY2q5yMHoBvJ2a9iX3ZOAzJPm7Q8Yz6YeoUjU/Cvhmi2G4QyTNyPBqqXSgTjUxRg3L0xV45HvkNWWBw==",
             "dev": true,
             "requires": {
-                "@babel/helper-environment-visitor": "^7.18.9",
-                "@babel/helper-module-imports": "^7.18.6",
-                "@babel/helper-simple-access": "^7.20.2",
+                "@babel/helper-environment-visitor": "^7.21.5",
+                "@babel/helper-module-imports": "^7.21.4",
+                "@babel/helper-simple-access": "^7.21.5",
                 "@babel/helper-split-export-declaration": "^7.18.6",
                 "@babel/helper-validator-identifier": "^7.19.1",
                 "@babel/template": "^7.20.7",
-                "@babel/traverse": "^7.21.2",
-                "@babel/types": "^7.21.2"
+                "@babel/traverse": "^7.21.5",
+                "@babel/types": "^7.21.5"
             }
         },
         "@babel/helper-optimise-call-expression": {
@@ -17358,32 +17622,32 @@
             }
         },
         "@babel/helper-plugin-utils": {
-            "version": "7.20.2",
-            "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz",
-            "integrity": "sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz",
+            "integrity": "sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==",
             "dev": true
         },
         "@babel/helper-replace-supers": {
-            "version": "7.20.7",
-            "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz",
-            "integrity": "sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.21.5.tgz",
+            "integrity": "sha512-/y7vBgsr9Idu4M6MprbOVUfH3vs7tsIfnVWv/Ml2xgwvyH6LTngdfbf5AdsKwkJy4zgy1X/kuNrEKvhhK28Yrg==",
             "dev": true,
             "requires": {
-                "@babel/helper-environment-visitor": "^7.18.9",
-                "@babel/helper-member-expression-to-functions": "^7.20.7",
+                "@babel/helper-environment-visitor": "^7.21.5",
+                "@babel/helper-member-expression-to-functions": "^7.21.5",
                 "@babel/helper-optimise-call-expression": "^7.18.6",
                 "@babel/template": "^7.20.7",
-                "@babel/traverse": "^7.20.7",
-                "@babel/types": "^7.20.7"
+                "@babel/traverse": "^7.21.5",
+                "@babel/types": "^7.21.5"
             }
         },
         "@babel/helper-simple-access": {
-            "version": "7.20.2",
-            "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz",
-            "integrity": "sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.21.5.tgz",
+            "integrity": "sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.20.2"
+                "@babel/types": "^7.21.5"
             }
         },
         "@babel/helper-skip-transparent-expression-wrappers": {
@@ -17405,9 +17669,9 @@
             }
         },
         "@babel/helper-string-parser": {
-            "version": "7.19.4",
-            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
-            "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz",
+            "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==",
             "dev": true
         },
         "@babel/helper-validator-identifier": {
@@ -17423,14 +17687,14 @@
             "dev": true
         },
         "@babel/helpers": {
-            "version": "7.21.0",
-            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.21.0.tgz",
-            "integrity": "sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.21.5.tgz",
+            "integrity": "sha512-BSY+JSlHxOmGsPTydUkPf1MdMQ3M81x5xGCOVgWM3G8XH77sJ292Y2oqcp0CbbgxhqBuI46iUz1tT7hqP7EfgA==",
             "dev": true,
             "requires": {
                 "@babel/template": "^7.20.7",
-                "@babel/traverse": "^7.21.0",
-                "@babel/types": "^7.21.0"
+                "@babel/traverse": "^7.21.5",
+                "@babel/types": "^7.21.5"
             }
         },
         "@babel/highlight": {
@@ -17445,9 +17709,9 @@
             }
         },
         "@babel/parser": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
-            "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw=="
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.5.tgz",
+            "integrity": "sha512-J+IxH2IsxV4HbnTrSWgMAQj0UEo61hDA4Ny8h8PCX0MLXiibqHbqIOVneqdocemSBc22VpBKxt4J6FQzy9HarQ=="
         },
         "@babel/plugin-syntax-jsx": {
             "version": "7.21.4",
@@ -17480,9 +17744,9 @@
             }
         },
         "@babel/standalone": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.21.4.tgz",
-            "integrity": "sha512-Rw4nGqH/iyVeYxARKcz7iGP+njkPsVqJ45TmXMONoGoxooWjXCAs+CUcLeAZdBGCLqgaPvHKCYvIaDT2Iq+KfA==",
+            "version": "7.21.7",
+            "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.21.7.tgz",
+            "integrity": "sha512-0SINMPlXMqJVZuJmookfaNr5NQiW5+vkHJfnEf+5+2vSf5PxuFAwnjOnRGgLcW9wVv4xUBQvKeKBtYv/lqC/xA==",
             "dev": true
         },
         "@babel/template": {
@@ -17497,30 +17761,30 @@
             }
         },
         "@babel/traverse": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.4.tgz",
-            "integrity": "sha512-eyKrRHKdyZxqDm+fV1iqL9UAHMoIg0nDaGqfIOd8rKH17m5snv7Gn4qgjBoFfLz9APvjFU/ICT00NVCv1Epp8Q==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.5.tgz",
+            "integrity": "sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==",
             "dev": true,
             "requires": {
                 "@babel/code-frame": "^7.21.4",
-                "@babel/generator": "^7.21.4",
-                "@babel/helper-environment-visitor": "^7.18.9",
+                "@babel/generator": "^7.21.5",
+                "@babel/helper-environment-visitor": "^7.21.5",
                 "@babel/helper-function-name": "^7.21.0",
                 "@babel/helper-hoist-variables": "^7.18.6",
                 "@babel/helper-split-export-declaration": "^7.18.6",
-                "@babel/parser": "^7.21.4",
-                "@babel/types": "^7.21.4",
+                "@babel/parser": "^7.21.5",
+                "@babel/types": "^7.21.5",
                 "debug": "^4.1.0",
                 "globals": "^11.1.0"
             }
         },
         "@babel/types": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
-            "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+            "version": "7.21.5",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.5.tgz",
+            "integrity": "sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==",
             "dev": true,
             "requires": {
-                "@babel/helper-string-parser": "^7.19.4",
+                "@babel/helper-string-parser": "^7.21.5",
                 "@babel/helper-validator-identifier": "^7.19.1",
                 "to-fast-properties": "^2.0.0"
             }
@@ -17535,181 +17799,181 @@
             }
         },
         "@docsearch/css": {
-            "version": "3.3.3",
-            "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.3.3.tgz",
-            "integrity": "sha512-6SCwI7P8ao+se1TUsdZ7B4XzL+gqeQZnBc+2EONZlcVa0dVrk0NjETxozFKgMv0eEGH8QzP1fkN+A1rH61l4eg=="
+            "version": "3.3.4",
+            "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.3.4.tgz",
+            "integrity": "sha512-vDwCDoVXDgopw/hvr0zEADew2wWaGP8Qq0Bxhgii1Ewz2t4fQeyJwIRN/mWADeLFYPVkpz8TpEbxya/i6Tm0WA=="
         },
         "@docsearch/js": {
-            "version": "3.3.3",
-            "resolved": "https://registry.npmjs.org/@docsearch/js/-/js-3.3.3.tgz",
-            "integrity": "sha512-2xAv2GFuHzzmG0SSZgf8wHX0qZX8n9Y1ZirKUk5Wrdc+vH9CL837x2hZIUdwcPZI9caBA+/CzxsS68O4waYjUQ==",
+            "version": "3.3.4",
+            "resolved": "https://registry.npmjs.org/@docsearch/js/-/js-3.3.4.tgz",
+            "integrity": "sha512-Xd2saBziXJ1UuVpcDz94zAFEFAM6ap993agh0za2e3LDZLhaW993b1f9gyUL4e1CZLsR076tztG2un2gVncvpA==",
             "requires": {
-                "@docsearch/react": "3.3.3",
+                "@docsearch/react": "3.3.4",
                 "preact": "^10.0.0"
             }
         },
         "@docsearch/react": {
-            "version": "3.3.3",
-            "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.3.3.tgz",
-            "integrity": "sha512-pLa0cxnl+G0FuIDuYlW+EBK6Rw2jwLw9B1RHIeS4N4s2VhsfJ/wzeCi3CWcs5yVfxLd5ZK50t//TMA5e79YT7Q==",
+            "version": "3.3.4",
+            "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.3.4.tgz",
+            "integrity": "sha512-aeOf1WC5zMzBEi2SI6WWznOmIo9rnpN4p7a3zHXxowVciqlI4HsZGtOR9nFOufLeolv7HibwLlaM0oyUqJxasw==",
             "requires": {
-                "@algolia/autocomplete-core": "1.7.4",
-                "@algolia/autocomplete-preset-algolia": "1.7.4",
-                "@docsearch/css": "3.3.3",
+                "@algolia/autocomplete-core": "1.8.2",
+                "@algolia/autocomplete-preset-algolia": "1.8.2",
+                "@docsearch/css": "3.3.4",
                 "algoliasearch": "^4.0.0"
             }
         },
         "@esbuild/android-arm": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.15.tgz",
-            "integrity": "sha512-sRSOVlLawAktpMvDyJIkdLI/c/kdRTOqo8t6ImVxg8yT7LQDUYV5Rp2FKeEosLr6ZCja9UjYAzyRSxGteSJPYg==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.18.tgz",
+            "integrity": "sha512-EmwL+vUBZJ7mhFCs5lA4ZimpUH3WMAoqvOIYhVQwdIgSpHC8ImHdsRyhHAVxpDYUSm0lWvd63z0XH1IlImS2Qw==",
             "dev": true,
             "optional": true
         },
         "@esbuild/android-arm64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.15.tgz",
-            "integrity": "sha512-0kOB6Y7Br3KDVgHeg8PRcvfLkq+AccreK///B4Z6fNZGr/tNHX0z2VywCc7PTeWp+bPvjA5WMvNXltHw5QjAIA==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.18.tgz",
+            "integrity": "sha512-/iq0aK0eeHgSC3z55ucMAHO05OIqmQehiGay8eP5l/5l+iEr4EIbh4/MI8xD9qRFjqzgkc0JkX0LculNC9mXBw==",
             "dev": true,
             "optional": true
         },
         "@esbuild/android-x64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.15.tgz",
-            "integrity": "sha512-MzDqnNajQZ63YkaUWVl9uuhcWyEyh69HGpMIrf+acR4otMkfLJ4sUCxqwbCyPGicE9dVlrysI3lMcDBjGiBBcQ==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.18.tgz",
+            "integrity": "sha512-x+0efYNBF3NPW2Xc5bFOSFW7tTXdAcpfEg2nXmxegm4mJuVeS+i109m/7HMiOQ6M12aVGGFlqJX3RhNdYM2lWg==",
             "dev": true,
             "optional": true
         },
         "@esbuild/darwin-arm64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.15.tgz",
-            "integrity": "sha512-7siLjBc88Z4+6qkMDxPT2juf2e8SJxmsbNVKFY2ifWCDT72v5YJz9arlvBw5oB4W/e61H1+HDB/jnu8nNg0rLA==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.18.tgz",
+            "integrity": "sha512-6tY+djEAdF48M1ONWnQb1C+6LiXrKjmqjzPNPWXhu/GzOHTHX2nh8Mo2ZAmBFg0kIodHhciEgUBtcYCAIjGbjQ==",
             "dev": true,
             "optional": true
         },
         "@esbuild/darwin-x64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.15.tgz",
-            "integrity": "sha512-NbImBas2rXwYI52BOKTW342Tm3LTeVlaOQ4QPZ7XuWNKiO226DisFk/RyPk3T0CKZkKMuU69yOvlapJEmax7cg==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.18.tgz",
+            "integrity": "sha512-Qq84ykvLvya3dO49wVC9FFCNUfSrQJLbxhoQk/TE1r6MjHo3sFF2tlJCwMjhkBVq3/ahUisj7+EpRSz0/+8+9A==",
             "dev": true,
             "optional": true
         },
         "@esbuild/freebsd-arm64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.15.tgz",
-            "integrity": "sha512-Xk9xMDjBVG6CfgoqlVczHAdJnCs0/oeFOspFap5NkYAmRCT2qTn1vJWA2f419iMtsHSLm+O8B6SLV/HlY5cYKg==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.18.tgz",
+            "integrity": "sha512-fw/ZfxfAzuHfaQeMDhbzxp9mc+mHn1Y94VDHFHjGvt2Uxl10mT4CDavHm+/L9KG441t1QdABqkVYwakMUeyLRA==",
             "dev": true,
             "optional": true
         },
         "@esbuild/freebsd-x64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.15.tgz",
-            "integrity": "sha512-3TWAnnEOdclvb2pnfsTWtdwthPfOz7qAfcwDLcfZyGJwm1SRZIMOeB5FODVhnM93mFSPsHB9b/PmxNNbSnd0RQ==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.18.tgz",
+            "integrity": "sha512-FQFbRtTaEi8ZBi/A6kxOC0V0E9B/97vPdYjY9NdawyLd4Qk5VD5g2pbWN2VR1c0xhzcJm74HWpObPszWC+qTew==",
             "dev": true,
             "optional": true
         },
         "@esbuild/linux-arm": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.15.tgz",
-            "integrity": "sha512-MLTgiXWEMAMr8nmS9Gigx43zPRmEfeBfGCwxFQEMgJ5MC53QKajaclW6XDPjwJvhbebv+RzK05TQjvH3/aM4Xw==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.18.tgz",
+            "integrity": "sha512-jW+UCM40LzHcouIaqv3e/oRs0JM76JfhHjCavPxMUti7VAPh8CaGSlS7cmyrdpzSk7A+8f0hiedHqr/LMnfijg==",
             "dev": true,
             "optional": true
         },
         "@esbuild/linux-arm64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.15.tgz",
-            "integrity": "sha512-T0MVnYw9KT6b83/SqyznTs/3Jg2ODWrZfNccg11XjDehIved2oQfrX/wVuev9N936BpMRaTR9I1J0tdGgUgpJA==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.18.tgz",
+            "integrity": "sha512-R7pZvQZFOY2sxUG8P6A21eq6q+eBv7JPQYIybHVf1XkQYC+lT7nDBdC7wWKTrbvMXKRaGudp/dzZCwL/863mZQ==",
             "dev": true,
             "optional": true
         },
         "@esbuild/linux-ia32": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.15.tgz",
-            "integrity": "sha512-wp02sHs015T23zsQtU4Cj57WiteiuASHlD7rXjKUyAGYzlOKDAjqK6bk5dMi2QEl/KVOcsjwL36kD+WW7vJt8Q==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.18.tgz",
+            "integrity": "sha512-ygIMc3I7wxgXIxk6j3V00VlABIjq260i967Cp9BNAk5pOOpIXmd1RFQJQX9Io7KRsthDrQYrtcx7QCof4o3ZoQ==",
             "dev": true,
             "optional": true
         },
         "@esbuild/linux-loong64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.15.tgz",
-            "integrity": "sha512-k7FsUJjGGSxwnBmMh8d7IbObWu+sF/qbwc+xKZkBe/lTAF16RqxRCnNHA7QTd3oS2AfGBAnHlXL67shV5bBThQ==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.18.tgz",
+            "integrity": "sha512-bvPG+MyFs5ZlwYclCG1D744oHk1Pv7j8psF5TfYx7otCVmcJsEXgFEhQkbhNW8otDHL1a2KDINW20cfCgnzgMQ==",
             "dev": true,
             "optional": true
         },
         "@esbuild/linux-mips64el": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.15.tgz",
-            "integrity": "sha512-ZLWk6czDdog+Q9kE/Jfbilu24vEe/iW/Sj2d8EVsmiixQ1rM2RKH2n36qfxK4e8tVcaXkvuV3mU5zTZviE+NVQ==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.18.tgz",
+            "integrity": "sha512-oVqckATOAGuiUOa6wr8TXaVPSa+6IwVJrGidmNZS1cZVx0HqkTMkqFGD2HIx9H1RvOwFeWYdaYbdY6B89KUMxA==",
             "dev": true,
             "optional": true
         },
         "@esbuild/linux-ppc64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.15.tgz",
-            "integrity": "sha512-mY6dPkIRAiFHRsGfOYZC8Q9rmr8vOBZBme0/j15zFUKM99d4ILY4WpOC7i/LqoY+RE7KaMaSfvY8CqjJtuO4xg==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.18.tgz",
+            "integrity": "sha512-3dLlQO+b/LnQNxgH4l9rqa2/IwRJVN9u/bK63FhOPB4xqiRqlQAU0qDU3JJuf0BmaH0yytTBdoSBHrb2jqc5qQ==",
             "dev": true,
             "optional": true
         },
         "@esbuild/linux-riscv64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.15.tgz",
-            "integrity": "sha512-EcyUtxffdDtWjjwIH8sKzpDRLcVtqANooMNASO59y+xmqqRYBBM7xVLQhqF7nksIbm2yHABptoioS9RAbVMWVA==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.18.tgz",
+            "integrity": "sha512-/x7leOyDPjZV3TcsdfrSI107zItVnsX1q2nho7hbbQoKnmoeUWjs+08rKKt4AUXju7+3aRZSsKrJtaRmsdL1xA==",
             "dev": true,
             "optional": true
         },
         "@esbuild/linux-s390x": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.15.tgz",
-            "integrity": "sha512-BuS6Jx/ezxFuHxgsfvz7T4g4YlVrmCmg7UAwboeyNNg0OzNzKsIZXpr3Sb/ZREDXWgt48RO4UQRDBxJN3B9Rbg==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.18.tgz",
+            "integrity": "sha512-cX0I8Q9xQkL/6F5zWdYmVf5JSQt+ZfZD2bJudZrWD+4mnUvoZ3TDDXtDX2mUaq6upMFv9FlfIh4Gfun0tbGzuw==",
             "dev": true,
             "optional": true
         },
         "@esbuild/linux-x64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.15.tgz",
-            "integrity": "sha512-JsdS0EgEViwuKsw5tiJQo9UdQdUJYuB+Mf6HxtJSPN35vez1hlrNb1KajvKWF5Sa35j17+rW1ECEO9iNrIXbNg==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.18.tgz",
+            "integrity": "sha512-66RmRsPlYy4jFl0vG80GcNRdirx4nVWAzJmXkevgphP1qf4dsLQCpSKGM3DUQCojwU1hnepI63gNZdrr02wHUA==",
             "dev": true,
             "optional": true
         },
         "@esbuild/netbsd-x64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.15.tgz",
-            "integrity": "sha512-R6fKjtUysYGym6uXf6qyNephVUQAGtf3n2RCsOST/neIwPqRWcnc3ogcielOd6pT+J0RDR1RGcy0ZY7d3uHVLA==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.18.tgz",
+            "integrity": "sha512-95IRY7mI2yrkLlTLb1gpDxdC5WLC5mZDi+kA9dmM5XAGxCME0F8i4bYH4jZreaJ6lIZ0B8hTrweqG1fUyW7jbg==",
             "dev": true,
             "optional": true
         },
         "@esbuild/openbsd-x64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.15.tgz",
-            "integrity": "sha512-mVD4PGc26b8PI60QaPUltYKeSX0wxuy0AltC+WCTFwvKCq2+OgLP4+fFd+hZXzO2xW1HPKcytZBdjqL6FQFa7w==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.18.tgz",
+            "integrity": "sha512-WevVOgcng+8hSZ4Q3BKL3n1xTv5H6Nb53cBrtzzEjDbbnOmucEVcZeGCsCOi9bAOcDYEeBZbD2SJNBxlfP3qiA==",
             "dev": true,
             "optional": true
         },
         "@esbuild/sunos-x64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.15.tgz",
-            "integrity": "sha512-U6tYPovOkw3459t2CBwGcFYfFRjivcJJc1WC8Q3funIwX8x4fP+R6xL/QuTPNGOblbq/EUDxj9GU+dWKX0oWlQ==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.18.tgz",
+            "integrity": "sha512-Rzf4QfQagnwhQXVBS3BYUlxmEbcV7MY+BH5vfDZekU5eYpcffHSyjU8T0xucKVuOcdCsMo+Ur5wmgQJH2GfNrg==",
             "dev": true,
             "optional": true
         },
         "@esbuild/win32-arm64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.15.tgz",
-            "integrity": "sha512-W+Z5F++wgKAleDABemiyXVnzXgvRFs+GVKThSI+mGgleLWluv0D7Diz4oQpgdpNzh4i2nNDzQtWbjJiqutRp6Q==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.18.tgz",
+            "integrity": "sha512-Kb3Ko/KKaWhjeAm2YoT/cNZaHaD1Yk/pa3FTsmqo9uFh1D1Rfco7BBLIPdDOozrObj2sahslFuAQGvWbgWldAg==",
             "dev": true,
             "optional": true
         },
         "@esbuild/win32-ia32": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.15.tgz",
-            "integrity": "sha512-Muz/+uGgheShKGqSVS1KsHtCyEzcdOn/W/Xbh6H91Etm+wiIfwZaBn1W58MeGtfI8WA961YMHFYTthBdQs4t+w==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.18.tgz",
+            "integrity": "sha512-0/xUMIdkVHwkvxfbd5+lfG7mHOf2FRrxNbPiKWg9C4fFrB8H0guClmaM3BFiRUYrznVoyxTIyC/Ou2B7QQSwmw==",
             "dev": true,
             "optional": true
         },
         "@esbuild/win32-x64": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.15.tgz",
-            "integrity": "sha512-DjDa9ywLUUmjhV2Y9wUTIF+1XsmuFGvZoCmOWkli1XcNAh5t25cc7fgsCx4Zi/Uurep3TTLyDiKATgGEg61pkA==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.18.tgz",
+            "integrity": "sha512-qU25Ma1I3NqTSHJUOKi9sAH1/Mzuvlke0ioMJRthLXKm7JiSKVwFghlGbDLOO2sARECGhja4xYfRAZNPAkooYg==",
             "dev": true,
             "optional": true
         },
@@ -17731,9 +17995,9 @@
             }
         },
         "@eslint-community/regexpp": {
-            "version": "4.5.0",
-            "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.0.tgz",
-            "integrity": "sha512-vITaYzIcNmjn5tF5uxcZ/ft7/RXGrMUIS9HalWckEOF6ESiwXKoMzAQf2UW0aVd6rnOeExTJVd5hmWXucBKGXQ==",
+            "version": "4.5.1",
+            "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz",
+            "integrity": "sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==",
             "dev": true
         },
         "@eslint/eslintrc": {
@@ -17771,9 +18035,9 @@
             }
         },
         "@eslint/js": {
-            "version": "8.37.0",
-            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.37.0.tgz",
-            "integrity": "sha512-x5vzdtOOGgFVDCUs81QRB2+liax8rFg3+7hqM+QhBG0/G3F1ZsoYl97UrqgHgQ9KKT7G6c4V+aTUCgu/n22v1A==",
+            "version": "8.39.0",
+            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.39.0.tgz",
+            "integrity": "sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==",
             "dev": true
         },
         "@humanwhocodes/config-array": {
@@ -17812,13 +18076,14 @@
             "dev": true
         },
         "@jridgewell/gen-mapping": {
-            "version": "0.1.1",
-            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
-            "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
+            "version": "0.3.3",
+            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+            "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
             "dev": true,
             "requires": {
-                "@jridgewell/set-array": "^1.0.0",
-                "@jridgewell/sourcemap-codec": "^1.4.10"
+                "@jridgewell/set-array": "^1.0.1",
+                "@jridgewell/sourcemap-codec": "^1.4.10",
+                "@jridgewell/trace-mapping": "^0.3.9"
             }
         },
         "@jridgewell/resolve-uri": {
@@ -17834,42 +18099,37 @@
             "dev": true
         },
         "@jridgewell/source-map": {
-            "version": "0.3.2",
-            "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
-            "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+            "version": "0.3.3",
+            "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.3.tgz",
+            "integrity": "sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==",
             "dev": true,
             "requires": {
                 "@jridgewell/gen-mapping": "^0.3.0",
                 "@jridgewell/trace-mapping": "^0.3.9"
-            },
-            "dependencies": {
-                "@jridgewell/gen-mapping": {
-                    "version": "0.3.2",
-                    "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
-                    "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
-                    "dev": true,
-                    "requires": {
-                        "@jridgewell/set-array": "^1.0.1",
-                        "@jridgewell/sourcemap-codec": "^1.4.10",
-                        "@jridgewell/trace-mapping": "^0.3.9"
-                    }
-                }
             }
         },
         "@jridgewell/sourcemap-codec": {
-            "version": "1.4.14",
-            "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-            "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+            "version": "1.4.15",
+            "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+            "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
             "dev": true
         },
         "@jridgewell/trace-mapping": {
-            "version": "0.3.17",
-            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz",
-            "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==",
+            "version": "0.3.18",
+            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
+            "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
             "dev": true,
             "requires": {
                 "@jridgewell/resolve-uri": "3.1.0",
                 "@jridgewell/sourcemap-codec": "1.4.14"
+            },
+            "dependencies": {
+                "@jridgewell/sourcemap-codec": {
+                    "version": "1.4.14",
+                    "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+                    "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+                    "dev": true
+                }
             }
         },
         "@mapbox/node-pre-gyp": {
@@ -17917,9 +18177,9 @@
                     }
                 },
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.0",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+                    "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -18041,9 +18301,9 @@
                     }
                 },
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.0",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+                    "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -18079,39 +18339,88 @@
             }
         },
         "@nuxt/telemetry": {
-            "version": "2.1.10",
-            "resolved": "https://registry.npmjs.org/@nuxt/telemetry/-/telemetry-2.1.10.tgz",
-            "integrity": "sha512-FOsfC0i6Ix66M/ZlWV/095JIdfnRR9CRbFvBSpojt2CpbwU1pGMbRiicwYg2f1Wf27LXQRNpNn1OczruBfEWag==",
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/@nuxt/telemetry/-/telemetry-2.2.0.tgz",
+            "integrity": "sha512-Z2UmPkBy5WjxvHKuUcl1X6vKWnIyWSP+9UGde1F+MzzZxYgAQybFud1uL2B3KCowxZdoqT1hd2WklV7EtyCwrQ==",
             "dev": true,
             "requires": {
-                "@nuxt/kit": "^3.2.0",
+                "@nuxt/kit": "^3.3.3",
                 "chalk": "^5.2.0",
                 "ci-info": "^3.8.0",
-                "consola": "^2.15.3",
+                "consola": "^3.0.1",
                 "create-require": "^1.1.1",
                 "defu": "^6.1.2",
                 "destr": "^1.2.2",
                 "dotenv": "^16.0.3",
                 "fs-extra": "^10.1.0",
                 "git-url-parse": "^13.1.0",
-                "inquirer": "^9.1.4",
+                "inquirer": "^9.1.5",
                 "is-docker": "^3.0.0",
-                "jiti": "^1.17.1",
+                "jiti": "^1.18.2",
                 "mri": "^1.2.0",
-                "nanoid": "^4.0.1",
-                "node-fetch": "^3.3.0",
+                "nanoid": "^4.0.2",
+                "node-fetch": "^3.3.1",
                 "ofetch": "^1.0.1",
                 "parse-git-config": "^3.0.0",
-                "rc9": "^2.0.1",
+                "rc9": "^2.1.0",
                 "std-env": "^3.3.2"
             },
             "dependencies": {
+                "@nuxt/kit": {
+                    "version": "3.4.3",
+                    "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.4.3.tgz",
+                    "integrity": "sha512-aQyzplYFCL292UsVZzlOZOC51ZKYFL0PBihbcPzxTzXQvAfMF8/DQ539kqzqXzxTCcmnUB9ROhIaNUrAeUkFYA==",
+                    "dev": true,
+                    "requires": {
+                        "@nuxt/schema": "3.4.3",
+                        "c12": "^1.4.1",
+                        "consola": "^3.1.0",
+                        "defu": "^6.1.2",
+                        "globby": "^13.1.4",
+                        "hash-sum": "^2.0.0",
+                        "ignore": "^5.2.4",
+                        "jiti": "^1.18.2",
+                        "knitwork": "^1.0.0",
+                        "lodash.template": "^4.5.0",
+                        "mlly": "^1.2.0",
+                        "pathe": "^1.1.0",
+                        "pkg-types": "^1.0.2",
+                        "scule": "^1.0.0",
+                        "semver": "^7.5.0",
+                        "unctx": "^2.3.0",
+                        "unimport": "^3.0.6",
+                        "untyped": "^1.3.2"
+                    }
+                },
+                "@nuxt/schema": {
+                    "version": "3.4.3",
+                    "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.4.3.tgz",
+                    "integrity": "sha512-8bv0/mRDw6THQguSz+cKG5FzDZc2XBkjcc5VZ7yET84r4aWzW9/R274cjlEagFKrw9BDaPEQhnkwpg+kZnpOUA==",
+                    "dev": true,
+                    "requires": {
+                        "defu": "^6.1.2",
+                        "hookable": "^5.5.3",
+                        "pathe": "^1.1.0",
+                        "pkg-types": "^1.0.2",
+                        "postcss-import-resolver": "^2.0.0",
+                        "std-env": "^3.3.2",
+                        "ufo": "^1.1.1",
+                        "unimport": "^3.0.6",
+                        "untyped": "^1.3.2"
+                    }
+                },
                 "chalk": {
                     "version": "5.2.0",
                     "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
                     "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
                     "dev": true
                 },
+                "consola": {
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/consola/-/consola-3.1.0.tgz",
+                    "integrity": "sha512-rrrJE6rP0qzl/Srg+C9x/AE5Kxfux7reVm1Wh0wCjuXvih6DqZgqDZe8auTD28fzJ9TF0mHlSDrPpWlujQRo1Q==",
+                    "dev": true
+                },
                 "fs-extra": {
                     "version": "10.1.0",
                     "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -18122,6 +18431,30 @@
                         "jsonfile": "^6.0.1",
                         "universalify": "^2.0.0"
                     }
+                },
+                "lru-cache": {
+                    "version": "6.0.0",
+                    "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+                    "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+                    "dev": true,
+                    "requires": {
+                        "yallist": "^4.0.0"
+                    }
+                },
+                "semver": {
+                    "version": "7.5.0",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+                    "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
+                    "dev": true,
+                    "requires": {
+                        "lru-cache": "^6.0.0"
+                    }
+                },
+                "yallist": {
+                    "version": "4.0.0",
+                    "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+                    "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+                    "dev": true
                 }
             }
         },
@@ -18290,9 +18623,9 @@
                     }
                 },
                 "rollup": {
-                    "version": "3.20.2",
-                    "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz",
-                    "integrity": "sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==",
+                    "version": "3.21.3",
+                    "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.3.tgz",
+                    "integrity": "sha512-VnPfEG51nIv2xPLnZaekkuN06q9ZbnyDcLkaBdJa/W7UddyhOfMP2yOPziYQfeY7k++fZM8FdQIummFN5y14kA==",
                     "dev": true,
                     "requires": {
                         "fsevents": "~2.3.2"
@@ -18306,22 +18639,35 @@
                     "requires": {
                         "is-number": "^7.0.0"
                     }
+                },
+                "vite": {
+                    "version": "4.2.2",
+                    "resolved": "https://registry.npmjs.org/vite/-/vite-4.2.2.tgz",
+                    "integrity": "sha512-PcNtT5HeDxb3QaSqFYkEum8f5sCVe0R3WK20qxgIvNBZPXU/Obxs/+ubBMeE7nLWeCo2LDzv+8hRYSlcaSehig==",
+                    "dev": true,
+                    "requires": {
+                        "esbuild": "^0.17.5",
+                        "fsevents": "~2.3.2",
+                        "postcss": "^8.4.21",
+                        "resolve": "^1.22.1",
+                        "rollup": "^3.18.0"
+                    }
                 }
             }
         },
         "@rollup/plugin-alias": {
-            "version": "4.0.4",
-            "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-4.0.4.tgz",
-            "integrity": "sha512-0CaAY238SMtYAWEXXptWSR8iz8NYZnH7zNBKuJ14xFJSGwLtPgjvXYsoApAHfzYXXH1ejxpVw7WlHss3zhh9SQ==",
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.0.0.tgz",
+            "integrity": "sha512-l9hY5chSCjuFRPsnRm16twWBiSApl2uYFLsepQYwtBuAxNMQ/1dJqADld40P0Jkqm65GRTLy/AC6hnpVebtLsA==",
             "dev": true,
             "requires": {
                 "slash": "^4.0.0"
             }
         },
         "@rollup/plugin-commonjs": {
-            "version": "24.0.1",
-            "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.1.tgz",
-            "integrity": "sha512-15LsiWRZk4eOGqvrJyu3z3DaBu5BhXIMeWnijSRvd8irrrg9SHpQ1pH+BUK4H6Z9wL9yOxZJMTLU+Au86XHxow==",
+            "version": "24.1.0",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-24.1.0.tgz",
+            "integrity": "sha512-eSL45hjhCWI0jCCXcNtLVqM5N1JlBGvlFfY0m6oOYnLCJ6N0qEXoZql4sY2MOUArzhH4SA/qBpTxvvZp2Sc+DQ==",
             "dev": true,
             "requires": {
                 "@rollup/pluginutils": "^5.0.1",
@@ -18410,9 +18756,9 @@
             }
         },
         "@rollup/plugin-terser": {
-            "version": "0.4.0",
-            "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.0.tgz",
-            "integrity": "sha512-Ipcf3LPNerey1q9ZMjiaWHlNPEHNU/B5/uh9zXLltfEQ1lVSLLeZSgAtTPWGyw8Ip1guOeq+mDtdOlEj/wNxQw==",
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.1.tgz",
+            "integrity": "sha512-aKS32sw5a7hy+fEXVy+5T95aDIwjpGHCTv833HXVtyKMDoVS7pBr5K3L9hEQoNqbJFjfANPrNpIXlTQ7is00eA==",
             "dev": true,
             "requires": {
                 "serialize-javascript": "^6.0.0",
@@ -18457,9 +18803,9 @@
             "dev": true
         },
         "@types/chai": {
-            "version": "4.3.4",
-            "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.4.tgz",
-            "integrity": "sha512-KnRanxnpfpjUTqTCXslZSEdLfXExwgNxYPdiO2WGUj8+HDjFi8R3k5RVKPeSCzLjCcshCAtVO2QBbVuAV4kTnw==",
+            "version": "4.3.5",
+            "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.5.tgz",
+            "integrity": "sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng==",
             "dev": true
         },
         "@types/chai-subset": {
@@ -18494,9 +18840,9 @@
             }
         },
         "@types/estree": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
-            "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
+            "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
             "dev": true
         },
         "@types/json-schema": {
@@ -18506,9 +18852,9 @@
             "dev": true
         },
         "@types/node": {
-            "version": "18.15.11",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz",
-            "integrity": "sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==",
+            "version": "18.16.3",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.3.tgz",
+            "integrity": "sha512-OPs5WnnT1xkCBiuQrZA4+YAV4HEJejmHneyraIaxsbev5yCEr6KMwINNFP9wQeFIw8FWcoTqF3vQsa5CDaI+8Q==",
             "dev": true
         },
         "@types/resolve": {
@@ -18518,54 +18864,54 @@
             "dev": true
         },
         "@unhead/dom": {
-            "version": "1.1.25",
-            "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.1.25.tgz",
-            "integrity": "sha512-kJ5jhJFNQCyNENSw+mtmzgulA0kqUuXS3SRPl1umpofc8PH8tblSzXwqStxTj9r6E4wxJbEuygT/aHFJVioizw==",
+            "version": "1.1.26",
+            "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.1.26.tgz",
+            "integrity": "sha512-6I8z170OAO19h/AslASN4Xw0hqItQFMKhRJQtplQs1BZ62LsDmNKuqJiYueX39U+IfIvIV3j/q1mQwt9lgMwTw==",
             "dev": true,
             "requires": {
-                "@unhead/schema": "1.1.25",
-                "@unhead/shared": "1.1.25"
+                "@unhead/schema": "1.1.26",
+                "@unhead/shared": "1.1.26"
             }
         },
         "@unhead/schema": {
-            "version": "1.1.25",
-            "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.1.25.tgz",
-            "integrity": "sha512-ygmaxWgGTAq9CcB6zGY4+0HlGdQt/oMq+CM18tTnvOBY0Og/uPGt7roW8eH717GpTPibKRTpagSYzZYdL0tWeg==",
+            "version": "1.1.26",
+            "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.1.26.tgz",
+            "integrity": "sha512-l93zaizm+pu36uMssdtzSC2Y61ncZaBBouZn0pB8rVI14V0hPxeXuSNIuPh2WjAm8wfb8EnCSE3LNguoqTar7g==",
             "dev": true,
             "requires": {
-                "hookable": "^5.5.1",
+                "hookable": "^5.5.3",
                 "zhead": "^2.0.4"
             }
         },
         "@unhead/shared": {
-            "version": "1.1.25",
-            "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.1.25.tgz",
-            "integrity": "sha512-KptKbk4py1MFYHYwDJ/0kPOs+95dYMrWIT1fCV9lGcVAwu20wIHh+WX18s+iEWhc66xkGRxgC/xsl4wJJFPE+w==",
+            "version": "1.1.26",
+            "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.1.26.tgz",
+            "integrity": "sha512-gnUfNrl8w7hQHke9P0au7klcG9bHVOXqbDvya2uARA/8TyxNz87i0uakraO+P6/+zf484dw3b3MYkXq0thK2eg==",
             "dev": true,
             "requires": {
-                "@unhead/schema": "1.1.25"
+                "@unhead/schema": "1.1.26"
             }
         },
         "@unhead/ssr": {
-            "version": "1.1.25",
-            "resolved": "https://registry.npmjs.org/@unhead/ssr/-/ssr-1.1.25.tgz",
-            "integrity": "sha512-2S3tiajy6n3D1WY2pVkRLr74WGaHD08w0+nFaQGNy0LszPlkWUuAmYYqDCXdh03ijEl+Tjwqjn+E9w1e3QakuQ==",
+            "version": "1.1.26",
+            "resolved": "https://registry.npmjs.org/@unhead/ssr/-/ssr-1.1.26.tgz",
+            "integrity": "sha512-KYJDGgVNtU2i+NHu17o2zFXqsoLukOFEz81XrWQ8nQdY5+VNjy7IiTLp1dlx3umn1ohZjHySz4LXQCT4zUApSw==",
             "dev": true,
             "requires": {
-                "@unhead/schema": "1.1.25",
-                "@unhead/shared": "1.1.25"
+                "@unhead/schema": "1.1.26",
+                "@unhead/shared": "1.1.26"
             }
         },
         "@unhead/vue": {
-            "version": "1.1.25",
-            "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.1.25.tgz",
-            "integrity": "sha512-ujincFHftg2N2i3G/gVkMyJ7CFzVyZ8SMb5cJCWZEnDBQGjgy3uvWT6EaM0d2jnaeXiYbB+iyY0O1o/H+XlpKQ==",
+            "version": "1.1.26",
+            "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.1.26.tgz",
+            "integrity": "sha512-UpxQ0KGmOoiN+Dg19zto5KTcnGV5chBmgiVJTDqUF4BPfr24vRrR65sZGdMoNV7weuD3AD/K0osk2ru+vXxRrA==",
             "dev": true,
             "requires": {
-                "@unhead/schema": "1.1.25",
-                "@unhead/shared": "1.1.25",
-                "hookable": "^5.5.1",
-                "unhead": "1.1.25"
+                "@unhead/schema": "1.1.26",
+                "@unhead/shared": "1.1.26",
+                "hookable": "^5.5.3",
+                "unhead": "1.1.26"
             }
         },
         "@vercel/nft": {
@@ -18893,73 +19239,73 @@
             }
         },
         "@webassemblyjs/ast": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
-            "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.5.tgz",
+            "integrity": "sha512-LHY/GSAZZRpsNQH+/oHqhRQ5FT7eoULcBqgfyTB5nQHogFnK3/7QoN7dLnwSE/JkUAF0SrRuclT7ODqMFtWxxQ==",
             "dev": true,
             "peer": true,
             "requires": {
-                "@webassemblyjs/helper-numbers": "1.11.1",
-                "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
+                "@webassemblyjs/helper-numbers": "1.11.5",
+                "@webassemblyjs/helper-wasm-bytecode": "1.11.5"
             }
         },
         "@webassemblyjs/floating-point-hex-parser": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
-            "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.5.tgz",
+            "integrity": "sha512-1j1zTIC5EZOtCplMBG/IEwLtUojtwFVwdyVMbL/hwWqbzlQoJsWCOavrdnLkemwNoC/EOwtUFch3fuo+cbcXYQ==",
             "dev": true,
             "peer": true
         },
         "@webassemblyjs/helper-api-error": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
-            "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.5.tgz",
+            "integrity": "sha512-L65bDPmfpY0+yFrsgz8b6LhXmbbs38OnwDCf6NpnMUYqa+ENfE5Dq9E42ny0qz/PdR0LJyq/T5YijPnU8AXEpA==",
             "dev": true,
             "peer": true
         },
         "@webassemblyjs/helper-buffer": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
-            "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.5.tgz",
+            "integrity": "sha512-fDKo1gstwFFSfacIeH5KfwzjykIE6ldh1iH9Y/8YkAZrhmu4TctqYjSh7t0K2VyDSXOZJ1MLhht/k9IvYGcIxg==",
             "dev": true,
             "peer": true
         },
         "@webassemblyjs/helper-numbers": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
-            "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.5.tgz",
+            "integrity": "sha512-DhykHXM0ZABqfIGYNv93A5KKDw/+ywBFnuWybZZWcuzWHfbp21wUfRkbtz7dMGwGgT4iXjWuhRMA2Mzod6W4WA==",
             "dev": true,
             "peer": true,
             "requires": {
-                "@webassemblyjs/floating-point-hex-parser": "1.11.1",
-                "@webassemblyjs/helper-api-error": "1.11.1",
+                "@webassemblyjs/floating-point-hex-parser": "1.11.5",
+                "@webassemblyjs/helper-api-error": "1.11.5",
                 "@xtuc/long": "4.2.2"
             }
         },
         "@webassemblyjs/helper-wasm-bytecode": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
-            "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.5.tgz",
+            "integrity": "sha512-oC4Qa0bNcqnjAowFn7MPCETQgDYytpsfvz4ujZz63Zu/a/v71HeCAAmZsgZ3YVKec3zSPYytG3/PrRCqbtcAvA==",
             "dev": true,
             "peer": true
         },
         "@webassemblyjs/helper-wasm-section": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
-            "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.5.tgz",
+            "integrity": "sha512-uEoThA1LN2NA+K3B9wDo3yKlBfVtC6rh0i4/6hvbz071E8gTNZD/pT0MsBf7MeD6KbApMSkaAK0XeKyOZC7CIA==",
             "dev": true,
             "peer": true,
             "requires": {
-                "@webassemblyjs/ast": "1.11.1",
-                "@webassemblyjs/helper-buffer": "1.11.1",
-                "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-                "@webassemblyjs/wasm-gen": "1.11.1"
+                "@webassemblyjs/ast": "1.11.5",
+                "@webassemblyjs/helper-buffer": "1.11.5",
+                "@webassemblyjs/helper-wasm-bytecode": "1.11.5",
+                "@webassemblyjs/wasm-gen": "1.11.5"
             }
         },
         "@webassemblyjs/ieee754": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
-            "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.5.tgz",
+            "integrity": "sha512-37aGq6qVL8A8oPbPrSGMBcp38YZFXcHfiROflJn9jxSdSMMM5dS5P/9e2/TpaJuhE+wFrbukN2WI6Hw9MH5acg==",
             "dev": true,
             "peer": true,
             "requires": {
@@ -18967,9 +19313,9 @@
             }
         },
         "@webassemblyjs/leb128": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
-            "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.5.tgz",
+            "integrity": "sha512-ajqrRSXaTJoPW+xmkfYN6l8VIeNnR4vBOTQO9HzR7IygoCcKWkICbKFbVTNMjMgMREqXEr0+2M6zukzM47ZUfQ==",
             "dev": true,
             "peer": true,
             "requires": {
@@ -18977,79 +19323,79 @@
             }
         },
         "@webassemblyjs/utf8": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
-            "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.5.tgz",
+            "integrity": "sha512-WiOhulHKTZU5UPlRl53gHR8OxdGsSOxqfpqWeA2FmcwBMaoEdz6b2x2si3IwC9/fSPLfe8pBMRTHVMk5nlwnFQ==",
             "dev": true,
             "peer": true
         },
         "@webassemblyjs/wasm-edit": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
-            "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.5.tgz",
+            "integrity": "sha512-C0p9D2fAu3Twwqvygvf42iGCQ4av8MFBLiTb+08SZ4cEdwzWx9QeAHDo1E2k+9s/0w1DM40oflJOpkZ8jW4HCQ==",
             "dev": true,
             "peer": true,
             "requires": {
-                "@webassemblyjs/ast": "1.11.1",
-                "@webassemblyjs/helper-buffer": "1.11.1",
-                "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-                "@webassemblyjs/helper-wasm-section": "1.11.1",
-                "@webassemblyjs/wasm-gen": "1.11.1",
-                "@webassemblyjs/wasm-opt": "1.11.1",
-                "@webassemblyjs/wasm-parser": "1.11.1",
-                "@webassemblyjs/wast-printer": "1.11.1"
+                "@webassemblyjs/ast": "1.11.5",
+                "@webassemblyjs/helper-buffer": "1.11.5",
+                "@webassemblyjs/helper-wasm-bytecode": "1.11.5",
+                "@webassemblyjs/helper-wasm-section": "1.11.5",
+                "@webassemblyjs/wasm-gen": "1.11.5",
+                "@webassemblyjs/wasm-opt": "1.11.5",
+                "@webassemblyjs/wasm-parser": "1.11.5",
+                "@webassemblyjs/wast-printer": "1.11.5"
             }
         },
         "@webassemblyjs/wasm-gen": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
-            "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.5.tgz",
+            "integrity": "sha512-14vteRlRjxLK9eSyYFvw1K8Vv+iPdZU0Aebk3j6oB8TQiQYuO6hj9s4d7qf6f2HJr2khzvNldAFG13CgdkAIfA==",
             "dev": true,
             "peer": true,
             "requires": {
-                "@webassemblyjs/ast": "1.11.1",
-                "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-                "@webassemblyjs/ieee754": "1.11.1",
-                "@webassemblyjs/leb128": "1.11.1",
-                "@webassemblyjs/utf8": "1.11.1"
+                "@webassemblyjs/ast": "1.11.5",
+                "@webassemblyjs/helper-wasm-bytecode": "1.11.5",
+                "@webassemblyjs/ieee754": "1.11.5",
+                "@webassemblyjs/leb128": "1.11.5",
+                "@webassemblyjs/utf8": "1.11.5"
             }
         },
         "@webassemblyjs/wasm-opt": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
-            "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.5.tgz",
+            "integrity": "sha512-tcKwlIXstBQgbKy1MlbDMlXaxpucn42eb17H29rawYLxm5+MsEmgPzeCP8B1Cl69hCice8LeKgZpRUAPtqYPgw==",
             "dev": true,
             "peer": true,
             "requires": {
-                "@webassemblyjs/ast": "1.11.1",
-                "@webassemblyjs/helper-buffer": "1.11.1",
-                "@webassemblyjs/wasm-gen": "1.11.1",
-                "@webassemblyjs/wasm-parser": "1.11.1"
+                "@webassemblyjs/ast": "1.11.5",
+                "@webassemblyjs/helper-buffer": "1.11.5",
+                "@webassemblyjs/wasm-gen": "1.11.5",
+                "@webassemblyjs/wasm-parser": "1.11.5"
             }
         },
         "@webassemblyjs/wasm-parser": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
-            "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.5.tgz",
+            "integrity": "sha512-SVXUIwsLQlc8srSD7jejsfTU83g7pIGr2YYNb9oHdtldSxaOhvA5xwvIiWIfcX8PlSakgqMXsLpLfbbJ4cBYew==",
             "dev": true,
             "peer": true,
             "requires": {
-                "@webassemblyjs/ast": "1.11.1",
-                "@webassemblyjs/helper-api-error": "1.11.1",
-                "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-                "@webassemblyjs/ieee754": "1.11.1",
-                "@webassemblyjs/leb128": "1.11.1",
-                "@webassemblyjs/utf8": "1.11.1"
+                "@webassemblyjs/ast": "1.11.5",
+                "@webassemblyjs/helper-api-error": "1.11.5",
+                "@webassemblyjs/helper-wasm-bytecode": "1.11.5",
+                "@webassemblyjs/ieee754": "1.11.5",
+                "@webassemblyjs/leb128": "1.11.5",
+                "@webassemblyjs/utf8": "1.11.5"
             }
         },
         "@webassemblyjs/wast-printer": {
-            "version": "1.11.1",
-            "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
-            "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
+            "version": "1.11.5",
+            "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.5.tgz",
+            "integrity": "sha512-f7Pq3wvg3GSPUPzR0F6bmI89Hdb+u9WXrSKc4v+N0aV0q6r42WoF92Jp2jEorBEBRoRNXgjp53nBniDXcqZYPA==",
             "dev": true,
             "peer": true,
             "requires": {
-                "@webassemblyjs/ast": "1.11.1",
+                "@webassemblyjs/ast": "1.11.5",
                 "@xtuc/long": "4.2.2"
             }
         },
@@ -19192,9 +19538,9 @@
             }
         },
         "ansi-escapes": {
-            "version": "6.1.0",
-            "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.1.0.tgz",
-            "integrity": "sha512-bQyg9bzRntwR/8b89DOEhGwctcwCrbWW/TuqTQnpqpy5Fz3aovcOTj5i8NJV6AHc8OGNdMaqdxAWww8pz2kiKg==",
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.2.0.tgz",
+            "integrity": "sha512-kzRaCqXnpzWs+3z5ABPQiVke+iq0KXkHo8xiWV4RPTi5Yli0l97BEQuhXV1s7+aSU/fu1kUuxgS4MsQ0fRuygw==",
             "dev": true,
             "requires": {
                 "type-fest": "^3.0.0"
@@ -19742,19 +20088,123 @@
             "dev": true
         },
         "c12": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/c12/-/c12-1.2.0.tgz",
-            "integrity": "sha512-CMznkE0LpNEuD8ILp5QvsQVP+YvcpJnrI/zFeFnosU2PyDtx1wT7tXfZ8S3Tl3l9MTTXbKeuhDYKwgvnAPOx3w==",
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/c12/-/c12-1.4.1.tgz",
+            "integrity": "sha512-0x7pWfLZpZsgtyotXtuepJc0rZYE0Aw8PwNAXs0jSG9zq6Sl5xmbWnFqfmRY01ieZLHNbvneSFm9/x88CvzAuw==",
             "dev": true,
             "requires": {
+                "chokidar": "^3.5.3",
                 "defu": "^6.1.2",
                 "dotenv": "^16.0.3",
                 "giget": "^1.1.2",
-                "jiti": "^1.17.2",
+                "jiti": "^1.18.2",
                 "mlly": "^1.2.0",
+                "ohash": "^1.1.1",
                 "pathe": "^1.1.0",
+                "perfect-debounce": "^0.1.3",
                 "pkg-types": "^1.0.2",
-                "rc9": "^2.0.1"
+                "rc9": "^2.1.0"
+            },
+            "dependencies": {
+                "anymatch": {
+                    "version": "3.1.3",
+                    "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+                    "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+                    "dev": true,
+                    "requires": {
+                        "normalize-path": "^3.0.0",
+                        "picomatch": "^2.0.4"
+                    }
+                },
+                "binary-extensions": {
+                    "version": "2.2.0",
+                    "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+                    "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+                    "dev": true
+                },
+                "braces": {
+                    "version": "3.0.2",
+                    "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+                    "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+                    "dev": true,
+                    "requires": {
+                        "fill-range": "^7.0.1"
+                    }
+                },
+                "chokidar": {
+                    "version": "3.5.3",
+                    "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+                    "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+                    "dev": true,
+                    "requires": {
+                        "anymatch": "~3.1.2",
+                        "braces": "~3.0.2",
+                        "fsevents": "~2.3.2",
+                        "glob-parent": "~5.1.2",
+                        "is-binary-path": "~2.1.0",
+                        "is-glob": "~4.0.1",
+                        "normalize-path": "~3.0.0",
+                        "readdirp": "~3.6.0"
+                    }
+                },
+                "fill-range": {
+                    "version": "7.0.1",
+                    "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+                    "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+                    "dev": true,
+                    "requires": {
+                        "to-regex-range": "^5.0.1"
+                    }
+                },
+                "fsevents": {
+                    "version": "2.3.2",
+                    "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+                    "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+                    "dev": true,
+                    "optional": true
+                },
+                "glob-parent": {
+                    "version": "5.1.2",
+                    "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+                    "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+                    "dev": true,
+                    "requires": {
+                        "is-glob": "^4.0.1"
+                    }
+                },
+                "is-binary-path": {
+                    "version": "2.1.0",
+                    "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+                    "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+                    "dev": true,
+                    "requires": {
+                        "binary-extensions": "^2.0.0"
+                    }
+                },
+                "is-number": {
+                    "version": "7.0.0",
+                    "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+                    "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+                    "dev": true
+                },
+                "readdirp": {
+                    "version": "3.6.0",
+                    "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+                    "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+                    "dev": true,
+                    "requires": {
+                        "picomatch": "^2.2.1"
+                    }
+                },
+                "to-regex-range": {
+                    "version": "5.0.1",
+                    "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+                    "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+                    "dev": true,
+                    "requires": {
+                        "is-number": "^7.0.0"
+                    }
+                }
             }
         },
         "cac": {
@@ -19815,9 +20265,9 @@
             }
         },
         "caniuse-lite": {
-            "version": "1.0.30001474",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001474.tgz",
-            "integrity": "sha512-iaIZ8gVrWfemh5DG3T9/YqarVZoYf0r188IjaGwx68j4Pf0SGY6CQkmJUIE+NZHkkecQGohzXmBGEwWDr9aM3Q==",
+            "version": "1.0.30001482",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001482.tgz",
+            "integrity": "sha512-F1ZInsg53cegyjroxLNW9DmrEQ1SuGRTO1QlpA0o2/6OpQ0gFeDRoq1yFmnr8Sakn9qwwt9DmbxHB6w167OSuQ==",
             "dev": true
         },
         "chai": {
@@ -20230,9 +20680,9 @@
             "dev": true
         },
         "colorette": {
-            "version": "2.0.19",
-            "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
-            "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
+            "version": "2.0.20",
+            "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+            "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
             "dev": true
         },
         "combined-stream": {
@@ -20950,9 +21400,9 @@
             "dev": true
         },
         "electron-to-chromium": {
-            "version": "1.4.353",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.353.tgz",
-            "integrity": "sha512-IdJVpMHJoBT/nn0GQ02wPfbhogDVpd1ud95lP//FTf5l35wzxKJwibB4HBdY7Q+xKPA1nkZ0UDLOMyRj5U5IAQ==",
+            "version": "1.4.379",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.379.tgz",
+            "integrity": "sha512-eRMq6Cf4PhjB14R9U6QcXM/VRQ54Gc3OL9LKnFugUIh2AXm3KJlOizlSfVIgjH76bII4zHGK4t0PVTE5qq8dZg==",
             "dev": true
         },
         "emoji-regex": {
@@ -20983,9 +21433,9 @@
             }
         },
         "enhanced-resolve": {
-            "version": "5.12.0",
-            "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
-            "integrity": "sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==",
+            "version": "5.13.0",
+            "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.13.0.tgz",
+            "integrity": "sha512-eyV8f0y1+bzyfh8xAwW/WTSZpLbjhqc4ne9eGSH4Zo2ejdyiNG9pU6mf9DG8a7+Auk6MFTlNOT4Y2y/9k8GKVg==",
             "dev": true,
             "requires": {
                 "graceful-fs": "^4.2.4",
@@ -21017,9 +21467,9 @@
             }
         },
         "es-module-lexer": {
-            "version": "0.9.3",
-            "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
-            "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.2.1.tgz",
+            "integrity": "sha512-9978wrXM50Y4rTMmW5kXIC09ZdXQZqkE4mxhwkd8VbzsGkXGPgV4zWuqQJgCEzYngdo2dYDa0l8xhX4fkSwJSg==",
             "dev": true,
             "peer": true
         },
@@ -21068,33 +21518,33 @@
             }
         },
         "esbuild": {
-            "version": "0.17.15",
-            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.15.tgz",
-            "integrity": "sha512-LBUV2VsUIc/iD9ME75qhT4aJj0r75abCVS0jakhFzOtR7TQsqQA5w0tZ+KTKnwl3kXE0MhskNdHDh/I5aCR1Zw==",
+            "version": "0.17.18",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.18.tgz",
+            "integrity": "sha512-z1lix43jBs6UKjcZVKOw2xx69ffE2aG0PygLL5qJ9OS/gy0Ewd1gW/PUQIOIQGXBHWNywSc0floSKoMFF8aK2w==",
             "dev": true,
             "requires": {
-                "@esbuild/android-arm": "0.17.15",
-                "@esbuild/android-arm64": "0.17.15",
-                "@esbuild/android-x64": "0.17.15",
-                "@esbuild/darwin-arm64": "0.17.15",
-                "@esbuild/darwin-x64": "0.17.15",
-                "@esbuild/freebsd-arm64": "0.17.15",
-                "@esbuild/freebsd-x64": "0.17.15",
-                "@esbuild/linux-arm": "0.17.15",
-                "@esbuild/linux-arm64": "0.17.15",
-                "@esbuild/linux-ia32": "0.17.15",
-                "@esbuild/linux-loong64": "0.17.15",
-                "@esbuild/linux-mips64el": "0.17.15",
-                "@esbuild/linux-ppc64": "0.17.15",
-                "@esbuild/linux-riscv64": "0.17.15",
-                "@esbuild/linux-s390x": "0.17.15",
-                "@esbuild/linux-x64": "0.17.15",
-                "@esbuild/netbsd-x64": "0.17.15",
-                "@esbuild/openbsd-x64": "0.17.15",
-                "@esbuild/sunos-x64": "0.17.15",
-                "@esbuild/win32-arm64": "0.17.15",
-                "@esbuild/win32-ia32": "0.17.15",
-                "@esbuild/win32-x64": "0.17.15"
+                "@esbuild/android-arm": "0.17.18",
+                "@esbuild/android-arm64": "0.17.18",
+                "@esbuild/android-x64": "0.17.18",
+                "@esbuild/darwin-arm64": "0.17.18",
+                "@esbuild/darwin-x64": "0.17.18",
+                "@esbuild/freebsd-arm64": "0.17.18",
+                "@esbuild/freebsd-x64": "0.17.18",
+                "@esbuild/linux-arm": "0.17.18",
+                "@esbuild/linux-arm64": "0.17.18",
+                "@esbuild/linux-ia32": "0.17.18",
+                "@esbuild/linux-loong64": "0.17.18",
+                "@esbuild/linux-mips64el": "0.17.18",
+                "@esbuild/linux-ppc64": "0.17.18",
+                "@esbuild/linux-riscv64": "0.17.18",
+                "@esbuild/linux-s390x": "0.17.18",
+                "@esbuild/linux-x64": "0.17.18",
+                "@esbuild/netbsd-x64": "0.17.18",
+                "@esbuild/openbsd-x64": "0.17.18",
+                "@esbuild/sunos-x64": "0.17.18",
+                "@esbuild/win32-arm64": "0.17.18",
+                "@esbuild/win32-ia32": "0.17.18",
+                "@esbuild/win32-x64": "0.17.18"
             }
         },
         "escalade": {
@@ -21176,15 +21626,15 @@
             }
         },
         "eslint": {
-            "version": "8.37.0",
-            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.37.0.tgz",
-            "integrity": "sha512-NU3Ps9nI05GUoVMxcZx1J8CNR6xOvUT4jAUMH5+z8lpp3aEdPVCImKw6PWG4PY+Vfkpr+jvMpxs/qoE7wq0sPw==",
+            "version": "8.39.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.39.0.tgz",
+            "integrity": "sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==",
             "dev": true,
             "requires": {
                 "@eslint-community/eslint-utils": "^4.2.0",
                 "@eslint-community/regexpp": "^4.4.0",
                 "@eslint/eslintrc": "^2.0.2",
-                "@eslint/js": "8.37.0",
+                "@eslint/js": "8.39.0",
                 "@humanwhocodes/config-array": "^0.11.8",
                 "@humanwhocodes/module-importer": "^1.0.1",
                 "@nodelib/fs.walk": "^1.2.8",
@@ -21194,7 +21644,7 @@
                 "debug": "^4.3.2",
                 "doctrine": "^3.0.0",
                 "escape-string-regexp": "^4.0.0",
-                "eslint-scope": "^7.1.1",
+                "eslint-scope": "^7.2.0",
                 "eslint-visitor-keys": "^3.4.0",
                 "espree": "^9.5.1",
                 "esquery": "^1.4.2",
@@ -21264,9 +21714,9 @@
                     "dev": true
                 },
                 "eslint-scope": {
-                    "version": "7.1.1",
-                    "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
-                    "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+                    "version": "7.2.0",
+                    "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
+                    "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
                     "dev": true,
                     "requires": {
                         "esrecurse": "^4.3.0",
@@ -21345,9 +21795,9 @@
                     }
                 },
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.0",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+                    "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -21371,9 +21821,9 @@
             }
         },
         "eslint-plugin-vue": {
-            "version": "9.10.0",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.10.0.tgz",
-            "integrity": "sha512-2MgP31OBf8YilUvtakdVMc8xVbcMp7z7/iQj8LHVpXrSXHPXSJRUIGSPFI6b6pyCx/buKaFJ45ycqfHvQRiW2g==",
+            "version": "9.11.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.11.0.tgz",
+            "integrity": "sha512-bBCJAZnkBV7ATH4Z1E7CvN3nmtS4H7QUU3UBxPdo8WohRU+yHjnQRALpTbxMVcz0e4Mx3IyxIdP5HYODMxK9cQ==",
             "dev": true,
             "requires": {
                 "@eslint-community/eslint-utils": "^4.3.0",
@@ -21395,9 +21845,9 @@
                     }
                 },
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.0",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+                    "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -22414,9 +22864,9 @@
             "dev": true
         },
         "globby": {
-            "version": "13.1.3",
-            "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.3.tgz",
-            "integrity": "sha512-8krCNHXvlCgHDpegPzleMq07yMYTO2sXKASmZmquEYWEmCx6J5UTRbp5RwMJkTJGtcQ44YpiUYUiN0b9mzy8Bw==",
+            "version": "13.1.4",
+            "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.4.tgz",
+            "integrity": "sha512-iui/IiiW+QrJ1X1hKH5qwlMQyv34wJAYwH1vrf8b9kBA4sNiif3gKsMHa+BrdnOpEudWjpotfa7LrTzB1ERS/g==",
             "dev": true,
             "requires": {
                 "dir-glob": "^3.0.1",
@@ -22949,9 +23399,9 @@
             "dev": true
         },
         "inquirer": {
-            "version": "9.1.5",
-            "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.1.5.tgz",
-            "integrity": "sha512-3ygAIh8gcZavV9bj6MTdYddG2zPSYswP808fKS46NOwlF0zZljVpnLCHODDqItWJDbDpLb3aouAxGaJbkxoppA==",
+            "version": "9.2.0",
+            "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.2.0.tgz",
+            "integrity": "sha512-WWERbVqjsTXjXub1ZW0ZHDit1dyHqy0T9XIkky9TnmKAPrjU9Jkd59nZPK0dUuM3s73GZAZu2Jo4iFU3XSPVLA==",
             "dev": true,
             "requires": {
                 "ansi-escapes": "^6.0.0",
@@ -23007,9 +23457,9 @@
             "dev": true
         },
         "ioredis": {
-            "version": "5.3.1",
-            "resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.3.1.tgz",
-            "integrity": "sha512-C+IBcMysM6v52pTLItYMeV4Hz7uriGtoJdz7SSBDX6u+zwSYGirLdQh3L7t/OItWITcw3gTFMjJReYUwS4zihg==",
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.3.2.tgz",
+            "integrity": "sha512-1DKMMzlIHM02eBBVOFQ1+AolGjs6+xEcM4PDL7NqOS6szq7H9jSaEkIUH6/a5Hl241LzW6JLSiAbNvTQjUupUA==",
             "dev": true,
             "requires": {
                 "@ioredis/commands": "^1.1.1",
@@ -23103,9 +23553,9 @@
             }
         },
         "is-core-module": {
-            "version": "2.11.0",
-            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
-            "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
+            "version": "2.12.0",
+            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.0.tgz",
+            "integrity": "sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==",
             "dev": true,
             "requires": {
                 "has": "^1.0.3"
@@ -24124,9 +24574,9 @@
             "dev": true
         },
         "minipass": {
-            "version": "4.2.5",
-            "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.5.tgz",
-            "integrity": "sha512-+yQl7SX3bIT83Lhb4BVorMAHVuqsskxRdlmO9kTpyukp8vsm2Sn/fUOV9xlnG8/a5JsypJzap21lz/y3FBMJ8Q==",
+            "version": "4.2.8",
+            "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz",
+            "integrity": "sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==",
             "dev": true
         },
         "minizlib": {
@@ -24315,20 +24765,20 @@
             "dev": true
         },
         "nitropack": {
-            "version": "2.3.2",
-            "resolved": "https://registry.npmjs.org/nitropack/-/nitropack-2.3.2.tgz",
-            "integrity": "sha512-bps3OvC3JocB3Hl6/FUaQpbLw1Xsr6KXV3hTDnh54N0B0uAGWN9aF1LVHKBpWSS5JJvjwd+ZewOUFsPRM2NJ9Q==",
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/nitropack/-/nitropack-2.3.3.tgz",
+            "integrity": "sha512-1g/4zdwWo+tWSvno57rhRXeGk6jNbG5W1yRNtOywInT1nyoEG1ksOwQ3W3JHGB2E1GNjZwAVi611UVOVL+JgYw==",
             "dev": true,
             "requires": {
                 "@cloudflare/kv-asset-handler": "^0.3.0",
                 "@netlify/functions": "^1.4.0",
-                "@rollup/plugin-alias": "^4.0.3",
+                "@rollup/plugin-alias": "^5.0.0",
                 "@rollup/plugin-commonjs": "^24.0.1",
                 "@rollup/plugin-inject": "^5.0.3",
                 "@rollup/plugin-json": "^6.0.0",
-                "@rollup/plugin-node-resolve": "^15.0.1",
+                "@rollup/plugin-node-resolve": "^15.0.2",
                 "@rollup/plugin-replace": "^5.0.2",
-                "@rollup/plugin-terser": "^0.4.0",
+                "@rollup/plugin-terser": "^0.4.1",
                 "@rollup/plugin-wasm": "^6.1.2",
                 "@rollup/pluginutils": "^5.0.2",
                 "@vercel/nft": "^0.22.6",
@@ -24336,19 +24786,19 @@
                 "c12": "^1.2.0",
                 "chalk": "^5.2.0",
                 "chokidar": "^3.5.3",
-                "consola": "^2.15.3",
+                "consola": "^3.0.1",
                 "cookie-es": "^0.5.0",
                 "defu": "^6.1.2",
                 "destr": "^1.2.2",
                 "dot-prop": "^7.2.0",
-                "esbuild": "^0.17.12",
+                "esbuild": "^0.17.16",
                 "escape-string-regexp": "^5.0.0",
                 "etag": "^1.8.1",
                 "fs-extra": "^11.1.1",
                 "globby": "^13.1.3",
                 "gzip-size": "^7.0.0",
-                "h3": "^1.6.2",
-                "hookable": "^5.5.1",
+                "h3": "^1.6.4",
+                "hookable": "^5.5.3",
                 "http-proxy": "^1.18.1",
                 "is-primitive": "^3.0.1",
                 "jiti": "^1.18.2",
@@ -24358,25 +24808,25 @@
                 "mime": "^3.0.0",
                 "mlly": "^1.2.0",
                 "mri": "^1.2.0",
-                "node-fetch-native": "^1.0.2",
+                "node-fetch-native": "^1.1.0",
                 "ofetch": "^1.0.1",
                 "ohash": "^1.0.0",
                 "pathe": "^1.1.0",
                 "perfect-debounce": "^0.1.3",
                 "pkg-types": "^1.0.2",
                 "pretty-bytes": "^6.1.0",
-                "radix3": "^1.0.0",
-                "rollup": "^3.20.0",
+                "radix3": "^1.0.1",
+                "rollup": "^3.20.2",
                 "rollup-plugin-visualizer": "^5.9.0",
                 "scule": "^1.0.0",
-                "semver": "^7.3.8",
+                "semver": "^7.4.0",
                 "serve-placeholder": "^2.0.1",
                 "serve-static": "^1.15.0",
                 "source-map-support": "^0.5.21",
                 "std-env": "^3.3.2",
                 "ufo": "^1.1.1",
-                "unenv": "^1.2.2",
-                "unimport": "^3.0.3",
+                "unenv": "^1.3.1",
+                "unimport": "^3.0.6",
                 "unstorage": "^1.4.1"
             },
             "dependencies": {
@@ -24427,6 +24877,12 @@
                         "readdirp": "~3.6.0"
                     }
                 },
+                "consola": {
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/consola/-/consola-3.1.0.tgz",
+                    "integrity": "sha512-rrrJE6rP0qzl/Srg+C9x/AE5Kxfux7reVm1Wh0wCjuXvih6DqZgqDZe8auTD28fzJ9TF0mHlSDrPpWlujQRo1Q==",
+                    "dev": true
+                },
                 "escape-string-regexp": {
                     "version": "5.0.0",
                     "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
@@ -24492,18 +24948,18 @@
                     }
                 },
                 "rollup": {
-                    "version": "3.20.2",
-                    "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz",
-                    "integrity": "sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==",
+                    "version": "3.21.3",
+                    "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.3.tgz",
+                    "integrity": "sha512-VnPfEG51nIv2xPLnZaekkuN06q9ZbnyDcLkaBdJa/W7UddyhOfMP2yOPziYQfeY7k++fZM8FdQIummFN5y14kA==",
                     "dev": true,
                     "requires": {
                         "fsevents": "~2.3.2"
                     }
                 },
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.0",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+                    "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -24544,9 +25000,9 @@
             }
         },
         "node-fetch-native": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.0.2.tgz",
-            "integrity": "sha512-KIkvH1jl6b3O7es/0ShyCgWLcfXxlBrLBbP3rOr23WArC66IMcU4DeZEeYEOwnopYhawLTn7/y+YtmASe8DFVQ==",
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.1.0.tgz",
+            "integrity": "sha512-nl5goFCig93JZ9FIV8GHT9xpNqXbxQUzkOmKIMKmncsBH9jhg7qKex8hirpymkBFmNQ114chEEG5lS4wgK2I+Q==",
             "dev": true
         },
         "node-forge": {
@@ -24854,9 +25310,9 @@
             }
         },
         "nwsapi": {
-            "version": "2.2.2",
-            "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.2.tgz",
-            "integrity": "sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==",
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.4.tgz",
+            "integrity": "sha512-NHj4rzRo0tQdijE9ZqAx6kYDcoRwYwSYzCA8MY3JzfxlrvEU0jhnhJT9BhqhJs7I/dKcrDm6TyulaRqZPIhN5g==",
             "dev": true
         },
         "object-assign": {
@@ -25023,9 +25479,9 @@
             }
         },
         "ohash": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/ohash/-/ohash-1.0.0.tgz",
-            "integrity": "sha512-kxSyzq6tt+6EE/xCnD1XaFhCCjUNUaz3X30rJp6mnjGLXAAvuPFqohMdv0aScWzajR45C29HyBaXZ8jXBwnh9A==",
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/ohash/-/ohash-1.1.2.tgz",
+            "integrity": "sha512-9CIOSq5945rI045GFtcO3uudyOkYVY1nyfFxVQp+9BRgslr8jPNiSSrsFGg/BNTUFOLqx0P5tng6G32brIPw0w==",
             "dev": true
         },
         "on-finished": {
@@ -25453,11 +25909,11 @@
             "dev": true
         },
         "postcss": {
-            "version": "8.4.21",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-            "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+            "version": "8.4.23",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
+            "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
             "requires": {
-                "nanoid": "^3.3.4",
+                "nanoid": "^3.3.6",
                 "picocolors": "^1.0.0",
                 "source-map-js": "^1.0.2"
             },
@@ -25803,9 +26259,9 @@
             }
         },
         "postcss-selector-parser": {
-            "version": "6.0.11",
-            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
-            "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
+            "version": "6.0.12",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.12.tgz",
+            "integrity": "sha512-NdxGCAZdRrwVI1sy59+Wzrh+pMMHxapGnpfenDVlMEXoOcvt4pGE0JLK9YY2F5dLxcFYA/YbVQKhcGU+FtSYQg==",
             "dev": true,
             "requires": {
                 "cssesc": "^3.0.0",
@@ -26287,14 +26743,14 @@
             }
         },
         "regexp.prototype.flags": {
-            "version": "1.4.3",
-            "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-            "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
+            "integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
             "dev": true,
             "requires": {
                 "call-bind": "^1.0.2",
-                "define-properties": "^1.1.3",
-                "functions-have-names": "^1.2.2"
+                "define-properties": "^1.2.0",
+                "functions-have-names": "^1.2.3"
             }
         },
         "remove-bom-buffer": {
@@ -26681,9 +27137,9 @@
                     "dev": true
                 },
                 "yargs": {
-                    "version": "17.7.1",
-                    "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.1.tgz",
-                    "integrity": "sha512-cwiTb08Xuv5fqF4AovYacTFNxk62th7LKJ6BL9IGUpTJrWoU7/7WdQGTP2SjKf1dUNBGzDd28p/Yfs/GI6JrLw==",
+                    "version": "17.7.2",
+                    "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+                    "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
                     "dev": true,
                     "requires": {
                         "cliui": "^8.0.1",
@@ -26747,9 +27203,9 @@
             }
         },
         "rxjs": {
-            "version": "7.8.0",
-            "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz",
-            "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==",
+            "version": "7.8.1",
+            "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+            "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
             "dev": true,
             "requires": {
                 "tslib": "^2.1.0"
@@ -26783,9 +27239,9 @@
             "dev": true
         },
         "sass": {
-            "version": "1.60.0",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.60.0.tgz",
-            "integrity": "sha512-updbwW6fNb5gGm8qMXzVO7V4sWf7LMXnMly/JEyfbfERbVH46Fn6q02BX7/eHTdKpE7d+oTkMMQpFWNUMfFbgQ==",
+            "version": "1.62.1",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
+            "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
             "dev": true,
             "requires": {
                 "chokidar": ">=3.0.0 <4.0.0",
@@ -27811,9 +28267,9 @@
             }
         },
         "terser": {
-            "version": "5.16.8",
-            "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.8.tgz",
-            "integrity": "sha512-QI5g1E/ef7d+PsDifb+a6nnVgC4F22Bg6T0xrBrz6iloVB4PUkkunp6V8nzoOOZJIzjWVdAGqCdlKlhLq/TbIA==",
+            "version": "5.17.1",
+            "resolved": "https://registry.npmjs.org/terser/-/terser-5.17.1.tgz",
+            "integrity": "sha512-hVl35zClmpisy6oaoKALOpS0rDYLxRFLHhRuDlEGTKey9qHjS1w9GMORjuwIMt70Wan4lwsLYyWDVnWgF+KUEw==",
             "dev": true,
             "requires": {
                 "@jridgewell/source-map": "^0.3.2",
@@ -27856,9 +28312,9 @@
                     }
                 },
                 "schema-utils": {
-                    "version": "3.1.1",
-                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-                    "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+                    "version": "3.1.2",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
+                    "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
                     "dev": true,
                     "peer": true,
                     "requires": {
@@ -27951,9 +28407,9 @@
             "dev": true
         },
         "tinybench": {
-            "version": "2.4.0",
-            "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.4.0.tgz",
-            "integrity": "sha512-iyziEiyFxX4kyxSp+MtY1oCH/lvjH3PxFN8PGCDeqcZWAJ/i+9y+nL85w99PxVzrIvew/GSkSbDYtiGVa85Afg==",
+            "version": "2.5.0",
+            "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.0.tgz",
+            "integrity": "sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==",
             "dev": true
         },
         "tinypool": {
@@ -28137,9 +28593,9 @@
             "dev": true
         },
         "type-fest": {
-            "version": "3.8.0",
-            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.8.0.tgz",
-            "integrity": "sha512-FVNSzGQz9Th+/9R6Lvv7WIAkstylfHN2/JYxkyhhmKFYh9At2DST8t6L6Lref9eYO8PXFTfG9Sg1Agg0K3vq3Q==",
+            "version": "3.9.0",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.9.0.tgz",
+            "integrity": "sha512-hR8JP2e8UiH7SME5JZjsobBlEiatFoxpzCP+R3ZeCo7kAaG1jXQE5X/buLzogM6GJu8le9Y4OcfNuIQX0rZskA==",
             "dev": true
         },
         "typedarray": {
@@ -28217,15 +28673,15 @@
             "dev": true
         },
         "unctx": {
-            "version": "2.1.2",
-            "resolved": "https://registry.npmjs.org/unctx/-/unctx-2.1.2.tgz",
-            "integrity": "sha512-KK18aLRKe3OlbPyHbXAkIWSU3xK8GInomXfA7fzDMGFXQ1crX1UWrCzKesVXeUyHIayHUrnTvf87IPCKMyeKTg==",
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/unctx/-/unctx-2.3.0.tgz",
+            "integrity": "sha512-xs79V1T5JEQ/5aQ3j4ipbQEaReMosMz/ktOdsZMEtKv1PfbdRrKY/PaU0CxdspkX3zEink2keQU4nRzAXgui1A==",
             "dev": true,
             "requires": {
                 "acorn": "^8.8.2",
                 "estree-walker": "^3.0.3",
-                "magic-string": "^0.27.0",
-                "unplugin": "^1.0.1"
+                "magic-string": "^0.30.0",
+                "unplugin": "^1.3.1"
             },
             "dependencies": {
                 "estree-walker": {
@@ -28238,9 +28694,9 @@
                     }
                 },
                 "magic-string": {
-                    "version": "0.27.0",
-                    "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
-                    "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+                    "version": "0.30.0",
+                    "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
+                    "integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
                     "dev": true,
                     "requires": {
                         "@jridgewell/sourcemap-codec": "^1.4.13"
@@ -28281,27 +28737,27 @@
             "dev": true
         },
         "unenv": {
-            "version": "1.2.2",
-            "resolved": "https://registry.npmjs.org/unenv/-/unenv-1.2.2.tgz",
-            "integrity": "sha512-SYqIFLFC4wYtLyxD6RyAfoK/dkgvW85BfNdiYvroyfrL4cyLkoigSldSBBiUTgtxwb4pcE0zexw502DghVWeuA==",
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/unenv/-/unenv-1.4.1.tgz",
+            "integrity": "sha512-DuFZUDfaBC92zy3fW7QqKTLdYJIPkpwTN0yGZtaxnpOI7HvIfl41NYh9NVv4zcqhT8CGXJ1ELpvO2tecaB6NfA==",
             "dev": true,
             "requires": {
                 "defu": "^6.1.2",
                 "mime": "^3.0.0",
-                "node-fetch-native": "^1.0.2",
+                "node-fetch-native": "^1.1.0",
                 "pathe": "^1.1.0"
             }
         },
         "unhead": {
-            "version": "1.1.25",
-            "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.1.25.tgz",
-            "integrity": "sha512-KtTBgtQjxICoOjA4dyxJfj5fYoYJeYFUt/J8ulaTzbvTsXM9K+ztYjI65nf2CPYYXRCRz/iEt8trqcsGlsB5TQ==",
+            "version": "1.1.26",
+            "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.1.26.tgz",
+            "integrity": "sha512-MshcPoPLXSGRgYtczddGvMgLUISTbt2pxihqD5kZVXKmY2FZLj1OQIY111aX45Xq47XJxjvYavvoyeUFroKQcg==",
             "dev": true,
             "requires": {
-                "@unhead/dom": "1.1.25",
-                "@unhead/schema": "1.1.25",
-                "@unhead/shared": "1.1.25",
-                "hookable": "^5.5.1"
+                "@unhead/dom": "1.1.26",
+                "@unhead/schema": "1.1.26",
+                "@unhead/shared": "1.1.26",
+                "hookable": "^5.5.3"
             }
         },
         "unimport": {
@@ -28530,20 +28986,20 @@
             }
         },
         "unstorage": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/unstorage/-/unstorage-1.4.1.tgz",
-            "integrity": "sha512-ETLczXBd7sjJZuA3oIzaYwhMShiGlo7cGx01Ww23x2ehlk6WiRR1YsmjDBipoiGorq8pX1RRoMQFp/n3me7QOg==",
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/unstorage/-/unstorage-1.5.0.tgz",
+            "integrity": "sha512-bL6sHwTKp2ns0SAGNHAbLP9LwmtPGMtaOVrHRA4V8ngQMHQR18q0uRgkeGB4qF84XSDu/o8ebv54p/HBJESXFA==",
             "dev": true,
             "requires": {
                 "anymatch": "^3.1.3",
                 "chokidar": "^3.5.3",
                 "destr": "^1.2.2",
-                "h3": "^1.5.0",
-                "ioredis": "^5.3.1",
-                "listhen": "^1.0.3",
-                "lru-cache": "^7.18.3",
+                "h3": "^1.6.4",
+                "ioredis": "^5.3.2",
+                "listhen": "^1.0.4",
+                "lru-cache": "^9.0.3",
                 "mri": "^1.2.0",
-                "node-fetch-native": "^1.0.2",
+                "node-fetch-native": "^1.1.0",
                 "ofetch": "^1.0.1",
                 "ufo": "^1.1.1"
             },
@@ -28630,9 +29086,9 @@
                     "dev": true
                 },
                 "lru-cache": {
-                    "version": "7.18.3",
-                    "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
-                    "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+                    "version": "9.1.1",
+                    "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-9.1.1.tgz",
+                    "integrity": "sha512-65/Jky17UwSb0BuB9V+MyDpsOtXKmYwzhyl+cOa9XUiI4uV2Ouy/2voFP3+al0BjZbJgMBD8FojMpAf+Z+qn4A==",
                     "dev": true
                 },
                 "readdirp": {
@@ -28677,9 +29133,9 @@
             "dev": true
         },
         "update-browserslist-db": {
-            "version": "1.0.10",
-            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
-            "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
+            "version": "1.0.11",
+            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
+            "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
             "dev": true,
             "requires": {
                 "escalade": "^3.1.1",
@@ -28749,9 +29205,9 @@
             "dev": true
         },
         "vee-validate": {
-            "version": "4.8.4",
-            "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.8.4.tgz",
-            "integrity": "sha512-wlLBy50t4EMEin5oqxS2mxpqW02TkIsk0H3LcivLztNJKKLW17hpPSQtQnn8wjDLoWWZ/CVOfep6aw77aCAavg==",
+            "version": "4.8.6",
+            "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.8.6.tgz",
+            "integrity": "sha512-d8SS1mfFn3qv/QRwy9BQ/0ZmoxQT37zG7zERUSK5NvmI7gx7IbQxOIXtyYVEPaDJNI4QWopBe48q91pAQqwetA==",
             "requires": {
                 "@vue/devtools-api": "^6.5.0"
             }
@@ -28839,16 +29295,15 @@
             }
         },
         "vite": {
-            "version": "4.2.1",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-4.2.1.tgz",
-            "integrity": "sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==",
+            "version": "4.3.4",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.4.tgz",
+            "integrity": "sha512-f90aqGBoxSFxWph2b39ae2uHAxm5jFBBdnfueNxZAT1FTpM13ccFQExCaKbR2xFW5atowjleRniQ7onjJ22QEg==",
             "dev": true,
             "requires": {
                 "esbuild": "^0.17.5",
                 "fsevents": "~2.3.2",
-                "postcss": "^8.4.21",
-                "resolve": "^1.22.1",
-                "rollup": "^3.18.0"
+                "postcss": "^8.4.23",
+                "rollup": "^3.21.0"
             },
             "dependencies": {
                 "fsevents": {
@@ -28859,9 +29314,9 @@
                     "optional": true
                 },
                 "rollup": {
-                    "version": "3.20.2",
-                    "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz",
-                    "integrity": "sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==",
+                    "version": "3.21.3",
+                    "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.3.tgz",
+                    "integrity": "sha512-VnPfEG51nIv2xPLnZaekkuN06q9ZbnyDcLkaBdJa/W7UddyhOfMP2yOPziYQfeY7k++fZM8FdQIummFN5y14kA==",
                     "dev": true,
                     "requires": {
                         "fsevents": "~2.3.2"
@@ -29145,9 +29600,9 @@
                     }
                 },
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.0",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+                    "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -29253,9 +29708,9 @@
             },
             "dependencies": {
                 "eslint-scope": {
-                    "version": "7.1.1",
-                    "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
-                    "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+                    "version": "7.2.0",
+                    "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
+                    "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
                     "dev": true,
                     "requires": {
                         "esrecurse": "^4.3.0",
@@ -29284,9 +29739,9 @@
                     }
                 },
                 "semver": {
-                    "version": "7.3.8",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-                    "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+                    "version": "7.5.0",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
+                    "integrity": "sha512-+XC0AD/R7Q2mPSRuy2Id0+CGTZ98+8f+KvwirxOKIEyid+XSx6HbC63p+O4IndTHuX5Z+JxQ0TghCkO5Cg/2HA==",
                     "dev": true,
                     "requires": {
                         "lru-cache": "^6.0.0"
@@ -29360,23 +29815,23 @@
             "dev": true
         },
         "webpack": {
-            "version": "5.78.0",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.78.0.tgz",
-            "integrity": "sha512-gT5DP72KInmE/3azEaQrISjTvLYlSM0j1Ezhht/KLVkrqtv10JoP/RXhwmX/frrutOPuSq3o5Vq0ehR/4Vmd1g==",
+            "version": "5.81.0",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.81.0.tgz",
+            "integrity": "sha512-AAjaJ9S4hYCVODKLQTgG5p5e11hiMawBwV2v8MYLE0C/6UAGLuAF4n1qa9GOwdxnicaP+5k6M5HrLmD4+gIB8Q==",
             "dev": true,
             "peer": true,
             "requires": {
                 "@types/eslint-scope": "^3.7.3",
-                "@types/estree": "^0.0.51",
-                "@webassemblyjs/ast": "1.11.1",
-                "@webassemblyjs/wasm-edit": "1.11.1",
-                "@webassemblyjs/wasm-parser": "1.11.1",
+                "@types/estree": "^1.0.0",
+                "@webassemblyjs/ast": "^1.11.5",
+                "@webassemblyjs/wasm-edit": "^1.11.5",
+                "@webassemblyjs/wasm-parser": "^1.11.5",
                 "acorn": "^8.7.1",
                 "acorn-import-assertions": "^1.7.6",
                 "browserslist": "^4.14.5",
                 "chrome-trace-event": "^1.0.2",
-                "enhanced-resolve": "^5.10.0",
-                "es-module-lexer": "^0.9.0",
+                "enhanced-resolve": "^5.13.0",
+                "es-module-lexer": "^1.2.1",
                 "eslint-scope": "5.1.1",
                 "events": "^3.2.0",
                 "glob-to-regexp": "^0.4.1",
@@ -29385,24 +29840,17 @@
                 "loader-runner": "^4.2.0",
                 "mime-types": "^2.1.27",
                 "neo-async": "^2.6.2",
-                "schema-utils": "^3.1.0",
+                "schema-utils": "^3.1.2",
                 "tapable": "^2.1.1",
-                "terser-webpack-plugin": "^5.1.3",
+                "terser-webpack-plugin": "^5.3.7",
                 "watchpack": "^2.4.0",
                 "webpack-sources": "^3.2.3"
             },
             "dependencies": {
-                "@types/estree": {
-                    "version": "0.0.51",
-                    "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
-                    "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
-                    "dev": true,
-                    "peer": true
-                },
                 "schema-utils": {
-                    "version": "3.1.1",
-                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-                    "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+                    "version": "3.1.2",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.2.tgz",
+                    "integrity": "sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==",
                     "dev": true,
                     "peer": true,
                     "requires": {
diff --git a/package.json b/package.json
index dac7f603c..bc688a28d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "primevue",
-    "version": "3.27.0-SNAPSHOT",
+    "version": "3.29.0-SNAPSHOT",
     "homepage": "https://primevue.org/",
     "repository": {
         "type": "git",
@@ -15,11 +15,12 @@
         "postinstall": "nuxt prepare",
         "build:lib": "npm run build:check && npm run build:package",
         "build:package": "NODE_ENV=production rollup -c && node build-meta && node api-generator/build-api && gulp build-styles",
-        "build:check": "npm run format:check && npm run security:check",
+        "build:check": "npm run format:check && npm run security:check && npm run test:unit",
         "security:check": "npm audit --production --audit-level high",
         "format": "prettier --write \"**/*.{js,vue,d.ts}\"",
         "format:check": "prettier --check \"**/*.{js,vue,d.ts}\"",
-        "test:unit": "vitest",
+        "test:unit": "vitest run",
+        "test:unit:watch": "vitest watch",
         "test:coverage": "vitest run --coverage",
         "lint": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
         "lint:fix": "eslint --fix --ext \".js,.vue\" --ignore-path .gitignore .",
diff --git a/pages/accordion/index.vue b/pages/accordion/index.vue
index fc5b85e7a..cdf8917a0 100755
--- a/pages/accordion/index.vue
+++ b/pages/accordion/index.vue
@@ -7,11 +7,13 @@ import AccessibilityDoc from '@/doc/accordion/AccessibilityDoc';
 import BasicDoc from '@/doc/accordion/BasicDoc';
 import ControlledDoc from '@/doc/accordion/ControlledDoc.vue';
 import Disabled from '@/doc/accordion/DisabledDoc.vue';
+import DynamicDoc from '@/doc/accordion/DynamicDoc';
 import ImportDoc from '@/doc/accordion/ImportDoc';
 import MultipleDoc from '@/doc/accordion/MultipleDoc.vue';
 import StyleDoc from '@/doc/accordion/StyleDoc';
 import TemplateDoc from '@/doc/accordion/TemplateDoc.vue';
 import PTComponent from '@/doc/accordion/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -26,6 +28,11 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
+                {
+                    id: 'dynamic',
+                    label: 'Dynamic',
+                    component: DynamicDoc
+                },
                 {
                     id: 'multiple',
                     label: 'Multiple',
diff --git a/pages/autocomplete/index.vue b/pages/autocomplete/index.vue
index 914ac4920..c15ea311c 100755
--- a/pages/autocomplete/index.vue
+++ b/pages/autocomplete/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <DocComponent title="Vue AutoComplete Component" header="AutoComplete" description="AutoComplete is an input component that provides real-time suggestions when being typed." :componentDocs="docs" :apiDocs="['AutoComplete']" />
+    <DocComponent
+        title="Vue AutoComplete Component"
+        header="AutoComplete"
+        description="AutoComplete is an input component that provides real-time suggestions when being typed."
+        :componentDocs="docs"
+        :apiDocs="['AutoComplete']"
+        :ptTabComponent="ptComponent"
+    />
 </template>
 
 <script>
@@ -9,7 +16,6 @@ import DisabledDoc from '@/doc/autocomplete/DisabledDoc';
 import DropdownDoc from '@/doc/autocomplete/DropdownDoc';
 import FloatLabelDoc from '@/doc/autocomplete/FloatLabelDoc';
 import ForceSelectionDoc from '@/doc/autocomplete/ForceSelectionDoc';
-import VeeValidateDoc from '@/doc/autocomplete/form/VeeValidateDoc.vue';
 import GroupDoc from '@/doc/autocomplete/GroupDoc';
 import ImportDoc from '@/doc/autocomplete/ImportDoc';
 import InvalidDoc from '@/doc/autocomplete/InvalidDoc';
@@ -18,6 +24,8 @@ import ObjectsDoc from '@/doc/autocomplete/ObjectsDoc';
 import StyleDoc from '@/doc/autocomplete/StyleDoc';
 import TemplateDoc from '@/doc/autocomplete/TemplateDoc';
 import VirtualScrollDoc from '@/doc/autocomplete/VirtualScrollDoc';
+import VeeValidateDoc from '@/doc/autocomplete/form/VeeValidateDoc.vue';
+import PTComponent from '@/doc/autocomplete/pt/index.vue';
 
 export default {
     data() {
@@ -105,7 +113,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/avatar/index.vue b/pages/avatar/index.vue
index 7a9cfc68c..f65712300 100644
--- a/pages/avatar/index.vue
+++ b/pages/avatar/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Avatar Component" header="Avatar" description="Avatar represents people using icons, labels and images." :componentDocs="docs" :apiDocs="['Avatar', 'AvatarGroup']" />
+    <DocComponent title="Vue Avatar Component" header="Avatar" description="Avatar represents people using icons, labels and images." :componentDocs="docs" :apiDocs="['Avatar', 'AvatarGroup']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -11,6 +11,7 @@ import ImportDoc from '@/doc/avatar/ImportDoc';
 import LabelDoc from '@/doc/avatar/LabelDoc';
 import StylingAvatarDoc from '@/doc/avatar/StylingAvatarDoc';
 import StylingAvatarGroupDoc from '@/doc/avatar/StylingAvatarGroupDoc';
+import PTComponent from '@/doc/avatar/pt/index.vue';
 
 export default {
     data() {
@@ -56,7 +57,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/badge/index.vue b/pages/badge/index.vue
index 6de78e1bf..f9065b43c 100644
--- a/pages/badge/index.vue
+++ b/pages/badge/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Badge Component" header="Badge" description="Badge is a small status indicator for another element." :componentDocs="docs" :apiDocs="['Badge', 'BadgeDirective']" />
+    <DocComponent title="Vue Badge Component" header="Badge" description="Badge is a small status indicator for another element." :componentDocs="docs" :apiDocs="['Badge', 'BadgeDirective']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -11,6 +11,7 @@ import PositionDoc from '@/doc/badge/PositionDoc.vue';
 import SeverityDoc from '@/doc/badge/SeverityDoc.vue';
 import SizeDoc from '@/doc/badge/SizeDoc.vue';
 import StyleDoc from '@/doc/badge/StyleDoc.vue';
+import PTComponent from '@/doc/badge/pt/index.vue';
 
 export default {
     data() {
@@ -56,7 +57,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/blockui/index.vue b/pages/blockui/index.vue
index ffc124664..5306c1b2e 100755
--- a/pages/blockui/index.vue
+++ b/pages/blockui/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue BlockUI Component" header="BlockUI" description="BlockUI can either block other components or the whole page." :componentDocs="docs" :apiDocs="['BlockUI']" />
+    <DocComponent title="Vue BlockUI Component" header="BlockUI" description="BlockUI can either block other components or the whole page." :componentDocs="docs" :apiDocs="['BlockUI']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -8,6 +8,7 @@ import BasicDoc from '@/doc/blockui/BasicDoc.vue';
 import DocumentDoc from '@/doc/blockui/DocumentDoc.vue';
 import ImportDoc from '@/doc/blockui/ImportDoc.vue';
 import StyleDoc from '@/doc/blockui/StyleDoc.vue';
+import PTComponent from '@/doc/blockui/pt/index.vue';
 
 export default {
     data() {
@@ -38,7 +39,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/breadcrumb/index.vue b/pages/breadcrumb/index.vue
index 8066ec4b1..6bbef4993 100755
--- a/pages/breadcrumb/index.vue
+++ b/pages/breadcrumb/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Breadcrumb Component" header="Breadcrumb" description="Breadcrumb provides contextual information about page hierarchy." :componentDocs="docs" :apiDocs="['Breadcrumb', 'MenuItem']" />
+    <DocComponent title="Vue Breadcrumb Component" header="Breadcrumb" description="Breadcrumb provides contextual information about page hierarchy." :componentDocs="docs" :apiDocs="['Breadcrumb', 'MenuItem']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -8,6 +8,7 @@ import BasicDoc from '@/doc/breadcrumb/BasicDoc';
 import ImportDoc from '@/doc/breadcrumb/ImportDoc';
 import StyleDoc from '@/doc/breadcrumb/StyleDoc';
 import TemplateDoc from '@/doc/breadcrumb/TemplateDoc';
+import PTComponent from '@/doc/breadcrumb/pt/index.vue';
 
 export default {
     data() {
@@ -38,7 +39,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/button/index.vue b/pages/button/index.vue
index adfa5597d..e800ff467 100755
--- a/pages/button/index.vue
+++ b/pages/button/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Button Component" header="Button" description="Button is an extension to standard input element with icons and theming." :componentDocs="docs" :apiDocs="['Button']" />
+    <DocComponent title="Vue Button Component" header="Button" description="Button is an extension to standard input element with icons and theming." :componentDocs="docs" :apiDocs="['Button']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -22,6 +22,8 @@ import SizesDoc from '@/doc/button/SizesDoc.vue';
 import StyleDoc from '@/doc/button/StyleDoc.vue';
 import TemplateDoc from '@/doc/button/TemplateDoc.vue';
 import TextDoc from '@/doc/button/TextDoc.vue';
+import PTComponent from '@/doc/button/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -121,7 +123,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/calendar/index.vue b/pages/calendar/index.vue
index 83f5fd70f..f56c87dbb 100755
--- a/pages/calendar/index.vue
+++ b/pages/calendar/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Calendar Component" header="Calendar" description="Calendar, also known as DatePicker, is a form component to work with dates." :componentDocs="docs" :apiDocs="['Calendar']" />
+    <DocComponent title="Vue Calendar Component" header="Calendar" description="Calendar, also known as DatePicker, is a form component to work with dates." :componentDocs="docs" :apiDocs="['Calendar']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -9,7 +9,6 @@ import ButtonBarDoc from '@/doc/calendar/ButtonBarDoc';
 import DateTemplateDoc from '@/doc/calendar/DateTemplateDoc';
 import DisabledDoc from '@/doc/calendar/DisabledDoc';
 import FloatLabelDoc from '@/doc/calendar/FloatLabelDoc';
-import VeeValidateDoc from '@/doc/calendar/form/VeeValidateDoc.vue';
 import FormatDoc from '@/doc/calendar/FormatDoc';
 import IconDoc from '@/doc/calendar/IconDoc';
 import ImportDoc from '@/doc/calendar/ImportDoc';
@@ -25,6 +24,8 @@ import StyleDoc from '@/doc/calendar/StyleDoc';
 import TimeDoc from '@/doc/calendar/TimeDoc';
 import TouchUIDoc from '@/doc/calendar/TouchUIDoc';
 import YearPickerDoc from '@/doc/calendar/YearPickerDoc';
+import VeeValidateDoc from '@/doc/calendar/form/VeeValidateDoc.vue';
+import PTComponent from '@/doc/calendar/pt/index.vue';
 
 export default {
     data() {
@@ -147,7 +148,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/card/index.vue b/pages/card/index.vue
index 180ee67ed..b65bf0fff 100755
--- a/pages/card/index.vue
+++ b/pages/card/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Card Component" header="Card" description="Card is a flexible container component." :componentDocs="docs" :apiDocs="['Card']" />
+    <DocComponent title="Vue Card Component" header="Card" description="Card is a flexible container component." :componentDocs="docs" :apiDocs="['Card']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -8,6 +8,7 @@ import AdvancedDoc from '@/doc/card/AdvancedDoc';
 import BasicDoc from '@/doc/card/BasicDoc';
 import ImportDoc from '@/doc/card/ImportDoc';
 import StyleDoc from '@/doc/card/StyleDoc';
+import PTComponent from '@/doc/card/pt/index.vue';
 
 export default {
     data() {
@@ -38,7 +39,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/carousel/index.vue b/pages/carousel/index.vue
index b9fa6426a..3ba5fd421 100755
--- a/pages/carousel/index.vue
+++ b/pages/carousel/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Carousel Component" header="Carousel" description="Carousel is a content slider featuring various customization options." :componentDocs="docs" :apiDocs="['Carousel']" />
+    <DocComponent title="Vue Carousel Component" header="Carousel" description="Carousel is a content slider featuring various customization options." :componentDocs="docs" :apiDocs="['Carousel']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -11,6 +11,8 @@ import NumScrollDoc from '@/doc/carousel/NumScrollDoc';
 import ResponsiveDoc from '@/doc/carousel/ResponsiveDoc';
 import StyleDoc from '@/doc/carousel/StyleDoc';
 import VerticalDoc from '@/doc/carousel/VerticalDoc';
+import PTComponent from '@/doc/carousel/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -55,7 +57,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/cascadeselect/index.vue b/pages/cascadeselect/index.vue
index 4815abf33..6dd6bf003 100644
--- a/pages/cascadeselect/index.vue
+++ b/pages/cascadeselect/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <DocComponent title="Vue CascadeSelect Component" header="CascadeSelect" description="CascadeSelect is a form component to select a value from a nested structure of options." :componentDocs="docs" :apiDocs="['CascadeSelect']" />
+    <DocComponent
+        title="Vue CascadeSelect Component"
+        header="CascadeSelect"
+        description="CascadeSelect is a form component to select a value from a nested structure of options."
+        :componentDocs="docs"
+        :apiDocs="['CascadeSelect']"
+        :ptTabComponent="ptComponent"
+    />
 </template>
 
 <script>
@@ -7,12 +14,13 @@ import AccessibilityDoc from '@/doc/cascadeselect/AccessibilityDoc';
 import BasicDoc from '@/doc/cascadeselect/BasicDoc';
 import DisabledDoc from '@/doc/cascadeselect/DisabledDoc';
 import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc';
-import VeeValidateDoc from '@/doc/cascadeselect/form/VeeValidateDoc';
 import ImportDoc from '@/doc/cascadeselect/ImportDoc';
 import InvalidDoc from '@/doc/cascadeselect/InvalidDoc';
 import LoadingStateDoc from '@/doc/cascadeselect/LoadingStateDoc';
 import StyleDoc from '@/doc/cascadeselect/StyleDoc';
 import TemplateDoc from '@/doc/cascadeselect/TemplateDoc';
+import VeeValidateDoc from '@/doc/cascadeselect/form/VeeValidateDoc';
+import PTComponent from '@/doc/cascadeselect/pt/index.vue';
 
 export default {
     data() {
@@ -75,7 +83,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/chart/index.vue b/pages/chart/index.vue
index 10bf6c36a..f466f1c12 100755
--- a/pages/chart/index.vue
+++ b/pages/chart/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Chart Component" header="Chart" description="Chart components are based on Chart.js, an open source HTML5 based charting library." :componentDocs="docs" :apiDocs="['Chart']" />
+    <DocComponent title="Vue Chart Component" header="Chart" description="Chart components are based on Chart.js, an open source HTML5 based charting library." :componentDocs="docs" :apiDocs="['Chart']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -19,6 +19,7 @@ import RadarDoc from '@/doc/chart/RadarDoc';
 import StackedBarDoc from '@/doc/chart/StackedBarDoc';
 import StyleDoc from '@/doc/chart/StyleDoc';
 import VerticalBarDoc from '@/doc/chart/VerticalBarDoc';
+import PTComponent from '@/doc/chart/pt/index.vue';
 
 export default {
     data() {
@@ -104,7 +105,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/checkbox/index.vue b/pages/checkbox/index.vue
index 627bf975c..893e2f7b7 100755
--- a/pages/checkbox/index.vue
+++ b/pages/checkbox/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Checkbox Component" header="Checkbox" description="Checkbox is an extension to standard checkbox element with theming." :componentDocs="docs" :apiDocs="['Checkbox']" />
+    <DocComponent title="Vue Checkbox Component" header="Checkbox" description="Checkbox is an extension to standard checkbox element with theming." :componentDocs="docs" :apiDocs="['Checkbox']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -7,11 +7,12 @@ import AccessibilityDoc from '@/doc/checkbox/AccessibilityDoc';
 import BasicDoc from '@/doc/checkbox/BasicDoc';
 import DisabledDoc from '@/doc/checkbox/DisabledDoc';
 import DynamicDoc from '@/doc/checkbox/DynamicDoc';
-import VeeValidateDoc from '@/doc/checkbox/form/VeeValidateDoc';
 import GroupDoc from '@/doc/checkbox/GroupDoc';
 import ImportDoc from '@/doc/checkbox/ImportDoc';
 import InvalidDoc from '@/doc/checkbox/InvalidDoc';
 import StyleDoc from '@/doc/checkbox/StyleDoc';
+import VeeValidateDoc from '@/doc/checkbox/form/VeeValidateDoc';
+import PTComponent from '@/doc/checkbox/pt/index.vue';
 
 export default {
     data() {
@@ -69,7 +70,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/chip/index.vue b/pages/chip/index.vue
index ecbcb4bf0..c9dd9b2ad 100644
--- a/pages/chip/index.vue
+++ b/pages/chip/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." :componentDocs="docs" :apiDocs="['Chip']" />
+    <DocComponent title="Vue Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." :componentDocs="docs" :apiDocs="['Chip']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -10,6 +10,7 @@ import ImageDoc from '@/doc/chip/ImageDoc';
 import ImportDoc from '@/doc/chip/ImportDoc';
 import StyleDoc from '@/doc/chip/StyleDoc';
 import TemplateDoc from '@/doc/chip/TemplateDoc';
+import PTComponent from '@/doc/chip/pt/index.vue';
 
 export default {
     data() {
@@ -50,7 +51,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/chips/index.vue b/pages/chips/index.vue
index 1e0bf469f..d23358caf 100755
--- a/pages/chips/index.vue
+++ b/pages/chips/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Chips Component" header="Chips" description="Chips is used to enter multiple values on an input field." :componentDocs="docs" :apiDocs="['Chips']" />
+    <DocComponent title="Vue Chips Component" header="Chips" description="Chips is used to enter multiple values on an input field." :componentDocs="docs" :apiDocs="['Chips']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -7,12 +7,13 @@ import AccessibilityDoc from '@/doc/chips/AccessibilityDoc';
 import BasicDoc from '@/doc/chips/BasicDoc';
 import DisabledDoc from '@/doc/chips/DisabledDoc';
 import FloatLabelDoc from '@/doc/chips/FloatLabelDoc';
-import VeeValidateDoc from '@/doc/chips/form/VeeValidateDoc';
 import ImportDoc from '@/doc/chips/ImportDoc';
 import InvalidDoc from '@/doc/chips/InvalidDoc';
 import SeparatorDoc from '@/doc/chips/SeparatorDoc';
 import StyleDoc from '@/doc/chips/StyleDoc';
 import TemplateDoc from '@/doc/chips/TemplateDoc';
+import VeeValidateDoc from '@/doc/chips/form/VeeValidateDoc';
+import PTComponent from '@/doc/chips/pt/index.vue';
 
 export default {
     data() {
@@ -75,7 +76,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/colorpicker/index.vue b/pages/colorpicker/index.vue
index 5b098bcff..4ea7b84dd 100755
--- a/pages/colorpicker/index.vue
+++ b/pages/colorpicker/index.vue
@@ -1,16 +1,17 @@
 <template>
-    <DocComponent title="Vue ColorPicker Component" header="ColorPicker" description="ColorPicker is an input component to select a color." :componentDocs="docs" :apiDocs="['ColorPicker']" />
+    <DocComponent title="Vue ColorPicker Component" header="ColorPicker" description="ColorPicker is an input component to select a color." :componentDocs="docs" :apiDocs="['ColorPicker']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/colorpicker/AccessibilityDoc';
 import BasicDoc from '@/doc/colorpicker/BasicDoc';
 import DisabledDoc from '@/doc/colorpicker/DisabledDoc';
-import VeeValidateDoc from '@/doc/colorpicker/form/VeeValidateDoc';
 import FormatDoc from '@/doc/colorpicker/FormatDoc';
 import ImportDoc from '@/doc/colorpicker/ImportDoc';
 import InlineDoc from '@/doc/colorpicker/InlineDoc';
 import StyleDoc from '@/doc/colorpicker/StyleDoc';
+import VeeValidateDoc from '@/doc/colorpicker/form/VeeValidateDoc';
+import PTComponent from '@/doc/colorpicker/pt/index.vue';
 
 export default {
     data() {
@@ -63,7 +64,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/confirmdialog/index.vue b/pages/confirmdialog/index.vue
index af257a33e..c375443b3 100644
--- a/pages/confirmdialog/index.vue
+++ b/pages/confirmdialog/index.vue
@@ -5,6 +5,7 @@
         description="ConfirmDialog uses a Dialog UI that is integrated with the Confirmation API."
         :componentDocs="docs"
         :apiDocs="['ConfirmDialog', 'ConfirmationService-UseConfirm', 'ConfirmationOptions']"
+        :ptTabComponent="ptComponent"
     />
 </template>
 
@@ -16,6 +17,8 @@ import ImportDoc from '@/doc/confirmdialog/ImportDoc.vue';
 import PositionDoc from '@/doc/confirmdialog/PositionDoc.vue';
 import StyleDoc from '@/doc/confirmdialog/StyleDoc.vue';
 import TemplateDoc from '@/doc/confirmdialog/TemplateDoc.vue';
+import PTComponent from '@/doc/confirmdialog/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -55,7 +58,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/confirmpopup/index.vue b/pages/confirmpopup/index.vue
index da6ce48f1..1d061ea34 100644
--- a/pages/confirmpopup/index.vue
+++ b/pages/confirmpopup/index.vue
@@ -5,6 +5,7 @@
         description="ConfirmPopup displays a confirmation overlay displayed relatively to its target."
         :componentDocs="docs"
         :apiDocs="['ConfirmPopup', 'ConfirmationService-UseConfirm', 'ConfirmationOptions']"
+        :ptTabComponent="ptComponent"
     />
 </template>
 
@@ -15,6 +16,7 @@ import ConfirmationServiceDoc from '@/doc/confirmpopup/ConfirmationServiceDoc.vu
 import ImportDoc from '@/doc/confirmpopup/ImportDoc.vue';
 import StyleDoc from '@/doc/confirmpopup/StyleDoc.vue';
 import TemplateDoc from '@/doc/confirmpopup/TemplateDoc.vue';
+import PTComponent from '@/doc/confirmpopup/pt/index.vue';
 
 export default {
     data() {
@@ -50,7 +52,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/contextmenu/index.vue b/pages/contextmenu/index.vue
index 063cee6b6..09986bdfa 100755
--- a/pages/contextmenu/index.vue
+++ b/pages/contextmenu/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue ContextMenu Component" header="ContextMenu" description="ContextMenu displays an overlay menu on right click of its target." :componentDocs="docs" :apiDocs="['ContextMenu', 'MenuItem']" />
+    <DocComponent title="Vue ContextMenu Component" header="ContextMenu" description="ContextMenu displays an overlay menu on right click of its target." :componentDocs="docs" :apiDocs="['ContextMenu', 'MenuItem']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -8,6 +8,7 @@ import BasicDoc from '@/doc/contextmenu/BasicDoc';
 import DocumentDoc from '@/doc/contextmenu/DocumentDoc';
 import ImportDoc from '@/doc/contextmenu/ImportDoc';
 import StyleDoc from '@/doc/contextmenu/StyleDoc';
+import PTComponent from '@/doc/contextmenu/pt/index.vue';
 
 export default {
     data() {
@@ -38,7 +39,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/customicons/index.vue b/pages/customicons/index.vue
new file mode 100644
index 000000000..2b3bbf52b
--- /dev/null
+++ b/pages/customicons/index.vue
@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <Head>
+            <Title>Vue Icon Library - PrimeVue</Title>
+            <Meta name="description" content="PrimeVue components can be used with any icon library using the templating features." />
+        </Head>
+
+        <div class="doc">
+            <div class="doc-main">
+                <div class="doc-intro">
+                    <h1>Custom Icons</h1>
+                    <p>PrimeVue components can be used with any icon library using the templating features.</p>
+                </div>
+                <DocSections :docs="docs" />
+            </div>
+            <DocSectionNav :docs="docs" />
+        </div>
+    </div>
+</template>
+
+<script>
+import FontAwesomeDoc from '@/doc/customicons/FontAwesomeDoc.vue';
+import ImageDoc from '@/doc/customicons/ImageDoc.vue';
+import MaterialDoc from '@/doc/customicons/MaterialDoc.vue';
+import SVGDoc from '@/doc/customicons/SVGDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'material',
+                    label: 'Material',
+                    component: MaterialDoc
+                },
+                {
+                    id: 'fontawesome',
+                    label: 'FontAwesome',
+                    component: FontAwesomeDoc
+                },
+                {
+                    id: 'svg',
+                    label: 'SVG',
+                    component: SVGDoc
+                },
+                {
+                    id: 'image',
+                    label: 'Image',
+                    component: ImageDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/pages/datatable/index.vue b/pages/datatable/index.vue
index afc960fa4..3b450d371 100755
--- a/pages/datatable/index.vue
+++ b/pages/datatable/index.vue
@@ -1,30 +1,36 @@
 <template>
-    <DocComponent title="Vue Table Component" header="DataTable" description="DataTable displays data in tabular format." :componentDocs="docs" :apiDocs="['DataTable', 'Column', 'ColumnGroup', 'Row']" />
+    <DocComponent title="Vue Table Component" header="DataTable" description="DataTable displays data in tabular format." :componentDocs="docs" :apiDocs="['DataTable', 'Column', 'ColumnGroup', 'Row']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/datatable/AccessibilityDoc';
 import BasicDoc from '@/doc/datatable/BasicDoc';
-import ExpandModeDoc from '@/doc/datatable/colresize/ExpandModeDoc';
-import FitModeDoc from '@/doc/datatable/colresize/FitModeDoc';
 import ColumnGroupDoc from '@/doc/datatable/ColumnGroupDoc';
 import ColumnToggleDoc from '@/doc/datatable/ColumnToggleDoc';
 import ConditionalStyleDoc from '@/doc/datatable/ConditionalStyleDoc';
 import ContextMenuDoc from '@/doc/datatable/ContextMenuDoc';
 import DynamicColumnsDoc from '@/doc/datatable/DynamicColumnsDoc';
-import CellEditDoc from '@/doc/datatable/edit/CellEditDoc';
-import FilterSortEditDoc from '@/doc/datatable/edit/FilterSortEditDoc';
-import RowEditDoc from '@/doc/datatable/edit/RowEditDoc';
 import ExportDoc from '@/doc/datatable/ExportDoc';
-import AdvancedFilterDoc from '@/doc/datatable/filter/AdvancedFilterDoc';
-import BasicFilterDoc from '@/doc/datatable/filter/BasicFilterDoc';
 import GridLinesDoc from '@/doc/datatable/GridLinesDoc';
 import ImportDoc from '@/doc/datatable/ImportDoc';
 import LazyLoadDoc from '@/doc/datatable/LazyLoadDoc';
-import PaginatorBasicDoc from '@/doc/datatable/paginator/PaginatorBasicDoc';
-import PaginatorTemplateDoc from '@/doc/datatable/paginator/PaginatorTemplateDoc';
 import ReorderDoc from '@/doc/datatable/ReorderDoc';
 import RowExpansionDoc from '@/doc/datatable/RowExpansionDoc';
+import SizeDoc from '@/doc/datatable/SizeDoc';
+import StatefulDoc from '@/doc/datatable/StatefulDoc';
+import StripedRowsDoc from '@/doc/datatable/StripedRowsDoc';
+import StyleDoc from '@/doc/datatable/StyleDoc';
+import TemplateDoc from '@/doc/datatable/TemplateDoc';
+import ExpandModeDoc from '@/doc/datatable/colresize/ExpandModeDoc';
+import FitModeDoc from '@/doc/datatable/colresize/FitModeDoc';
+import CellEditDoc from '@/doc/datatable/edit/CellEditDoc';
+import FilterSortEditDoc from '@/doc/datatable/edit/FilterSortEditDoc';
+import RowEditDoc from '@/doc/datatable/edit/RowEditDoc';
+import AdvancedFilterDoc from '@/doc/datatable/filter/AdvancedFilterDoc';
+import BasicFilterDoc from '@/doc/datatable/filter/BasicFilterDoc';
+import PaginatorBasicDoc from '@/doc/datatable/paginator/PaginatorBasicDoc';
+import PaginatorTemplateDoc from '@/doc/datatable/paginator/PaginatorTemplateDoc';
+import PTComponent from '@/doc/datatable/pt/index.vue';
 import ExpandableRowGroupDoc from '@/doc/datatable/rowgroup/ExpandableRowGroupDoc';
 import RowSpanRowGroupDoc from '@/doc/datatable/rowgroup/RowSpanRowGroupDoc';
 import SubHeaderRowGroupDoc from '@/doc/datatable/rowgroup/SubHeaderRowGroupDoc';
@@ -40,15 +46,10 @@ import FrozenColumnsDoc from '@/doc/datatable/scroll/FrozenColumnsDoc';
 import FrozenRowsDoc from '@/doc/datatable/scroll/FrozenRowsDoc';
 import HorizontalScrollDoc from '@/doc/datatable/scroll/HorizontalScrollDoc';
 import VerticalScrollDoc from '@/doc/datatable/scroll/VerticalScrollDoc';
-import SizeDoc from '@/doc/datatable/SizeDoc';
 import MultipleColumnsDoc from '@/doc/datatable/sort/MultipleColumnsDoc';
 import PresortDoc from '@/doc/datatable/sort/PresortDoc';
 import RemovableSortDoc from '@/doc/datatable/sort/RemovableSortDoc';
 import SingleColumnDoc from '@/doc/datatable/sort/SingleColumnDoc';
-import StatefulDoc from '@/doc/datatable/StatefulDoc';
-import StripedRowsDoc from '@/doc/datatable/StripedRowsDoc';
-import StyleDoc from '@/doc/datatable/StyleDoc';
-import TemplateDoc from '@/doc/datatable/TemplateDoc';
 import LazyVirtualScrollDoc from '@/doc/datatable/virtualscroll/LazyVirtualScrollDoc';
 import PreloadVirtualScrollDoc from '@/doc/datatable/virtualscroll/PreloadVirtualScrollDoc';
 
@@ -356,7 +357,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/dataview/index.vue b/pages/dataview/index.vue
index 3b5b93548..4ea9984da 100755
--- a/pages/dataview/index.vue
+++ b/pages/dataview/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <DocComponent title="Vue DataView Component" header="DataView" description="DataView displays data in grid or list layout with pagination and sorting features." :componentDocs="docs" :apiDocs="['DataView', 'DataViewLayoutOptions']" />
+    <DocComponent
+        title="Vue DataView Component"
+        header="DataView"
+        description="DataView displays data in grid or list layout with pagination and sorting features."
+        :componentDocs="docs"
+        :apiDocs="['DataView', 'DataViewLayoutOptions']"
+        :ptTabComponent="ptComponent"
+    />
 </template>
 
 <script>
@@ -12,6 +19,7 @@ import PaginationDoc from '@/doc/dataview/PaginationDoc';
 import PrimeFlexDoc from '@/doc/dataview/PrimeFlexDoc';
 import SortingDoc from '@/doc/dataview/SortingDoc';
 import StyleDoc from '@/doc/dataview/StyleDoc';
+import PTComponent from '@/doc/dataview/pt/index.vue';
 
 export default {
     data() {
@@ -62,7 +70,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/deferredcontent/index.vue b/pages/deferredcontent/index.vue
index 26328671a..a46ef86b0 100755
--- a/pages/deferredcontent/index.vue
+++ b/pages/deferredcontent/index.vue
@@ -5,6 +5,7 @@
         description="DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll."
         :componentDocs="docs"
         :apiDocs="['DeferredContent']"
+        :ptTabComponent="ptComponent"
     />
 </template>
 
@@ -14,6 +15,7 @@ import BasicDoc from '@/doc/deferredcontent/BasicDoc.vue';
 import DataTableDoc from '@/doc/deferredcontent/DataTableDoc.vue';
 import ImportDoc from '@/doc/deferredcontent/ImportDoc.vue';
 import StyleDoc from '@/doc/deferredcontent/StyleDoc.vue';
+import PTComponent from '@/doc/deferredcontent/pt/index.vue';
 
 export default {
     data() {
@@ -44,7 +46,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/dialog/index.vue b/pages/dialog/index.vue
index 196157b19..b9b7eb288 100755
--- a/pages/dialog/index.vue
+++ b/pages/dialog/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Dialog Component" header="Dialog" description="Dialog is a container to display content in an overlay window" :componentDocs="docs" :apiDocs="['Dialog']" />
+    <DocComponent title="Vue Dialog Component" header="Dialog" description="Dialog is a container to display content in an overlay window" :componentDocs="docs" :apiDocs="['Dialog']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -13,6 +13,7 @@ import PositionDoc from '@/doc/dialog/PositionDoc';
 import ResponsiveDoc from '@/doc/dialog/ResponsiveDoc';
 import StyleDoc from '@/doc/dialog/StyleDoc';
 import WithoutModalDoc from '@/doc/dialog/WithoutModalDoc';
+import PTComponent from '@/doc/dialog/pt/index.vue';
 
 export default {
     data() {
@@ -68,7 +69,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/divider/index.vue b/pages/divider/index.vue
index 51daae1bc..4633cd71f 100644
--- a/pages/divider/index.vue
+++ b/pages/divider/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Divider Component" header="Divider" description="Divider is used to separate contents." :componentDocs="docs" :apiDocs="['Divider']" />
+    <DocComponent title="Vue Divider Component" header="Divider" description="Divider is used to separate contents." :componentDocs="docs" :apiDocs="['Divider']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -11,6 +11,7 @@ import LoginDoc from '@/doc/divider/LoginDoc.vue';
 import StyleDoc from '@/doc/divider/StyleDoc.vue';
 import TypeDoc from '@/doc/divider/TypeDoc.vue';
 import VerticalDoc from '@/doc/divider/VerticalDoc.vue';
+import PTComponent from '@/doc/divider/pt/index.vue';
 
 export default {
     data() {
@@ -56,7 +57,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/dock/index.vue b/pages/dock/index.vue
index b3c3fd16f..06d0ec01e 100644
--- a/pages/dock/index.vue
+++ b/pages/dock/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Dock Component" header="Dock" description="Dock is a navigation component consisting of menuitems." :componentDocs="docs" :apiDocs="['Dock']" />
+    <DocComponent title="Vue Dock Component" header="Dock" description="Dock is a navigation component consisting of menuitems." :componentDocs="docs" :apiDocs="['Dock']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -8,6 +8,7 @@ import AdvancedDoc from '@/doc/dock/AdvancedDoc';
 import BasicDoc from '@/doc/dock/BasicDoc';
 import ImportDoc from '@/doc/dock/ImportDoc';
 import StyleDoc from '@/doc/dock/StyleDoc';
+import PTComponent from '@/doc/dock/pt/index.vue';
 
 export default {
     data() {
@@ -38,7 +39,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/dropdown/index.vue b/pages/dropdown/index.vue
index e297346ee..233403c43 100755
--- a/pages/dropdown/index.vue
+++ b/pages/dropdown/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Select Component" header="Dropdown" description="Dropdown also known as Select, is used to choose an item from a collection of options." :componentDocs="docs" :apiDocs="['Dropdown']" />
+    <DocComponent title="Vue Select Component" header="Dropdown" description="Dropdown also known as Select, is used to choose an item from a collection of options." :componentDocs="docs" :apiDocs="['Dropdown']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -10,7 +10,6 @@ import DisabledDoc from '@/doc/dropdown/DisabledDoc';
 import EditableDoc from '@/doc/dropdown/EditableDoc';
 import FilterDoc from '@/doc/dropdown/FilterDoc';
 import FloatLabelDoc from '@/doc/dropdown/FloatLabelDoc';
-import VeeValidateDoc from '@/doc/dropdown/form/VeeValidateDoc';
 import GroupDoc from '@/doc/dropdown/GroupDoc';
 import ImportDoc from '@/doc/dropdown/ImportDoc';
 import InvalidDoc from '@/doc/dropdown/InvalidDoc';
@@ -19,6 +18,8 @@ import LoadingStateDoc from '@/doc/dropdown/LoadingStateDoc';
 import StyleDoc from '@/doc/dropdown/StyleDoc';
 import TemplateDoc from '@/doc/dropdown/TemplateDoc';
 import VirtualScrollDoc from '@/doc/dropdown/VirtualScrollDoc';
+import VeeValidateDoc from '@/doc/dropdown/form/VeeValidateDoc';
+import PTComponent from '@/doc/dropdown/pt/index.vue';
 
 export default {
     data() {
@@ -111,7 +112,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/dynamicdialog/index.vue b/pages/dynamicdialog/index.vue
index e06efc641..918ac6aff 100644
--- a/pages/dynamicdialog/index.vue
+++ b/pages/dynamicdialog/index.vue
@@ -5,6 +5,7 @@
         description="Dialogs can be created dynamically with any component as the content using a DialogService."
         :componentDocs="docs"
         :apiDocs="['DynamicDialog', 'Dialog', 'DialogService-UseDialog', 'DynamicDialogOptions']"
+        :ptTabComponent="ptComponent"
     />
 </template>
 
@@ -18,6 +19,7 @@ import ImportDoc from '@/doc/dynamicdialog/ImportDoc';
 import OpenDialogDoc from '@/doc/dynamicdialog/OpenDialogDoc';
 import PassingDataDoc from '@/doc/dynamicdialog/PassingDataDoc';
 import UsageDoc from '@/doc/dynamicdialog/UsageDoc';
+import PTComponent from '@/doc/dynamicdialog/pt/index.vue';
 
 export default {
     data() {
@@ -68,7 +70,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/editor/index.vue b/pages/editor/index.vue
index e10866d79..da15a27b6 100755
--- a/pages/editor/index.vue
+++ b/pages/editor/index.vue
@@ -1,16 +1,17 @@
 <template>
-    <DocComponent title="Vue Editor Component" header="Editor" description="Editor is rich text editor component based on Quill." :componentDocs="docs" :apiDocs="['Editor']" />
+    <DocComponent title="Vue Editor Component" header="Editor" description="Editor is rich text editor component based on Quill." :componentDocs="docs" :apiDocs="['Editor']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/editor/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/editor/BasicDoc.vue';
-import VeeValidateDoc from '@/doc/editor/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/editor/ImportDoc.vue';
 import QuillDoc from '@/doc/editor/QuillDoc.vue';
 import ReadOnlyDoc from '@/doc/editor/ReadOnlyDoc.vue';
 import StyleDoc from '@/doc/editor/StyleDoc.vue';
 import TemplateDoc from '@/doc/editor/TemplateDoc.vue';
+import VeeValidateDoc from '@/doc/editor/form/VeeValidateDoc.vue';
+import PTComponent from '@/doc/editor/pt/index.vue';
 
 export default {
     data() {
@@ -63,7 +64,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/fieldset/index.vue b/pages/fieldset/index.vue
index 85e6b3f7d..2b8cea9ea 100755
--- a/pages/fieldset/index.vue
+++ b/pages/fieldset/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Fieldset Component" header="Fieldset" description="Fieldset is a grouping component with a content toggle feature." :componentDocs="docs" :apiDocs="['Fieldset']" />
+    <DocComponent title="Vue Fieldset Component" header="Fieldset" description="Fieldset is a grouping component with a content toggle feature." :componentDocs="docs" :apiDocs="['Fieldset']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -9,6 +9,8 @@ import ImportDoc from '@/doc/fieldset/ImportDoc.vue';
 import StyleDoc from '@/doc/fieldset/StyleDoc.vue';
 import TemplateDoc from '@/doc/fieldset/TemplateDoc.vue';
 import ToggleableDoc from '@/doc/fieldset/ToggleableDoc.vue';
+import PTComponent from '@/doc/fieldset/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -43,7 +45,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/fileupload/index.vue b/pages/fileupload/index.vue
index f251f0f79..c600e3071 100755
--- a/pages/fileupload/index.vue
+++ b/pages/fileupload/index.vue
@@ -5,6 +5,7 @@
         description="FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations."
         :componentDocs="docs"
         :apiDocs="['FileUpload']"
+        :ptTabComponent="ptComponent"
     />
 </template>
 
@@ -17,6 +18,7 @@ import CustomUploadDoc from '@/doc/fileupload/CustomUploadDoc.vue';
 import ImportDoc from '@/doc/fileupload/ImportDoc.vue';
 import StyleDoc from '@/doc/fileupload/StyleDoc.vue';
 import TemplateDoc from '@/doc/fileupload/TemplateDoc.vue';
+import PTComponent from '@/doc/fileupload/pt/index.vue';
 
 export default {
     data() {
@@ -62,7 +64,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/galleria/index.vue b/pages/galleria/index.vue
index 4a7f5826b..13d888279 100755
--- a/pages/galleria/index.vue
+++ b/pages/galleria/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Gallery Component" header="Galleria" description="Galleria is a content gallery component." :componentDocs="docs" :apiDocs="['Galleria']" />
+    <DocComponent title="Vue Gallery Component" header="Galleria" description="Galleria is a content gallery component." :componentDocs="docs" :apiDocs="['Galleria']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -9,10 +9,13 @@ import AutoPlayDoc from '@/doc/galleria/AutoPlayDoc';
 import BasicDoc from '@/doc/galleria/BasicDoc';
 import CaptionDoc from '@/doc/galleria/CaptionDoc';
 import ControlledDoc from '@/doc/galleria/ControlledDoc';
-import CustomContentDoc from '@/doc/galleria/fullscreen/CustomContentDoc';
-import WithoutThumbnailsDoc from '@/doc/galleria/fullscreen/WithoutThumbnailsDoc';
-import WithThumbnailsDoc from '@/doc/galleria/fullscreen/WithThumbnailsDoc';
 import ImportDoc from '@/doc/galleria/ImportDoc';
+import ResponsiveDoc from '@/doc/galleria/ResponsiveDoc';
+import StyleDoc from '@/doc/galleria/StyleDoc';
+import ThumbnailDoc from '@/doc/galleria/ThumbnailDoc';
+import CustomContentDoc from '@/doc/galleria/fullscreen/CustomContentDoc';
+import WithThumbnailsDoc from '@/doc/galleria/fullscreen/WithThumbnailsDoc';
+import WithoutThumbnailsDoc from '@/doc/galleria/fullscreen/WithoutThumbnailsDoc';
 import ClickEventDoc from '@/doc/galleria/indicator/ClickEventDoc';
 import HoverEventDoc from '@/doc/galleria/indicator/HoverEventDoc';
 import PositionDoc from '@/doc/galleria/indicator/PositionDoc';
@@ -21,9 +24,7 @@ import HoverDoc from '@/doc/galleria/navigator/HoverDoc';
 import IndicatorsDoc from '@/doc/galleria/navigator/IndicatorsDoc';
 import ItemThumbnailsDoc from '@/doc/galleria/navigator/ItemThumbnailsDoc';
 import ItemWithoutThumbnailsDoc from '@/doc/galleria/navigator/ItemWithoutThumbnailsDoc';
-import ResponsiveDoc from '@/doc/galleria/ResponsiveDoc';
-import StyleDoc from '@/doc/galleria/StyleDoc';
-import ThumbnailDoc from '@/doc/galleria/ThumbnailDoc';
+import PTComponent from '@/doc/galleria/pt/index.vue';
 
 export default {
     data() {
@@ -155,7 +156,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/icons/index.vue b/pages/icons/index.vue
index 4a3f35592..89cadb22e 100755
--- a/pages/icons/index.vue
+++ b/pages/icons/index.vue
@@ -2,7 +2,7 @@
     <div>
         <Head>
             <Title>Vue Icon Library - PrimeVue</Title>
-            <Meta name="description" content="PrimeVue components internally use PrimeIcons library." />
+            <Meta name="description" content="PrimeIcons is the default icon library of PrimeVue with over 250 open source icons developed by PrimeTek. PrimeIcons library is optional as PrimeVue components can use any icon with templating." />
         </Head>
 
         <div class="doc">
@@ -11,7 +11,7 @@
                     <h1>Icons</h1>
                     <p>
                         <a href="https://github.com/primefaces/primeicons" class="text-primary hover:underline font-semibold"> PrimeIcons </a>
-                        is the default icon library of PrimeVue with over 250 open source icons developed by PrimeTek.
+                        is the default icon library of PrimeVue with over 250 open source icons developed by PrimeTek. PrimeIcons library is optional as PrimeVue components can use any icon with templating.
                     </p>
                 </div>
                 <DocSections :docs="docs" />
diff --git a/pages/image/index.vue b/pages/image/index.vue
index 87a366d89..0d1741e8a 100644
--- a/pages/image/index.vue
+++ b/pages/image/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Image Component" header="Image" description="Displays a single image with preview and tranformation options." :componentDocs="docs" :apiDocs="['Image']" />
+    <DocComponent title="Vue Image Component" header="Image" description="Displays a single image with preview and tranformation options." :componentDocs="docs" :apiDocs="['Image']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -9,6 +9,7 @@ import ImportDoc from '@/doc/image/ImportDoc';
 import PreviewDoc from '@/doc/image/PreviewDoc';
 import StyleDoc from '@/doc/image/StyleDoc';
 import TemplateDoc from '@/doc/image/TemplateDoc';
+import PTComponent from '@/doc/image/pt/index.vue';
 
 export default {
     data() {
@@ -44,7 +45,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/inlinemessage/index.vue b/pages/inlinemessage/index.vue
index 9b1b3f29d..fd5bc404d 100644
--- a/pages/inlinemessage/index.vue
+++ b/pages/inlinemessage/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <DocComponent title="Vue InlineMessage Component" header="InlineMessage" description="Inline Message component displays information related to another element such as invalid input." :componentDocs="docs" :apiDocs="['InlineMessage']" />
+    <DocComponent
+        title="Vue InlineMessage Component"
+        header="InlineMessage"
+        description="Inline Message component displays information related to another element such as invalid input."
+        :componentDocs="docs"
+        :apiDocs="['InlineMessage']"
+        :ptTabComponent="ptComponent"
+    />
 </template>
 
 <script>
@@ -10,6 +17,7 @@ import ImportDoc from '@/doc/inlinemessage/ImportDoc.vue';
 import SeverityDoc from '@/doc/inlinemessage/SeverityDoc.vue';
 import StyleDoc from '@/doc/inlinemessage/StyleDoc.vue';
 import TemplateDoc from '@/doc/inlinemessage/TemplateDoc.vue';
+import PTComponent from '@/doc/inlinemessage/pt/index.vue';
 
 export default {
     data() {
@@ -50,7 +58,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/inplace/index.vue b/pages/inplace/index.vue
index f0e5ce89e..5ada49fdd 100755
--- a/pages/inplace/index.vue
+++ b/pages/inplace/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <DocComponent title="Vue Inplace Component" header="Inplace" description="Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content." :componentDocs="docs" :apiDocs="['Inplace']" />
+    <DocComponent
+        title="Vue Inplace Component"
+        header="Inplace"
+        description="Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content."
+        :componentDocs="docs"
+        :apiDocs="['Inplace']"
+        :ptTabComponent="ptComponent"
+    />
 </template>
 
 <script>
@@ -10,6 +17,7 @@ import ImportDoc from '@/doc/inplace/ImportDoc';
 import InputDoc from '@/doc/inplace/InputDoc';
 import LazyDoc from '@/doc/inplace/LazyDoc';
 import StyleDoc from '@/doc/inplace/StyleDoc';
+import PTComponent from '@/doc/inplace/pt/index.vue';
 
 export default {
     data() {
@@ -50,7 +58,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/inputmask/index.vue b/pages/inputmask/index.vue
index 86c13157e..5b447d5e0 100755
--- a/pages/inputmask/index.vue
+++ b/pages/inputmask/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <DocComponent title="Vue Mask Component" header="InputMask" description="InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone." :componentDocs="docs" :apiDocs="['InputMask']" />
+    <DocComponent
+        title="Vue Mask Component"
+        header="InputMask"
+        description="InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone."
+        :componentDocs="docs"
+        :apiDocs="['InputMask']"
+        :ptTabComponent="ptComponent"
+    />
 </template>
 
 <script>
@@ -7,13 +14,14 @@ import AccessibilityDoc from '@/doc/inputmask/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/inputmask/BasicDoc.vue';
 import DisabledDoc from '@/doc/inputmask/DisabledDoc.vue';
 import FloatLabelDoc from '@/doc/inputmask/FloatLabelDoc.vue';
-import VeeValidateDoc from '@/doc/inputmask/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/inputmask/ImportDoc.vue';
 import InvalidDoc from '@/doc/inputmask/InvalidDoc.vue';
 import MaskDoc from '@/doc/inputmask/MaskDoc.vue';
 import OptionalDoc from '@/doc/inputmask/OptionalDoc.vue';
 import SlotCharDoc from '@/doc/inputmask/SlotCharDoc.vue';
 import StyleDoc from '@/doc/inputmask/StyleDoc.vue';
+import VeeValidateDoc from '@/doc/inputmask/form/VeeValidateDoc.vue';
+import PTComponent from '@/doc/inputmask/pt/index.vue';
 
 export default {
     data() {
@@ -81,7 +89,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/inputnumber/index.vue b/pages/inputnumber/index.vue
index b5ff3c24e..f4d8563c3 100755
--- a/pages/inputnumber/index.vue
+++ b/pages/inputnumber/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue InputNumber Component" header="InputNumber" description="InputNumber is an input component to provide numerical input." :componentDocs="docs" :apiDocs="['InputNumber']" />
+    <DocComponent title="Vue InputNumber Component" header="InputNumber" description="InputNumber is an input component to provide numerical input." :componentDocs="docs" :apiDocs="['InputNumber']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -8,7 +8,6 @@ import ButtonsDoc from '@/doc/inputnumber/ButtonsDoc';
 import CurrencyDoc from '@/doc/inputnumber/CurrencyDoc';
 import DisabledDoc from '@/doc/inputnumber/DisabledDoc';
 import FloatLabelDoc from '@/doc/inputnumber/FloatLabelDoc';
-import VeeValidateDoc from '@/doc/inputnumber/form/VeeValidateDoc';
 import ImportDoc from '@/doc/inputnumber/ImportDoc';
 import InvalidDoc from '@/doc/inputnumber/InvalidDoc';
 import LocaleDoc from '@/doc/inputnumber/LocaleDoc';
@@ -16,6 +15,8 @@ import NumeralsDoc from '@/doc/inputnumber/NumeralsDoc';
 import PrefixSuffixDoc from '@/doc/inputnumber/PrefixSuffixDoc';
 import StyleDoc from '@/doc/inputnumber/StyleDoc';
 import VerticalDoc from '@/doc/inputnumber/VerticalDoc';
+import VeeValidateDoc from '@/doc/inputnumber/form/VeeValidateDoc';
+import PTComponent from '@/doc/inputnumber/pt/index.vue';
 
 export default {
     data() {
@@ -93,7 +94,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/inputswitch/index.vue b/pages/inputswitch/index.vue
index a6c7ebaf4..09a4cf31f 100755
--- a/pages/inputswitch/index.vue
+++ b/pages/inputswitch/index.vue
@@ -1,16 +1,17 @@
 <template>
-    <DocComponent title="Vue InputSwitch Component" header="InputSwitch" description="InputSwitch is used to select a boolean value." :componentDocs="docs" :apiDocs="['InputSwitch']" />
+    <DocComponent title="Vue InputSwitch Component" header="InputSwitch" description="InputSwitch is used to select a boolean value." :componentDocs="docs" :apiDocs="['InputSwitch']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/inputswitch/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/inputswitch/BasicDoc.vue';
 import DisabledDoc from '@/doc/inputswitch/DisabledDoc.vue';
-import VeeValidateDoc from '@/doc/inputswitch/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/inputswitch/ImportDoc.vue';
 import InvalidDoc from '@/doc/inputswitch/InvalidDoc.vue';
 import PreselectionDoc from '@/doc/inputswitch/PreselectionDoc.vue';
 import StyleDoc from '@/doc/inputswitch/StyleDoc.vue';
+import VeeValidateDoc from '@/doc/inputswitch/form/VeeValidateDoc.vue';
+import PTComponent from '@/doc/inputswitch/pt/index.vue';
 
 export default {
     data() {
@@ -63,7 +64,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/inputtext/index.vue b/pages/inputtext/index.vue
index cc86e038e..1e6733b19 100755
--- a/pages/inputtext/index.vue
+++ b/pages/inputtext/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Input Component" header="InputText" description="InputText is an extension to standard input element with theming." :componentDocs="docs" :apiDocs="['InputText']" />
+    <DocComponent title="Vue Input Component" header="InputText" description="InputText is an extension to standard input element with theming." :componentDocs="docs" :apiDocs="['InputText']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -7,13 +7,14 @@ import AccessibilityDoc from '@/doc/inputtext/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/inputtext/BasicDoc.vue';
 import DisabledDoc from '@/doc/inputtext/DisabledDoc.vue';
 import FloatLabelDoc from '@/doc/inputtext/FloatLabelDoc.vue';
-import VeeValidateDoc from '@/doc/inputtext/form/VeeValidateDoc.vue';
 import HelpTextDoc from '@/doc/inputtext/HelpTextDoc.vue';
 import IconsDoc from '@/doc/inputtext/IconsDoc.vue';
 import ImportDoc from '@/doc/inputtext/ImportDoc.vue';
 import InvalidDoc from '@/doc/inputtext/InvalidDoc.vue';
 import SizesDoc from '@/doc/inputtext/SizesDoc.vue';
 import StyleDoc from '@/doc/inputtext/StyleDoc.vue';
+import VeeValidateDoc from '@/doc/inputtext/form/VeeValidateDoc.vue';
+import PTComponent from '@/doc/inputtext/pt/index.vue';
 
 export default {
     data() {
@@ -81,7 +82,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/knob/index.vue b/pages/knob/index.vue
index 00e95441f..05f0be118 100644
--- a/pages/knob/index.vue
+++ b/pages/knob/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Knob Component" header="Knob" description="Knob is a form component to define number inputs with a dial." :componentDocs="docs" :apiDocs="['Knob']" />
+    <DocComponent title="Vue Knob Component" header="Knob" description="Knob is a form component to define number inputs with a dial." :componentDocs="docs" :apiDocs="['Knob']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -7,7 +7,6 @@ import AccessibilityDoc from '@/doc/knob/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/knob/BasicDoc.vue';
 import ColorDoc from '@/doc/knob/ColorDoc.vue';
 import DisabledDoc from '@/doc/knob/DisabledDoc.vue';
-import VeeValidateDoc from '@/doc/knob/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/knob/ImportDoc.vue';
 import MinMaxDoc from '@/doc/knob/MinMaxDoc.vue';
 import ReactiveDoc from '@/doc/knob/ReactiveDoc.vue';
@@ -17,6 +16,9 @@ import StepDoc from '@/doc/knob/StepDoc.vue';
 import StrokeDoc from '@/doc/knob/StrokeDoc.vue';
 import StyleDoc from '@/doc/knob/StyleDoc.vue';
 import TemplateDoc from '@/doc/knob/TemplateDoc.vue';
+import VeeValidateDoc from '@/doc/knob/form/VeeValidateDoc.vue';
+import PTComponent from '@/doc/knob/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -98,7 +100,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/landing/TemplateSection.vue b/pages/landing/TemplateSection.vue
index 0d8ebfce2..b5c1beed3 100644
--- a/pages/landing/TemplateSection.vue
+++ b/pages/landing/TemplateSection.vue
@@ -11,29 +11,29 @@
         <section :class="['templates flex justify-content-center align-items-center flex-column mt-7', { 'templates-animation': setAnimation }]">
             <div class="flex md:flex-row flex-column gap-4 lg:gap-0">
                 <div class="template-block block-1 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('diamond') }">
-                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/diamond-vue/">Diamond Preview</a>
+                    <a class="templates-btn" target="_blank" href="https://diamond.primevue.org">Diamond Preview</a>
                 </div>
                 <div class="template-block block-2 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('freya') }">
-                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/freya-vue/">Freya Preview</a>
+                    <a class="templates-btn" target="_blank" href="https://freya.primevue.org">Freya Preview</a>
                 </div>
             </div>
             <div class="flex my-4 md:flex-row flex-column gap-4 lg:gap-0">
                 <div class="template-block block-3 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('atlantis') }">
-                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/atlantis-vue/">Atlantis Preview</a>
+                    <a class="templates-btn" target="_blank" href="https://atlantis.primevue.org/">Atlantis Preview</a>
                 </div>
                 <div class="template-block block-middle border-none box-shadow-none mr-2 hidden lg:flex justify-content-center align-items-center flex-column">
                     <img class="img-1" :src="templateImg()" height="110" />
                 </div>
                 <div class="template-block block-4 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('apollo') }">
-                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/apollo-vue/">Apollo Preview</a>
+                    <a class="templates-btn" target="_blank" href="https://apollo.primevue.org">Apollo Preview</a>
                 </div>
             </div>
             <div class="flex md:flex-row flex-column gap-4 lg:gap-0">
                 <div class="template-block block-5 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('serenity') }">
-                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/serenity-vue/">Serenity Preview</a>
+                    <a class="templates-btn" target="_blank" href="https://serenity.primevue.org">Serenity Preview</a>
                 </div>
                 <div class="template-block block-6 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('ultima') }">
-                    <a class="templates-btn" target="_blank" href="https://www.primefaces.org/ultima-vue/">Ultima Preview</a>
+                    <a class="templates-btn" target="_blank" href="https://ultima.primevue.org">Ultima Preview</a>
                 </div>
             </div>
             <div class="lines">
diff --git a/pages/listbox/index.vue b/pages/listbox/index.vue
index 768a01692..cd10885c7 100755
--- a/pages/listbox/index.vue
+++ b/pages/listbox/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Listbox Component" header="Listbox" description="Listbox is used to select one or more values from a list of items." :componentDocs="docs" :apiDocs="['Listbox']" />
+    <DocComponent title="Vue Listbox Component" header="Listbox" description="Listbox is used to select one or more values from a list of items." :componentDocs="docs" :apiDocs="['Listbox']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -7,7 +7,6 @@ import AccessibilityDoc from '@/doc/listbox/AccessibilityDoc';
 import BasicDoc from '@/doc/listbox/BasicDoc';
 import DisabledDoc from '@/doc/listbox/DisabledDoc';
 import FilterDoc from '@/doc/listbox/FilterDoc';
-import VeeValidateDoc from '@/doc/listbox/form/VeeValidateDoc';
 import GroupDoc from '@/doc/listbox/GroupDoc';
 import ImportDoc from '@/doc/listbox/ImportDoc';
 import InvalidDoc from '@/doc/listbox/InvalidDoc';
@@ -15,6 +14,9 @@ import MultipleDoc from '@/doc/listbox/MultipleDoc';
 import StyleDoc from '@/doc/listbox/StyleDoc';
 import TemplateDoc from '@/doc/listbox/TemplateDoc';
 import VirtualScrollDoc from '@/doc/listbox/VirtualScrollDoc';
+import VeeValidateDoc from '@/doc/listbox/form/VeeValidateDoc';
+import PTComponent from '@/doc/listbox/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -86,7 +88,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/megamenu/index.vue b/pages/megamenu/index.vue
index d418527a2..2d6b58019 100755
--- a/pages/megamenu/index.vue
+++ b/pages/megamenu/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue MegaMenu Component" header="MegaMenu" description="MegaMenu is navigation component that displays submenus together." :componentDocs="docs" :apiDocs="['MegaMenu', 'MenuItem']" />
+    <DocComponent title="Vue MegaMenu Component" header="MegaMenu" description="MegaMenu is navigation component that displays submenus together." :componentDocs="docs" :apiDocs="['MegaMenu', 'MenuItem']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -9,6 +9,7 @@ import ImportDoc from '@/doc/megamenu/ImportDoc';
 import StyleDoc from '@/doc/megamenu/StyleDoc';
 import TemplateDoc from '@/doc/megamenu/TemplateDoc';
 import VerticalDoc from '@/doc/megamenu/VerticalDoc';
+import PTComponent from '@/doc/megamenu/pt/index.vue';
 
 export default {
     data() {
@@ -44,7 +45,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/menu/index.vue b/pages/menu/index.vue
index 2709142a6..99b3b4ee3 100755
--- a/pages/menu/index.vue
+++ b/pages/menu/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Menu Component" header="Menu" description="Menu is a navigation/command component that supports dynamic and static positioning." :componentDocs="docs" :apiDocs="['Menu', 'MenuItem']" />
+    <DocComponent title="Vue Menu Component" header="Menu" description="Menu is a navigation/command component that supports dynamic and static positioning." :componentDocs="docs" :apiDocs="['Menu', 'MenuItem']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -10,6 +10,7 @@ import ImportDoc from '@/doc/menu/ImportDoc';
 import PopupDoc from '@/doc/menu/PopupDoc';
 import StyleDoc from '@/doc/menu/StyleDoc';
 import TemplateDoc from '@/doc/menu/TemplateDoc';
+import PTComponent from '@/doc/menu/pt/index.vue';
 
 export default {
     data() {
@@ -50,7 +51,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/menubar/index.vue b/pages/menubar/index.vue
index ad6c43fb1..bd7eef5a6 100755
--- a/pages/menubar/index.vue
+++ b/pages/menubar/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Navbar Component" header="Menubar" description="Menubar also known as Navbar, is a horizontal menu component." :componentDocs="docs" :apiDocs="['Menubar', 'MenuItem']" />
+    <DocComponent title="Vue Navbar Component" header="Menubar" description="Menubar also known as Navbar, is a horizontal menu component." :componentDocs="docs" :apiDocs="['Menubar', 'MenuItem']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -8,6 +8,7 @@ import BasicDoc from '@/doc/menubar/BasicDoc';
 import ImportDoc from '@/doc/menubar/ImportDoc';
 import StyleDoc from '@/doc/menubar/StyleDoc';
 import TemplateDoc from '@/doc/menubar/TemplateDoc';
+import PTComponent from '@/doc/menubar/pt/index.vue';
 
 export default {
     data() {
@@ -38,7 +39,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/message/index.vue b/pages/message/index.vue
index 82d31543d..2f0085002 100755
--- a/pages/message/index.vue
+++ b/pages/message/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Message Component" header="Message" description="Message component is used to display inline messages." :componentDocs="docs" :apiDocs="['Message']" />
+    <DocComponent title="Vue Message Component" header="Message" description="Message component is used to display inline messages." :componentDocs="docs" :apiDocs="['Message']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -13,6 +13,7 @@ import SeverityDoc from '@/doc/message/SeverityDoc.vue';
 import StickyDoc from '@/doc/message/StickyDoc.vue';
 import StyleDoc from '@/doc/message/StyleDoc.vue';
 import TemplateDoc from '@/doc/message/TemplateDoc.vue';
+import PTComponent from '@/doc/message/pt/index.vue';
 
 export default {
     data() {
@@ -68,7 +69,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/multiselect/index.vue b/pages/multiselect/index.vue
index 81c25eb62..e166b4f1d 100755
--- a/pages/multiselect/index.vue
+++ b/pages/multiselect/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue MultiSelect Component" header="MultiSelect" description="MultiSelect is used to select multiple items from a collection." :componentDocs="docs" :apiDocs="['MultiSelect']" />
+    <DocComponent title="Vue MultiSelect Component" header="MultiSelect" description="MultiSelect is used to select multiple items from a collection." :componentDocs="docs" :apiDocs="['MultiSelect']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -9,7 +9,6 @@ import ChipsDoc from '@/doc/multiselect/ChipsDoc';
 import DisabledDoc from '@/doc/multiselect/DisabledDoc';
 import FilterDoc from '@/doc/multiselect/FilterDoc';
 import FloatLabelDoc from '@/doc/multiselect/FloatLabelDoc';
-import VeeValidateDoc from '@/doc/multiselect/form/VeeValidateDoc';
 import GroupDoc from '@/doc/multiselect/GroupDoc';
 import ImportDoc from '@/doc/multiselect/ImportDoc';
 import InvalidDoc from '@/doc/multiselect/InvalidDoc';
@@ -17,6 +16,9 @@ import LoadingStateDoc from '@/doc/multiselect/LoadingStateDoc';
 import StyleDoc from '@/doc/multiselect/StyleDoc';
 import TemplateDoc from '@/doc/multiselect/TemplateDoc';
 import VirtualScrollDoc from '@/doc/multiselect/VirtualScrollDoc';
+import VeeValidateDoc from '@/doc/multiselect/form/VeeValidateDoc';
+import PTComponent from '@/doc/multiselect/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -98,7 +100,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/orderlist/index.vue b/pages/orderlist/index.vue
index dd4eda167..352922200 100755
--- a/pages/orderlist/index.vue
+++ b/pages/orderlist/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue OrderList Component" header="OrderList" description="OrderList is used to sort a collection." :componentDocs="docs" :apiDocs="['OrderList']" />
+    <DocComponent title="Vue OrderList Component" header="OrderList" description="OrderList is used to sort a collection." :componentDocs="docs" :apiDocs="['OrderList']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -7,6 +7,8 @@ import AccessibilityDoc from '@/doc/orderlist/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/orderlist/BasicDoc.vue';
 import ImportDoc from '@/doc/orderlist/ImportDoc.vue';
 import StyleDoc from '@/doc/orderlist/StyleDoc.vue';
+import PTComponent from '@/doc/orderlist/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -31,7 +33,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/organizationchart/index.vue b/pages/organizationchart/index.vue
index 40f9cb37a..3cc80f223 100755
--- a/pages/organizationchart/index.vue
+++ b/pages/organizationchart/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Organization Chart Component" header="OrganizationChart" description="OrganizationChart visualizes hierarchical organization data." :componentDocs="docs" :apiDocs="['OrganizationChart']" />
+    <DocComponent title="Vue Organization Chart Component" header="OrganizationChart" description="OrganizationChart visualizes hierarchical organization data." :componentDocs="docs" :apiDocs="['OrganizationChart']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -10,6 +10,7 @@ import ImportDoc from '@/doc/organizationchart/ImportDoc';
 import SelectionDoc from '@/doc/organizationchart/SelectionDoc';
 import StyleDoc from '@/doc/organizationchart/StyleDoc';
 import TemplateDoc from '@/doc/organizationchart/TemplateDoc';
+import PTComponent from '@/doc/organizationchart/pt/index.vue';
 
 export default {
     data() {
@@ -50,7 +51,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/overlaypanel/index.vue b/pages/overlaypanel/index.vue
index 353b59cc9..cae3e02fe 100755
--- a/pages/overlaypanel/index.vue
+++ b/pages/overlaypanel/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <DocComponent title="Vue Popover Component" header="OverlayPanel" description="OverlayPanel, also known as Popover, is a container component that can overlay other components on page." :componentDocs="docs" :apiDocs="['OverlayPanel']" />
+    <DocComponent
+        title="Vue Popover Component"
+        header="OverlayPanel"
+        description="OverlayPanel, also known as Popover, is a container component that can overlay other components on page."
+        :componentDocs="docs"
+        :apiDocs="['OverlayPanel']"
+        :ptTabComponent="ptComponent"
+    />
 </template>
 
 <script>
@@ -8,6 +15,7 @@ import BasicDoc from '@/doc/overlaypanel/BasicDoc';
 import DataTableDoc from '@/doc/overlaypanel/DataTableDoc';
 import ImportDoc from '@/doc/overlaypanel/ImportDoc';
 import StyleDoc from '@/doc/overlaypanel/StyleDoc';
+import PTComponent from '@/doc/overlaypanel/pt/index.vue';
 
 export default {
     data() {
@@ -38,7 +46,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/paginator/index.vue b/pages/paginator/index.vue
index 3ae65c1bb..823ed2b84 100755
--- a/pages/paginator/index.vue
+++ b/pages/paginator/index.vue
@@ -1,16 +1,17 @@
 <template>
-    <DocComponent title="Vue Paginator Component" header="Paginator" description="Paginator displays data in paged format and provides navigation between pages." :componentDocs="docs" :apiDocs="['Paginator']" />
+    <DocComponent title="Vue Paginator Component" header="Paginator" description="Paginator displays data in paged format and provides navigation between pages." :componentDocs="docs" :apiDocs="['Paginator']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/paginator/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/paginator/BasicDoc.vue';
+import CurrentPageReportDoc from '@/doc/paginator/CurrentPageReportDoc.vue';
+import CustomContentDoc from '@/doc/paginator/CustomContentDoc.vue';
 import ImportDoc from '@/doc/paginator/ImportDoc.vue';
 import ResponsiveDoc from '@/doc/paginator/ResponsiveDoc.vue';
 import StyleDoc from '@/doc/paginator/StyleDoc.vue';
 import TemplateDoc from '@/doc/paginator/TemplateDoc.vue';
-import CurrentPageReportDoc from '../../doc/paginator/CurrentPageReportDoc.vue';
-import CustomContentDoc from '../../doc/paginator/CustomContentDoc.vue';
+import PTComponent from '@/doc/paginator/pt/index.vue';
 
 export default {
     data() {
@@ -56,7 +57,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/panel/index.vue b/pages/panel/index.vue
index c07446934..1e1a75418 100755
--- a/pages/panel/index.vue
+++ b/pages/panel/index.vue
@@ -9,6 +9,7 @@ import StyleDoc from '@/doc/panel/StyleDoc.vue';
 import TemplateDoc from '@/doc/panel/TemplateDoc.vue';
 import ToggleableDoc from '@/doc/panel/ToggleableDoc.vue';
 import PTComponent from '@/doc/panel/pt/index.vue';
+
 export default {
     data() {
         return {
diff --git a/pages/panelmenu/index.vue b/pages/panelmenu/index.vue
index 3553ab874..792c98121 100755
--- a/pages/panelmenu/index.vue
+++ b/pages/panelmenu/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue PanelMenu Component" header="PanelMenu" description="PanelMenu is a hybrid of accordion-tree components." :componentDocs="docs" :apiDocs="['PanelMenu', 'MenuItem']" />
+    <DocComponent title="Vue PanelMenu Component" header="PanelMenu" description="PanelMenu is a hybrid of accordion-tree components." :componentDocs="docs" :apiDocs="['PanelMenu', 'MenuItem']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -9,6 +9,7 @@ import ImportDoc from '@/doc/panelmenu/ImportDoc';
 import MultipleDoc from '@/doc/panelmenu/MultipleDoc';
 import ProgrammaticDoc from '@/doc/panelmenu/ProgrammaticDoc';
 import StyleDoc from '@/doc/panelmenu/StyleDoc';
+import PTComponent from '@/doc/panelmenu/pt/index.vue';
 
 export default {
     data() {
@@ -44,7 +45,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/password/index.vue b/pages/password/index.vue
index 687d96af6..9cfe69fd7 100755
--- a/pages/password/index.vue
+++ b/pages/password/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Password Component" header="Password" description="Password displays strength indicator for password fields." :componentDocs="docs" :apiDocs="['Password']" />
+    <DocComponent title="Vue Password Component" header="Password" description="Password displays strength indicator for password fields." :componentDocs="docs" :apiDocs="['Password']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -7,7 +7,6 @@ import AccessibilityDoc from '@/doc/password/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/password/BasicDoc.vue';
 import DisabledDoc from '@/doc/password/DisabledDoc.vue';
 import FloatLabelDoc from '@/doc/password/FloatLabelDoc.vue';
-import VeeValidateDoc from '@/doc/password/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/password/ImportDoc.vue';
 import InvalidDoc from '@/doc/password/InvalidDoc.vue';
 import LocaleDoc from '@/doc/password/LocaleDoc.vue';
@@ -15,6 +14,8 @@ import MeterDoc from '@/doc/password/MeterDoc.vue';
 import StyleDoc from '@/doc/password/StyleDoc.vue';
 import TemplateDoc from '@/doc/password/TemplateDoc.vue';
 import ToggleMaskDoc from '@/doc/password/ToggleMaskDoc.vue';
+import VeeValidateDoc from '@/doc/password/form/VeeValidateDoc.vue';
+import PTComponent from '@/doc/password/pt/index.vue';
 
 export default {
     data() {
@@ -87,7 +88,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/picklist/index.vue b/pages/picklist/index.vue
index 9c5391ecb..3f8f15d9e 100755
--- a/pages/picklist/index.vue
+++ b/pages/picklist/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue PickList Component" header="PickList" description="PickList is used to reorder items between different lists." :componentDocs="docs" :apiDocs="['PickList']" />
+    <DocComponent title="Vue PickList Component" header="PickList" description="PickList is used to reorder items between different lists." :componentDocs="docs" :apiDocs="['PickList']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -7,16 +7,34 @@ import AccessibilityDoc from '@/doc/picklist/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/picklist/BasicDoc.vue';
 import ImportDoc from '@/doc/picklist/ImportDoc.vue';
 import StyleDoc from '@/doc/picklist/StyleDoc.vue';
+import PTComponent from '@/doc/picklist/pt/index.vue';
 
 export default {
     data() {
         return {
             docs: [
-                { id: 'import', label: 'Import', component: ImportDoc },
-                { id: 'basic', label: 'Basic', component: BasicDoc },
-                { id: 'style', label: 'Style', component: StyleDoc },
-                { id: 'accessibility', label: 'Accessibility', component: AccessibilityDoc }
-            ]
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'style',
+                    label: 'Style',
+                    component: StyleDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/progressbar/index.vue b/pages/progressbar/index.vue
index a8b7d4e5d..852098f81 100755
--- a/pages/progressbar/index.vue
+++ b/pages/progressbar/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue ProgressBar Component" header="ProgressBar" description="ProgressBar is a process status indicator." :componentDocs="docs" :apiDocs="['ProgressBar']" />
+    <DocComponent title="Vue ProgressBar Component" header="ProgressBar" description="ProgressBar is a process status indicator." :componentDocs="docs" :apiDocs="['ProgressBar']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -10,6 +10,7 @@ import ImportDoc from '@/doc/progressbar/ImportDoc';
 import IndeterminateDoc from '@/doc/progressbar/IndeterminateDoc';
 import StyleDoc from '@/doc/progressbar/StyleDoc';
 import TemplateDoc from '@/doc/progressbar/TemplateDoc';
+import PTComponent from '@/doc/progressbar/pt/index.vue';
 
 export default {
     data() {
@@ -50,7 +51,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/progressspinner/index.vue b/pages/progressspinner/index.vue
index ab9694255..9fcea63cb 100755
--- a/pages/progressspinner/index.vue
+++ b/pages/progressspinner/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue ProgressSpinner Component" header="ProgressSpinner" description="ProgressBar is a process status indicator." :componentDocs="docs" :apiDocs="['ProgressSpinner']" />
+    <DocComponent title="Vue ProgressSpinner Component" header="ProgressSpinner" description="ProgressBar is a process status indicator." :componentDocs="docs" :apiDocs="['ProgressSpinner']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -8,6 +8,7 @@ import BasicDoc from '@/doc/progressspinner/BasicDoc';
 import CustomDoc from '@/doc/progressspinner/CustomDoc';
 import ImportDoc from '@/doc/progressspinner/ImportDoc';
 import StyleDoc from '@/doc/progressspinner/StyleDoc';
+import PTComponent from '@/doc/progressspinner/pt/index.vue';
 
 export default {
     data() {
@@ -38,7 +39,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/radiobutton/index.vue b/pages/radiobutton/index.vue
index 9d49107dc..b52037950 100755
--- a/pages/radiobutton/index.vue
+++ b/pages/radiobutton/index.vue
@@ -1,16 +1,18 @@
 <template>
-    <DocComponent title="Vue RadioButton Component" header="RadioButton" description="RadioButton is an extension to standard radio button element with theming." :componentDocs="docs" :apiDocs="['RadioButton']" />
+    <DocComponent title="Vue RadioButton Component" header="RadioButton" description="RadioButton is an extension to standard radio button element with theming." :componentDocs="docs" :apiDocs="['RadioButton']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/radiobutton/AccessibilityDoc.vue';
 import DisabledDoc from '@/doc/radiobutton/DisabledDoc.vue';
 import DynamicDoc from '@/doc/radiobutton/DynamicDoc.vue';
-import VeeValidateDoc from '@/doc/radiobutton/form/VeeValidateDoc.vue';
 import GroupDoc from '@/doc/radiobutton/GroupDoc.vue';
 import ImportDoc from '@/doc/radiobutton/ImportDoc.vue';
 import InvalidDoc from '@/doc/radiobutton/InvalidDoc.vue';
 import StyleDoc from '@/doc/radiobutton/StyleDoc.vue';
+import VeeValidateDoc from '@/doc/radiobutton/form/VeeValidateDoc.vue';
+import PTComponent from '@/doc/radiobutton/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -62,7 +64,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/rating/index.vue b/pages/rating/index.vue
index a43cd1fed..e80fbce94 100755
--- a/pages/rating/index.vue
+++ b/pages/rating/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Rating Component" header="Rating" description="Rating component is a star based selection input." :componentDocs="docs" :apiDocs="['Rating']" />
+    <DocComponent title="Vue Rating Component" header="Rating" description="Rating component is a star based selection input." :componentDocs="docs" :apiDocs="['Rating']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -12,6 +12,7 @@ import ReadOnlyDoc from '@/doc/rating/ReadOnlyDoc.vue';
 import StyleDoc from '@/doc/rating/StyleDoc.vue';
 import TemplateDoc from '@/doc/rating/TemplateDoc.vue';
 import WithoutCancelDoc from '@/doc/rating/WithoutCancelDoc.vue';
+import PTComponent from '@/doc/rating/pt/index.vue';
 
 export default {
     data() {
@@ -62,7 +63,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/scrollpanel/index.vue b/pages/scrollpanel/index.vue
index 8b15826ef..7c70f463d 100644
--- a/pages/scrollpanel/index.vue
+++ b/pages/scrollpanel/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <DocComponent title="Vue ScrollPanel Component" header="ScrollPanel" description="ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar." :componentDocs="docs" :apiDocs="['ScrollPanel']" />
+    <DocComponent
+        title="Vue ScrollPanel Component"
+        header="ScrollPanel"
+        description="ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar."
+        :componentDocs="docs"
+        :apiDocs="['ScrollPanel']"
+        :ptTabComponent="ptComponent"
+    />
 </template>
 <script>
 import AccessibilityDoc from '@/doc/scrollpanel/AccessibilityDoc';
@@ -7,6 +14,7 @@ import BasicDoc from '@/doc/scrollpanel/BasicDoc';
 import CustomDoc from '@/doc/scrollpanel/CustomDoc';
 import ImportDoc from '@/doc/scrollpanel/ImportDoc';
 import StyleDoc from '@/doc/scrollpanel/StyleDoc';
+import PTComponent from '@/doc/scrollpanel/pt/index.vue';
 
 export default {
     data() {
@@ -37,7 +45,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/scrolltop/index.vue b/pages/scrolltop/index.vue
index 74a7c4699..b2239ece5 100644
--- a/pages/scrolltop/index.vue
+++ b/pages/scrolltop/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <DocComponent title="Vue ScrollTop Component" header="ScrollTop" description="ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly." :componentDocs="docs" :apiDocs="['ScrollTop']" />
+    <DocComponent
+        title="Vue ScrollTop Component"
+        header="ScrollTop"
+        description="ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly."
+        :componentDocs="docs"
+        :apiDocs="['ScrollTop']"
+        :ptTabComponent="ptComponent"
+    />
 </template>
 
 <script>
@@ -8,6 +15,7 @@ import BasicDoc from '@/doc/scrolltop/BasicDoc';
 import ElementDoc from '@/doc/scrolltop/ElementDoc';
 import ImportDoc from '@/doc/scrolltop/ImportDoc';
 import StyleDoc from '@/doc/scrolltop/StyleDoc';
+import PTComponent from '@/doc/scrolltop/pt/index.vue';
 
 export default {
     data() {
@@ -38,7 +46,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/selectbutton/index.vue b/pages/selectbutton/index.vue
index b7b86a41d..0cc830923 100755
--- a/pages/selectbutton/index.vue
+++ b/pages/selectbutton/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue SelectButton Component" header="SelectButton" description="Slider is a component to provide input with a drag handle." :componentDocs="docs" :apiDocs="['SelectButton']" />
+    <DocComponent title="Vue SelectButton Component" header="SelectButton" description="Slider is a component to provide input with a drag handle." :componentDocs="docs" :apiDocs="['SelectButton']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -11,6 +11,8 @@ import ImportDoc from '@/doc/selectbutton/ImportDoc';
 import InvalidDoc from '@/doc/selectbutton/InvalidDoc';
 import MultipleDoc from '@/doc/selectbutton/MultipleDoc';
 import TemplateDoc from '@/doc/selectbutton/TemplateDoc';
+import PTComponent from '@/doc/selectbutton/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -62,7 +64,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/sidebar/index.vue b/pages/sidebar/index.vue
index b0729aa69..bf82a479b 100755
--- a/pages/sidebar/index.vue
+++ b/pages/sidebar/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Sidebar Component" header="Sidebar" description="Sidebar, also known as Drawer, is a container component displayed as an overlay." :componentDocs="docs" :apiDocs="['Sidebar']" />
+    <DocComponent title="Vue Sidebar Component" header="Sidebar" description="Sidebar, also known as Drawer, is a container component displayed as an overlay." :componentDocs="docs" :apiDocs="['Sidebar']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -11,6 +11,7 @@ import PositionDoc from '@/doc/sidebar/PositionDoc';
 import SizeDoc from '@/doc/sidebar/SizeDoc';
 import StyleDoc from '@/doc/sidebar/StyleDoc';
 import TemplateDoc from '@/doc/sidebar/TemplateDoc';
+import PTComponent from '@/doc/sidebar/pt/index.vue';
 
 export default {
     data() {
@@ -56,7 +57,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/skeleton/index.vue b/pages/skeleton/index.vue
index 642c26826..5ec3351b7 100644
--- a/pages/skeleton/index.vue
+++ b/pages/skeleton/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Skeleton Component" header="Skeleton" description="Skeleton is a placeholder to display instead of the actual content." :componentDocs="docs" :apiDocs="['Skeleton']" />
+    <DocComponent title="Vue Skeleton Component" header="Skeleton" description="Skeleton is a placeholder to display instead of the actual content." :componentDocs="docs" :apiDocs="['Skeleton']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -10,6 +10,7 @@ import ImportDoc from '@/doc/skeleton/ImportDoc.vue';
 import ListDoc from '@/doc/skeleton/ListDoc.vue';
 import ShapesDoc from '@/doc/skeleton/ShapesDoc.vue';
 import StyleDoc from '@/doc/skeleton/StyleDoc.vue';
+import PTComponent from '@/doc/skeleton/pt/index.vue';
 
 export default {
     data() {
@@ -50,7 +51,8 @@ export default {
                     label: 'Accessibility',
                     component: Accessibility
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/slider/index.vue b/pages/slider/index.vue
index 79b7a1708..4ecf1f03b 100755
--- a/pages/slider/index.vue
+++ b/pages/slider/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Slider Component" header="Slider" description="Slider is a component to provide input with a drag handle." :componentDocs="docs" :apiDocs="['Slider']" />
+    <DocComponent title="Vue Slider Component" header="Slider" description="Slider is a component to provide input with a drag handle." :componentDocs="docs" :apiDocs="['Slider']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -11,6 +11,7 @@ import RangeDoc from '@/doc/slider/RangeDoc';
 import StepDoc from '@/doc/slider/StepDoc';
 import StyleDoc from '@/doc/slider/StyleDoc';
 import VerticalDoc from '@/doc/slider/VerticalDoc';
+import PTComponent from '@/doc/slider/pt/index.vue';
 
 export default {
     data() {
@@ -56,7 +57,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/speeddial/index.vue b/pages/speeddial/index.vue
index fc3864a85..cd8cbd08c 100644
--- a/pages/speeddial/index.vue
+++ b/pages/speeddial/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <DocComponent title="Vue Speed Dial Component" header="Speed Dial" description="When pressed, a floating action button can display multiple primary actions that can be performed on a page." :componentDocs="docs" :apiDocs="['SpeedDial']" />
+    <DocComponent
+        title="Vue Speed Dial Component"
+        header="Speed Dial"
+        description="When pressed, a floating action button can display multiple primary actions that can be performed on a page."
+        :componentDocs="docs"
+        :apiDocs="['SpeedDial']"
+        :ptTabComponent="ptComponent"
+    />
 </template>
 
 <script>
@@ -12,6 +19,7 @@ import MaskDoc from '@/doc/speeddial/MaskDoc.vue';
 import QuarterCircleDoc from '@/doc/speeddial/QuarterCircleDoc.vue';
 import SemiCircleDoc from '@/doc/speeddial/SemiCircleDoc.vue';
 import TooltipDoc from '@/doc/speeddial/TooltipDoc.vue';
+import PTComponent from '@/doc/speeddial/pt/index.vue';
 
 export default {
     data() {
@@ -26,7 +34,8 @@ export default {
                 { id: 'mask', label: 'Mask', component: MaskDoc },
                 { id: 'custom', label: 'Custom', component: CustomDoc },
                 { id: 'accessibility', label: 'Accessibility', component: AccessibilityDoc }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/splitbutton/index.vue b/pages/splitbutton/index.vue
index 970a0010f..6ee689bf5 100755
--- a/pages/splitbutton/index.vue
+++ b/pages/splitbutton/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue SplitButton Component" header="SplitButton" description="SplitButton groups a set of commands in an overlay with a default command." :componentDocs="docs" :apiDocs="['SplitButton']" />
+    <DocComponent title="Vue SplitButton Component" header="SplitButton" description="SplitButton groups a set of commands in an overlay with a default command." :componentDocs="docs" :apiDocs="['SplitButton']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -16,6 +16,7 @@ import SizesDoc from '@/doc/splitbutton/SizesDoc.vue';
 import StyleDoc from '@/doc/splitbutton/StyleDoc.vue';
 import TemplateDoc from '@/doc/splitbutton/TemplateDoc.vue';
 import TextDoc from '@/doc/splitbutton/TextDoc.vue';
+import PTComponent from '@/doc/splitbutton/pt/index.vue';
 
 export default {
     data() {
@@ -86,7 +87,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/splitter/index.vue b/pages/splitter/index.vue
index 68d43b3e7..1f85d5501 100644
--- a/pages/splitter/index.vue
+++ b/pages/splitter/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Splitter Component" header="Splitter" description="Splitter is utilized to separate and resize panels." :componentDocs="docs" :apiDocs="['Splitter', 'SplitterPanel']" />
+    <DocComponent title="Vue Splitter Component" header="Splitter" description="Splitter is utilized to separate and resize panels." :componentDocs="docs" :apiDocs="['Splitter', 'SplitterPanel']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -10,6 +10,7 @@ import NestedDoc from '@/doc/splitter/NestedDoc.vue';
 import SizeDoc from '@/doc/splitter/SizeDoc.vue';
 import StyleDoc from '@/doc/splitter/StyleDoc';
 import VerticalDoc from '@/doc/splitter/VerticalDoc.vue';
+import PTComponent from '@/doc/splitter/pt/index.vue';
 
 export default {
     data() {
@@ -50,7 +51,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/steps.vue b/pages/steps.vue
index a38f2dcaf..8cf38334b 100755
--- a/pages/steps.vue
+++ b/pages/steps.vue
@@ -5,6 +5,7 @@
         description="Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design."
         :componentDocs="docs"
         :apiDocs="['Steps', 'MenuItem']"
+        :ptTabComponent="ptComponent"
     />
 </template>
 
@@ -14,6 +15,7 @@ import BasicDoc from '@/doc/steps/BasicDoc';
 import ImportDoc from '@/doc/steps/ImportDoc';
 import InteractiveDoc from '@/doc/steps/InteractiveDoc';
 import StyleDoc from '@/doc/steps/StyleDoc';
+import PTComponent from '@/doc/steps/pt/index.vue';
 
 export default {
     data() {
@@ -44,7 +46,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/tabmenu.vue b/pages/tabmenu.vue
index 6b33bb1e6..6fade7a5f 100755
--- a/pages/tabmenu.vue
+++ b/pages/tabmenu.vue
@@ -1,8 +1,9 @@
 <template>
-    <DocComponent title="Vue TabMenu Component" header="TabMenu" description="TabMenu is a navigation/command component that displays items as tab headers." :componentDocs="docs" :apiDocs="['TabMenu', 'MenuItem']" />
+    <DocComponent title="Vue TabMenu Component" header="TabMenu" description="TabMenu is a navigation/command component that displays items as tab headers." :componentDocs="docs" :apiDocs="['TabMenu', 'MenuItem']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
+import PTComponent from '@/doc/tabmenu/pt/index.vue';
 import AccessibilityDoc from '../doc/tabmenu/AccessibilityDoc.vue';
 import BasicDoc from '../doc/tabmenu/BasicDoc.vue';
 import ControlledDoc from '../doc/tabmenu/ControlledDoc.vue';
@@ -38,7 +39,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/tabview/index.vue b/pages/tabview/index.vue
index 2c3c5087d..eed864574 100755
--- a/pages/tabview/index.vue
+++ b/pages/tabview/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Tabs Component" header="TabView" description="TabView is a container component to group content with tabs." :componentDocs="docs" :apiDocs="['TabView', 'TabPanel']" />
+    <DocComponent title="Vue Tabs Component" header="TabView" description="TabView is a container component to group content with tabs." :componentDocs="docs" :apiDocs="['TabView', 'TabPanel']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -12,6 +12,8 @@ import ImportDoc from '@/doc/tabview/ImportDoc.vue';
 import ScrollableDoc from '@/doc/tabview/ScrollableDoc.vue';
 import StyleDoc from '@/doc/tabview/StyleDoc.vue';
 import TemplateDoc from '@/doc/tabview/TemplateDoc.vue';
+import PTComponent from '@/doc/tabview/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -61,7 +63,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/tag/index.vue b/pages/tag/index.vue
index 0af0abb54..a28f923c6 100644
--- a/pages/tag/index.vue
+++ b/pages/tag/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Tag Component" header="Tag" description="Tag component is used to categorize content." :componentDocs="docs" :apiDocs="['Tag']" />
+    <DocComponent title="Vue Tag Component" header="Tag" description="Tag component is used to categorize content." :componentDocs="docs" :apiDocs="['Tag']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -11,6 +11,7 @@ import PillDoc from '@/doc/tag/PillDoc';
 import SeverityDoc from '@/doc/tag/SeverityDoc';
 import StyleDoc from '@/doc/tag/StyleDoc';
 import TemplateDoc from '@/doc/tag/TemplateDoc';
+import PTComponent from '@/doc/tag/pt/index.vue';
 
 export default {
     data() {
@@ -56,7 +57,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/templates/index.vue b/pages/templates/index.vue
index 95565a1aa..a09256dd0 100644
--- a/pages/templates/index.vue
+++ b/pages/templates/index.vue
@@ -8,11 +8,11 @@
         <div class="grid">
             <div class="col-12 lg:col-6 xl:col-4">
                 <div class="card mb-0">
-                    <a href="https://www.primefaces.org/apollo-vue" rel="noopener noreferrer" target="_blank">
+                    <a href="https://apollo.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Apollo" src="https://primefaces.org/cdn/primevue/images/layouts/apollo-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://www.primefaces.org/apollo-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
+                        <a href="https://apollo.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
                         <a href="https://www.primefaces.org/layouts/apollo-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
@@ -23,11 +23,11 @@
             </div>
             <div class="col-12 lg:col-6 xl:col-4">
                 <div class="card mb-0">
-                    <a href="https://www.primefaces.org/sakai-vue" rel="noopener noreferrer" target="_blank">
+                    <a href="https://sakai.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Sakai" src="https://primefaces.org/cdn/primevue/images/layouts/sakai-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://www.primefaces.org/sakai-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
+                        <a href="https://sakai.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
                         <a href="https://github.com/primefaces/sakai-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
@@ -38,11 +38,11 @@
             </div>
             <div class="col-12 lg:col-6 xl:col-4">
                 <div class="card mb-0">
-                    <a href="https://www.primefaces.org/atlantis-vue" rel="noopener noreferrer" target="_blank">
+                    <a href="https://atlantis.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Atlantis" src="https://primefaces.org/cdn/primevue/images/layouts/atlantis-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://www.primefaces.org/atlantis-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
+                        <a href="https://atlantis.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
                         <a href="https://www.primefaces.org/layouts/atlantis-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
@@ -53,11 +53,11 @@
             </div>
             <div class="col-12 lg:col-6 xl:col-4">
                 <div class="card mb-0">
-                    <a href="https://www.primefaces.org/ultima-vue" rel="noopener noreferrer" target="_blank">
+                    <a href="https://ultima.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Ultima" src="https://primefaces.org/cdn/primevue/images/layouts/ultima-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://www.primefaces.org/ultima-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
+                        <a href="https://ultima.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
                         <a href="https://www.primefaces.org/layouts/ultima-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
@@ -68,11 +68,11 @@
             </div>
             <div class="col-12 lg:col-6 xl:col-4">
                 <div class="card mb-0">
-                    <a href="https://www.primefaces.org/freya-vue" rel="noopener noreferrer" target="_blank">
+                    <a href="https://freya.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Freya" src="https://primefaces.org/cdn/primevue/images/layouts/freya-vue.png" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://www.primefaces.org/freya-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
+                        <a href="https://freya.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
                         <a href="https://www.primefaces.org/layouts/freya-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
@@ -83,11 +83,11 @@
             </div>
             <div class="col-12 lg:col-6 xl:col-4">
                 <div class="card mb-0">
-                    <a href="https://www.primefaces.org/diamond-vue" rel="noopener noreferrer" target="_blank">
+                    <a href="https://diamond.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Diamond" src="https://primefaces.org/cdn/primevue/images/layouts/diamond-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://www.primefaces.org/diamond-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
+                        <a href="https://diamond.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
                         <a href="https://www.primefaces.org/layouts/diamond-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
@@ -98,11 +98,11 @@
             </div>
             <div class="col-12 lg:col-6 xl:col-4">
                 <div class="card mb-0">
-                    <a href="https://www.primefaces.org/verona-vue" rel="noopener noreferrer" target="_blank">
+                    <a href="https://verona.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Verona" src="https://primefaces.org/cdn/primevue/images/layouts/verona-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://www.primefaces.org/verona-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
+                        <a href="https://verona.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
                         <a href="https://www.primefaces.org/layouts/verona-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
@@ -113,11 +113,11 @@
             </div>
             <div class="col-12 lg:col-6 xl:col-4">
                 <div class="card mb-0">
-                    <a href="https://www.primefaces.org/poseidon-vue" rel="noopener noreferrer" target="_blank">
+                    <a href="https://poseidon.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Poseidon" src="https://primefaces.org/cdn/primevue/images/layouts/poseidon-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://www.primefaces.org/poseidon-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
+                        <a href="https://poseidon.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
                         <a href="https://www.primefaces.org/layouts/poseidon-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
@@ -128,11 +128,11 @@
             </div>
             <div class="col-12 lg:col-6 xl:col-4">
                 <div class="card mb-0">
-                    <a href="https://www.primefaces.org/sapphire-vue" rel="noopener noreferrer" target="_blank">
+                    <a href="https://sapphire.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Sapphire" src="https://primefaces.org/cdn/primevue/images/layouts/sapphire-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://www.primefaces.org/sapphire-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
+                        <a href="https://sapphire.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
                         <a href="https://www.primefaces.org/layouts/sapphire-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
@@ -143,11 +143,11 @@
             </div>
             <div class="col-12 lg:col-6 xl:col-4">
                 <div class="card mb-0">
-                    <a href="https://www.primefaces.org/serenity-vue" rel="noopener noreferrer" target="_blank">
+                    <a href="https://serenity.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Serenity" src="https://primefaces.org/cdn/primevue/images/layouts/serenity-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://www.primefaces.org/serenity-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
+                        <a href="https://serenity.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
                         <a href="https://www.primefaces.org/layouts/serenity-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
@@ -158,11 +158,11 @@
             </div>
             <div class="col-12 lg:col-6 xl:col-4">
                 <div class="card mb-0">
-                    <a href="https://www.primefaces.org/babylon-vue" rel="noopener noreferrer" target="_blank">
+                    <a href="https://babylon.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Babylon" src="https://primefaces.org/cdn/primevue/images/layouts/babylon-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://www.primefaces.org/babylon-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
+                        <a href="https://babylon.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
                         <a href="https://www.primefaces.org/layouts/babylon-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
@@ -173,11 +173,11 @@
             </div>
             <div class="col-12 lg:col-6 xl:col-4">
                 <div class="card mb-0">
-                    <a href="https://www.primefaces.org/avalon-vue" rel="noopener noreferrer" target="_blank">
+                    <a href="https://avalon.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Avalon" src="https://primefaces.org/cdn/primevue/images/layouts/avalon-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://www.primefaces.org/avalon-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
+                        <a href="https://avalon.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
                         <a href="https://www.primefaces.org/layouts/avalon-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
@@ -188,11 +188,11 @@
             </div>
             <div class="col-12 lg:col-6 xl:col-4">
                 <div class="card mb-0">
-                    <a href="https://www.primefaces.org/roma-vue" rel="noopener noreferrer" target="_blank">
+                    <a href="https://roma.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Roma" src="https://primefaces.org/cdn/primevue/images/layouts/roma-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://www.primefaces.org/roma-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
+                        <a href="https://roma.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
                         <a href="https://www.primefaces.org/layouts/roma-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
@@ -203,11 +203,11 @@
             </div>
             <div class="col-12 lg:col-6 xl:col-4">
                 <div class="card mb-0">
-                    <a href="https://www.primefaces.org/prestige-vue" rel="noopener noreferrer" target="_blank">
+                    <a href="https://prestige.primevue.org" rel="noopener noreferrer" target="_blank">
                         <img alt="Prestige" src="https://primefaces.org/cdn/primevue/images/layouts/prestige-vue.jpg" class="w-full" />
                     </a>
                     <div class="flex gap-3 mt-3">
-                        <a href="https://www.primefaces.org/prestige-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
+                        <a href="https://prestige.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
                             <span class="p-button-label white-space-nowrap">Preview</span>
                         </a>
                         <a href="https://www.primefaces.org/layouts/prestige-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
diff --git a/pages/terminal/index.vue b/pages/terminal/index.vue
index 591d18d9e..cc006c454 100755
--- a/pages/terminal/index.vue
+++ b/pages/terminal/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Terminal Component" header="Terminal" description="Terminal is a text based user interface." :componentDocs="docs" :apiDocs="['Terminal', 'TerminalService']" />
+    <DocComponent title="Vue Terminal Component" header="Terminal" description="Terminal is a text based user interface." :componentDocs="docs" :apiDocs="['Terminal', 'TerminalService']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/terminal/AccessibilityDoc';
 import BasicDoc from '@/doc/terminal/BasicDoc';
 import ImportDoc from '@/doc/terminal/ImportDoc';
 import StyleDoc from '@/doc/terminal/StyleDoc';
+import PTComponent from '@/doc/terminal/pt/index.vue';
 
 export default {
     data() {
@@ -32,7 +33,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/textarea/index.vue b/pages/textarea/index.vue
index 9529fc8f2..597d42f59 100755
--- a/pages/textarea/index.vue
+++ b/pages/textarea/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <DocComponent title="Vue Textarea Component" header="Textarea" description="Textarea adds styling, key filtering and autoResize functionality to standard textarea element." :componentDocs="docs" :apiDocs="['Textarea']" />
+    <DocComponent
+        title="Vue Textarea Component"
+        header="Textarea"
+        description="Textarea adds styling, key filtering and autoResize functionality to standard textarea element."
+        :componentDocs="docs"
+        :apiDocs="['Textarea']"
+        :ptTabComponent="ptComponent"
+    />
 </template>
 
 <script>
@@ -8,10 +15,11 @@ import AutoResizeDoc from '@/doc/textarea/AutoResizeDoc';
 import BasicDoc from '@/doc/textarea/BasicDoc';
 import DisabledDoc from '@/doc/textarea/DisabledDoc';
 import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc';
-import VeeValidateDoc from '@/doc/textarea/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/textarea/ImportDoc';
 import InvalidDoc from '@/doc/textarea/InvalidDoc';
 import StyleDoc from '@/doc/textarea/StyleDoc';
+import VeeValidateDoc from '@/doc/textarea/form/VeeValidateDoc.vue';
+import PTComponent from '@/doc/textarea/pt/index.vue';
 
 export default {
     data() {
@@ -69,7 +77,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/tieredmenu/index.vue b/pages/tieredmenu/index.vue
index 0620c2752..01d6b9619 100755
--- a/pages/tieredmenu/index.vue
+++ b/pages/tieredmenu/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue TieredMenu Component" header="TieredMenu" description="TieredMenu displays submenus in nested overlays." :componentDocs="docs" :apiDocs="['TieredMenu', 'MenuItem']" />
+    <DocComponent title="Vue TieredMenu Component" header="TieredMenu" description="TieredMenu displays submenus in nested overlays." :componentDocs="docs" :apiDocs="['TieredMenu', 'MenuItem']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -8,6 +8,7 @@ import BasicDoc from '@/doc/tieredmenu/BasicDoc';
 import ImportDoc from '@/doc/tieredmenu/ImportDoc';
 import PopupDoc from '@/doc/tieredmenu/PopupDoc';
 import StyleDoc from '@/doc/tieredmenu/StyleDoc';
+import PTComponent from '@/doc/tieredmenu/pt/index.vue';
 
 export default {
     data() {
@@ -38,7 +39,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/timeline/index.vue b/pages/timeline/index.vue
index 69b0b6968..5f06982a3 100644
--- a/pages/timeline/index.vue
+++ b/pages/timeline/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Timeline Component" header="Timeline" description="Timeline visualizes a series of chained events." :componentDocs="docs" :apiDocs="['Timeline']" />
+    <DocComponent title="Vue Timeline Component" header="Timeline" description="Timeline visualizes a series of chained events." :componentDocs="docs" :apiDocs="['Timeline']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -11,6 +11,7 @@ import ImportDoc from '@/doc/timeline/ImportDoc';
 import OppositeDoc from '@/doc/timeline/OppositeDoc';
 import StyleDoc from '@/doc/timeline/StyleDoc';
 import TemplateDoc from '@/doc/timeline/TemplateDoc';
+import PTComponent from '@/doc/timeline/pt/index.vue';
 
 export default {
     data() {
@@ -56,7 +57,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/toast/index.vue b/pages/toast/index.vue
index 833c9852a..c05ef233b 100755
--- a/pages/toast/index.vue
+++ b/pages/toast/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Toast Component" header="Toast" description="Toast is used to display messages in an overlay." :componentDocs="docs" :apiDocs="['Toast', 'ToastService-UseToast']" />
+    <DocComponent title="Vue Toast Component" header="Toast" description="Toast is used to display messages in an overlay." :componentDocs="docs" :apiDocs="['Toast', 'ToastService-UseToast']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -13,6 +13,7 @@ import StickyDoc from '@/doc/toast/StickyDoc.vue';
 import StyleDoc from '@/doc/toast/StyleDoc.vue';
 import TemplateDoc from '@/doc/toast/TemplateDoc.vue';
 import ToastServiceDoc from '@/doc/toast/ToastServiceDoc.vue';
+import PTComponent from '@/doc/toast/pt/index.vue';
 
 export default {
     data() {
@@ -68,7 +69,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/togglebutton/index.vue b/pages/togglebutton/index.vue
index 353777750..956a6740a 100755
--- a/pages/togglebutton/index.vue
+++ b/pages/togglebutton/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue ToggleButton Component" header="ToggleButton" description="ToggleButton is used to select a boolean value using a button." :componentDocs="docs" :apiDocs="['ToggleButton']" />
+    <DocComponent title="Vue ToggleButton Component" header="ToggleButton" description="ToggleButton is used to select a boolean value using a button." :componentDocs="docs" :apiDocs="['ToggleButton']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -10,6 +10,7 @@ import DisabledDoc from '@/doc/togglebutton/DisabledDoc.vue';
 import VeeValidateDoc from '@/doc/togglebutton/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/togglebutton/ImportDoc.vue';
 import StyleDoc from '@/doc/togglebutton/StyleDoc.vue';
+import PTComponent from '@/doc/togglebutton/pt/index.vue';
 
 export default {
     data() {
@@ -57,7 +58,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/toolbar/index.vue b/pages/toolbar/index.vue
index a5a5f2811..627fcc0c1 100755
--- a/pages/toolbar/index.vue
+++ b/pages/toolbar/index.vue
@@ -1,11 +1,13 @@
 <template>
-    <DocComponent title="Vue Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." :componentDocs="docs" :apiDocs="['Toolbar']" />
+    <DocComponent title="Vue Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." :componentDocs="docs" :apiDocs="['Toolbar']" :ptTabComponent="ptComponent" />
 </template>
 <script>
 import AccessibilityDoc from '@/doc/toolbar/AccessibilityDoc';
 import BasicDoc from '@/doc/toolbar/BasicDoc';
 import ImportDoc from '@/doc/toolbar/ImportDoc';
 import StyleDoc from '@/doc/toolbar/StyleDoc';
+import PTComponent from '@/doc/toolbar/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -30,7 +32,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/tooltip/index.vue b/pages/tooltip/index.vue
index 98c0653ef..36e475af5 100755
--- a/pages/tooltip/index.vue
+++ b/pages/tooltip/index.vue
@@ -9,6 +9,7 @@ import ImportDoc from '@/doc/tooltip/ImportDoc';
 import PositionDoc from '@/doc/tooltip/PositionDoc';
 import StyleDoc from '@/doc/tooltip/StyleDoc';
 import TemplateDoc from '@/doc/tooltip/TemplateDoc';
+import DelayDoc from '@/doc/tooltip/DelayDoc';
 
 export default {
     data() {
@@ -34,6 +35,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'delay',
+                    label: 'Delay',
+                    component: DelayDoc
+                },
                 {
                     id: 'style',
                     label: 'Style',
diff --git a/pages/tree/index.vue b/pages/tree/index.vue
index f80ad08ff..f19ff8691 100755
--- a/pages/tree/index.vue
+++ b/pages/tree/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Tree Component" header="Tree" description="Tree is used to display hierarchical data." :componentDocs="docs" :apiDocs="['Tree']" />
+    <DocComponent title="Vue Tree Component" header="Tree" description="Tree is used to display hierarchical data." :componentDocs="docs" :apiDocs="['Tree']" :ptTabComponent="ptComponent" />
 </template>
 <script>
 import AccessibilityDoc from '@/doc/tree/AccessibilityDoc.vue';
@@ -9,11 +9,12 @@ import EventsDoc from '@/doc/tree/EventsDoc.vue';
 import FilterDoc from '@/doc/tree/FilterDoc.vue';
 import ImportDoc from '@/doc/tree/ImportDoc.vue';
 import LazyDoc from '@/doc/tree/LazyDoc.vue';
+import StyleDoc from '@/doc/tree/StyleDoc.vue';
+import TemplateDoc from '@/doc/tree/TemplateDoc.vue';
+import PTComponent from '@/doc/tree/pt/index.vue';
 import CheckboxDoc from '@/doc/tree/selection/CheckboxDoc.vue';
 import MultipleDoc from '@/doc/tree/selection/MultipleDoc.vue';
 import SingleDoc from '@/doc/tree/selection/SingleDoc.vue';
-import StyleDoc from '@/doc/tree/StyleDoc.vue';
-import TemplateDoc from '@/doc/tree/TemplateDoc.vue';
 
 export default {
     data() {
@@ -85,7 +86,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/treeselect/index.vue b/pages/treeselect/index.vue
index 2828fabd7..217c6a01e 100644
--- a/pages/treeselect/index.vue
+++ b/pages/treeselect/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue TreeSelect Component" header="TreeSelect" description="TreeSelect is a form component to choose from hierarchical data." :componentDocs="docs" :apiDocs="['TreeSelect']" />
+    <DocComponent title="Vue TreeSelect Component" header="TreeSelect" description="TreeSelect is a form component to choose from hierarchical data." :componentDocs="docs" :apiDocs="['TreeSelect']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -8,11 +8,13 @@ import BasicDoc from '@/doc/treeselect/BasicDoc';
 import CheckboxDoc from '@/doc/treeselect/CheckboxDoc';
 import DisabledDoc from '@/doc/treeselect/DisabledDoc';
 import FloatLabelDoc from '@/doc/treeselect/FloatLabelDoc';
-import VeeValidateDoc from '@/doc/treeselect/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/treeselect/ImportDoc';
 import InvalidDoc from '@/doc/treeselect/InvalidDoc';
 import MultipleDoc from '@/doc/treeselect/MultipleDoc';
 import StyleDoc from '@/doc/treeselect/StyleDoc';
+import VeeValidateDoc from '@/doc/treeselect/form/VeeValidateDoc.vue';
+import PTComponent from '@/doc/treeselect/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -74,7 +76,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/treetable/index.vue b/pages/treetable/index.vue
index 7f6d2fc5b..ac55ee34c 100755
--- a/pages/treetable/index.vue
+++ b/pages/treetable/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue TreeTable Component" header="TreeTable" description="TreeTable is used to display hierarchical data in tabular format." :componentDocs="docs" :apiDocs="['TreeTable', 'Column']" />
+    <DocComponent title="Vue TreeTable Component" header="TreeTable" description="TreeTable is used to display hierarchical data in tabular format." :componentDocs="docs" :apiDocs="['TreeTable', 'Column']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -11,11 +11,15 @@ import DynamicColumnsDoc from '@/doc/treetable/DynamicColumnsDoc';
 import FilterDoc from '@/doc/treetable/FilterDoc';
 import ImportDoc from '@/doc/treetable/ImportDoc';
 import LazyLoadDoc from '@/doc/treetable/LazyLoadDoc';
+import ResponsiveDoc from '@/doc/treetable/ResponsiveDoc';
+import SizeDoc from '@/doc/treetable/SizeDoc';
+import StyleDoc from '@/doc/treetable/StyleDoc';
+import TemplateDoc from '@/doc/treetable/TemplateDoc';
 import PaginatorBasicDoc from '@/doc/treetable/paginator/PaginatorBasicDoc';
 import PaginatorTemplateDoc from '@/doc/treetable/paginator/PaginatorTemplateDoc';
+import PTComponent from '@/doc/treetable/pt/index.vue';
 import ExpandModeDoc from '@/doc/treetable/resize/ExpandModeDoc';
 import FitModeDoc from '@/doc/treetable/resize/FitModeDoc';
-import ResponsiveDoc from '@/doc/treetable/ResponsiveDoc';
 import FlexibleScrollDoc from '@/doc/treetable/scroll/FlexibleScrollDoc';
 import FrozenColumnsDoc from '@/doc/treetable/scroll/FrozenColumnsDoc';
 import HorizontalScrollDoc from '@/doc/treetable/scroll/HorizontalScrollDoc';
@@ -24,12 +28,9 @@ import CheckboxRowSelectionDoc from '@/doc/treetable/selection/CheckboxRowSelect
 import MultipleRowsSelectionDoc from '@/doc/treetable/selection/MultipleRowsSelectionDoc';
 import RowSelectionEventsDoc from '@/doc/treetable/selection/RowSelectionEventsDoc';
 import SingleRowSelectionDoc from '@/doc/treetable/selection/SingleRowSelectionDoc';
-import SizeDoc from '@/doc/treetable/SizeDoc';
 import MultipleColumnsDoc from '@/doc/treetable/sort/MultipleColumnsDoc';
 import RemovableSortDoc from '@/doc/treetable/sort/RemovableSortDoc';
 import SingleColumnDoc from '@/doc/treetable/sort/SingleColumnDoc';
-import StyleDoc from '@/doc/treetable/StyleDoc';
-import TemplateDoc from '@/doc/treetable/TemplateDoc';
 
 export default {
     data() {
@@ -200,7 +201,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/tristatecheckbox/index.vue b/pages/tristatecheckbox/index.vue
index 42c4fe566..970283d32 100755
--- a/pages/tristatecheckbox/index.vue
+++ b/pages/tristatecheckbox/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <DocComponent title="Vue TriStateCheckbox Component" header="TriStateCheckbox" description="TriStateCheckbox is used to select either true, false or null as the value." :componentDocs="docs" :apiDocs="['TriStateCheckbox']" />
+    <DocComponent
+        title="Vue TriStateCheckbox Component"
+        header="TriStateCheckbox"
+        description="TriStateCheckbox is used to select either true, false or null as the value."
+        :componentDocs="docs"
+        :apiDocs="['TriStateCheckbox']"
+        :ptTabComponent="ptComponent"
+    />
 </template>
 
 <script>
@@ -10,6 +17,7 @@ import VeeValidateDoc from '@/doc/tristatecheckbox/form/VeeValidateDoc.vue';
 import ImportDoc from '@/doc/tristatecheckbox/ImportDoc';
 import InvalidDoc from '@/doc/tristatecheckbox/InvalidDoc';
 import StyleDoc from '@/doc/tristatecheckbox/StyleDoc';
+import PTComponent from '@/doc/tristatecheckbox/pt/index.vue';
 
 export default {
     data() {
@@ -57,7 +65,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/pages/virtualscroller/index.vue b/pages/virtualscroller/index.vue
index d55d584b9..ce7b910c7 100644
--- a/pages/virtualscroller/index.vue
+++ b/pages/virtualscroller/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <DocComponent title="Vue Virtual Scroller Component" header="VirtualScroller" description="VirtualScroller is a performant approach to render large amounts of data efficiently." :componentDocs="docs" :apiDocs="['VirtualScroller']" />
+    <DocComponent
+        title="Vue Virtual Scroller Component"
+        header="VirtualScroller"
+        description="VirtualScroller is a performant approach to render large amounts of data efficiently."
+        :componentDocs="docs"
+        :apiDocs="['VirtualScroller']"
+        :ptTabComponent="ptComponent"
+    />
 </template>
 
 <script>
@@ -12,6 +19,7 @@ import ImportDoc from '@/doc/virtualscroller/ImportDoc';
 import LazyDoc from '@/doc/virtualscroller/LazyDoc';
 import LoadingDoc from '@/doc/virtualscroller/LoadingDoc';
 import StyleDoc from '@/doc/virtualscroller/StyleDoc';
+import PTComponent from '@/doc/virtualscroller/pt/index.vue';
 
 export default {
     data() {
@@ -62,7 +70,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };
diff --git a/public/images/pt/accordion.jpg b/public/images/pt/accordion.jpg
index 4614174c8..50096fff9 100644
Binary files a/public/images/pt/accordion.jpg and b/public/images/pt/accordion.jpg differ
diff --git a/public/images/pt/avatar.jpg b/public/images/pt/avatar.jpg
new file mode 100644
index 000000000..c514ef3c9
Binary files /dev/null and b/public/images/pt/avatar.jpg differ
diff --git a/public/images/pt/avatargroup.jpg b/public/images/pt/avatargroup.jpg
new file mode 100644
index 000000000..25ec7bb04
Binary files /dev/null and b/public/images/pt/avatargroup.jpg differ
diff --git a/public/images/pt/badge.jpg b/public/images/pt/badge.jpg
new file mode 100644
index 000000000..9483be55f
Binary files /dev/null and b/public/images/pt/badge.jpg differ
diff --git a/public/images/pt/card.jpg b/public/images/pt/card.jpg
index f24db40de..f7a4189c2 100644
Binary files a/public/images/pt/card.jpg and b/public/images/pt/card.jpg differ
diff --git a/public/images/pt/chip.jpg b/public/images/pt/chip.jpg
new file mode 100644
index 000000000..fdcd22f28
Binary files /dev/null and b/public/images/pt/chip.jpg differ
diff --git a/public/images/pt/deferred.jpg b/public/images/pt/deferred.jpg
index bdbedbc95..b4d5c55da 100644
Binary files a/public/images/pt/deferred.jpg and b/public/images/pt/deferred.jpg differ
diff --git a/public/images/pt/divider.jpg b/public/images/pt/divider.jpg
index 2cda70501..d96fc210e 100644
Binary files a/public/images/pt/divider.jpg and b/public/images/pt/divider.jpg differ
diff --git a/public/images/pt/fieldset.jpg b/public/images/pt/fieldset.jpg
index 34ea36882..5ca5e7c00 100644
Binary files a/public/images/pt/fieldset.jpg and b/public/images/pt/fieldset.jpg differ
diff --git a/public/images/pt/panel.jpg b/public/images/pt/panel.jpg
index 2beeb4629..a4a023208 100644
Binary files a/public/images/pt/panel.jpg and b/public/images/pt/panel.jpg differ
diff --git a/public/images/pt/progressbar.jpg b/public/images/pt/progressbar.jpg
new file mode 100644
index 000000000..33619f8de
Binary files /dev/null and b/public/images/pt/progressbar.jpg differ
diff --git a/public/images/pt/progressspinner.jpg b/public/images/pt/progressspinner.jpg
new file mode 100644
index 000000000..a2069529b
Binary files /dev/null and b/public/images/pt/progressspinner.jpg differ
diff --git a/public/images/pt/scrollpanel.jpg b/public/images/pt/scrollpanel.jpg
index 26785b30b..1e4f0104b 100644
Binary files a/public/images/pt/scrollpanel.jpg and b/public/images/pt/scrollpanel.jpg differ
diff --git a/public/images/pt/scrolltop.jpg b/public/images/pt/scrolltop.jpg
new file mode 100644
index 000000000..757a60c2e
Binary files /dev/null and b/public/images/pt/scrolltop.jpg differ
diff --git a/public/images/pt/splitter.jpg b/public/images/pt/splitter.jpg
index 6de6ee42a..bc5f08cfe 100644
Binary files a/public/images/pt/splitter.jpg and b/public/images/pt/splitter.jpg differ
diff --git a/public/images/pt/tabview.jpg b/public/images/pt/tabview.jpg
index 1c0706f18..ccef2425c 100644
Binary files a/public/images/pt/tabview.jpg and b/public/images/pt/tabview.jpg differ
diff --git a/public/images/pt/tag.jpg b/public/images/pt/tag.jpg
new file mode 100644
index 000000000..974a95bb2
Binary files /dev/null and b/public/images/pt/tag.jpg differ
diff --git a/public/images/pt/terminal.jpg b/public/images/pt/terminal.jpg
new file mode 100644
index 000000000..7811308e3
Binary files /dev/null and b/public/images/pt/terminal.jpg differ
diff --git a/public/images/pt/toolbar.jpg b/public/images/pt/toolbar.jpg
index 078e769d1..144c458e9 100644
Binary files a/public/images/pt/toolbar.jpg and b/public/images/pt/toolbar.jpg differ
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index b16edaed2..1f294ab4d 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #212529;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #64B5F6;
   background: #64B5F6;
@@ -1119,6 +1128,7 @@
   color: #ef9a9a;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1132,6 +1142,7 @@
   left: 2rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4144,6 +4175,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4488,6 +4523,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5271,6 +5310,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.5rem;
@@ -5402,6 +5445,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5421,6 +5468,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5495,6 +5546,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5512,6 +5567,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5595,6 +5654,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5623,6 +5686,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #383838;
@@ -5815,6 +5882,10 @@
   font-size: 1.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5852,6 +5923,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #1e1e1e;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index a17bb8a2d..2f2fb7522 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #212529;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #81C784;
   background: #81C784;
@@ -1119,6 +1128,7 @@
   color: #ef9a9a;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1132,6 +1142,7 @@
   left: 2rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4144,6 +4175,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4488,6 +4523,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5271,6 +5310,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.5rem;
@@ -5402,6 +5445,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5421,6 +5468,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5495,6 +5546,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5512,6 +5567,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5595,6 +5654,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5623,6 +5686,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #383838;
@@ -5815,6 +5882,10 @@
   font-size: 1.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5852,6 +5923,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #1e1e1e;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index ede93d6bd..8dc9d5433 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #212529;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #FFD54F;
   background: #FFD54F;
@@ -1119,6 +1128,7 @@
   color: #ef9a9a;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1132,6 +1142,7 @@
   left: 2rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4144,6 +4175,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4488,6 +4523,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5271,6 +5310,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.5rem;
@@ -5402,6 +5445,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5421,6 +5468,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5495,6 +5546,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5512,6 +5567,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5595,6 +5654,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5623,6 +5686,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #383838;
@@ -5815,6 +5882,10 @@
   font-size: 1.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5852,6 +5923,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #1e1e1e;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 12aeeef69..c29496579 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #BA68C8;
   background: #BA68C8;
@@ -1119,6 +1128,7 @@
   color: #ef9a9a;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1132,6 +1142,7 @@
   left: 2rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4144,6 +4175,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4488,6 +4523,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5271,6 +5310,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.5rem;
@@ -5402,6 +5445,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5421,6 +5468,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5495,6 +5546,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5512,6 +5567,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5595,6 +5654,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5623,6 +5686,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #383838;
@@ -5815,6 +5882,10 @@
   font-size: 1.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5852,6 +5923,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #1e1e1e;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index b443c612b..0817a7c34 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #151515;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #8dd0ff;
   background: #8dd0ff;
@@ -1123,6 +1132,7 @@
   color: #f19ea6;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1136,6 +1146,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1494,6 +1505,10 @@
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #f19ea6;
 }
@@ -2192,6 +2207,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2715,6 +2734,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3598,6 +3621,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0;
@@ -3740,6 +3767,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4156,6 +4187,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4500,6 +4535,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5283,6 +5322,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.75rem;
@@ -5414,6 +5457,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 1;
@@ -5433,6 +5480,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5507,6 +5558,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5524,6 +5579,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.6);
@@ -5607,6 +5666,10 @@
   color: #f8f9fa;
   transition: color 0.15s, box-shadow 0.15s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5635,6 +5698,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #3f4b5b;
@@ -5827,6 +5894,10 @@
   font-size: 1.5rem;
   color: #151515;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5864,6 +5935,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #2a323d;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 89e74b198..6432a0fcf 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #151515;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #c298d8;
   background: #c298d8;
@@ -1123,6 +1132,7 @@
   color: #f19ea6;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1136,6 +1146,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1494,6 +1505,10 @@
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #f19ea6;
 }
@@ -2192,6 +2207,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2715,6 +2734,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3598,6 +3621,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0;
@@ -3740,6 +3767,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4156,6 +4187,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4500,6 +4535,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5283,6 +5322,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.75rem;
@@ -5414,6 +5457,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 1;
@@ -5433,6 +5480,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5507,6 +5558,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5524,6 +5579,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.6);
@@ -5607,6 +5666,10 @@
   color: #f8f9fa;
   transition: color 0.15s, box-shadow 0.15s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5635,6 +5698,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #3f4b5b;
@@ -5827,6 +5894,10 @@
   font-size: 1.5rem;
   color: #151515;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5864,6 +5935,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #2a323d;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 5ffc18aa2..3189352a7 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #007bff;
   background: #007bff;
@@ -1123,6 +1132,7 @@
   color: #dc3545;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: #495057;
@@ -1136,6 +1146,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: #495057;
@@ -1494,6 +1505,10 @@
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #dc3545;
 }
@@ -2192,6 +2207,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2715,6 +2734,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3598,6 +3621,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 0 0 0;
@@ -3740,6 +3767,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4156,6 +4187,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4500,6 +4535,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5283,6 +5322,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.75rem;
@@ -5414,6 +5457,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 1;
@@ -5433,6 +5480,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5507,6 +5558,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #efefef;
@@ -5524,6 +5579,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #efefef;
@@ -5607,6 +5666,10 @@
   color: #f8f9fa;
   transition: box-shadow 0.15s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5635,6 +5698,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #dee2e6;
@@ -5827,6 +5894,10 @@
   font-size: 1.5rem;
   color: #efefef;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #e9ecef;
@@ -5864,6 +5935,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index ccb3d515d..77251d9a7 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #883cae;
   background: #883cae;
@@ -1123,6 +1132,7 @@
   color: #dc3545;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: #495057;
@@ -1136,6 +1146,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: #495057;
@@ -1494,6 +1505,10 @@
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #dc3545;
 }
@@ -2192,6 +2207,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2715,6 +2734,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3598,6 +3621,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 0 0 0;
@@ -3740,6 +3767,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4156,6 +4187,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4500,6 +4535,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5283,6 +5322,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.75rem;
@@ -5414,6 +5457,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 1;
@@ -5433,6 +5480,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5507,6 +5558,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #efefef;
@@ -5524,6 +5579,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #efefef;
@@ -5607,6 +5666,10 @@
   color: #f8f9fa;
   transition: box-shadow 0.15s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5635,6 +5698,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #dee2e6;
@@ -5827,6 +5894,10 @@
   font-size: 1.5rem;
   color: #efefef;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #e9ecef;
@@ -5864,6 +5935,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 765e98dd0..1652edf4a 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #0078d4;
   background: #0078d4;
@@ -1119,6 +1128,7 @@
   color: #a4252c;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: #605e5c;
@@ -1132,6 +1142,7 @@
   left: 2rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: #605e5c;
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #a4252c;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4119,6 +4150,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4463,6 +4498,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5222,6 +5261,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.5rem;
@@ -5353,6 +5396,10 @@
   font-size: 1rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1rem;
+  height: 1rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5372,6 +5419,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 1.25rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 600;
 }
@@ -5446,6 +5497,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #faf9f8;
@@ -5463,6 +5518,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #faf9f8;
@@ -5546,6 +5605,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5574,6 +5637,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #edebe9;
@@ -5766,6 +5833,10 @@
   font-size: 1.5rem;
   color: #faf9f8;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #edebe9;
@@ -5803,6 +5874,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 0af27260b..1928220c1 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #1c2127;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #93C5FD;
   background: #93C5FD;
@@ -1119,6 +1128,7 @@
   color: #FCA5A5;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1132,6 +1142,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4119,6 +4150,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4463,6 +4498,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5222,6 +5261,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.75rem 0.75rem;
@@ -5353,6 +5396,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5372,6 +5419,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5446,6 +5497,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5463,6 +5518,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5546,6 +5605,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5574,6 +5637,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #0b213f;
@@ -5766,6 +5833,10 @@
   font-size: 1.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5803,6 +5874,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #071426;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 9df1f1225..c5a50b335 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #1c2127;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #A5B4FC;
   background: #A5B4FC;
@@ -1119,6 +1128,7 @@
   color: #FCA5A5;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1132,6 +1142,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4119,6 +4150,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4463,6 +4498,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5222,6 +5261,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.75rem 0.75rem;
@@ -5353,6 +5396,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5372,6 +5419,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5446,6 +5497,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5463,6 +5518,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5546,6 +5605,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5574,6 +5637,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #0b213f;
@@ -5766,6 +5833,10 @@
   font-size: 1.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5803,6 +5874,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #071426;
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index 9cc1e66f4..1923a4159 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #1c2127;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #C4B5FD;
   background: #C4B5FD;
@@ -1119,6 +1128,7 @@
   color: #FCA5A5;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1132,6 +1142,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4119,6 +4150,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4463,6 +4498,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5222,6 +5261,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.75rem 0.75rem;
@@ -5353,6 +5396,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5372,6 +5419,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5446,6 +5497,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5463,6 +5518,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5546,6 +5605,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5574,6 +5637,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #0b213f;
@@ -5766,6 +5833,10 @@
   font-size: 1.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5803,6 +5874,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #071426;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index f5bfa7339..ae061107b 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #1c2127;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #5EEAD4;
   background: #5EEAD4;
@@ -1119,6 +1128,7 @@
   color: #FCA5A5;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1132,6 +1142,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4119,6 +4150,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4463,6 +4498,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5222,6 +5261,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.75rem 0.75rem;
@@ -5353,6 +5396,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5372,6 +5419,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5446,6 +5497,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5463,6 +5518,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5546,6 +5605,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5574,6 +5637,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #0b213f;
@@ -5766,6 +5833,10 @@
   font-size: 1.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5803,6 +5874,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #071426;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 6c8cd55db..33c23fe5e 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #3B82F6;
   background: #3B82F6;
@@ -1119,6 +1128,7 @@
   color: #e24c4c;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: #6c757d;
@@ -1132,6 +1142,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: #6c757d;
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #ea5455;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4119,6 +4150,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4463,6 +4498,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5222,6 +5261,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.75rem 0.75rem;
@@ -5353,6 +5396,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5372,6 +5419,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5446,6 +5497,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5463,6 +5518,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5546,6 +5605,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5574,6 +5637,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #dee2e6;
@@ -5766,6 +5833,10 @@
   font-size: 1.5rem;
   color: #f8f9fa;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #dee2e6;
@@ -5803,6 +5874,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 18ec05158..3b2afeb61 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #6366F1;
   background: #6366F1;
@@ -1119,6 +1128,7 @@
   color: #e24c4c;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: #6c757d;
@@ -1132,6 +1142,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: #6c757d;
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #ea5455;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4119,6 +4150,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4463,6 +4498,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5222,6 +5261,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.75rem 0.75rem;
@@ -5353,6 +5396,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5372,6 +5419,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5446,6 +5497,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5463,6 +5518,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5546,6 +5605,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5574,6 +5637,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #dee2e6;
@@ -5766,6 +5833,10 @@
   font-size: 1.5rem;
   color: #f8f9fa;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #dee2e6;
@@ -5803,6 +5874,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 9574f820d..61f9a38b8 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #8B5CF6;
   background: #8B5CF6;
@@ -1119,6 +1128,7 @@
   color: #e24c4c;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: #6c757d;
@@ -1132,6 +1142,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: #6c757d;
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #ea5455;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4119,6 +4150,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4463,6 +4498,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5222,6 +5261,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.75rem 0.75rem;
@@ -5353,6 +5396,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5372,6 +5419,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5446,6 +5497,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5463,6 +5518,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5546,6 +5605,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5574,6 +5637,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #dee2e6;
@@ -5766,6 +5833,10 @@
   font-size: 1.5rem;
   color: #f8f9fa;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #dee2e6;
@@ -5803,6 +5874,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index ad75d4e9b..7b0745fbf 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #14B8A6;
   background: #14B8A6;
@@ -1119,6 +1128,7 @@
   color: #e24c4c;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: #6c757d;
@@ -1132,6 +1142,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: #6c757d;
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #ea5455;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4119,6 +4150,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4463,6 +4498,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5222,6 +5261,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.75rem 0.75rem;
@@ -5353,6 +5396,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5372,6 +5419,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5446,6 +5497,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5463,6 +5518,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5546,6 +5605,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5574,6 +5637,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #dee2e6;
@@ -5766,6 +5833,10 @@
   font-size: 1.5rem;
   color: #f8f9fa;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #dee2e6;
@@ -5803,6 +5874,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 55243e8fa..a11544e69 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #212529;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #FFE082;
   background: #FFE082;
@@ -1123,6 +1132,7 @@
   color: #e57373;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #888888;
@@ -1136,6 +1146,7 @@
   left: 1.858rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #888888;
@@ -1494,6 +1505,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e4018d;
 }
@@ -2192,6 +2207,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2715,6 +2734,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3598,6 +3621,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 1px 0 1px;
@@ -3740,6 +3767,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4131,6 +4162,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4475,6 +4510,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5234,6 +5273,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem;
@@ -5365,6 +5408,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5384,6 +5431,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5458,6 +5509,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #ebedef;
@@ -5475,6 +5530,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(0, 0, 0, 0.3);
   color: #ebedef;
@@ -5558,6 +5617,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5586,6 +5649,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #4b4b4b;
@@ -5778,6 +5845,10 @@
   font-size: 1.5rem;
   color: #212529;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5815,6 +5886,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #323232;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 2d4cb95a1..fb7ee058f 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #212529;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #81D4FA;
   background: #81D4FA;
@@ -1123,6 +1132,7 @@
   color: #e57373;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #888888;
@@ -1136,6 +1146,7 @@
   left: 1.858rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #888888;
@@ -1494,6 +1505,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e4018d;
 }
@@ -2192,6 +2207,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2715,6 +2734,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3598,6 +3621,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 1px 0 1px;
@@ -3740,6 +3767,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4131,6 +4162,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4475,6 +4510,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5234,6 +5273,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem;
@@ -5365,6 +5408,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5384,6 +5431,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5458,6 +5509,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #ebedef;
@@ -5475,6 +5530,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(0, 0, 0, 0.3);
   color: #ebedef;
@@ -5558,6 +5617,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5586,6 +5649,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #4b4b4b;
@@ -5778,6 +5845,10 @@
   font-size: 1.5rem;
   color: #212529;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5815,6 +5886,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #323232;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index b331219f7..1b99e0ae8 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #212529;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #C5E1A5;
   background: #C5E1A5;
@@ -1123,6 +1132,7 @@
   color: #e57373;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #888888;
@@ -1136,6 +1146,7 @@
   left: 1.858rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #888888;
@@ -1494,6 +1505,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e4018d;
 }
@@ -2192,6 +2207,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2715,6 +2734,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3598,6 +3621,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 1px 0 1px;
@@ -3740,6 +3767,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4131,6 +4162,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4475,6 +4510,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5234,6 +5273,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem;
@@ -5365,6 +5408,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5384,6 +5431,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5458,6 +5509,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #ebedef;
@@ -5475,6 +5530,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(0, 0, 0, 0.3);
   color: #ebedef;
@@ -5558,6 +5617,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5586,6 +5649,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #4b4b4b;
@@ -5778,6 +5845,10 @@
   font-size: 1.5rem;
   color: #212529;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5815,6 +5886,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #323232;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 4524e28e2..a0676243f 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #212529;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #F48FB1;
   background: #F48FB1;
@@ -1123,6 +1132,7 @@
   color: #e57373;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #888888;
@@ -1136,6 +1146,7 @@
   left: 1.858rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #888888;
@@ -1494,6 +1505,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e4018d;
 }
@@ -2192,6 +2207,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2715,6 +2734,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3598,6 +3621,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 1px 0 1px;
@@ -3740,6 +3767,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4131,6 +4162,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4475,6 +4510,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5234,6 +5273,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem;
@@ -5365,6 +5408,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5384,6 +5431,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5458,6 +5509,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #ebedef;
@@ -5475,6 +5530,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(0, 0, 0, 0.3);
   color: #ebedef;
@@ -5558,6 +5617,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5586,6 +5649,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #4b4b4b;
@@ -5778,6 +5845,10 @@
   font-size: 1.5rem;
   color: #212529;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5815,6 +5886,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #323232;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index fc4048f95..84cb9570a 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -102,6 +102,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
@@ -672,6 +677,10 @@
   color: #121212;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #CE93D8;
   background: #CE93D8;
@@ -1143,6 +1152,7 @@
   color: #f44435;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 1rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1156,6 +1166,7 @@
   left: 3rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 1rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1510,6 +1521,10 @@
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #f44435;
 }
@@ -2204,6 +2219,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 2rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2727,6 +2746,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3610,6 +3633,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3752,6 +3779,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4168,6 +4199,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4512,6 +4547,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5295,6 +5334,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 1rem 1rem;
@@ -5426,6 +5469,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5445,6 +5492,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5519,6 +5570,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5536,6 +5591,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5619,6 +5678,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5647,6 +5710,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: rgba(255, 255, 255, 0.12);
@@ -5839,6 +5906,10 @@
   font-size: 1.5rem;
   color: #121212;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5876,6 +5947,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #1e1e1e;
@@ -6182,6 +6257,9 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button span {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path {
+  fill: rgba(255, 255, 255, 0.6);
+}
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover {
   background: rgba(255, 255, 255, 0.04);
 }
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index aaf75fe50..589ebd465 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -102,6 +102,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
@@ -672,6 +677,10 @@
   color: #121212;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #9FA8DA;
   background: #9FA8DA;
@@ -1143,6 +1152,7 @@
   color: #f44435;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 1rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1156,6 +1166,7 @@
   left: 3rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 1rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1510,6 +1521,10 @@
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #f44435;
 }
@@ -2204,6 +2219,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 2rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2727,6 +2746,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3610,6 +3633,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3752,6 +3779,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4168,6 +4199,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4512,6 +4547,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5295,6 +5334,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 1rem 1rem;
@@ -5426,6 +5469,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5445,6 +5492,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5519,6 +5570,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5536,6 +5591,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5619,6 +5678,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5647,6 +5710,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: rgba(255, 255, 255, 0.12);
@@ -5839,6 +5906,10 @@
   font-size: 1.5rem;
   color: #121212;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5876,6 +5947,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #1e1e1e;
@@ -6182,6 +6257,9 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button span {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path {
+  fill: rgba(255, 255, 255, 0.6);
+}
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover {
   background: rgba(255, 255, 255, 0.04);
 }
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index f24c7c892..e3488530c 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -102,6 +102,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
@@ -672,6 +677,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #673AB7;
   background: #673AB7;
@@ -1143,6 +1152,7 @@
   color: #B00020;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 1rem;
   color: rgba(0, 0, 0, 0.6);
@@ -1156,6 +1166,7 @@
   left: 3rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 1rem;
   color: rgba(0, 0, 0, 0.6);
@@ -1510,6 +1521,10 @@
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #B00020;
 }
@@ -2204,6 +2219,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 2rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2727,6 +2746,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3610,6 +3633,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3752,6 +3779,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4168,6 +4199,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4512,6 +4547,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5295,6 +5334,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 1rem 1rem;
@@ -5426,6 +5469,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5445,6 +5492,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5519,6 +5570,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5536,6 +5591,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5619,6 +5678,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5647,6 +5710,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: rgba(0, 0, 0, 0.12);
@@ -5839,6 +5906,10 @@
   font-size: 1.5rem;
   color: #ffffff;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(0, 0, 0, 0.08);
@@ -5876,6 +5947,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
@@ -6182,6 +6257,9 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button span {
   color: rgba(0, 0, 0, 0.6);
 }
+.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path {
+  fill: rgba(0, 0, 0, 0.6);
+}
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover {
   background: rgba(0, 0, 0, 0.04);
 }
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 9b3f8d966..e89634466 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -102,6 +102,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
@@ -672,6 +677,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #3F51B5;
   background: #3F51B5;
@@ -1143,6 +1152,7 @@
   color: #B00020;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 1rem;
   color: rgba(0, 0, 0, 0.6);
@@ -1156,6 +1166,7 @@
   left: 3rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 1rem;
   color: rgba(0, 0, 0, 0.6);
@@ -1510,6 +1521,10 @@
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #B00020;
 }
@@ -2204,6 +2219,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 2rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2727,6 +2746,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3610,6 +3633,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3752,6 +3779,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4168,6 +4199,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4512,6 +4547,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5295,6 +5334,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 1rem 1rem;
@@ -5426,6 +5469,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5445,6 +5492,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5519,6 +5570,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5536,6 +5591,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5619,6 +5678,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5647,6 +5710,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: rgba(0, 0, 0, 0.12);
@@ -5839,6 +5906,10 @@
   font-size: 1.5rem;
   color: #ffffff;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(0, 0, 0, 0.08);
@@ -5876,6 +5947,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
@@ -6182,6 +6257,9 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button span {
   color: rgba(0, 0, 0, 0.6);
 }
+.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path {
+  fill: rgba(0, 0, 0, 0.6);
+}
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover {
   background: rgba(0, 0, 0, 0.04);
 }
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index ef36a95f0..a47f41c29 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -102,6 +102,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
@@ -672,6 +677,10 @@
   color: #121212;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #CE93D8;
   background: #CE93D8;
@@ -1143,6 +1152,7 @@
   color: #f44435;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1156,6 +1166,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1510,6 +1521,10 @@
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
   font-size: 1rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #f44435;
 }
@@ -2204,6 +2219,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 2rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2727,6 +2746,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3610,6 +3633,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3752,6 +3779,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4168,6 +4199,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4512,6 +4547,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5295,6 +5334,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.75rem 0.75rem;
@@ -5426,6 +5469,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5445,6 +5492,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5519,6 +5570,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5536,6 +5591,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5619,6 +5678,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5647,6 +5710,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: rgba(255, 255, 255, 0.12);
@@ -5839,6 +5906,10 @@
   font-size: 1.15rem;
   color: #121212;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.15rem;
+  height: 1.15rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5876,6 +5947,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #1e1e1e;
@@ -6182,6 +6257,9 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button span {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path {
+  fill: rgba(255, 255, 255, 0.6);
+}
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover {
   background: rgba(255, 255, 255, 0.04);
 }
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index b50c2dc55..f7c7af004 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -102,6 +102,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
@@ -672,6 +677,10 @@
   color: #121212;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #9FA8DA;
   background: #9FA8DA;
@@ -1143,6 +1152,7 @@
   color: #f44435;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1156,6 +1166,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1510,6 +1521,10 @@
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
   font-size: 1rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #f44435;
 }
@@ -2204,6 +2219,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 2rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2727,6 +2746,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3610,6 +3633,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3752,6 +3779,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4168,6 +4199,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4512,6 +4547,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5295,6 +5334,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.75rem 0.75rem;
@@ -5426,6 +5469,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5445,6 +5492,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5519,6 +5570,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5536,6 +5591,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5619,6 +5678,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5647,6 +5710,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: rgba(255, 255, 255, 0.12);
@@ -5839,6 +5906,10 @@
   font-size: 1.15rem;
   color: #121212;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.15rem;
+  height: 1.15rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5876,6 +5947,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #1e1e1e;
@@ -6182,6 +6257,9 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button span {
   color: rgba(255, 255, 255, 0.6);
 }
+.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path {
+  fill: rgba(255, 255, 255, 0.6);
+}
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover {
   background: rgba(255, 255, 255, 0.04);
 }
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 3757884a3..79cda7539 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -102,6 +102,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
@@ -672,6 +677,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #673AB7;
   background: #673AB7;
@@ -1143,6 +1152,7 @@
   color: #B00020;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(0, 0, 0, 0.6);
@@ -1156,6 +1166,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(0, 0, 0, 0.6);
@@ -1510,6 +1521,10 @@
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
   font-size: 1rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #B00020;
 }
@@ -2204,6 +2219,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 2rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2727,6 +2746,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3610,6 +3633,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3752,6 +3779,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4168,6 +4199,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4512,6 +4547,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5295,6 +5334,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.75rem 0.75rem;
@@ -5426,6 +5469,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5445,6 +5492,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5519,6 +5570,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5536,6 +5591,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5619,6 +5678,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5647,6 +5710,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: rgba(0, 0, 0, 0.12);
@@ -5839,6 +5906,10 @@
   font-size: 1.15rem;
   color: #ffffff;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.15rem;
+  height: 1.15rem;
+}
 
 .p-skeleton {
   background-color: rgba(0, 0, 0, 0.08);
@@ -5876,6 +5947,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
@@ -6182,6 +6257,9 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button span {
   color: rgba(0, 0, 0, 0.6);
 }
+.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path {
+  fill: rgba(0, 0, 0, 0.6);
+}
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover {
   background: rgba(0, 0, 0, 0.04);
 }
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 2f75c560f..cc7adcf13 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -102,6 +102,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
@@ -672,6 +677,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #3F51B5;
   background: #3F51B5;
@@ -1143,6 +1152,7 @@
   color: #B00020;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(0, 0, 0, 0.6);
@@ -1156,6 +1166,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(0, 0, 0, 0.6);
@@ -1510,6 +1521,10 @@
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
   font-size: 1rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #B00020;
 }
@@ -2204,6 +2219,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 2rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2727,6 +2746,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3610,6 +3633,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3752,6 +3779,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4168,6 +4199,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4512,6 +4547,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5295,6 +5334,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.75rem 0.75rem;
@@ -5426,6 +5469,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5445,6 +5492,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5519,6 +5570,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5536,6 +5591,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.87);
@@ -5619,6 +5678,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5647,6 +5710,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: rgba(0, 0, 0, 0.12);
@@ -5839,6 +5906,10 @@
   font-size: 1.15rem;
   color: #ffffff;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.15rem;
+  height: 1.15rem;
+}
 
 .p-skeleton {
   background-color: rgba(0, 0, 0, 0.08);
@@ -5876,6 +5947,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
@@ -6182,6 +6257,9 @@
 .p-calendar-w-btn .p-datepicker-trigger.p-button span {
   color: rgba(0, 0, 0, 0.6);
 }
+.p-calendar-w-btn .p-datepicker-trigger.p-button .p-icon path {
+  fill: rgba(0, 0, 0, 0.6);
+}
 .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover {
   background: rgba(0, 0, 0, 0.04);
 }
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index ac38234f2..d26fa3b01 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -106,6 +106,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: "Inter", sans-serif;
@@ -676,6 +681,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #5E81AC;
   background: #5E81AC;
@@ -1147,6 +1156,7 @@
   color: #BF616A;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: #81A1C1;
@@ -1160,6 +1170,7 @@
   left: 2rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: #81A1C1;
@@ -1514,6 +1525,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #BF616A;
 }
@@ -2208,6 +2223,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 2rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2731,6 +2750,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3614,6 +3637,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3756,6 +3783,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4172,6 +4203,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4516,6 +4551,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5299,6 +5338,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.5rem;
@@ -5430,6 +5473,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5449,6 +5496,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5523,6 +5574,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #ECEFF4;
@@ -5540,6 +5595,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #ECEFF4;
@@ -5623,6 +5682,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5651,6 +5714,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #E5E9F0;
@@ -5843,6 +5910,10 @@
   font-size: 1.5rem;
   color: #ECEFF4;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #E5E9F0;
@@ -5880,6 +5951,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 5b5f2f01f..e9d1726b5 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 12px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 12px;
+  height: 12px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #1174c0;
   background: #1174c0;
@@ -1119,6 +1128,7 @@
   color: #d8222f;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.25rem;
   color: #697077;
@@ -1132,6 +1142,7 @@
   left: 1.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.25rem;
   color: #697077;
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e74c3c;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1rem;
+  height: 1rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4144,6 +4175,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4488,6 +4523,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5271,6 +5310,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.25rem 0.25rem;
@@ -5402,6 +5445,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5421,6 +5468,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5495,6 +5546,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f2f4f8;
@@ -5512,6 +5567,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f2f4f8;
@@ -5595,6 +5654,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5623,6 +5686,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #dee2e6;
@@ -5815,6 +5882,10 @@
   font-size: 1rem;
   color: #f2f4f8;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
 
 .p-skeleton {
   background-color: #dde1e6;
@@ -5852,6 +5923,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 4fa20c079..edc6437d5 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #007ad9;
   background: #007ad9;
@@ -1119,6 +1128,7 @@
   color: #a80000;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #848484;
@@ -1132,6 +1142,7 @@
   left: 1.858rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #848484;
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e4018d;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 1px 0 1px;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4119,6 +4150,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4463,6 +4498,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5222,6 +5261,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem;
@@ -5353,6 +5396,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5372,6 +5419,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5446,6 +5497,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #ebedef;
@@ -5463,6 +5518,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(0, 0, 0, 0.3);
   color: #ebedef;
@@ -5546,6 +5605,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5574,6 +5637,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #c8c8c8;
@@ -5766,6 +5833,10 @@
   font-size: 1.5rem;
   color: #f4f4f4;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #eaeaea;
@@ -5803,6 +5874,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index d93ab84d9..0af149f9e 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #007ad9;
   background: #007ad9;
@@ -1123,6 +1132,7 @@
   color: #a80000;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #848484;
@@ -1136,6 +1146,7 @@
   left: 1.858rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #848484;
@@ -1494,6 +1505,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e4018d;
 }
@@ -2192,6 +2207,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2715,6 +2734,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3598,6 +3621,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 1px 0 1px;
@@ -3740,6 +3767,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4131,6 +4162,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4475,6 +4510,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5234,6 +5273,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem;
@@ -5365,6 +5408,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5384,6 +5431,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5458,6 +5509,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #ebedef;
@@ -5475,6 +5530,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(0, 0, 0, 0.3);
   color: #ebedef;
@@ -5558,6 +5617,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5586,6 +5649,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #c8c8c8;
@@ -5778,6 +5845,10 @@
   font-size: 1.5rem;
   color: #f4f4f4;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #eaeaea;
@@ -5815,6 +5886,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 4d02bc2f9..8b2998f91 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #41b883;
   background: #41b883;
@@ -1123,6 +1132,7 @@
   color: #a80000;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #848484;
@@ -1136,6 +1146,7 @@
   left: 1.858rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #848484;
@@ -1494,6 +1505,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e4018d;
 }
@@ -2192,6 +2207,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2715,6 +2734,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3598,6 +3621,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 1px 0 1px;
@@ -3740,6 +3767,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4131,6 +4162,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4475,6 +4510,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5234,6 +5273,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem;
@@ -5365,6 +5408,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5384,6 +5431,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5458,6 +5509,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #ebedef;
@@ -5475,6 +5530,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(0, 0, 0, 0.3);
   color: #ebedef;
@@ -5558,6 +5617,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5586,6 +5649,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #c8c8c8;
@@ -5778,6 +5845,10 @@
   font-size: 1.5rem;
   color: #f4f4f4;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #eaeaea;
@@ -5815,6 +5886,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index d4b939b66..008d18b56 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #007ad9;
   background: #007ad9;
@@ -1123,6 +1132,7 @@
   color: #a80000;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #848484;
@@ -1136,6 +1146,7 @@
   left: 1.858rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #848484;
@@ -1494,6 +1505,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e4018d;
 }
@@ -2192,6 +2207,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2715,6 +2734,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3598,6 +3621,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 1px 0 1px;
@@ -3740,6 +3767,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4131,6 +4162,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4475,6 +4510,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5234,6 +5273,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem;
@@ -5365,6 +5408,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5384,6 +5431,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5458,6 +5509,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #ebedef;
@@ -5475,6 +5530,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(0, 0, 0, 0.3);
   color: #ebedef;
@@ -5558,6 +5617,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5586,6 +5649,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #c8c8c8;
@@ -5778,6 +5845,10 @@
   font-size: 1.5rem;
   color: #f4f4f4;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #eaeaea;
@@ -5815,6 +5886,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 3e875d04c..82b9ca1b1 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #7B95A3;
   background: #7B95A3;
@@ -1119,6 +1128,7 @@
   color: #e7a3a3;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #a6a6a6;
@@ -1132,6 +1142,7 @@
   left: 1.858rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.429rem;
   color: #a6a6a6;
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #f3b9b9;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 1px 0 1px;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4119,6 +4150,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4463,6 +4498,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5222,6 +5261,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem;
@@ -5353,6 +5396,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5372,6 +5419,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5446,6 +5497,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #ebedef;
@@ -5463,6 +5518,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(0, 0, 0, 0.3);
   color: #ebedef;
@@ -5546,6 +5605,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5574,6 +5637,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #dadada;
@@ -5766,6 +5833,10 @@
   font-size: 1.5rem;
   color: #f4f4f4;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #dadada;
@@ -5803,6 +5874,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 7269b8918..83a1cfe9d 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #2196F3;
   background: #2196F3;
@@ -1119,6 +1128,7 @@
   color: #f44336;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: #6c757d;
@@ -1132,6 +1142,7 @@
   left: 2rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: #6c757d;
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e74c3c;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4144,6 +4175,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4488,6 +4523,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5271,6 +5310,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.5rem;
@@ -5402,6 +5445,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5421,6 +5468,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5495,6 +5546,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5512,6 +5567,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5595,6 +5654,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5623,6 +5686,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #dee2e6;
@@ -5815,6 +5882,10 @@
   font-size: 1.5rem;
   color: #f8f9fa;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #e9ecef;
@@ -5852,6 +5923,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 8e46c62f3..61bbc9b28 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #4CAF50;
   background: #4CAF50;
@@ -1119,6 +1128,7 @@
   color: #f44336;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: #6c757d;
@@ -1132,6 +1142,7 @@
   left: 2rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: #6c757d;
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e74c3c;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4144,6 +4175,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4488,6 +4523,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5271,6 +5310,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.5rem;
@@ -5402,6 +5445,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5421,6 +5468,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5495,6 +5546,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5512,6 +5567,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5595,6 +5654,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5623,6 +5686,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #dee2e6;
@@ -5815,6 +5882,10 @@
   font-size: 1.5rem;
   color: #f8f9fa;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #e9ecef;
@@ -5852,6 +5923,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 4a0332da2..e2c5a065e 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #212529;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #FFC107;
   background: #FFC107;
@@ -1119,6 +1128,7 @@
   color: #f44336;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: #6c757d;
@@ -1132,6 +1142,7 @@
   left: 2rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: #6c757d;
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e74c3c;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4144,6 +4175,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4488,6 +4523,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5271,6 +5310,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.5rem;
@@ -5402,6 +5445,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5421,6 +5468,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5495,6 +5546,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5512,6 +5567,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5595,6 +5654,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5623,6 +5686,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #dee2e6;
@@ -5815,6 +5882,10 @@
   font-size: 1.5rem;
   color: #f8f9fa;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #e9ecef;
@@ -5852,6 +5923,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index ac63e0f63..9449fe2bc 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #9C27B0;
   background: #9C27B0;
@@ -1119,6 +1128,7 @@
   color: #f44336;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: #6c757d;
@@ -1132,6 +1142,7 @@
   left: 2rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: #6c757d;
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #e74c3c;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4144,6 +4175,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4488,6 +4523,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5271,6 +5310,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.5rem;
@@ -5402,6 +5445,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5421,6 +5468,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5495,6 +5546,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5512,6 +5567,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5595,6 +5654,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5623,6 +5686,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #dee2e6;
@@ -5815,6 +5882,10 @@
   font-size: 1.5rem;
   color: #f8f9fa;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #e9ecef;
@@ -5852,6 +5923,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index d0dcda264..18ba81107 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -102,6 +102,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: Lato, Helvetica, sans-serif;
@@ -672,6 +677,10 @@
   color: #1c1d26;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #b19df7;
   background: #b19df7;
@@ -1143,6 +1152,7 @@
   color: #ff9a9a;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1156,6 +1166,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1510,6 +1521,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
@@ -2204,6 +2219,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2727,6 +2746,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3610,6 +3633,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 0 1px 0;
@@ -3752,6 +3779,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4143,6 +4174,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4487,6 +4522,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5246,6 +5285,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.75rem 0.75rem;
@@ -5377,6 +5420,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5396,6 +5443,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5470,6 +5521,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5487,6 +5542,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5570,6 +5629,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5598,6 +5661,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #3e4053;
@@ -5790,6 +5857,10 @@
   font-size: 1.5rem;
   color: #b19df7;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5827,6 +5898,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #282936;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index a17539123..c5659d060 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -102,6 +102,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: Lato, Helvetica, sans-serif;
@@ -672,6 +677,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #7254f3;
   background: #7254f3;
@@ -1143,6 +1152,7 @@
   color: #ff6767;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: #708da9;
@@ -1156,6 +1166,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: #708da9;
@@ -1510,6 +1521,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #ea5455;
 }
@@ -2204,6 +2219,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2727,6 +2746,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3610,6 +3633,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3752,6 +3779,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4143,6 +4174,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4487,6 +4522,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5246,6 +5285,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.75rem 0.75rem;
@@ -5377,6 +5420,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5396,6 +5443,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5470,6 +5521,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #eff3f8;
@@ -5487,6 +5542,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #eff3f8;
@@ -5570,6 +5629,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5598,6 +5661,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #dfe7ef;
@@ -5790,6 +5857,10 @@
   font-size: 1.5rem;
   color: #eff3f8;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #dfe7ef;
@@ -5827,6 +5898,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index 771793e72..9b24553bc 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -113,6 +113,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -683,6 +688,10 @@
   color: #ffffff;
   font-size: 10px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 10px;
+  height: 10px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #4F46E5;
   background: #4F46E5;
@@ -1154,6 +1163,7 @@
   color: #f0a9a7;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: #71717A;
@@ -1167,6 +1177,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: #71717A;
@@ -1521,6 +1532,10 @@
   transition: none;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #EF4444;
 }
@@ -2215,6 +2230,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2738,6 +2757,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3621,6 +3644,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 1px 0;
@@ -3763,6 +3790,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4179,6 +4210,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4523,6 +4558,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5306,6 +5345,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.75rem 0.75rem;
@@ -5437,6 +5480,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5456,6 +5503,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5530,6 +5581,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #fafafa;
@@ -5547,6 +5602,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #fafafa;
@@ -5630,6 +5689,10 @@
   color: #f8f9fa;
   transition: none;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5658,6 +5721,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #e5e7eb;
@@ -5850,6 +5917,10 @@
   font-size: 1.5rem;
   color: #fafafa;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #f4f4f5;
@@ -5887,6 +5958,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 60a0006fa..aa7a277da 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #212529;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #64B5F6;
   background: #64B5F6;
@@ -1119,6 +1128,7 @@
   color: #ef9a9a;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1132,6 +1142,7 @@
   left: 2rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4144,6 +4175,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4488,6 +4523,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5271,6 +5310,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.5rem;
@@ -5402,6 +5445,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5421,6 +5468,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5495,6 +5546,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5512,6 +5567,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5595,6 +5654,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5623,6 +5686,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #304562;
@@ -5815,6 +5882,10 @@
   font-size: 1.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5852,6 +5923,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #1f2d40;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index d1be325e7..03934338f 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #212529;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #81C784;
   background: #81C784;
@@ -1119,6 +1128,7 @@
   color: #ef9a9a;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1132,6 +1142,7 @@
   left: 2rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4144,6 +4175,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4488,6 +4523,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5271,6 +5310,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.5rem;
@@ -5402,6 +5445,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5421,6 +5468,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5495,6 +5546,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5512,6 +5567,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5595,6 +5654,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5623,6 +5686,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #304562;
@@ -5815,6 +5882,10 @@
   font-size: 1.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5852,6 +5923,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #1f2d40;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 720cf385b..c0b331647 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #212529;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #FFD54F;
   background: #FFD54F;
@@ -1119,6 +1128,7 @@
   color: #ef9a9a;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1132,6 +1142,7 @@
   left: 2rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4144,6 +4175,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4488,6 +4523,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5271,6 +5310,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.5rem;
@@ -5402,6 +5445,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5421,6 +5468,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5495,6 +5546,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5512,6 +5567,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5595,6 +5654,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5623,6 +5686,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #304562;
@@ -5815,6 +5882,10 @@
   font-size: 1.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5852,6 +5923,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #1f2d40;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 21c8e89cf..1d17b6d36 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -78,6 +78,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -648,6 +653,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #BA68C8;
   background: #BA68C8;
@@ -1119,6 +1128,7 @@
   color: #ef9a9a;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1132,6 +1142,7 @@
   left: 2rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1486,6 +1497,10 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
@@ -2180,6 +2195,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2703,6 +2722,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3586,6 +3609,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 1px 0 1px 0;
@@ -3728,6 +3755,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4144,6 +4175,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4488,6 +4523,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5271,6 +5310,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.5rem;
@@ -5402,6 +5445,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5421,6 +5468,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 700;
 }
@@ -5495,6 +5546,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5512,6 +5567,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5595,6 +5654,10 @@
   color: #f8f9fa;
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5623,6 +5686,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #304562;
@@ -5815,6 +5882,10 @@
   font-size: 1.5rem;
   color: rgba(255, 255, 255, 0.87);
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5852,6 +5923,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #1f2d40;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 606e96d55..0bac7209d 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -110,6 +110,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: Poppins, sans-serif;
@@ -680,6 +685,10 @@
   color: #121212;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #9eade6;
   background: #9eade6;
@@ -1151,6 +1160,7 @@
   color: #f78c79;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1164,6 +1174,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1518,6 +1529,10 @@
   transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #dF7E6C;
 }
@@ -2212,6 +2227,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2735,6 +2754,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3618,6 +3641,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 2px 0;
@@ -3760,6 +3787,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4176,6 +4207,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4520,6 +4555,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5303,6 +5342,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.75rem;
@@ -5434,6 +5477,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5453,6 +5500,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 600;
 }
@@ -5527,6 +5578,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5544,6 +5599,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f8f9fa;
@@ -5627,6 +5686,10 @@
   color: #f8f9fa;
   transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5655,6 +5718,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #263238;
@@ -5847,6 +5914,10 @@
   font-size: 1.5rem;
   color: #9eade6;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: rgba(255, 255, 255, 0.06);
@@ -5884,6 +5955,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #161d21;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 1974e76c4..796f718e5 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -110,6 +110,11 @@
   font-size: 1rem;
 }
 
+.p-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .p-link {
   font-size: 1rem;
   font-family: Poppins, sans-serif;
@@ -680,6 +685,10 @@
   color: #ffffff;
   font-size: 14px;
 }
+.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+  width: 14px;
+  height: 14px;
+}
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #5472d4;
   background: #5472d4;
@@ -1151,6 +1160,7 @@
   color: #f88c79;
 }
 
+.p-input-icon-left > svg:first-of-type,
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: #898989;
@@ -1164,6 +1174,7 @@
   left: 2.5rem;
 }
 
+.p-input-icon-right > svg:last-of-type,
 .p-input-icon-right > i:last-of-type {
   right: 0.75rem;
   color: #898989;
@@ -1518,6 +1529,10 @@
   transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
   font-size: 1.143rem;
 }
+.p-rating .p-rating-item .p-rating-icon.p-icon {
+  width: 1.143rem;
+  height: 1.143rem;
+}
 .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #dF7E6C;
 }
@@ -2212,6 +2227,10 @@
 .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
   font-size: 1.3rem;
 }
+.p-speeddial-button.p-button.p-button-icon-only .p-icon {
+  width: 1.3rem;
+  height: 1.3rem;
+}
 
 .p-speeddial-list {
   outline: 0 none;
@@ -2735,6 +2754,10 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable .p-datatable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-datatable.p-datatable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -3618,6 +3641,10 @@
 .p-tree .p-tree-loading-icon {
   font-size: 2rem;
 }
+.p-tree .p-tree-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 
 .p-treetable .p-paginator-top {
   border-width: 0 0 2px 0;
@@ -3760,6 +3787,10 @@
 .p-treetable .p-treetable-loading-icon {
   font-size: 2rem;
 }
+.p-treetable .p-treetable-loading-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-treetable.p-treetable-gridlines .p-datatable-header {
   border-width: 1px 1px 0 1px;
 }
@@ -4176,6 +4207,10 @@
 .p-confirm-popup .p-confirm-popup-icon {
   font-size: 1.5rem;
 }
+.p-confirm-popup .p-confirm-popup-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 .p-confirm-popup .p-confirm-popup-message {
   margin-left: 1rem;
 }
@@ -4520,6 +4555,10 @@
 .p-contextmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-contextmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-dock .p-dock-list-container {
   background: rgba(255, 255, 255, 0.1);
@@ -5303,6 +5342,10 @@
 .p-tieredmenu .p-submenu-icon {
   font-size: 0.875rem;
 }
+.p-tieredmenu .p-submenu-icon.p-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 
 .p-inline-message {
   padding: 0.5rem 0.75rem;
@@ -5434,6 +5477,10 @@
   font-size: 1.5rem;
   margin-right: 0.5rem;
 }
+.p-message .p-icon:not(.p-message-close-icon) {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-toast {
   opacity: 0.9;
@@ -5453,6 +5500,10 @@
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
   font-size: 2rem;
 }
+.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
   font-weight: 600;
 }
@@ -5527,6 +5578,10 @@
 .p-galleria .p-galleria-close .p-galleria-close-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-close .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-close:hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f5f5f5;
@@ -5544,6 +5599,10 @@
 .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
   font-size: 2rem;
 }
+.p-galleria .p-galleria-item-nav .p-icon {
+  width: 2rem;
+  height: 2rem;
+}
 .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #f5f5f5;
@@ -5627,6 +5686,10 @@
   color: #f8f9fa;
   transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
 }
+.p-image-preview-indicator .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-image-preview-container:hover > .p-image-preview-indicator {
   background-color: rgba(0, 0, 0, 0.5);
@@ -5655,6 +5718,10 @@
 .p-image-action.p-link i {
   font-size: 1.5rem;
 }
+.p-image-action.p-link .p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-avatar {
   background-color: #ebebeb;
@@ -5847,6 +5914,10 @@
   font-size: 1.5rem;
   color: #f5f5f5;
 }
+.p-scrolltop .p-scrolltop-icon.p-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .p-skeleton {
   background-color: #ebebeb;
@@ -5884,6 +5955,10 @@
   margin-right: 0.25rem;
   font-size: 0.75rem;
 }
+.p-tag .p-tag-icon.p-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
 
 .p-terminal {
   background: #ffffff;
diff --git a/rollup.config.js b/rollup.config.js
index bf319c227..e69c5a824 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -11,51 +11,51 @@ let core = {};
 
 let coreIconDependencies = {
     'primevue/baseicon': 'primevue.baseicon',
-    'primevue/icon/angledoubledown': 'primevue.icon.angledoubledown',
-    'primevue/icon/angledoubleleft': 'primevue.icon.angledoubleleft',
-    'primevue/icon/angledoubleright': 'primevue.icon.angledoubleright',
-    'primevue/icon/angledoubleup': 'primevue.icon.angledoubleup',
-    'primevue/icon/angledown': 'primevue.icon.angledown',
-    'primevue/icon/angleleft': 'primevue.icon.angleleft',
-    'primevue/icon/angleright': 'primevue.icon.angleright',
-    'primevue/icon/angleup': 'primevue.icon.angleup',
-    'primevue/icon/arrowdown': 'primevue.icon.arrowdown',
-    'primevue/icon/arrowup': 'primevue.icon.arrowup',
-    'primevue/icon/ban': 'primevue.icon.ban',
-    'primevue/icon/bars': 'primevue.icon.bars',
-    'primevue/icon/calendar': 'primevue.icon.calendar',
-    'primevue/icon/check': 'primevue.icon.check',
-    'primevue/icon/chevrondown': 'primevue.icon.chevrondown',
-    'primevue/icon/chevronleft': 'primevue.icon.chevronleft',
-    'primevue/icon/chevronright': 'primevue.icon.chevronright',
-    'primevue/icon/chevronup': 'primevue.icon.chevronup',
-    'primevue/icon/exclamationtriangle': 'primevue.icon.exclamationtriangle',
-    'primevue/icon/eye': 'primevue.icon.eye',
-    'primevue/icon/eyeslash': 'primevue.icon.eyeslash',
-    'primevue/icon/filter': 'primevue.icon.filter',
-    'primevue/icon/filterslash': 'primevue.icon.filterslash',
-    'primevue/icon/infocircle': 'primevue.icon.infocircle',
-    'primevue/icon/minus': 'primevue.icon.minus',
-    'primevue/icon/pencil': 'primevue.icon.pencil',
-    'primevue/icon/plus': 'primevue.icon.plus',
-    'primevue/icon/refresh': 'primevue.icon.refresh',
-    'primevue/icon/search': 'primevue.icon.search',
-    'primevue/icon/searchminus': 'primevue.icon.searchminus',
-    'primevue/icon/searchplus': 'primevue.icon.searchplus',
-    'primevue/icon/sortalt': 'primevue.icon.sortalt',
-    'primevue/icon/sortamountdown': 'primevue.icon.sortamountdown',
-    'primevue/icon/sortamountupalt': 'primevue.icon.sortamountupalt',
-    'primevue/icon/spinner': 'primevue.icon.spinner',
-    'primevue/icon/star': 'primevue.icon.star',
-    'primevue/icon/starfill': 'primevue.icon.starfill',
-    'primevue/icon/thlarge': 'primevue.icon.thlarge',
-    'primevue/icon/times': 'primevue.icon.times',
-    'primevue/icon/timescircle': 'primevue.icon.timescircle',
-    'primevue/icon/trash': 'primevue.icon.trash',
-    'primevue/icon/undo': 'primevue.icon.undo',
-    'primevue/icon/upload': 'primevue.icon.upload',
-    'primevue/icon/windowmaximize': 'primevue.icon.windowmaximize',
-    'primevue/icon/windowminimize': 'primevue.icon.windowminimize'
+    'primevue/icons/angledoubledown': 'primevue.icons.angledoubledown',
+    'primevue/icons/angledoubleleft': 'primevue.icons.angledoubleleft',
+    'primevue/icons/angledoubleright': 'primevue.icons.angledoubleright',
+    'primevue/icons/angledoubleup': 'primevue.icons.angledoubleup',
+    'primevue/icons/angledown': 'primevue.icons.angledown',
+    'primevue/icons/angleleft': 'primevue.icons.angleleft',
+    'primevue/icons/angleright': 'primevue.icons.angleright',
+    'primevue/icons/angleup': 'primevue.icons.angleup',
+    'primevue/icons/arrowdown': 'primevue.icons.arrowdown',
+    'primevue/icons/arrowup': 'primevue.icons.arrowup',
+    'primevue/icons/ban': 'primevue.icons.ban',
+    'primevue/icons/bars': 'primevue.icons.bars',
+    'primevue/icons/calendar': 'primevue.icons.calendar',
+    'primevue/icons/check': 'primevue.icons.check',
+    'primevue/icons/chevrondown': 'primevue.icons.chevrondown',
+    'primevue/icons/chevronleft': 'primevue.icons.chevronleft',
+    'primevue/icons/chevronright': 'primevue.icons.chevronright',
+    'primevue/icons/chevronup': 'primevue.icons.chevronup',
+    'primevue/icons/exclamationtriangle': 'primevue.icons.exclamationtriangle',
+    'primevue/icons/eye': 'primevue.icons.eye',
+    'primevue/icons/eyeslash': 'primevue.icons.eyeslash',
+    'primevue/icons/filter': 'primevue.icons.filter',
+    'primevue/icons/filterslash': 'primevue.icons.filterslash',
+    'primevue/icons/infocircle': 'primevue.icons.infocircle',
+    'primevue/icons/minus': 'primevue.icons.minus',
+    'primevue/icons/pencil': 'primevue.icons.pencil',
+    'primevue/icons/plus': 'primevue.icons.plus',
+    'primevue/icons/refresh': 'primevue.icons.refresh',
+    'primevue/icons/search': 'primevue.icons.search',
+    'primevue/icons/searchminus': 'primevue.icons.searchminus',
+    'primevue/icons/searchplus': 'primevue.icons.searchplus',
+    'primevue/icons/sortalt': 'primevue.icons.sortalt',
+    'primevue/icons/sortamountdown': 'primevue.icons.sortamountdown',
+    'primevue/icons/sortamountupalt': 'primevue.icons.sortamountupalt',
+    'primevue/icons/spinner': 'primevue.icons.spinner',
+    'primevue/icons/star': 'primevue.icons.star',
+    'primevue/icons/starfill': 'primevue.icons.starfill',
+    'primevue/icons/thlarge': 'primevue.icons.thlarge',
+    'primevue/icons/times': 'primevue.icons.times',
+    'primevue/icons/timescircle': 'primevue.icons.timescircle',
+    'primevue/icons/trash': 'primevue.icons.trash',
+    'primevue/icons/undo': 'primevue.icons.undo',
+    'primevue/icons/upload': 'primevue.icons.upload',
+    'primevue/icons/windowmaximize': 'primevue.icons.windowmaximize',
+    'primevue/icons/windowminimize': 'primevue.icons.windowminimize'
 };
 
 let coreDependencies = {
@@ -205,12 +205,12 @@ function addSFC() {
 }
 
 function addIcon() {
-    fs.readdirSync(path.resolve(__dirname, './components/lib/icon'), { withFileTypes: true })
+    fs.readdirSync(path.resolve(__dirname, './components/lib/icons'), { withFileTypes: true })
         .filter((dir) => dir.isDirectory())
         .forEach(({ name: folderName }) => {
-            fs.readdirSync(path.resolve(__dirname, './components/lib/icon/' + folderName)).forEach((file) => {
+            fs.readdirSync(path.resolve(__dirname, './components/lib/icons/' + folderName)).forEach((file) => {
                 if (/\.vue$/.test(file)) {
-                    addEntry('icon/' + folderName, 'index.vue', 'index');
+                    addEntry('icons/' + folderName, 'index.vue', 'index');
                 }
             });
         });
diff --git a/vite.config.js b/vite.config.js
index 4109fb795..1f804586d 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -14,51 +14,51 @@ export default {
             'primevue/portal': path.resolve(__dirname, './components/lib/portal/Portal.vue'),
             'primevue/basecomponent': path.resolve(__dirname, './components/lib/basecomponent/BaseComponent.vue'),
             'primevue/baseicon': path.resolve(__dirname, './components/lib/baseicon/BaseIcon.vue'),
-            'primevue/icon/angledoubledown': path.resolve(__dirname, './components/lib/icon/angledoubledown/index.vue'),
-            'primevue/icon/angledoubleleft': path.resolve(__dirname, './components/lib/icon/angledoubleleft/index.vue'),
-            'primevue/icon/angledoubleright': path.resolve(__dirname, './components/lib/icon/angledoubleright/index.vue'),
-            'primevue/icon/angledoubleup': path.resolve(__dirname, './components/lib/icon/angledoubleup/index.vue'),
-            'primevue/icon/angledown': path.resolve(__dirname, './components/lib/icon/angledown/index.vue'),
-            'primevue/icon/angleleft': path.resolve(__dirname, './components/lib/icon/angleleft/index.vue'),
-            'primevue/icon/angleright': path.resolve(__dirname, './components/lib/icon/angleright/index.vue'),
-            'primevue/icon/angleup': path.resolve(__dirname, './components/lib/icon/angleup/index.vue'),
-            'primevue/icon/arrowdown': path.resolve(__dirname, './components/lib/icon/arrowdown/index.vue'),
-            'primevue/icon/arrowup': path.resolve(__dirname, './components/lib/icon/arrowup/index.vue'),
-            'primevue/icon/ban': path.resolve(__dirname, './components/lib/icon/ban/index.vue'),
-            'primevue/icon/bars': path.resolve(__dirname, './components/lib/icon/bars/index.vue'),
-            'primevue/icon/calendar': path.resolve(__dirname, './components/lib/icon/calendar/index.vue'),
-            'primevue/icon/check': path.resolve(__dirname, './components/lib/icon/check/index.vue'),
-            'primevue/icon/chevrondown': path.resolve(__dirname, './components/lib/icon/chevrondown/index.vue'),
-            'primevue/icon/chevronleft': path.resolve(__dirname, './components/lib/icon/chevronleft/index.vue'),
-            'primevue/icon/chevronright': path.resolve(__dirname, './components/lib/icon/chevronright/index.vue'),
-            'primevue/icon/chevronup': path.resolve(__dirname, './components/lib/icon/chevronup/index.vue'),
-            'primevue/icon/exclamationtriangle': path.resolve(__dirname, './components/lib/icon/exclamationtriangle/index.vue'),
-            'primevue/icon/eye': path.resolve(__dirname, './components/lib/icon/eye/index.vue'),
-            'primevue/icon/eyeslash': path.resolve(__dirname, './components/lib/icon/eyeslash/index.vue'),
-            'primevue/icon/filter': path.resolve(__dirname, './components/lib/icon/filter/index.vue'),
-            'primevue/icon/filterslash': path.resolve(__dirname, './components/lib/icon/filterslash/index.vue'),
-            'primevue/icon/infocircle': path.resolve(__dirname, './components/lib/icon/infocircle/index.vue'),
-            'primevue/icon/minus': path.resolve(__dirname, './components/lib/icon/minus/index.vue'),
-            'primevue/icon/pencil': path.resolve(__dirname, './components/lib/icon/pencil/index.vue'),
-            'primevue/icon/plus': path.resolve(__dirname, './components/lib/icon/plus/index.vue'),
-            'primevue/icon/refresh': path.resolve(__dirname, './components/lib/icon/refresh/index.vue'),
-            'primevue/icon/search': path.resolve(__dirname, './components/lib/icon/search/index.vue'),
-            'primevue/icon/searchminus': path.resolve(__dirname, './components/lib/icon/searchminus/index.vue'),
-            'primevue/icon/searchplus': path.resolve(__dirname, './components/lib/icon/searchplus/index.vue'),
-            'primevue/icon/sortalt': path.resolve(__dirname, './components/lib/icon/sortalt/index.vue'),
-            'primevue/icon/sortamountdown': path.resolve(__dirname, './components/lib/icon/sortamountdown/index.vue'),
-            'primevue/icon/sortamountupalt': path.resolve(__dirname, './components/lib/icon/sortamountupalt/index.vue'),
-            'primevue/icon/spinner': path.resolve(__dirname, './components/lib/icon/spinner/index.vue'),
-            'primevue/icon/star': path.resolve(__dirname, './components/lib/icon/star/index.vue'),
-            'primevue/icon/starfill': path.resolve(__dirname, './components/lib/icon/starfill/index.vue'),
-            'primevue/icon/thlarge': path.resolve(__dirname, './components/lib/icon/thlarge/index.vue'),
-            'primevue/icon/times': path.resolve(__dirname, './components/lib/icon/times/index.vue'),
-            'primevue/icon/timescircle': path.resolve(__dirname, './components/lib/icon/timescircle/index.vue'),
-            'primevue/icon/trash': path.resolve(__dirname, './components/lib/icon/trash/index.vue'),
-            'primevue/icon/undo': path.resolve(__dirname, './components/lib/icon/undo/index.vue'),
-            'primevue/icon/upload': path.resolve(__dirname, './components/lib/icon/upload/index.vue'),
-            'primevue/icon/windowmaximize': path.resolve(__dirname, './components/lib/icon/windowmaximize/index.vue'),
-            'primevue/icon/windowminimize': path.resolve(__dirname, './components/lib/icon/windowminimize/index.vue'),
+            'primevue/icons/angledoubledown': path.resolve(__dirname, './components/lib/icons/angledoubledown/index.vue'),
+            'primevue/icons/angledoubleleft': path.resolve(__dirname, './components/lib/icons/angledoubleleft/index.vue'),
+            'primevue/icons/angledoubleright': path.resolve(__dirname, './components/lib/icons/angledoubleright/index.vue'),
+            'primevue/icons/angledoubleup': path.resolve(__dirname, './components/lib/icons/angledoubleup/index.vue'),
+            'primevue/icons/angledown': path.resolve(__dirname, './components/lib/icons/angledown/index.vue'),
+            'primevue/icons/angleleft': path.resolve(__dirname, './components/lib/icons/angleleft/index.vue'),
+            'primevue/icons/angleright': path.resolve(__dirname, './components/lib/icons/angleright/index.vue'),
+            'primevue/icons/angleup': path.resolve(__dirname, './components/lib/icons/angleup/index.vue'),
+            'primevue/icons/arrowdown': path.resolve(__dirname, './components/lib/icons/arrowdown/index.vue'),
+            'primevue/icons/arrowup': path.resolve(__dirname, './components/lib/icons/arrowup/index.vue'),
+            'primevue/icons/ban': path.resolve(__dirname, './components/lib/icons/ban/index.vue'),
+            'primevue/icons/bars': path.resolve(__dirname, './components/lib/icons/bars/index.vue'),
+            'primevue/icons/calendar': path.resolve(__dirname, './components/lib/icons/calendar/index.vue'),
+            'primevue/icons/check': path.resolve(__dirname, './components/lib/icons/check/index.vue'),
+            'primevue/icons/chevrondown': path.resolve(__dirname, './components/lib/icons/chevrondown/index.vue'),
+            'primevue/icons/chevronleft': path.resolve(__dirname, './components/lib/icons/chevronleft/index.vue'),
+            'primevue/icons/chevronright': path.resolve(__dirname, './components/lib/icons/chevronright/index.vue'),
+            'primevue/icons/chevronup': path.resolve(__dirname, './components/lib/icons/chevronup/index.vue'),
+            'primevue/icons/exclamationtriangle': path.resolve(__dirname, './components/lib/icons/exclamationtriangle/index.vue'),
+            'primevue/icons/eye': path.resolve(__dirname, './components/lib/icons/eye/index.vue'),
+            'primevue/icons/eyeslash': path.resolve(__dirname, './components/lib/icons/eyeslash/index.vue'),
+            'primevue/icons/filter': path.resolve(__dirname, './components/lib/icons/filter/index.vue'),
+            'primevue/icons/filterslash': path.resolve(__dirname, './components/lib/icons/filterslash/index.vue'),
+            'primevue/icons/infocircle': path.resolve(__dirname, './components/lib/icons/infocircle/index.vue'),
+            'primevue/icons/minus': path.resolve(__dirname, './components/lib/icons/minus/index.vue'),
+            'primevue/icons/pencil': path.resolve(__dirname, './components/lib/icons/pencil/index.vue'),
+            'primevue/icons/plus': path.resolve(__dirname, './components/lib/icons/plus/index.vue'),
+            'primevue/icons/refresh': path.resolve(__dirname, './components/lib/icons/refresh/index.vue'),
+            'primevue/icons/search': path.resolve(__dirname, './components/lib/icons/search/index.vue'),
+            'primevue/icons/searchminus': path.resolve(__dirname, './components/lib/icons/searchminus/index.vue'),
+            'primevue/icons/searchplus': path.resolve(__dirname, './components/lib/icons/searchplus/index.vue'),
+            'primevue/icons/sortalt': path.resolve(__dirname, './components/lib/icons/sortalt/index.vue'),
+            'primevue/icons/sortamountdown': path.resolve(__dirname, './components/lib/icons/sortamountdown/index.vue'),
+            'primevue/icons/sortamountupalt': path.resolve(__dirname, './components/lib/icons/sortamountupalt/index.vue'),
+            'primevue/icons/spinner': path.resolve(__dirname, './components/lib/icons/spinner/index.vue'),
+            'primevue/icons/star': path.resolve(__dirname, './components/lib/icons/star/index.vue'),
+            'primevue/icons/starfill': path.resolve(__dirname, './components/lib/icons/starfill/index.vue'),
+            'primevue/icons/thlarge': path.resolve(__dirname, './components/lib/icons/thlarge/index.vue'),
+            'primevue/icons/times': path.resolve(__dirname, './components/lib/icons/times/index.vue'),
+            'primevue/icons/timescircle': path.resolve(__dirname, './components/lib/icons/timescircle/index.vue'),
+            'primevue/icons/trash': path.resolve(__dirname, './components/lib/icons/trash/index.vue'),
+            'primevue/icons/undo': path.resolve(__dirname, './components/lib/icons/undo/index.vue'),
+            'primevue/icons/upload': path.resolve(__dirname, './components/lib/icons/upload/index.vue'),
+            'primevue/icons/windowmaximize': path.resolve(__dirname, './components/lib/icons/windowmaximize/index.vue'),
+            'primevue/icons/windowminimize': path.resolve(__dirname, './components/lib/icons/windowminimize/index.vue'),
             'primevue/button': path.resolve(__dirname, './components/lib/button/Button.vue'),
             'primevue/inputtext': path.resolve(__dirname, './components/lib/inputtext/InputText.vue'),
             'primevue/dialog': path.resolve(__dirname, './components/lib/dialog/Dialog.vue'),
diff --git a/vitest.config.js b/vitest.config.js
index d86452c56..f1c2c7578 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -14,7 +14,8 @@ export default mergeConfig(
             coverage: {
                 provider: 'istanbul',
                 reporter: ['text', 'json', 'html']
-            }
+            },
+            setupFiles: [path.resolve(__dirname, './components/lib/config/PrimeVue.spec.js')]
         },
         resolve: {
             alias: {